Develop Reference

Running jquery gallery makes links unclickable

I'm trying to build responsive webpage based on Zurb Foundation framework. Everything worked fine until I tried to add nanoGallery which uses jQuery too. When I add gallery scripts, top menu generated by Foundation script becomes unclickable, :hover works fine but if you click on it, nothing happens. Fell free to visit the exact page at http://emfoto.filipsvoboda.net/presentation.html.
This is how I'm trying to call each script:
<script src="js/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
jQuery(document).foundation();
</script>
<script src="third.party/transit/jquery.transit.min.js"></script>
<script src="third.party/hammer.js/hammer.min.js"></script>
<script src="third.party/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="jquery.nanogallery.js"></script>
<script>
jQuery("#nanoGallery").nanoGallery({
kind:'flickr',
(..)
thumbnailHoverEffect:[{'name':'borderLighter'}],
thumbnailLabel:{display:false},
});
</script>
I've already tried changing order of those scripts, but that does not seem to help.
EDIT: It does seem to work properly in IE10, however in Chrome-based browsers it still does not work.
EDIT2: After continual fiddling with the code it seems obvious that the presence of the gallery itself on that page causes the bug. Order of scripts doesn't seem to make any difference, as long as the gallery is not displayed, Foundation works correctly and links does work.
EDIT3: Updated the code, stripped it down and changed the order of scripts. I've added simple "a" link to the sample page and it doesn't work either.
EDIT4: I've searched for event.preventDefault() and it is present in one of the *.js files for the gallery. I've contacted the author and if we get to any solution I will post it here.
Thank you for your help.

This issue has been fixed in nanoGALLERY v4.2.1:
https://github.com/Kris-B/nanoGALLERY/releases/tag/4.2.1

I compared chrome and firefox requests and responses using Developer Extensions (chrome) and Firebug (firefox) for the info shown in Net panel. I'm not sure if the file that chrome doesn't find can be the cause of the problem but wanted to point out that difference.
chrome
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.map (Not found)
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
firefox http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js

Atleast for time being, you can have a workaround for this by having a click handler which will read the url and take the page to that url.
$(function () {
$("a").click(function () {
var url = $(this).attr("href");
window.location.href = url;
});
});

jQuery page pre-loader appears after page is loaded

So on one of my websites I added a jQuery pre loader which works perfectly fine on all pages except my main page.
The page that is causing issues also has a slider jQuery plugin which doesn't seem to work (at first) as well. Basically it seems that for some reason jQuery plugins are only kicking in after page is fully loaded. It happens once, once page gets loaded at least one time (cached) everything works fine.
I experimented with placing scripts in head tag and before closing body tag, no difference.
You can see issue here (click left red button, after that you'll be redirected to /main.php page which is the one causing issues.)
http://freshbeer.lv
I don't think That I'll need to post any code here as I am almost certain it is something to do with positioning of jQuery files (which you can see by inspecting page), but if you think it is something different and you'd like me to post code here, please feel free to ask and I will update my question.

You have these:
<script src="js/placeholder.js"></script>
<script> $('input[placeholder], textarea[placeholder]').placeholder(); </script>
before this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
resulting in these
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: $ is not defined
forgot about this one
GET http://freshbeer.lv/img/loading.gif 404 (Not Found)
These are all in the dev tools console. In chrome in this case, but other browsers have one too.

headjs multiple onready calls in IE8

Using IE8 and headjs
I have a template header template file that has a head.ready(function(){}) in it. This page is loaded my all my pages.
On some page, I have scripts in the code that call the head.ready (which means it would be on the page twice because of the above header template). I noticed that putting an additional head.ready(function(){}) works in Chrome/FF, however it appears not to work in IE8. Only the first ready call seems to work. The second one does not fire.
Does anyone know if this is an issue in IE8 and if there is a simple workaround?

It might be an untested bug with IE8.
You'll probably have to poke at the source code which is never fun or try reporting it to the author.
Did you try any alternatives? YepNope? RequireJS? LabJS?
I wrote my own to be as small and simple as possible:
https://github.com/sgarbesi/fallback.js

Javascript document.write in IE 8

This is doing my head in, been chasing it all day. We have an ad server that calls a script on our site which then inserts code.
E.g.
Adserver page called in an iframe:
<html>
<head><title></title></head>
<body>
<script src="http://adserver/ad?s=728x90"></script>
</body>
</html>
The javascript returned by the script call above:
document.write('<script type=\'text/javascript\' src=\'http://partner.googleadservices.com/gampad/google_service.js\'>\n');
document.write('</script>\n');
document.write('<script type=\'text/javascript\'>\n');
document.write('GS_googleAddAdSenseService("ca-pub-xxxxxxxxxxxxxxxxxxx");\n');
document.write('GS_googleEnableAllServices();\n');
document.write('</script>\n');
document.write('<script type=\'text/javascript\'>\n');
document.write('GA_googleUseIframeRendering();\n');
document.write('</script>\n');
document.write('\n');
document.write('<script type=\'text/javascript\'>\n');
document.write('GA_googleFillSlotWithSize("ca-pub-xxxxxxxxxxxxxxxxxx", "Global_728x90", 728, 90);\n');
document.write('</script>\n');
This inserts Google Ad Manager ads onto our page. Problem is that the code doesn't work in IE 7 and 8, but works fine in Chrome, Firefox, Safari etc.
The "error" returned by IE is "Object Expected" and running it through IE's "Developer tools" doesn't help either.
I've tried a ton of things to get it working, splitting up the
It seems the error is happening whenever a GS_ or GA_ function is run, so I suspect IE is trying to stop external scripts from writing to the page?
Can anyone shed some light why the error is happening or a solution?
Thanks

I think it's simply because Chrome, Firefox, Safari etc., are faster browsers. They're downloading the file http://partner.googleadservices.com/gampad/google_service.js before executing the script that depends on it, whereas IE is still pulling the file at that point.
Perhaps you can include the contents of that js file in your own js somewhere?

I've seen this a lot since posting this question. As far as I understand it, it's a race condition problem that only exists in IE. Unfortunately there is no way around it.

$(document).ready doesn't work in IE

In my page there is two links, register and login.
The important one now is register. When I click it, it loads a .tpl file using jquery load function. In this tpl file I include a new js file with <script> ofcourse, and it works perfectly in safari, ff, opera and chrome, but of course, Why should it be working in IE?
So my question is, what should I do to make it working in IE? I think if I put the js in the .tpl file that would solve my problem, but if there is a better solution, I'd like to hear it. No this didn't help, so I guess there is no solution : D
Now I tried it with a simple alert, it worked perfectly.
My problem has changed. If there is a $(document).ready in the JS file the IE "ignores" the whole script, but if there isn't it works perfectly. The thing is that i need that document ready. : D
Thanks.

If the script is "ignored" if there's a $(document)ready then there may be an error in that block of the script and your IE is set to stop running scripts on error.
Try to simplify your issue a bit to try to pin point it. For example, copy the following code into a brand new html file and try it out (NOTE: you'll need to change the src path to the jquery.js file.)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('test');
}
</script>
</head>
<body>
</body>
</html>
Does the above work in IE for you or does it get ignored as well (again, after you update the path to the jquery.js file)?
If this works but it doesn't in your scenario, check your page's source in IE for how everything is loaded. The only time I've seen $(document).ready() throw an error is when the jquery.js file is not loaded prior to it or there's a conflict with the $() function...in which case you'll need the noConflict() function.

Make sure that the script tag is not in this form:
<script ... />
IE only accepts:
<script>...</script>

IE considers injection of script tags as a security issue. Change the script tag to:
document.write("<scri" + "pt src=...></scri" + "pt>");

Are you sure that your loaded javascript executes properly in IE. Perhaps it have a javascript quirk that is throwing an error and is making it appear as if it's not loading?
To test this out, non-dynamically including the javascript (include it in the page or similar) and set up a break-point in the script code and step through ot make sure it executes all the way through. Firebug would be an excellent tool for this.
I realise this is grasping at straws, but give it a try perhaps?