jQuery: .load image, then fadeIn() fails when clicked twice! -

-

so i've got .load setup image .fadein() callback, works fine. problem if fire .load twice in row on same image, doesn't callback!

here's snippet of code:

$('#thumbs a').click( function() {   imagesrc = $(this).attr('href').substring(1)+'.jpg';   // grab src, remove hash, add jpeg extension   $('#viewer img').fadeout('fast', function() {     // fade old image out fast, wait until finished before changing src    $('#viewer img').attr('src', (mediumpath+imagesrc));  // change src new image    $('#viewer a').attr('href', imagesrc);   });   $('#viewer img').load(function(){        // once image loaded, fade img in          $('#viewer img').fadein('slow');         });   return false;  });

and can try on website (in progress) here. click on thumbnail on left twice in row , loader.gif doesn't go away, i.e. not getting .fadein().

note: i believe affecting webkit browsers(?)

i have tested site http://www.benjibee.com/ in chrome (webkit-based browser, far know), , have been unable replicate problem. although take little longer in firefox (but may computer).

a couple of suggestions/observations.

with .click() based interactions, using format:

.click( function( e ) {   e.preventdefault();   // rest of javascript code here... } );

will stop anchor/link performing such, , can evoked @ start of jquery processing, rather waiting end use return false.

you may want store in javascript variable details of current image/link, , check against on subsequent clicks on thumbnails - stands, if img1.jpg shown, , thumb image clicked, current larger image fades out, , fades in again no change. tiny thing.


Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more