Archiv pro štítek: javascript

Náhled obrázku při najetí

Ukázkové použití skriptu:

<script>
/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.imagePreview = function(){ 
 /* CONFIG */

 xOffset = 110;
 yOffset = 30;

 // these 2 variable determine popup's distance from the cursor
 // you might want to adjust to get the right result

 /* END CONFIG */
 jQuery("a.preview").hover(function(e){
 this.t = this.title; 
 this.title = ""; 
 var c = (this.t != "") ? "<br/>" + this.t : "";
 jQuery(".presspreviewappend").append("<p id='presspreview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>"); 
 jQuery("#presspreview")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px")
 .fadeIn("fast"); 
 },
 function(){
 this.title = this.t; 
 jQuery("#presspreview").remove();
 }); 
 jQuery("a.preview").mousemove(function(e){
 jQuery("#presspreview")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px");
 }); 
};
jQuery(document).ready(function(){
 imagePreview();
});
</script>
<style>
 .presspreviewappend {
 position:relative;
 }
 #presspreview{
 position:fixed;
 border:1px solid #333;
 background:#bbbbbb;
 display:none;
 color:#fff;
 }
</style>
<div class="presspreviewappend"></div>
<a href="big-image.jpg" class="link-image preview"><img src="small-image.jpg" alt="" title=""></a>

jQuery Validate – remote validace

Při použití remote validace v pluginu jQuery Validate je nutné jako návratovou hodnotu mít true nebo false. Údajně stačí používat true nebo libovolnou jinou místo negativní hodnoty (například pro přenesení zprávy nebo konkrétního stavu), ale takto mi to nefungovalo. Možná se jedná jen o konkrétní (novější verzi) pluginu, protože jsem měl dojem, že dříve to fungovalo.

jQuery Image Gallery Slider

Mnohokrát jsem již použil následující skript. Proto jsem se rozhodl jej trochu zobecnit a zpřístupnit. Jedná se o jednoduchý Javascript, který se postará o vytvoření takovéto fotogalerie.

náhled fotogalerie

 

Skript jsem zpřístupnil na https://github.com/TomasSkoumal/ImageGallery. Není to sice žádný sofistikovaný plugin, který by měl spoustu nastavení, ale je jednoduše upravitelný a umí opravdu jen to, co je třeba bez nějakých zbytečností. Vyžaduje pouze jQuery knihovnu.

Výběr místa pomocí Google Maps

Pomocí následujícího kódu lze umístit do formuláře Google mapu na které je možné vybírat konkrétní místo na mapě kliknutím. Souřadnice se pak ukládají do skrytých inputů a jsou dále zpracovány formulářem.

 

<script src="if_gmap.js"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script>
 $(document).ready(function() {
 def_longval = 14.458008;
 def_latval = 50.065367;
 $('#longval').val(def_longval);
 $('#latval').val(def_latval);
 if_gmap_init();
 });
 </script>
<input name="gps_longitude" type=hidden id="longval">
 <input name="gps_latitude" type=hidden id="latval">
 <div id="maparea" style="background:#ffffff">
 <div id="mapitems" style="width: 360px; height: 540px;background:#ffffff;"></div>
 </div>

Skript lze stáhnout zde: http://www.tytai.com/gmap/

Na stejné adrese jsou i další způsoby použití.

 

Častá chyba s ajax požadavky v jQuery

Často se s tím setkávám. Naštěstí už ne v mém případě. :) Když nefunguje ajaxový požadavek a nehlásí žádnou chybu nic, ani Firebug, ani PHP skript – protože ten funguje správně, tak je chyba prostá. Funkce, zpracovávající požadavek očekává data standardně v JSON formátu. A když je nedostane, tak i kdyby dostala krásný HTML výstup, tak prostě konec. Jen v případě, že je ošetřený error handler, tak se o této chybě dá dozvědět.

Takže závěrem: Vždy specifikovat datatype. Možné hodnoty najdete v jQuery dokumentaci. A mám dojem, že se výchozí formát někdy dříve změnil, takže možná je to vhodné specifikovat i v případě JSON formátu.

JavaScript: nextSibling v Internet Exploreru 9

Ve starší verzi Internet Exploreru (8 a starší) funguje následující kód tak, že spočítá počet buněk (TD elementů) v řádku tabulky.

while(selector_bunek_tabulky.nextSibling)
 {
   celkovy_pocet++;
   selector_bunek_tabulky=selector_bunek_tabulky.nextSibling;
}

Naproti tomu v IE9 (jiné prohlížeče jsem netestoval) spočítá 2x tolik elementů, protože jsou započítány i konce řádků a obsah (některých – nemám plně ověřeno) buněk. Řešení je následující:

while(selector_bunek_tabulky.nextSibling)
 {
 // pokud se jedna o ELEMENT_NODE
 if (selector_bunek_tabulky.nodeType==1)
   celkovy_pocet++;
selector_bunek_tabulky=selector_bunek_tabulky.nextSibling;
}

Přehled typů uzlů lze zjistit na http://www.javascriptkit.com/domref/nodetype.shtml.

 

 

 

Cufón – hover efekt odkazů

Již dříve jsem zde publikoval zápis týkající se knihovny Cufón, která umožňuje použití prakticky libovolného fontu na webu. Ne že by to byla zrovna skvělá možnost, ale pro většinu neobvyklých fontů nic lepšího neexistuje, pokud vím.

Aby správně fungoval hover efekt a barva odkazu se změnila na barvu při hover efektu a následně při odjetí myší zpět, je třeba upravit kód takto:

Cufon.replace('a', { color: black});
Cufon.replace('a:hover', { hover: true, color: red});

$('a').hover(function() {
   Cufon.replace('a:hover', { hover: true, color: red});
 },
 function() {
   Cufon.replace('a', { hover: true, color: black});
 }
);

 

TinyMCE: Zadávání barev v dekadickém RGB kódu

Pokud potřebujete mít možnost zadávat ve výěbru barvy v editoru TinyMCE barvu v dekadickém RGB kódu, postačí následující úprava souboru tiny_mce/themes/advanced/color_picker.html. Přidané části kódu jsou zvýrazněny tučně.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>{#advanced_dlg.colorpicker_title}</title>
 <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
 <script type="text/javascript" src="../../utils/mctabs.js"></script>
 <script type="text/javascript" src="js/color_picker.js"></script>
 <script>
 var rgb_init = false;
 function colorHexToRgb() {
 var rgb = convertHexToRGB(document.getElementById('color').value);
 document.getElementById('rgbval_r').value = rgb.r;
 document.getElementById('rgbval_g').value = rgb.g;
 document.getElementById('rgbval_b').value = rgb.b;
 rgb_init = true;
 }
 function colorRgbToHex() {
 if (rgb_init=true)
 document.getElementById('color').value = convertRGBToHex('rgb('+document.getElementById('rgbval_r').value+','+document.getElementById('rgbval_g').value+','+document.getElementById('rgbval_b').value+')');
 showColor(document.getElementById('color').value,'');
 }
 </script>
</head>
<body id="colorpicker" style="display: none" role="application" aria-labelledby="app_label">
 <span id="app_label" style="display:none;">{#advanced_dlg.colorpicker_title}</span>
<form onsubmit="insertAction();return false" action="#">
 <div>
 <ul>
 <li id="picker_tab" aria-controls="picker_panel"><span><a href="javascript:mcTabs.displayTab('picker_tab','picker_panel');" onmousedown="return false;">{#advanced_dlg.colorpicker_picker_tab}</a></span></li>
 <li id="rgb_tab" aria-controls="rgb_panel"><span><a href="javascript:;" onclick="mcTabs.displayTab('rgb_tab','rgb_panel');" onmousedown="return false;">{#advanced_dlg.colorpicker_palette_tab}</a></span></li>
 <li id="named_tab" aria-controls="named_panel"><span><a href="javascript:;" onclick="javascript:mcTabs.displayTab('named_tab','named_panel');" onmousedown="return false;">{#advanced_dlg.colorpicker_named_tab}</a></span></li>

 <li id="rgbval_tab" aria-controls="rgbval_panel"><span><a href="javascript:;" onclick="javascript:mcTabs.displayTab('rgbval_tab','rgbval_panel');colorHexToRgb();" onmousedown="return false;">RGB</a></span></li>
 </ul>
 </div>

 <div>
 <div id="picker_panel">
 <fieldset>
 <legend>{#advanced_dlg.colorpicker_picker_title}</legend>
 <div id="picker">
 <img id="colors" src="img/colorpicker.jpg" onclick="computeColor(event)" onmousedown="isMouseDown = true;return false;" onmouseup="isMouseDown = false;" onmousemove="if (isMouseDown && isMouseOver) computeColor(event); return false;" onmouseover="isMouseOver=true;" onmouseout="isMouseOver=false;" alt="" />

 <div id="light">
 <!-- Will be filled with divs -->
 </div>

 <br style="clear: both" />
 </div>
 </fieldset>
 </div>

 <div id="rgb_panel">
 <fieldset>
 <legend id="webcolors_title">{#advanced_dlg.colorpicker_palette_title}</legend>
 <div id="webcolors">
 <!-- Gets filled with web safe colors-->
 </div>

 <br style="clear: both" />
 </fieldset>
 </div>

 <div id="named_panel">
 <fieldset id="named_picker_label">
 <legend id="named_title">{#advanced_dlg.colorpicker_named_title}</legend>
 <div id="namedcolors" role="listbox" tabindex="0" aria-labelledby="named_picker_label">
 <!-- Gets filled with named colors-->
 </div>

 <br style="clear: both" />

 <div id="colornamecontainer">
 {#advanced_dlg.colorpicker_name} <span id="colorname"></span>
 </div>
 </fieldset>
 </div>

 <div id="rgbval_panel">
 <fieldset>
 <table>
 <tr><td>R:</td><td><input type="text" name="rgbval_r" id="rgbval_r" style="width:30px;" onchange="colorRgbToHex()"></td></tr>
 <tr><td>G:</td><td><input type="text" name="rgbval_g" id="rgbval_g" style="width:30px;" onchange="colorRgbToHex()"></td></tr>
 <tr><td>B:</td><td><input type="text" name="rgbval_b" id="rgbval_b" style="width:30px;" onchange="colorRgbToHex()"></td></tr>
 </table>
 <p>Hodnoty zadávejte v dekadické soustavě, budou přepočítány.</p>
 </fieldset>

 </div>

 </div>

 <div>
 <input type="submit" id="insert" name="insert" value="{#apply}" />

 <div id="preview"></div>

 <div id="previewblock">
 <label for="color">{#advanced_dlg.colorpicker_color}</label> <input id="color" type="text" size="8" aria-required="true" />
 </div>
 </div>
</form>
</body>
</html>