Running jquery gallery makes links unclickable - javascript

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

Related

Having trouble with Phonegap (Android) and capturing click with jQuery

I'm trying to port an existing mobile web app to Phonegap, but I had difficulty handling a click event with jQuery (it worked in my browser, but not in the emulator). I've tried everything, but here is the general gist of what I'm trying to do.
HTML:
...
<span id="footerclick">Test</span>
...
<script type='text/javascript' src='alert.js'></script>
<script type='text/javascript' src='phonegap.js'></script>
<script type='text/javascript' src='js/index.js'></script>
<script type='text/javascript'>
app.initialize();
</script>
alert.js:
$("#footerclick").click(function(){
alert("I can't get this to show up");
});
That's pretty much it and I cannot get the alert to show up, I've tried wrapping it in $(document).ready(){} and a device listener. If I put something like onclick="alert('Hello')" as an attribute of #footerclick, that works also.
I think I just don't understand how Phonegap works with Javascript, but I've read the documentation several times and I don't get it. Please help, thank you.
I've found the source of the problem thanks to #tomysshadow. It turns out that the emulator was blocking the loading of scripts from external domains (in particular, jQuery) and so the .click listener obviously didn't work. My temporary fix is to download and use a local version of jQuery, but I may update this answer when I figure out how to change the config file to allow these inclusions.

How do I prioritize which part of a page should load 1st?

Okay guys I have a website that has a lights off for videos source code: http://www.megaptery.com/allofthelights/
An organic tabs for videos using Jquery
and a 2buttons which onclick it changes the CSS of the whole page you know it's kinda like a theme for the page
Here is an example of one of my page:
http://myanimesekai.com/Watch/Noucome-Episode-9
okay all of them works perfectly fine on my laptop all of them IE, Mozilla and the OLD Google Chrome.
But Then I tried it on my Brothers Laptop BUT his Google Chrome is the latest Google Chrome the Google Chrome where the scrollbar changed. The problem is that the Lights off feature is malfunctioning it doesn't turn off the video only. But the Organic Tabs and The 2buttons works perfectly fine. So I tried it on an internet Cafe and this is where I was really frustrated their Google Chrome is also updated and then both 3 of them were malfunctioning then after a while I tried them on Mozilla and all of them worked perfectly fine and so I have an Idea maybe it's becaused it took time for the Jquery and my Javascript to load which is why all 3 of them were malfunctioning.
so my question is is there a way for me to make my page load the jquery and javascript 1st? or am I missing something that the new Google Chrome requires? this is really frustrating me
oh BTW the 2buttons that changes the CSS are the B and M squares Below the facebook page
There are so many errors on this page (http://myanimesekai.com/Watch/Noucome-Episode-9) that any one error can cause the page not to work.
You need to clean up your code quite a bit:
<script src="http://myanimesekai.com/javascript.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://myanimesekai.com/organictabs.jquery.js"></script>
You are calling jQuery in your javascript.js file. The jQuery library has not been declared before your scripts. You need to restructure your code to (you only need one version of jQuery):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://myanimesekai.com/javascript.js"></script>
<script src="http://myanimesekai.com/organictabs.jquery.js"></script>
This will fix some errors. I suggest that you look at the console for further errors and fix them.

Mobile collapse bootstrap not working in Chrome

I'm fairly competent with HTML and am working with Bootstrap for the first time, but I can't seem to get the mobile collapsible menu working on Chrome on the desktop (and presumably some other browsers).
Safari on iOS 7 with default mobile responsiveness shows the menu fine when clicked, but nothing happens when you click it in Chrome on the PC when the browser is resized to a mobile-like width.
Sorry if it has been said before - just went through the code and couldn't really understand why it wasn't working! :(
First time on SO and can't figure out how to put my HTML in here, so here it is.
Thanks peeps :)
You have linked jQuery from Google CDN and hosting your website from Dropbox. Dropbox does not allow external linking of script and font files.
So you are getting an error on your page:
Host the jQuery file on your website and link (internal linking). Like for example put jQuery in JS folder and link:
<script src="js/jquery.min.js"></script>
Problem will be gone. Hope this helps!

Head.js only loads the first stylesheet in IE9 and under

We're using head.js to load some external resources for our website and we're facing a problem where it seems to stop loading the stylesheets after the first one has loaded.
head.js('/lib/bootstrap/docs/assets/css/bootstrap.css',
'/lib/bootstrap/docs/assets/css/bootstrap-responsive.css',
'/lib/angular-ui/build/angular-ui.min.css',
// ...
'/css/app.css');
head.js('/js/facebook.js',
'/lib/json3/lib/json3.min.js',
// ...
'/js/cookieCheck.js',
function() {
angular.bootstrap(document, ['glide']);
});
This all works fine in Chrome and Firefox, however as you can see from IE's developer console it only loads bootstrap.css: http://i.imgur.com/GNtAaQj.png
No relevant errors are shown in the console either. The really strange thing is head.js loads all the Javascript files with no problem.
Has anyone experienced anything like this before?
There are reports from others about this with IE as well (eg https://github.com/headjs/headjs/issues/200)
The solution seems to be to split the css list up into multiple calls. I have this working with IE:
<script>
head.js("style.css")
.js("style2.css")
.js("style3.css")
</script>
Hope this helps!

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.

Categories

Resources