Poznámky

Počet slov na stránce pomocí jQuery

Skript vezme všechen text, oddělá „bannedWords“ (například tečky a čárky) a pak až počítá slova. Jednotlivá slova, páry a po třech slovech. Protože však oddělává například tečky, tak konečné slovo věty a začáteční slovo druhé věty vezme jako spojený pár slov… Takto vytiskne 20 nejčastějších slov a slovních spojení. První Číst více…

Od admin, před
Poznámky

Zvětšení obrázku s pohybem při najetí myši – Hover image zoom magnification with mouse movement

Při najetí na obrázek se obrázek zvětší jako po najetí lupy s možností pohybu myši a obrázku. Každému obrázku, na který chcete efekt použít přidejte class=“magIMG“ Některé CSS mohou funkci znepřesnit, potom si musíte individuálně upravit CSS. CSS: .MagnifyImageDiv { position: relative; overflow:hidden; padding:0; margin:0; display: inline-block; } .MagnifyImageDiv .hovermagnified Číst více…

Od admin, před
Poznámky

Zobrazit obrázek v atributu na hover pomocí jQuery

Například pokud chceme zobrazit obrázek, který máme v „href“ atributu elementu „a“: Html: <div class="showimg"><a href="/cesta/k-souboru.jpg">Na hover zobraz obrázek v href</a></div> Javascript: <script> $(".showimg a").attr("style", "position:relative").mouseenter(function(){ var img=$(this).attr("href"); $(this).append("<span class='mosimg' style='position:absolute; bottom: 105%;left:0px;'><img src='"+ img + "' style='max-width:1000px;border:1px solid #999; border-radius:10px;'></span>"); }).mouseleave(function(){ $(".mosimg").remove(); }); </script> Libovolně můžete měnit CSS v Číst více…

Od admin, před
Poznámky

Kopírování obrázků pomocí jQuery a přiřazení eventů klonům

Kopírování (klonování) obrázků do jiného elementu pomocí jQuery. A povolení přiřazení událostí (bind events) těmto kopiím (klonům), protože defaultně toto nefunguje. $('.preview-pic img').each(function(index, element) { $(this).clone(element, true).appendTo($('#magnified .modal-footer'));  // zkopírujeme všechny obrázky z divu preview-pic do divu .modal-footer. True povolí přiřazení událostí pokud později potřebujeme }); $('#magnified .modal-footer img').on("click", function(){  Číst více…

Od admin, před
Poznámky

Show / hide element na stránce

Skript pro zobrazení a skrytí elementů na stránce. Univerzálně stačí přiřadit třídy showhider-X „tlačítku“ a showhide-X prvku, který chceme skrýt (kde X je číslo, které spojuje elementy). HTML <p><input id="checkbox" class="checkboxstyle" type="checkbox" /><label class="showhider-1" for="checkbox">Po kliknutí se zatrhne checkbox a rozjede skrytý div</label> <div class="showhide-1" style="display: none;">Show / hide DIV</div></p> Číst více…

Od admin, před
Poznámky

jQuery vypsání obrázků pomocí html

Script vypíše všechny obrázky na stránce popořadě (opakují se pokud použijete jeden obrázek vícekrát) za div .container var images=$("img"); images.each(function( index ) { $(".container").append("Všechny obrázky v dokumentu: " + images[index].outerHTML); }) Pokud chcete jen první obrázek pak stačí změnit skript na: var images=$("img"); $(".container").append(images[0].outerHTML); atd. Nebo vypsání konkrétních obrázků s Číst více…

Od admin, před
Poznámky

Bootstrap carousel swipe

Pro swipe effect (ovládání carouselu pohybem prstu doleva a doprava) stačí přidat následující javascript: <script> var mycarousel = document.getElementById("myCarousel"); mycarousel.addEventListener('touchstart', handleTouchStart, false); mycarousel.addEventListener('touchmove', handleTouchMove, false); var xDown = null; var yDown = null; function handleTouchStart(evt) { xDown = evt.touches[0].clientX; yDown = evt.touches[0].clientY; }; function handleTouchMove(evt) { if ( ! xDown Číst více…

Od admin, před
Vyřešené problémy

Vytvoření base64 stringu z obrázku

Když potřebujete vytvořit base64 obrázek např. pro pozadí background: url(data:image/png;base64,….); Vložte Obrázek: Výsledek: Html: <h2>Input</h2> <form class="input-group" id="img2b64"> <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" /> </form> <hr> <h2>Output</h2> <div class=“output“> <textarea class=“form-control“></textarea><br> <a></a><br><br> <img><br> </div> Javascript: function encodeImageFileAsURL(cb) { return function(){ var file = this.files[0]; var reader  = new FileReader(); reader.onloadend = Číst více…

Od admin, před
Poznámky

Výpis alt obrázku pomocí jQuery

Jelikož nelze vypsat alt pomocí CSS3 (content:attr(alt); nefunguje u obrázků). Pak lze vypsat alt pomocí jednoduchého javascriptu. html: <a class="thumbnail" title="random title m3" href="/img.jpg"><img src="/img.jpg" alt="random title m3" /></a> script: <script> $(".thumbnail").each(function() { var imageCaption = $(this).find("img").attr("alt"); imageCaption = imageCaption.replace(/m3/g, "m<sup>3</sup>"); //pokud chceme například změnit něco; zde m3 na m<sup>3</sup> Číst více…

Od admin, před
Poznámky

Jednoduchý modal vyskakovací okno

Jednoduché vyskakovací okno pomocí velmi jednoduchého jQuery scriptu HTML: <div class="window">         <div class="box">         <div id="zavrit-banner">X</div>         <p><strong>Vyskakovací okno</strong></p>         <p>Zavřete kliknutím na černou plochu</p>         </div> </div> Javascript/jQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>         <script>         $("#zavrit-banner").click(function() {           $( ".window" ).fadeOut("slow");         Číst více…

Od admin, před
Vyřešené problémy

GA event v kódu s Tag Managerem nefunguje

GA event v inline kódu nebo v javascriptu (jQuery) nefunguje jako např. onclick() GA DEBUG hlásí: „ga send Unknown target: undefined“ řešení: var trackerName = ga.getAll()[0].get(‚name‘); ga(trackerName + ‚.send‘, ‚event‘, { eventCategory: ‚kategorie‘, eventAction: ‚akce‘, eventValue: 0 }); credit: http://stackoverflow.com/questions/28765806/existing-google-analytics-events-and-google-tag-manager

Od admin, před
Poznámky

Google reCAPTCHA ajax jQuery

Implementace Google reCAPTCHA pomocí ajax jQuery Prvně musíte získat captchu na adrese  https://www.google.com/recaptcha/ (musíte být přihlášeni pod google účtem) recaptchagoogle.php: $captcha = filter_input(INPUT_POST, 'captchaResponse'); // get the captchaResponse parameter sent from our ajax /* Check if captcha is filled */ if (!$captcha) { http_response_code(401); // Return error code if there is Číst více…

Od admin, před
Poznámky

Zaškrtnutí checkbox/radio podle url hashtagu pomocí jQuery

Zaškrtnutý checkbox/radio po najetí na stránku pomocí hashtagu # <script> $(document).ready(function(){ var href=window.location.href; var thisid; href=href.split("#"); href=href[1]; if ((href!="")&&(href!=undefined)){ //v URL byl hashtag "#..." if (href=="checkbox-1"){ $( "#promennavpoli\\[1\\]" ).prop( "checked", true );} //proměnná v poli 1 if (href=="checkbox-2"){ $( "#promennavpoli\\[2\\]" ).prop( "checked", true );} if (href=="checkbox-3"){ $( "#promennavpoli\\[3\\]" ).prop( "checked", Číst více…

Od admin, před