I feel really silly asking this, but it is completely blowing my mind why my link to the Google jQuery api isn't working. I know my code isn't broken because it works here: http://jsfiddle.net/jefffabiny/8p46d/
Here are my script tags in my index file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
Other than that, the doctype is HTML5, and I'm working on an local xampp install. I bet I over looked something small; does anyone see the problem here? Thanks.
EDIT
Actually, after I submitted this post I got an alert at the top of my browser saying stack overflow requires javascript from an external domain to run properly, but it was being blocked. I guess that's my problem, but does anyone know how to fix that?
Are you executing your code after DOM is ready? jsFiddle does!
Try this:
$(function() {
$('.test').on("click", function(){
$(this).css('color', 'blue');
});
});
Related
I installed fakeLoader (jquery preloader) but I have trouble making it show before the page loads.
In mozilla it works almost fine (strangely...), but in Chrome and Opera, the page loads first and then the preloader animation takes place.
You could check my full source code here: http://morph.ellevenacoustica.com/
As the instructions in fakeloader website say, I load jquery 1.11.1 and fakeloader.js and .css in head.
Then I place a <div id="fakeloader"></div> on top of body and then I load this script
<script language="javascript" type="text/javascript">$(document).ready(function(){$("#fakeloader").fakeLoader({ timeToHide:1200, zIndex:9999, spinner:"spinner1", bgColor:"#a01414" });});</script>
The full javascript of fakeloader.js can also be found at the link that I provided above.
I contacted the creator of the script at github but unfortunately I got no answer, so I rely on you to give me a helping hand!
I fixed it! I am proud of myself! :P
The correct code to be placed at the bottom is:
<script language="javascript" type="text/javascript">
(function ($) {
$("#fakeloader").fakeLoader({
timeToHide:1200,
zIndex:9999,
spinner:"spinner1",
bgColor:"#a01414"
});
}(jQuery));
</script>
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.
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;
});
});
I'm a newbie programmer working with jQuery and wonder if anyone can help me out.
Essentially, I've created some html for a social button's section on our articles.
I've uploaded that with the aim of using jQuery's .load() function to pull it into every article.
It works in IE7, but not in Firefox or Chrome. Can anyone help fix it?
<script type="text/javascript">
$(document).ready(function(){
$('#shareBlock').load("http://i.thisis.co.uk/275563/binaries/sharebox.html");
});
</script>
Based on the URL in your load() and the nature of the issue I believe you have a problem with same origin. If your URL is external/violates same origin in some way you will not be able to load it in this manner.
For more details check this out - http://en.wikipedia.org/wiki/Same_origin_policy
Can you please show me how did you load jquery library in <head>?
I had the same problem and I solved it by repacing /> to end script tag with </script> end tag.
More here: http://javaxtendsolutions.wordpress.com/2011/01/24/jquery-doesnt-load-in-firefox/
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?