Delay between .load() and $(window).bind('load') - javascript

I'm having a problem with a delay caused between the completion of:
var href = $('.mainNav').data('href');
$('#slideshow').load(href);
This calls up a file which only contains an unsorted list and places it as the content of #slideshow. That part is in a $(document).ready function.
The next bit of code calls the plugin jCarousel to style the content of #slideshow and is outside the $(document).ready function:
$(window).bind('load', function () {
$('#mycarousel').jcarousel();
});
The problem I'm having is that there's a slight delay between the list being loaded and the plugin formatting the list in which it is completely un-styled. Is there some way to make the second piece of code run before the list itself is displayed?

You could hide it with CSS:
#mycarousel {
display: none;
}
And then display it once the jcarousel is set up:
$(window).bind('load', function () {
$('#mycarousel').jcarousel();
$('#mycarousel').show();
});
Also, I think it's strange that you're using $(window).bind('load', ...) with .load(), as .load() will not trigger a load event on window. Perhaps you should be using a callback for .load() sort of like:
$('#slideshow').load(href, function () {
$('#mycarousel').jcarousel();
$('#mycarousel').show();
});

Related

.load() whole page to modal and .remove() specific div from it at the same time with JQuery

I need to exclude some divs (one or several) from the page that I .load() from the same domain to modal, I use this to load pages:
$(document).ready( function() {
$("#div-id-where-to-load-page").load("loaded-page-url");});
I tried something like this:
$(document).ready( function() {
$("#div-id-where-to-load-page").load("loaded-page-url").remove(#div-id-to-remove);});
and its not working, if I break it to separate functions it doesn't work either, I am new to JS, what am I doing wrong?
All scripts are loaded from the separate file (if it is important).
You can have a callback function on the .load() method. This way you guarantee that the elements you want to remove are already loaded to the DOM when you call the .remove().
$(document).ready( function() {
$("#div-id-where-to-load-page")
.load("loaded-page-url", function() {
$('#div-id-to-remove').remove();
});
});

Ajax loaded part of a page - how do I make links in the loaded content work?

I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');
use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout
You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/

Javascript FadeIn Not Working Properly

I need some help with my code, This is what my HTML looks like:
<body onLoad="loader();">
<div class="loader"><img src="images/loader.gif></div>
<div class="main"></div>
CSS:
.main {
display:none;
}
So, the loading Gif Is shown, and then when the page fully loads, it should do this:
function loader() {
setTimeout(function () {
$("#main").fadeIn("fast");
$("#loader").fadeOut("fast");
}, 1000);
};
But all it does, is that the loader div disappears, then the main div appears like it should for a split second, then just dissappears. Thanks in advance for any help. #:)
I think you mean for the loader to fade out after main has faded in, in which case you'll need to take advantage of the callback argument.
You can also use delay() rather than setting a timeout.
You should also use $(document).ready() rather than invoking the function in the onload="" handler.
$(function(){
$('.main').delay(1000).fadeIn('fast', function(){
$('.loader').fadeOut('fast');
});
});
Noted by Blauharley: You are targeting elements with an ID of main (and loader), whereas the elements in your markup use classes.

Bootstrap Popover Not Working When Loaded With Ajax

When I load Bootstrap popver content with ajax, the popover is not showing.
Javascript:
var id = 1;
$.post("load.php?pageid",
{
pageid:id;
},
function(data,status){
document.getElementById("body").innerHTML=data;
});
HTML response:
hover for popover
<script>
$(function ()
{ $("#example").popover();
});
</script>
When I place the HTML response above directly in the <body id="body"></body> code, the popover works fine. I dont understand what is going wrong here.
The problem is that you're setting up the popover inside of the function $(). Rather than
$(function ()
{ $("#example").popover();
});
It should be just
$("#example").popover();
Or perhaps better
$(document).ajaxComplete(function() {
$("#example").popover();
});
The reason being that any function inside of $() is run when the document is first finished loading, when the "document ready" event is fired. When that code is pasted inside of the original HTML, it works because it's present when the document finishes loading.
When it's the response from an AJAX call, it won't run inside of $(), because the "document ready" event already fired some time ago.
with the help of jQuery you can initialize all things that needs to be initialized using
$(document).ajaxSuccess(function () {
$("[data-toggle=popover]").popover();
$("[data-toggle=tooltip]").tooltip();
// any other code
});
inspired from Olaf Dietsche answer
<script>$(function () { $('[data-toggle="tooltip"]').tooltip()});</script>
Add this at the end of whatever you are loading in with ajax. You should already have this somewhere to opt-in to the tooltip, but put it again to re-initialize the tooltip.

Add fade in effect on onload

How can i add fade in for this specefic code? I want the pictures to fade in on onload.
Have done some research on Stackoverflow, but couldn't find anything useful. Some help would be appreciated.
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('img')
if(img.clientHeight<$('#div').height()){
img.style.height=$('#div').height()+"px";
}
if(img.clientWidth<$('#div').width()){
img.style.width=$('#div').width()+"px";
}
}
</script>
Extra question: Is it also possible to add a load-function to this code?
Sj what your attempting to do can be simplified using jQuery. jQuery is a JavaScript library that makes working with HTML documents much easier.
Here is a little fiddle demonstrating their fadeIn method: http://jsfiddle.net/zgRtd/3/
Just to make sure your clear on what's happening:
We declare a function named load Image - this function uses jQuery to attach the fadeIn method to our jQuery object (referenced with CSS Selectors).
The images are set to display: none; initially.
function loadImage () {
$('#your-image').fadeIn('slow', function () {
// Animation complete
});
}
We call the function once the document is loaded (this could be bound to any event), I've commented this out in the JSFiddle example.
$(document).on('ready', function () {
loadImage();
});

Categories