Při tvorbě webu stuidoseven.cz jsme narazili na dilema které v praxi vypadá úplně triviálně, ale realita byla úplně jiná. Jedná se o tooltipy neboli linky, které poskytují nápovědu na dané klíčové slovo. Tooltipy jsme potřebovali do webu abychom uživatelům, kteří se v daném oboru moc neorientují nebo neznají danou terminologii poskytli určitý náhled na věc a tím jim pomohli v rozhodování. V praxi se na takový toolTip můžete podívat např. tímtoZde můžete nalézt rady, komentáři či co chcete spojit v kontextu se základním slovem. způsobem. Realita vypadá poměrně jednoduše, ale praxe je více než problematická. Pro CSS/HTML programátora toto může být zdánlivě jednoduchá úloha, kterou lze nalézt i v seznamu tutoriálu na w3cschools.org. My jsme ale přišli na to že tato úloha opravdu jednoduchá není. Pokud máte alespoň malé povědomí o CSS představíte si jednoduché řešení: V html kódu kdekoliv na stránce <span class= toolTip > Vaše klíčové slovo <span class= helpText >Vaše komentáře k danému slovu. Lorem ipsum dolor.</span> </span> V css globálně přístupném souboru .toolTip .helpText{ display: none; } .toolTip{ font-size: 16px; display: inline-block; position: relative; } .toolTip:hover .helpText{ display: block; } .helpText{ position: absolute; bottom: -55px; background-color:red; padding: 8px; border-radius: 10px; width: 180px; color: white; left: calc(50% - 90px); } Jak vidíte řešení je velice jednoduché a pokud se trošku dopracuje může vypadat opravdu zajímavě a být funkční. Při realizaci studioseven.cz jsme se rozhodli toto řešení použít jakožto nejjednodušší a efektní řešení, které pro svůj účel zcela postačilo. Avšak opak byl pravdou. Takto jednoduché řešení může fungovat jen v opravdu okrajových případech. Představte si situaci, kdy použijete toto jednoduché řešení toolTipu a váš rodičovský kontejner se blíží okraji okna. Nevěříte že takovýto případ nastane? Ale ano nastane. Stačí vyzkoušet responzivní verzi webu a vaše toolTipy se takzvaně začnou sypat. Nebudou k přečtení, začnou zalézat za okraj stránky. Jak si pomůžete? Neexistuje jediné možné řešení pomocí CSS nebo HTML které by toto dokázalo řešit a to jsme se tímto problémem zabývali opravdu dlouho. Stačí si web s touto funkcionalitou pustit na mobilním telefonu či tabletu a okamžitě uvidíte to katastrofu. My se ale při vývoji studioseven.cz s tímto nesmířili. Chtěli jsme naším čtenářům nebo potencionálním zákazníkům poskytnou maximum informací, které jsou okamžitě přístupné a okamžitě podávají jasné vysvětlení pro danou problematiku. Po dlouhém řešení jsme nakonec přišli s výsledkem který je doposud neprůstřelný a opravdu funguje. Seven toolTip Instalace je zcela jednoduchá, napojte javascript přes html tag script, napojte CSS přeš html tag link a Váše tooltipy jsou připraveny. Pak již jen stačí značkovat uprostřed textu. Pozor, kód má přímé závislosti na JQuery 1.12.4. CSS .toolTip .helpText { -webkit-transition: opacity 500ms ease-in-out, visibility 500ms ease-in-out; transition: opacity 500ms ease-in-out, visibility 500ms ease-in-out; visibility: hidden; display: block; position: absolute; width: 200px; height: auto; background-color: #ff0000; padding: 8px; color: white; border-radius: 5px; opacity: 0; text-align: justify; z-index: 999; box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.2); } .toolTip .helpText::after { content: ; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #ff0000 transparent; } .toolTip { display: inline-block; border-bottom: 1px dotted grey; line-height: 1.2em; cursor: help; } .helpText.hover { visibility: visible; opacity: 1; } Javascript /******************* TOOLTips **************/ jQuery( .toolTip ).mousemove(function (e){ var mousex = e.pageX-10; //Get X coordinates var mousey = e.pageY +20; //Get Y coordinates if(mousex + jQuery(this).find( .helpText ).innerWidth()/2 > jQuery(this).offsetParent().innerWidth()+mousex){ jQuery(this).find( .helpText ).css({top: mousey - jQuery(this).offsetParent().offset().top, right: 0, left: initial }); }else if((mousex - jQuery(this).find( .helpText ).innerWidth()/2) < jQuery(this).offsetParent().offset().left){ jQuery(this).find( .helpText ).css({top: mousey - jQuery(this).offsetParent().offset().top, left: 0, right: initialquot;}); }else{ jQuery(this).find( .helpText ).css({top: mousey - jQuery(this).offsetParent().offset().top, left: mousex-jQuery(this).find( .helpText ).innerWidth()/2-jQuery(this).offsetParent().offset().left});} jQuery(this).find( .helpText ).addClass( hover ); }); jQuery( .toolTip ).mouseout(function(){ jQuery(this).find( .helpText ).removeClass( hover ); }); jQuery( .toolTip ).on( tap touchstart click ,function (e){ var mousex = e.pageX-10; //Get X coordinates var mousey = e.pageY +20; //Get Y coordinates if(mousex + jQuery(this).find( .helpText ).innerWidth()/2 > jQuery(this).offsetParent().innerWidth()){ jQuery(this).find( .helpText ).css({top: mousey - jQuery(this).offsetParent().offset().top, right: 0, left: initial }); }else if((mousex - jQuery(this).find( .helpText ).innerWidth()/2) < jQuery(this).offsetParent().offset().left){ jQuery(this).find( .helpText ).css({top: mousey - jQuery(this).offsetParent().offset().top, left: 0, right: initial }); }else{ jQuery(this).find( .helpText ).css({top: mousey - jQuery(this).offsetParent().offset().top, left: mousex-jQuery(this).find( .helpText ).innerWidth()/2-jQuery(this).offsetParent().offset().left}); } jQuery(this).find( .helpText:after ).css({top: mousey - jQuery(this).offsetParent().offset().top, right: 0, left: initial }); jQuery(this).find( .helpText ).addClass( hover ); setTimeout(function(){ jQuery( .helpText ).each(function(element){ jQuery(this).removeClass( hover ); }); },10000); }); jQuery( .toolTip ).on( touchend ,function (e){ jQuery(this).find( .helpText ).removeClass( hover ); }); Použití v HTML kdekoliv na stránce <span class= toolTip > Vaše klíčové slovo <span class= helpText >Vaše komentáře k danému slovu. Lorem ipsum dolor.</span> </span> Nyní se můžete spolehnout, že toolTipy nikdy nebudou zalézat za okraj okna, naopak budou dokonce respektovat okraj rodiče. Musíme však prohlásit že jediným nepřítelem proti kterému zatím nemáme zbraň je nastavení CSS overflow na rodiči a nebo nastaveni clip-path na rodiči. Tyto CSS vlastnosti zamezí vystoupání helpTextu mimo rozsah rodiče na výšku a ustříhnou ho dříve než je text dokončen. Doufám, že Vám byl náš článek k užitku a příště se podíváme na základní uživatelské rozhraní systému na němž vyvíjíme webové stránky WordPress. .fusion-fullwidth.fusion-builder-row-2 { overflow:visible; } Příspěvek Tooltips neboli nápovědy pochází z Studioseven - webdesign, ecommerce, internetové stránky, grafika
The post Mě hlava nebolí! first appeared on Nejlepší české vtipy.
NAS ASUSTOR AS5010T zaujme na první pohled 4mi Gigabit ethernet porty , 10ti pozicemi na HDD , procesorem Intel Celeron 2.4GHz a 1GB RAM, jenž lze rozšířit až na 8GB. Dnes již standardem je, že NAS je poháněný linuxem a dá se na něj hlásit mj. i SSHčkem.
projít na článekScrollout F1 je antispamová gateway vydaná pod GNU /GPL. Silnou stránkou je snadná instalace i nastavení konfigurace v jednoduchém webovém rozhraní. Scrollout může běžet jak na fyzickém serveru, tak ve virtuálu, ale pozor, neběží na OpenVZ. Instalace: Sr
projít na článekNa vytvoření ISO souboru (obraz disku) existuje celá řada freeware programů. Dle mého názoru je jedním z nejlepších programů pro nenáročné používání WinCDEmu, a to, protože je velmi minimalistický, podporuje neomezený počet virtuálních jednotek, nezabírá
projít na článekID Vault slouží k bezpečnému uchování ID soubnoru uživatelů, lze z něj jednoduše ID exportovat, měnit heslo a hlavně , pokud má uživatel své ID lokálně uložené a provede v něm změnu , odesílá se také do ID Vaultu. Nejprve je třeba zvolit server, na kterém
projít na článek