Archiv štítku: jquery

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.

Č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.

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});
 }
);

 

Ajaxový požadavek na JSON

Javascript:

$.ajax({
   url: url,
   success: function(data) {
     var options = '';
     data = $.parseJSON(data);
     $.each(data, function(key, val) {
       options += '<option value="' + key + '">' + val + '</option>';
     });
     $("select[name=poradi_new]").html(options);
   }
 });

PHP:

<?php

header('Content-Type: application/j-son');

$data = array();
$polozky = dibi::query('SELECT * FROM [table]');
foreach ($polozky as $polozka) {
 $data[$polozka->Id] = $polozka->Nazev;
}
echo json_encode($data);

Nefunkční vkládání zboží do košíku ve VirtueMart

Řešil jsem problém nemožnosti vložit zboží do košíku v eshopu VirtueMart v Joomle. Na verzi celkem (asi) nezáleží. Potíž byla v tom, že zboží bylo možné vložit do košíku se standardní šablonou, ale s upravenou už ne.

FireBug říkal následující: (new Element(„div“)).setProperty is not a function

Tak jsem chvíli laboroval s připojenými JS soubory a zjistil, že VirtueMart není kompatibilní s jQuery (a Mootools, tuto knihovnu ale nepoužívám). Řešením je přidat tento řádek: jQuery.noConflict();. Jen je pak nutné jQuery používat takto (jQuery(‚#coin-slider‘)) a ne takto ($(‚#coin-slider‘)).

Po této úpravě je vkládání do košíku funkční.

Vlastní scrollbar pomocí CSS a JavaScriptu

Poměrně dlouho jsem hledal nějaké elegantní řešení pro vlastní vzhled scrollbaru. Prostě něco takového:

Tušil jsem, že by mohl existovat již hotový plugin pro knihovnu jQuery. Nejprve jsem zkoušel plugin jquery-scroll od thomd. Ten sice umí vše potřebné a scrollbar se dá opravdu dobře přizpůsobit, ale CSS mi přišlo poněkud překombinované. Prostě jsem necítil, že je to úplně „to ono“.

Velice zběžně jsem si prohlédl Control.ScrollBar, ten ale vyžaduje zapsání dalších HTML elementů, což je velice nepohodlné. Takže toto řešení jsem zavrhl.

A do třetice 🙂 nejlepší řešení, možnosti nastavení vzhledu jsou, řekl bych, menší než u prvního pluginu, ale CSS je stručný a i skripty jsou poměrně malé. Jedná se o plugin jScrollPane. Plugin je zprovozněný v podstatě ihned (návod zde) a díky velice přehlednému CSS je úprava jeho vzhledu otázkou chvilky.