The problem revolves around a jQuery gallery called 'Galleria'. It's quite aesthetically pleasing and since my client is a Photographer, I thought I'd display all of his images in a Galleria gallery.
You can see the site, in it's testing version, here: http://jeremywebbphotography.com/testing/index.php - (if things are changing, that's because I'm working on it right now).
Basically, the problem is: if you browse to any of the gallery pages they appear to work fine. Hooray! Except that, after looking at any sort of random number of them, after a while the images stop loading and appearing. The thumbnails will appear, but if you click any of them the image will appear briefly then suddenly disappear. I've worked countless hours on this site and only now do I discover the flippin' problem.
It's not going to be easy for me to integrate a new gallery solution since this one has been set up by me with a very specific structure that did take me hours and hours to do.
So far I have only found the problem in Safari, but I believe it may also happen in other browsers. The problem can be fixed by restarting the browser, but obviously when providing a professional service to my client this clearly isn't good enough for him or the users. The thing is, I know of no way to trigger the error - it just seems to happen randomly.
I need some serious help. I don't have the time or patience to redesign this all over again with a new gallery.
I'm using jQuery's supplied code. Also, Galleria provides this code in jquery.galleria.js - If you can make any blooming sense out of it... I guess it's sort of pointless posting this, but hey...
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){4 q;q=$.23.7=5(k){6(!q.1o()){Q J}$.1p(q.1b);4 l={Z:\'.1q\',K:E,10:E,1c:5(a,b,c){},1r:5(a){}};4 m=$.11(l,k);1d(4 i 24 m){6(i){$.7[i]=m[i]}}4 n=($(m.Z).R(m.Z))?$(m.Z):3(B.12(\'1e\')).25(8);4 o=$(B.12(\'1e\')).u(\'1s\');4 p=$(B.12(\'1f\')).u(\'1g\');n.u(\'1q\').13(o).13(p);Q 8.1t(5(){$(8).u(\'7\');$(8).1u(\'L\').1t(5(i){4 b=$(8);4 c=$.26?$.11({},m,b.27()):m;c.10=$(8).R(\':28-S\')?J:c.10;4 d=$(8).T(\'a\').R(\'a\')?$(8).T(\'a\'):J;4 e=$(8).1u(\'F\').C(\'M\',\'U\');4 f=d?d.9(\'1v\'):e.9(\'1h\');4 g=d?d.9(\'14\'):e.9(\'14\');4 j=1w 1x();6(c.K&&(N.r.t&&N.r.t.V(/\\#/,\'\')==f)){b.G(\'.D\').W(\'D\');b.u(\'D\')}$(j).29(5(){$(8).9(\'1y\',e.9(\'1y\'));4 a=d?d.T(\'F\').u(\'1z 1A\').C(\'M\',\'U\'):e.2a(E).u(\'1z\').C(\'M\',\'U\');6(d){d.2b(a)}6(!a.1B(\'1A\')){4 w=1i.1C(e.v()/e.y()*b.y());4 h=1i.1C(e.y()/e.v()*b.v());6(w<h){a.C({y:\'1D\',v:b.v(),1E:-(h-b.y())/2})}s{a.C({v:\'1D\',y:b.y(),1F:-(w-b.v())/2})}}s{N.1G(5(){a.C({1F:-(a.v()-b.v())/2,1E:-(a.y()-b.y())/2})},1)}a.9(\'O\',f);a.9(\'14\',g);a.1H(5(){$.7.X(f)});a.P(5(){$(8).u(\'P\')},5(){$(8).W(\'P\')});b.P(5(){b.u(\'P\')},5(){b.W(\'P\')});b.1I(a);a.C(\'M\',\'2c\');c.1r(3(a));6(b.1B(\'D\')){$.7.X(f)}e.1J()}).1K(5(){b.2d(\'<1f 2e="1K" 1L="2f:2g">2h 2i 2j: \'+f+\'</1f>\')}).9(\'1h\',f)})})};q.1M=5(a){Q $(a).R(\':1N-S\')?$(a).G(\':1O-S\'):$(a).1j()};q.1P=5(a){Q $(a).R(\':1O-S\')?$(a).G(\':1N-S\'):$(a).1Q()};q.1o=5(){$(\'1R\').13($(B.12(\'1e\')).9(\'1S\',\'1k\').C({v:\'1T\',y:\'1T\',M:\'U\'}));4 a=($(\'#1k\').v()!=1)?J:E;$(\'#1k\').1J();Q a};q.1b=5(a){4 b=$(\'.1s\');4 c=$(\'.7 F[O="\'+a+\'"]\');6(a){6($.7.K){N.r=N.r.1v.V(/\\#.*/,\'\')+\'#\'+a}c.15(\'L\').G(\'.D\').W(\'D\');c.15(\'L\').u(\'D\');4 d=$(1w 1x()).9(\'1h\',a).u(\'2k\');b.1U().13(d);b.G(\'.1g\').2l(c.9(\'14\'));$.7.1c(d,b.G(\'.1g\'),c);6($.7.10){d.C(\'2m\',\'2n\').1H(5(){$.7.1j()})}}s{b.G().2o().1U();$(\'.7 L.D\').W(\'D\')}$.7.16=a};$.11({7:{16:\'\',1c:5(){},X:5(a){6($.7.K){$.1V(a)}s{q.1b(a)}},1j:5(){4 a=$(q.1M($(\'.7 F[O="\'+$.7.16+\'"]\').15(\'L\'))).T(\'F\').9(\'O\');$.7.X(a)},1Q:5(){4 a=$(q.1P($(\'.7 F[O="\'+$.7.16+\'"]\').15(\'L\'))).T(\'F\').9(\'O\');$.7.X(a)}}})})(3);3.11({z:17,x:17,1p:5(a){3.x=a;4 b=r.t;3.z=b;6(3.H.1l){6(3.z===\'\'){3.z=\'#\'}$("1R").1I(\'<1W 1S="18" 1L="M: U;"></1W>\');4 c=$("#18")[0];4 d=c.1m.B;d.1X();d.1Y();d.r.t=b}s 6($.H.19){3.A=[];3.A.I=K.I;3.1a=[];3.Y=E}3.x(b.V(/^#/,\'\'));2p(3.1Z,2q)},20:5(a){3.A.21(a);3.1a.I=0;8.Y=E},1Z:5(){6(3.H.1l){4 a=$("#18")[0];4 b=a.2r||a.1m.B;4 c=b.r.t;6(c!=3.z){r.t=c;3.z=c;3.x(c.V(/^#/,\'\'))}}s 6($.H.19){6(!3.1n){4 d=K.I-3.A.I;6(d){3.Y=J;4 i;6(d<0){1d(i=0;i<1i.2s(d);i++){3.1a.2t(3.A.2u())}}s{1d(i=0;i<d;i++){3.A.21(3.1a.2v())}}4 e=3.A[3.A.I-1];6(e!==17){3.z=r.t;3.x(e)}}s 6(3.A[3.A.I-1]===17&&!3.Y){6(B.22.2w(\'#\')>=0){3.x(B.22.2x(\'#\')[1])}s{c=r.t;3.x(\'\')}3.Y=E}}}s{c=r.t;6(c!=3.z){3.z=c;3.x(c.V(/^#/,\'\'))}}},1V:5(a){4 b;6(3.H.19){b=a}s{b=\'#\'+a;r.t=b}3.z=b;6(3.H.1l){4 c=$("#18")[0];4 d=c.1m.B;d.1X();d.1Y();d.r.t=b;3.x(a)}s 6(3.H.19){3.1n=E;8.20(a);4 e=5(){3.1n=J};N.1G(e,2y);3.x(a);r.t=b}s{3.x(a)}}});',62,159,'|||jQuery|var|function|if|galleria|this|attr||||||||||||||||||location|else|hash|addClass|width||historyCallback|height|historyCurrentHash|historyBackStack|document|css|active|true|img|siblings|browser|length|false|history|li|display|window|rel|hover|return|is|child|find|none|replace|removeClass|activate|isFirst|insert|clickNext|extend|createElement|append|title|parents|current|undefined|jQuery_history|safari|historyForwardStack|onPageLoad|onImage|for|div|span|caption|src|Math|next|css_test|msie|contentWindow|dontCheck|hasCSS|historyInit|galleria_container|onThumb|galleria_wrapper|each|children|href|new|Image|alt|thumb|noscale|hasClass|ceil|auto|marginTop|marginLeft|setTimeout|click|prepend|remove|error|style|nextSelector|last|first|previousSelector|prev|body|id|1px|empty|historyLoad|iframe|open|close|historyCheck|historyAddHistory|push|URL|fn|in|insertBefore|meta|data|only|load|clone|replaceWith|block|html|class|color|red|Error|loading|image|replaced|text|cursor|pointer|andSelf|setInterval|100|contentDocument|abs|unshift|pop|shift|indexOf|split|200'.split('|'),0,{}))
I don't have Safari installed, but I can recreate the bug in Chrome somewhat consistently now, and I can see from Chrome's debugger that the reason it's failing is because it's hitting the else part of the if statement in $$.onPageLoad = function(_src) on line 283 of the unpacked source, because _src is empty. It only happens on the first load of a page (sometimes). This makes me think that the onload event isn't waiting for images to be completely ready. Google led me to a page talking about Safari's page loading, which points out that
With most browsers, they will wait
until the page is loaded, all images
and stylesheets and scripts have run,
and the page has been displayed before
they fire onload. Safari does not.
In Safari, it seems onload fires
before the page has been displayed,
before layout has been calculated,
before any costly reflows have taken
place. It fires before images have
completed decoding
So, try adding a delay before invoking the galleria code on the ul, or check that the width of the first image is > 0 before invoking the code.
You can find the full source for galleria here: jquery.galleria.js.
And for what it's worth, the gallery seems to work quite well in Firefox.
I tested in chrome (WebKit) - everything seems ok here, until one time - it loads image i want to and then goes to last one (i opened gallery 2, picture 27... and then whatever image i clicked on, after 0.5s it returned back)
Plus, you have one wrong element - </br> instead of <br/> in menu.
Running it through the w3c validator shows 17 errors.
It's certainly worth fixing any errors like these to get a more consistent cross browser experience.
Related
I know the title isn't very descriptive, and that's because I don't know the why to this pseudo-problem.
I have a website in php that makes queries to different databases and show the results in a table.
That is working just fine.
My "problem" is that when a query is being processed and the browser is showing the loader icon if i open a second tab it wont load until the first is finished.
I really need to avoid this, but I don't know where the restriction is. Is it something that the browser does?
Two tabs in google chrome wont work, neither two tabs in safari. But the same page opened in both browsers works just fine and there is no "waiting until finished".
Thanks in advance for your help, im really lost here.
I have a very irritating issue on the live site I'm designing for a client. I've dug into the CSS and HTML of the site to no avail. This only occurs in Chrome. The work in progress can be found at live.dancingsheepcoffee.com
Background:
Using Wordpress as CMS, theme designed with Underscores (_s)
Also using 960.gs system to aid layout design
Issue only occurs in Chrome; IE, Firefox, Safari, all display great.
Here's the breakdown:
On a virgin load of the site, the page displays as designed, issue free.
Upon a refresh (or second visit) the page loads "zoomed in" almost 200%, for no apparent reason. Text, navigation, headers, sidebar, and even the tiled background image. Site-wide. The main logo seems to be unaffected.
Zooming out and then back in (i.e., zoom to 90% then back to 100%) 'fixes' the page and displays as designed.
Also following the link to the same page from the menu bar loads the page correctly, however the content "jumps" sizes before displaying the correct content.
Content box remains at 960px wide (except when user toggles zoom, appropriately)
Background image also "zooms" on page load but then displays correctly when resolved above.
And the worst part is, I can't duplicate this on my main work computer, but the issue displays on every other computer. The way the issue works, it sounds like it's something on the client side, as the web server seems to render the page perfect every time, but perhaps the cached version isn't working. A thought to consider.
I greatly appreciate the time considered and help with this issue. I'll provide any applicable code to aide troubleshooting. Thanks again!
I have a jQuery Mobile application, and on certain pages, such as for example this one: "http://olkensway.se/upplevdinkommun/activities.php?community_id=6&category_id=1", I'm facing a problem. When the page is loaded the first time, it shows correctly, but the problem occurs when I refresh the page (by pressing F5). Try and see for yourselves. The search field re-sizes and becomes much larger than what is supposed to be. This problem occurs both in my desktop browser (Tested with Google Chrome and Internet Explorer) and my mobile browser (Google Chrome as well). Using Google, I haven't found anybody with the same problem yet. I'm new to both jQueryMobile and web design in general. Is this a problem with my PHP, HTML or CSS. Some conflict with jQM? Please tell if I should show more code than what is available by viewing the page's source.
EDIT: It can be worth telling that I have other pages, not using any PHP, where this isn't a problem. So it's likely come conflict there...
When I load the page, the search thing is taking up the entire page. After inspecting the element in chrome, the article element's font size is 200% (.ui-body-c) . When I unchecked that it went to a "normal" size. I'm not sure exactly what you want it to look like, but maybe that's your problem? hopefully that helps
I am working on a page and having problem with the Fancybox close action for the Image gallery in the first button at the bottom, the gallery is closed but overaly is still there. Here is the test link
How ever the same settings are working for the second link "Floor Plan".
Secondly I am using a Tiny Scrollbar plugin for the gallery on the page. The thumbs on the left side have blue scroll bar if they are larger in contents. This scroll bar does not appear in Google Chrome, and sometime don't show up even in other browser if the page loads first time, then I have to refresh the page to show it. Any idea about the problem will be greatly helpful.
Thank you!
First off, I noticed you're suing jQuery 1.3, why?
Here's 1.6:
http://jquery.com/
It isn't that much larger, and its an updated library. That may fix your problem.
If that didn't work, then delete the fancybox.js, re-downlod and put it in again, same with css. Make sure the css is called at the end of your css document.
If that doesn't work, I suggest getting rid of your javascript files one by one until there is only fnaycbo xleft, it's obviously some conflicting code at this point, so you'll have to troubleshoot by trial and error, going through one by one to findout what script is preventing close. I don't have access to your server, so I can't test it.
It's most likely in main.js, so remove that first, and see if fancybox works then!
ETA: Scrollbar fix.
The problem is something is adding a disabled selector, it's javascript. But you could change up tinyscrollbar.js to fix it, or you could go to your css, find the line:
'#scrollbar1 .disable {display:none}
and remove that line entirley, it's causing your scrollbar not to appear in browsers the javascript is (for some reason) disabling in.
In my case I solved with the next modification:
$(document).bind("load", function() { $('#myTinyScrollbar').tinyscrollbar(); });
Well you have an error in console:
d.onClosed is not a function
It could be because:
Your using an old version of jQuery possibly not supported by Fancybox. Try updating to 1.6, though beware legacy plugins or code that could break due to the steep upgrade.
A compression issue. It's possible i.e. the Google Closure could of removed what it saw as "unneeded" code and therefore broke the functionality. Try using uncompressed Fancybox to see if it fixes it, if it does then you know this the issue, rather than your jQuery version.
I am currently investigating a double request problem on my site. Not all the time, but sometimes, a requested page will in fact load twice...which is not a problem really until it is on a page with PHP that inserts stuff into my db on request (my tracking script).
I have read that an empty src in an image tag, and an empty url() in a css background could potentially cause the page to be requested twice.
However, I can't find any problems with those.
Is there anything else that could be causing something like this?
ANSWER FOR MY SITUATION
After some extensive research, it turns out that in my case specifically, the second request has been coming from the user agent "Mediapartner-Google". I began to notice that on pages that serve an Adsense ad, I could expect a secondary visit from this crawler within seconds after I visit the page myself.
This doesn't seem to be happening on pages without Adsense ads.
I am going to mark an answer below, because it seems like for most situations, those are the correct things to check.
I have sat beside people whom I would swear knew better than this, and watch aghast as they double-clicked on every hyperlink in our app.
Didn't take long to figure out why they were experiencing double the page load time of everyone else...
Things like this certainly tend to give one pause when implementing pages that change the backend state. A lot of people put sequence numbers in hidden form elements so the backend can detect a double-submit.
The causes I've seen before:
Missing stylesheet or image
Web developer addon for Chrome/Firefox sometimes requests things twice if you're validating HTML etc.
Browser inconsistency
Sometimes it's just too difficult to track down the root cause of a double request.
Either way, you should NOT be changing database state (or session state) through a GET request. The only SQL query you should be running without postdata is SELECT. All updates and inserts should be done using forms, even if the form consists only of a submit button.
src="" in certain elements on certain browsers (such as <img src="" />) can request the current page again.
404's are a prime source for a request seemingly being requested twice. Check your CSS, JS and image sources are all correct.
We had a very strange behaviour in our CMS where an iframe in a jQuery dialog lightbox made a doubled database insert.
After hours of debugging and loud WTFs we nailed it down. the dialog close method was setting the focus to the iframe of the dialog before destroying it and caused a reload of the iframe url!
I have seen this countless times. The internet is full of strange people who keep double-clicking on everything they come across.
You can stop this in you web site by attaching a global double-click event listener to every anchor tag ( tags).
For example, if you have jQuery installed, you can do the following:
jQuery('a').on('dblclick', function(e) { e.preventDefault(); });
This is just an example of course. You can achieve the same result using vanilla Javascript.
That should silently ignore the double click action.
In case they are fast clicking twice instead of double clicking, then you can use can throttle the click handle on all the links in the page to ensure that they cannot be clicked more than once within say ... 3 seconds.