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.
Related
I am using bootstrap script, mixitup filtering and owl carousel on a SharePoint page. For example on the owlcarousel the data shows up but the actual carousel function does not work. If i leave the page and then go back -1 everything works. It is the only time it works. When I refresh or reload it goes back to the original state.
On the mixitup filtering a similar issue happens. The data does not load initially like it should. When i leave the page and go back then it loads and functions properly.
Any ideas? Something with caching and loading order of scripts? Why would it work when going back?
Try to load the scripts in this order in the end of your body:
jQuery,
Bootstrap,
owlcarousel
Then your custom Script which initiates any own functions
After weeks of searching and deciding to post the question I found my answer so I wanted to make sure i shared.
I found a post from Chris Coyier on how to run JavaScript only after the entire page has loaded... THAT WAS IT! Once i placed my script in this it fixed my issue.
$(window).bind("load", function() {
// code here
});
I've given up on this, seemingly done everything and followed practically every link on the internet looking for a fix, to no avail.
I'm using the jquery scrollTo() and localScroll() plugin to animate some scrolling on several pages of my site to anchors/ id's. The problem is, it only scrolls with animation when the page is either completely reloaded in the browser, or visited directly via its URL (the same as a complete reload). If you follow a link to a page using navigation, scrollTo(), the plugin does not work and instead it's a jump to anchors (default behaviour).
$(document).ready(function(){
$('.home .col-xs-6').localScroll();
$('.tour .btn-group').localScroll();
});
The javascript is loaded in a file which does appear in the HEAD (I've checked), and I've also tried putting the above code directly on the page where the .btn-group links are, but it still only works every time on a complete browser refresh, and like I said, when you navigate to a page which contains the above code using site navigation, it reverts to default behaviour.
I've also tried changing the ready function to on('load') which did nothing, and I've included preventDefault(); which also did nothing to help.
This seems so simple yet I can't get it to work properly!
So I ended up doing away with the plugins compeletely and went with this solution below:
$(document).on('page:load', function() {
$(".scroll").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 1500,'swing');
});
});
which works. I just need to add scroll to the link class. I believe part of the problem had to do with the turbolinks gem in rails, so I added the page:load function which got it to work. Unfortunately even with the added function, localScroll() still had issues, but the this seems to work just as well.
I have tried to implement this kind of script (Page Transition): here
Everything is going fine as demo provided. But only 1 problem that I cant figure out is:
I have 2 HTML files which is index.html & index2.html. On index.html I put the link with the page transition effect after clicked it goes to index2.html which is on index2.html I was put in some alert script using body on-load method.
Supposedly in normal practice, the alert will appear as normal we seen for debuging. But it doesn't appear anything. Seem like it doesn't load any script after page transition done.
Can somebody give me a clue to solve this? What I have tried is using :
location.reload(); window.location.reload(); etc.. till I don't have idea to fix this :(
*location.reload() works on desktop browser but doesn't work on mobile. My priority target browser is on mobile version.
Please help & Many Thanks
for demo purpose and needs help : here
It wasn't executed because the page never really loaded. The way that page transition script worked is by loading the content of the target page via ajax, replacing the entire content of the page with it.
From the page you provided, it seems like the script accepts a callback function to be called when the page finishes loading, you can put your 'loaded' script there. But keep in mind, what is being executed is the script on that first page.
I don't know what you are trying to make, but I guess it would be better for you to look into a proper single page app with URL matching. There are frameworks like Backbone.js that can help you with this.
I am running the following jQuery that affects elements on a page view.
$(document).ready(function($){
$(".views-field-field-video").click(function() {
$(this).parent().find("a.cboxElement").click();
});
});
The code works perfectly, but only on the first page. When I use the pager at the bottom and navigate to any other page, the script does not work. Then, when I navigate back to the first page, the script also fails.
If I reload the page however, it brings me back to the first page and the script works again.
I am linking a .js file, and link in between the <head> </head> tags using <script type="text/javascript" src="http://source_to_file"></script> It is loading, I can see in the web developer tool.
EDIT:
The classes I am selecting in the script remains the same on all pages.
It sounds like you are only adding click events when the page is first loaded. If you are then dynamically adding HTML (with pagination) then you need to re-add the click events to those new objects.
Sounds like you just need to reatache the event. Drupal gives you a great way to do that right in your javascript:
Drupal.attachBehaviors('.behavior_class');
This will cause a lot of headache if you don't have context passed to your behaviors though.
Make sure your code is wrapped in, for drupal 6:
Drupal.behaviors.clikfocus_map = function (context) {
for drupal 7:
(function ($) {
Drupal.behaviors.ajax_example = {
attach:function (context) {
}
}
})(jQuery);
and your selectors should all have
$('.myselector', context');
Turns out I needed to just turn off AJAX on the view. Sorry to over complicate things, but thank you for all your help!
I created the following Greasemonkey script to be executed on Firefox for all websites. Here's the script. The script basically gets all the links on the page and alerts the number of links. This is a small part of a project I am working on.
window.addEventListener("load", function(e) {
var links = window.document.getElementsByTagName("a");
//window.setTimeout(function(){alert(links.length);},3000);
alert(links.length);
}, false);
The script executed fine for some websites, but when I accessed reddit, the script is returning only 2 links, instead of all the links that are present on the page. When I tried to search for divs present on the page, it also returned only 2.
When I researched the page source, there was something related to inline javascript. But I could not understand it perfectly. Can anyone please help me why this is not working?
Thanks,
Sid
It has to be AJAX content loads. If you execute your code from the debugger it works fine. So the only explanation is that the content isn't there after the load event. Try wrapping it in a timeout (ugly, but this should prove my point).
setTimeout(testLinks, 3000);
function testLinks() {
window.addEventListener("load", function(e) {
var links = window.document.getElementsByTagName("a");
//window.setTimeout(function(){alert(links.length);},3000);
alert(links.length);
}, false);
}
Now that you know what the problem is, you can follow the instructions in this SO question to create an AJAX event listener. Then you can recalculate your number of links whenever new content loads.
JavaScript detect an AJAX event