I'm working on a site that relies on quite a bit of javascript. The problem is, I'm not a javascript guru in the least. Yes, bit off more than I can chew, here.
I'm using jquery for a spy effect, and use GetResponse for email signups.
If I implement my GetResponse script, it breaks the area later in the page which depends on the jquery script. Pull the GetResponse script and it works just fine.
Problem is, I need them both. ;)
The trick, I suppose, is that the GetResponse script is actually another Jquery script, so it's getting called twice...
Any help?
The site is http://djubi.com/testserver
Check out (urlabove)/nogetresponsescript.php to see it work without the GetResponse script. You should be able to see all the source just fine.
Thanks everyone. jf
GetResponse includes jQuery and is overwriting your plugin ($.fn.simpleSpy) when it loads jQuery again. So what you can try to do is wrap your plugin and initialization in $(document).ready(). For example:
$(document).ready(function() {
(function($) {
$.fn.simpleSpy = function (limit, interval) {
// snipping code out
};
})(jQuery);
$(function() {
$('ul.spy').simpleSpy();
});
});
I pasted your code for simpleSpy into Firebug after the page loaded, and it seemed to work. If $(document).ready() doesn't work, you might want to try $(window).load().
Related
The following issue bugs me big time. I need some input.
I have a wordpress plugin installed that loads a jquery script.
I have my own pure javascript (not jquery) function that needs to run once the page is done loading (and it must run after the plugin's jquery script).
I used this to trigger my function after the page has finished loading (and it worked fine), but after I updated stuff in my theme, it just stopped working:
window.addEventListener('load', myFunction);
For testing purposes:
I added an alert box to my function that must run once the page finished loading, in order to see when the function gets triggered. And the alterbox came up way before the page finished loading.
I played around with the wordpress JS dependancies, and no luck.
As a last resort, I decided to try and trigger my pure Javascript function, using jquery (which is weird I know). I used the following, and all of the sudden it worked:
jQuery(document).ready(function($) {
myFunction();
});
I feel a little weird to use Jquery to trigger a pure Javascript function. But this is the only way I could get things to work.
So my question is...
Why would this work:
jQuery(document).ready(function($) {
myFunction();
});
But, not this (even though my function is pure javascript):
window.addEventListener('load', myFunction);
Was I not using the correct EventListener, or what is the issue?
The pure JS equivalent for $(document).ready() is to set an event listener for DOMContentLoaded:
So that would be:
document.addEventListener("DOMContentLoaded", myFunction)
I'm facing the following issue:
All code works properly unless I navigate to a page by copy-pasting the url, clicking on the mouse scroll wheel etc. If I use the site menu to navigate to a page by left-clicking on it, it works fine.
So, when a page is loaded indirectly, some of my JQuery code stops working after the page has finished loading - so it actually works for a second or so, and then stops. If, e.g. a click on a button before the page has finished loading, the code will run. If I wait until the page has finished loading, it doesn't.
Also, this doesn't happen to all code, just parts of it. I've tried to figure out why some of it works, and it might be (or not) that the code that stops working is the one directly using methods from plugins I've included, which isn't inside a click event (or maybe inside another function?).
Example of working code:
$(".pr-gallery img").click(function(){
var gallery = $(this).attr("data-num");
$(gallery.toString()).magnificPopup('open');
});
Here, even though there is the magnificPopup method, it works fine.
Example of non-working code:
$('#ctr-fixed-menu').drawer({
align: 'right'
});
I load all code inside:
(function($) {
$(document).ready(function() {
...code...
});
})(jQuery);
and have also tried $(function(window), jQuery(window).load, as well as encasing all code inside a function like so:
jQuery(window).load(function(){
function TestCall() {
...all code here...
}
window.onload=TestCall;
});
})(jQuery)
none of which have worked. It might be something really simple but I've tried to solve it for a couple of weeks now and it's driving me crazy. Also, there are no error messages in the console.
Just to note that this is for a WordPress website, so I don't know whether there might be some type of conflict with the original theme code (lazy loading for example?).
Any help would be greatly appreciated.
I'm conditionally loading a script if the browser is IE8. I'm using jquery's .getScript function because I need to run something after the script is loaded. The problem is in the format of the URL. I've got it working when downloading the script that's on my hard drive directory but I can't get it to work when loading the script from a site.
This is what I have, I'm sure it's a simple fix but I'm not getting it to work:
$.getScript("https://github.com/malsup/corner/blob/master/jquery.corner.js", function () {
//does something here
});
Thanks for your fix.
The problem is that you are requesting the actual formatted github page ... so you get back html..
use
$.getScript("https://raw.github.com/malsup/corner/master/jquery.corner.js", function () {
//does something here
});
(changed the url to the correct one..)
There is a link Raw on the heading bar above the formatted code. Click it to get to the raw file..
The safe url is http://malsup.github.com/jquery.corner.js
I have an javascript that I place into a page using the code below. What the code does is place an object/embed code into a webpage. Simple javascript loader to a NicoVideo movie
<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395"></script>
This works great in a webpage. But what if I want to load this javascript into a page using AJAX? This no longer works for the obvious reasons, you would need to eval the script in order to get it to run. However, I have no idea how to do this. I am using jQuery on my page; so keep that in mind. I have tried the following code, but it doesn't seem to work through AJAX, or even in a normal page load environment.
<script>$.getScript("http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395");</script>
Any ideas on how I would get this to work?
I think it works but its attempting to inline the write which I don't know if that would work in this case.
You would need to see if there was a way to essentially execute the '.getHTML' method and take that result and update an existing element on the page.
The issue though is that the anonymous function that is generated and executed inline might not work properly.
After reading official getScript reference, it seems you have to do something with that JS file you got a hold of, using something like this:
$.getScript("http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395", function () {
// use functions from loaded file
});
I have encountered a problem. When I use jQuery to load a page that contains heavy javascript, the page freezes. I believe it is because the js executes before the page loads as my local site does not freeze. However, $(document).ready(function(){}); seems not working with dynamically loaded pages? is that true? or anything i could do to solve this problem. Thanks a million!
$(document).ready() works fine in dynamic pages. There must be an error in your code somewhere.
The first thing to do is to try View Source and save the HTML to a plain .html file, then load that file in your browser. If that still fails then you know the problem has nothing to do with the server-side ASP/PHP/whatever code. Then try removing HTML and JavaScript piece by piece until the problem disappears. That'll help you narrow down the culprit line(s). If you can reduce your page to a small file that still demonstrates the problem, post that here and we'll try to help.
Try using
$(window).load(function(){
dosomething();
});
It will run the js after the whole page is loaded.
Avoid using
$(document).ready(function(){
dosomething();
});
It will run the js just after the loading of DOM.