Azonos szinten lévő HTML tag függő CSS formázása

Néha előfordul olyan igény, hogy egy html kódban egy adott résznél a vele azonos, azaz nem alá rendelt tartalmi részt szeretnénk függő módon formázni.

Pl.:

<style>
.figyel {width:60px; height:32px; line-height:32px; padding:0 10px; display:block; background:#888; color:#fff; border:none; border-radius:2px;}
.valt {color:#090; opacity:0; transition: ease all 600ms;}
.figyel:hover ~ .valt {opacity:1;}
</style>
<button class="figyel">GOMB</button>
<span class="valt">Ez a gomb az!</span>

Ez a gomb az!

A fenti példa egy szürke gombot tesz ki, ami hoverre az azt követő span tartalmát megjeleníti (opacity + transition). A fenti megoldásban rejlő lehetőségek egyik példája megtalálható itt:
Rádió gomb egyedi átalakítása 1. verzió

Jobb klikk menü (context menu) egyedi megoldása

Az alábbi megoldással lehet egy teljes oldalra érvényes vagy akár egyedi almenük megadásával is jobb kattintásos menüt létrehozni a weboldalon.

A működéshez 3 részre van szükség:

HTML kód (alap):

<body oncontextmenu="return false">
<div onmousedown="HideMenu('contextMenu-<?=id?>');" onmouseup="HideMenu('.cmmenu');" oncontextmenu="ShowMenu('contextMenu-<?=id?>',event);">...</div>

Illetve a menü szerkezete:

<div style="display:none;" class="cmmenu" id="contextMenu-<?=$id?>">
<div class="ContextItem">Menü 1</div>
<div class="ContextItem">Menü 2</div>
</div>

Ehhez a szükséges CSS:

div[id^="contextMenu"] {
background-color: #ffffff;
border: 1px solid #cccccc;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.ContextItem {
cursor: pointer;
padding: 8px 15px;
}
.ContextItem:hover {
background-color: #f8f8f8;
}
.ContextItem a {
text-decoration:none;
}

És a legfontosabb, maga a script:

<script language="javascript" type="text/javascript">
        function ShowMenu(control, e) {
            var posx = e.clientX +window.pageXOffset +'px'; //Left Position of Mouse Pointer
            var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer
            document.getElementById(control).style.position = 'absolute';
            document.getElementById(control).style.display = 'inline';
            document.getElementById(control).style.left = posx;
            document.getElementById(control).style.top = posy;           
        }
        function HideMenu(control) {         
			document.querySelectorAll(control).forEach(a=>a.style.display = "none");
        }
       </script>

Néhány szó a működésről:

A fenti kód eredetijét a codeproject.com-on találtam, de az igényeknek és a szélesebb körű felhasználhatóságnak mefgelelően módosítottam.

A "body"-ban elhelyezett "oncontextmenu " paraméter letiltja az oldalon a böngésző saját jobb klikke menüjét.

Ahogyan látható, a context menüt indító hívásokat a legfelső részben kell elhelyezni ahol szeretnénk használni. Ha a teljes oldal, lehet a body vagy valamely "container", ha php-ből foreach-el vagy valamilyen más ciklussal lérehozott soroknál van rá szükség, akkor az adott sor vezérlőjébe kell betenni az első kódblokkot. Itt jelezve is van, pl. hogyan lehet egyedivé tenni az ID-t, hogy a menü és a vezérlés csak rá vonatkozzon.

A "cmenu" osztály bejegyzésre való váltás azért szükséges, hogy bármely más sorra kattintva be lehessen zárni a megnyitott menüt.

 A script maga pedig lekéri az egér aktuális pozícióját, majd a paraméterben átadott ID (control) stílusát módosítja. Hogy ne legyen összeakadás, hogy mikor melyik funkciót indítsa, erről gondoskodik az "onmousedown" és az "onmouseup" esemény kezelők. Nyitáshoz pedig az "oncontextmenu" paraméter van használva. Ez direktben a context menü megnyitási szándékra indítja a függvényt.

 

Joomla oldal title felülírása cikk sablonból

Volt rá igény, úgyhogy lássuk a megoldást.

Egy oldalon nem minden tartalom rendelkezik önálló menüponttal. Azonban ilyenkor az oldal title szövege a cikk címe lesz. Ha szeretnénk ezt egyedileg megadni, két dolgot kell megtennünk.

Fel kell venni egy egyedi mezőt (field) ami típusát tekintve vagy sima text vagy nem beállított.

A field-nek elérhetőnek kell lenni az adott cikkeknél.

Ha ez megtörtént, akkor a cikk nézet (com_content > article view) sablon felülírásának elejére tegyük be a következő kódot:

JLoader::register('FieldsHelper', JPATH_ADMINISTRATOR . '/components/com_fields/helpers/fields.php'); 
foreach($this->item->jcfields as $jcfield)
{
$item->jcFields[$jcfield->name] = $jcfield;
}
$browserbar = $item->jcFields['fieldneve']->rawvalue;
$document = JFactory::getDocument();
$document->setTitle($browserbar);

Természetesen a 'fieldneve' az általunk megadott field név legyen (az alias, nem pedig a megadott, akár ékezetes elnevezés, ami a label!)

Kép nagyítás hoverre, dobozon belül

Design igényként merülhet fel, hogy egy kép megmozduljon. Azonban még az egyszerűbb nagyítás esetén is alap probléma, hogy a kép méret növekedésével a körülötte lévő tartalmak elmozdulnak a helyükről. Az alábbi egyszerű megoldással ez kiküszöbölhető. Az egyetlen feltétel, hogy működhessen, hogy a képnek egy önálló div-ben kell lennie.

.el-item .uk-media {
overflow:hidden;
}
.el-item .uk-media .el-image {
transition: 300ms ease;
}
.el-item .uk-media .el-image:hover {
transform: scale(1.05);
transform-origin: 50% 50%;
}

Az alábbi CSS uikit alapú oldal mintája alapján íródott fel, de természetesen más rednszerekben is működik. A kép a mellékelt kód alapján 5%-al nő.

Képek négyzetes megjelenítése CSS-el

Előforsult, hogy egy weboldalhoz kapott anyagban sok kép volt, amik különféle oldalaránnyal rendelkeztek. Ezekkel lehet játszani, hogy szépen, begízítva egységesre vágja az ember, de ha az adott téma ezt nem követeli meg feltétlen, van egy gyorsabb és egyszerűbb megoldás, amihez elég néhány sor az oldal sablonba.

.square { 
position: relative;
}
.square::after {
content: "";
display: block;
padding-bottom: 100%;
}
.square img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}

Link kattinthatóság ha fölé helyezünk átlátszó képet CSS

Előfordul, hogy a dizájn úgy épül fel, egy kattintható képre (pl. termék fotó) valamilyen kiemelési vagy információs célból kis kép kerül (magasabb z-index értékkel felsőbb rétegnek helyezve), pl. akciós plecsni, vagy valamilyen szélen futó szalag, stb. Ezek az átlátszó hátterű png (gif) fájlok esetében azonban a kép akkor is négyzetes, ha a megjelenő forma bármilyen más alakzatot vesz fel. Ilyenkor az eredetileg teljes mértékben kattintható képet nagy részt lefedi a dekoráció. Azonban van egy egyszerű lehetőség arra, hogy az íly módon felső rétegbe helyezett, csak képi információt tartalmazó elemet a működés szempontjából transparensé tegyük.

A felső, takaró rétegnek a css-éhez adjuk hozzá:

pointer-events:none

(Kék keret a linkelt, zöld keret a sarok szalag képe által kitakart rész)

Oldal navigáció léptetése tabulátorral

Egyik parnernek volt olyan kérése, hogy weboldalán található űrlapot kitöltve, az azon szereplő mezők közt a tab gombbal lehessen lépkedni és a lépések megadott sorrendben kövesség egymást, hogy az egymás után szereplő információk felvitele gördülékenyebb legyen.

Erre a problémára nyújt megoldást a tabindexattribútum.

A funkció HTML4-től elérhető, azonban azon oldalakon, ahol ez van hasznhálva (illetve régebbi böngészők esetében) csak <a>,  <button>, <input type="text" />, <object> és <textarea> típusú tagekkel működik, HTML5-től viszont már szélessebb körben válik elérhetővé.

A használatához az űrlap (vagy HTML oldal) elemeihez be kell tenni a tabindex="<sorszám>" attribútumot. A sorszám 0-tól egész számokkal növekedve adandó meg.

Ha a fókuszt egyéb kóddal szeretnénk programozhatóvá tenni (pl. JS-Ajax ellenőrzés vigyen egy kitöltetlen mezőre) akkor értéknek tabindex="-1" kell lenni. Ebben az esetben persze a normál léptetés nem működik.

Ha tabindex-et használsz mindenképp minden érintett taget jelölni kell vele!

Több oldalas űrlap esetében a használat nem ajánlott, mivel vegyes navigációnál (egér katt - tabulátor) a sorrend összezavarodhat és az űrlap használata nehézkessé válhat.

Rádió gomb egyedi átalakítása 1. verzió

Nem rég találkoztam egy olyan problémával, ami miatt a Joomla - VirtueMart (custom field) kiválasztó rádiógombt kellett átdizájnolni... tekintve, hogy a kód elég kötött megpróbáltam leginkább CSS-ből megoldani a problémát.

Szöveg átalakítása URL-kompatiblisre Joomlában

A minap volt olyan problémám, hogy egy adminban választó mező értékéhez kellett egyedi class-t adni, hogy frontenden a megjelenésnél lehessen a színnel "játszani".

A legegyszerűbbnek az tűnt, ha a kódot kiegészítem és a választott értéknek megfelelő elnevezésű class-t adom hozzá. Igen ám, de az érték elnevezése tartalmazhat ékezetet, szünetet és speciális írásjeleket is, ezért át kellett alakítani, hogy ezek a karakterek ne kerüljenek bele.

Számos megoldást lehet találni, ahol pl. preg_replace vagy foreach megadással mennek végig a tartalmakon, ami feltehetően itt is működne, de ha a Joomla alapból tudja miért ne azt használjam?

Csupán ennyi kellett:

jimport('joomla.filter.output');
$class = JFilterOutput::stringURLSafe($label);

Térkép megnyitása mobil alkalmazásban

Weboldalon elhelyezett térkép esetében a mobil eszközök térnyerése miatt egyre nagyobb jelentőséget kap a linket térkép mobil alkalmazásban való megnyitása. Természetesen a legjobb egy olyan megoldás, amivel szét tudjuk választani, hogy PC-n továbbra is böngészőben lehessen megtekinteni a térképet, míg mobil eszközön a telepített akalmazással nyíljon meg, ezzel is elősegítve, hogy szükség esetén könnyen és gyorsan lehessen navigációhoz használni.

Az alábbi egyszerű script oldalba ágyazásával a feladat jól megoldható:

function mapsSelector() {
if /* Ha iOS-t használ, Apple Maps-ben nyílik meg */
((navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPad") != -1) ||
(navigator.platform.indexOf("iPod") != -1))
window.open("maps:https://goo.gl/maps/7gGV1YgG4spKBmcX7");

else /* ha nem mobil, normál link */
window.open("https://goo.gl/maps/7gGV1YgG4spKBmcX7");
}

Ezt követően minden szükséges helyen a következő módon linkeljük:

<a href="#" onClick="mapsSelector()">Térkép</a>

Hátránya, hogy a linket a Google nem tudja indexelni, de talán ez a legkevesebb...

Több változót tartalmazó tömbből érték kinyerés

Belefutottam a minap egy olyan problémába, hogy egy kiegészítő csak akkor jelenített meg képet, ha volt megadott. Viszont nem lehetett helyetteítő vagy dummy képet megadni, így ha nem volt feltöltve, az oldal megjelenés nem volt egységes, némileg szétcsúszott.

Erre született ez a megoldás:

preg_match('/custom_img="(.*?)"/', $element['attributes'], $dummyimage);

$image['link'] = $image['link'] ==''?$dummyimage:'';

Az alábbi kód a Yootheme Pro sablonhoz született, segítségével az "attribútumok" mezőben meg lehet adni a dummy image linkjét, amit ha nincs beállított kép, behelyettesít .

Video reszponzív beágyazása tartalomba (Youtube, Vimeo, stb.)

Párszor belefutottam a problémába, hogy videomegosztóról be kell ágyazni a tartalmat, amihez vagy valamilyen shortcode kiegészítőt, vagy egyéb szerkesztő kiegészítőt használatam. Azonban előfordul, hogy 1-1 video miatt nincs kedvem feltenni egy komplett kiegészítőt (pláne azt is frissítgetni...)

Erre itt egy gyorsabb, egyszerűbb megoldás.

Az alábbi CSS-t helyezzük el a sablon CSS felülírásába (vagy template.css-be, vagy máshova, ahonnan a rendszer képes azt betölteni):


.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Majd a videó beágyazásnál használjuk ezt a formát (minta Youttube-al):

 

<div class="video-responsive">
    <iframe width="420" height="315" src="#" frameborder="0" allowfullscreen></iframe>
</div>