Archiv štítku: programování

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.

Přesměrování skriptů bez přípony na skutečné soubory s PHP příponou

Kdysi se používala i taková pochybná záležitost, kdy bylo možné přistupovat na PHP skript bez udání přípony. Tedy například http://web.cz/skript ve skutečnosti spustilo soubor skript.php. Není to moc bezpečná a smyslupná věc, proto je běžně zakázáná.

Narazil jsem na weby, kde to takto bylo naprogramováno, ale na jiné konfiguraci serveru byly skripty nefunkční. Pro vyřešení je možné přidat do htaccessu následující pravidla. Nejsem si jistý, zda jsou úplně správně, ale zdá se, že fungují.

RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule  ^admin/([a-zA-Z0-9_-]+)$ admin/$1.php [L,QSA]

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.

Stylování select boxu výhradně pomocí CSS

Určitě se vám stalo, že jste dostali za úkol vytvořit select box, který by vypadal nestandardně. Nebo jste prostě chtěli mít hezky vypadají select box, který by zapadl do celkového layoutu webu.

Problém je v tom, že select box nelze moc stylovat. V podstatě jen tak barvu textu, pozadí a tím to všechno končí. Hlavní problém je v tom, že pro vykreslení je použita standardní komponenta operačního systému, která nemá některé potřebné vlastnosti pro definování vlastního vzhledu. Existují různá řešení, která toto obchází pomocí JavaScriptu. Mají několik nevýhod. Nelíbí se mi to, že by se kvůli definování vzhledu, měl přidávat JavaScript. To by se ještě sneslo, ale větší problém je v tom, že jde mnohdy o nestandardní řešení, kdy je obsah select boxu plněn JavaScriptem, což je nepohledné a spíš komplikující.

Tak jsem hledal až jsem našel řešení: http://bavotasan.com/2011/style-select-box-using-only-css/. Problém byl v tom, že to nefungovalo úplně správně v některých prohlížečích, těžko říct proč, tak jsem to trochu upravil a výsledek se dostavil. Určitě se tímto nedají vytvořit ještě složitější úpravy vzhledu select boxu, ale pro základní změnu to postačí – tedy nahrazení rozbalovací šipky a toho, co je zasazeno v layoutu – ne rozbalený seznam.

HTML kód:

<div><select><option>Here is the first option</option><option>The second option</option></select></div>

CSS kód:

.filtr .styled-select {
 width: 278px;
 height: 34px;
 overflow: hidden;
 background: url(../../img/select-arrow.png) no-repeat right #fff;
 margin-top: 10px;
 -moz-box-shadow: inset 0 0 10px #999;
 -webkit-box-shadow: inset 0 0 10px #999;
 box-shadow: inset 0 0 10px #999;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
}
.filtr .styled-select select {
 background: transparent;
 width:306px; /* Fix for Opera, FF, IE; */
 padding: 8px;
 line-height: 1;
 border: 0;
 border-radius: 0;
 height: 34px;
 -webkit-appearance: none;
 color: #9a9a9a;
 background-color: rgba(0,0,0,0); /* Opera fix */
 outline:none;
 -moz-appearance:none;
 appearance:none;
}

Možná by se dal výsledný kód ještě o něco zkrátit, záleží asi na konkrétních potřebách úpravy. Pro podrobnější popis řešení se podívejte na původní návod.

 

 

 

ImageMagick – převod RGB na CMYK

Následujícím příkazem lze spolehlivě převést CMYK obrázek na RGB barevnost. Zatím jsem nenarazil na žádný, který by se převedl špatně.

convert -colorspace -CMYK FILEIN - profile "d:\imagemagick\icc\RGB\AdobeRGB1998.icc" -colorspace RGB FILEOUT

Před samotným převodem je vhodné otestovat, zda je obrázek opravdu ve CMYKu.

$imageInfo = getimagesize($file);
if ($imageInfo['channels'] == 4) { //prevod CMYK na RGB }

 

 

 

 

 

 

 

 

 

 

 

 

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.