Im having issues with combining 2 scripts
I have javascript code that checks how big my container is and if its bigger than 500 it devides the content into 2 different divs:
function divideStream() {
if ($("#stream_one_col").width() > 500) {
var leftHeight = 0;
var rightHeight = 0;
$("#stream_one_col").children().each(function() {
if (rightHeight < leftHeight) {
$("#stream_right_col").append(this);
rightHeight += $(this).height();
$(this).children().addClass("stream_right_inner");
}
else {
$("#stream_left_col").append(this);
leftHeight += $(this).height();
$(this).children().addClass("stream_left_inner");
}
});
}
else {
$("#content_left").load("php/stream_left.php");
}
}
And I have an ajax refresh
$(document).ready(
function() {
setInterval(function() {
$('.aroundit').load('php/stream_left.php');
$(".aroundit").divideStream();
}, 3000);
});
Now basically the reloading goes just fine
However, the function (divideStream) wont reload after the ajax is activated
Instead it just keeps jumping back and forth
Can anyone help me?
the function divideStream is not a extend function of jQuery .
You should use this:
$(document).ready(
function() {
setInterval(function() {
$('.aroundit').load('php/stream_left.php');
divideStream();
}, 3000);
});
I'm not quite sure I understand what is happening. But I think you might want to make sure that you run your divideSteam function after the load has completed. You can do it like this.
$(document).ready(
function() {
setInterval(function() {
$('.aroundit').load('php/stream_left.php', function() { //this function runs once load has completed
divideStream(); // as hugo mentioned
});
}, 3000);
});
Related
I am trying to call a function after the image loads completely in DOM.
The image structure is created dynamically on AJAX call success and the image url is also added in success using the result of API call.
Problem:
I want to call a function after the image loads completely in DOM.
To do this I have used JQuery load event.
Function which is called on load.
function carouselHeight() {
$('.home-banner-img-container').each(function() {
var $this = $(this);
var dynamicheight = $(this).parent();
var sectionInnerHeight = $this.innerHeight();
dynamicheight.css({
'height': sectionInnerHeight
});
});
}
I have tried below steps but it didn't worked
$(window).on('load', function() {
carouselHeight();
});
$(window).on('load', 'img.image-preview', function() {
carouselHeight();
});
$(document).on('load', 'img.image-preview', function() {
carouselHeight();
});
The first method $(window).on('load', function() {}) works perfectly on hard reload but on normal reload it is not able to find $('.home-banner-img-container') element which is inside of carouselHeight function.
Please help me to find a solution for this. Thank you.
I have found the solution on stack overflow where I have added the below code in ajax call complete method.
function imageLoaded() {
// function to invoke for loaded image
// decrement the counter
counter--;
if( counter === 0 ) {
// counter is 0 which means the last
// one loaded, so do something else
}
}
var images = $('img');
var counter = images.length; // initialize the counter
images.each(function() {
if( this.complete ) {
imageLoaded.call( this );
} else {
$(this).one('load', imageLoaded);
}
});
I have a Jquery animation that is running the code from its function before the animation is complete. the Page this code is being used at is no where near complete yet but if you want to take a look it's cottageboards.com/orderform
$('#snow').fadeIn(500, "linear", function () {
$('#largeImage').fadeOut(500, function () {
$('#largeImage').attr('src', selectedimg).load(function () {
$('#largeImage').fadeIn(1000, function () {
//Everything below here is running before the above image's fade in is complete
$('#snow').fadeOut(5000);
var selection = 'input[name="' + $(selectionage).data('type') + '_selection"]';
$($('#selected_thumb').val()).attr('src', $($('#selected_thumb').val()).data('regular'));
$(selectionage).attr('src', $(selectionage).data('selected'));
selectedid = '#' + $(selectionage).attr('id');
$('#selected_thumb').val(selectedid);
$('#selected_info').html($(selectionage).data('desc'));
$('#name').html($(selectionage).data('name'));
if ($(selectionage).data('val') === 99) {
$('#upload').show();
$('#displayinfo').hide();
} else {
$(selection).val($(selectionage).data('val'));
$('#upload').hide();
$('#displayinfo').show();
}
$('#next').prop('disabled', false);
});
});
});
});
When rewritten so the load function comes before the src change it works like a charm. Thanks for the help guys!
Working code:
$('#snow').fadeIn(500, "linear", function () {
$('#largeImage').fadeOut(500, function () {
$('#largeImage').unbind().load(function () {
$('#largeImage').fadeIn(1000, function () {
$('#snow').fadeOut(5000);
var selection = 'input[name="' + $(selectionage).data('type') + '_selection"]';
$($('#selected_thumb').val()).attr('src', $($('#selected_thumb').val()).data('regular'));
$(selectionage).attr('src', $(selectionage).data('selected'));
selectedid = '#' + $(selectionage).attr('id');
$('#selected_thumb').val(selectedid);
$('#selected_info').html($(selectionage).data('desc'));
$('#name').html($(selectionage).data('name'));
if ($(selectionage).data('val') === 99) {
$('#upload').show();
$('#displayinfo').hide();
} else {
$(selection).val($(selectionage).data('val'));
$('#upload').hide();
$('#displayinfo').show();
}
$('#next').prop('disabled', false);
});
}).attr('src', selectedimg);
});
});
You are binding the load function to largeimage every time you click. The first click the load function gets called once, the second time, it gets called twice. I suspect everything is getting messed up because you are firing multiple .fadeIns on the same object, and they are running in parallel.
Only call $('#largeImage').load(...) once, not on every click. Of course, you'll have to do something about your captured vars, but that's a different issue. Alternatively, call $('#largeImage').unbind().load(...)
If that's hard to follow, replace this line:
$('#largeImage').attr('src', selectedimg).load(function () {
with:
$('#largeImage').unbind().attr('src', selectedimg).load(function () {
I tested it by putting a break point after this line:
$('#thumbs').delegate('img','click', function() {
and calling $('#largeImage').unbind(); and everything seemed to work, so you can do it that way too.
see this fiddle for example how to use done : http://jsfiddle.net/gcnes8b2/1/
$('span').click(function() {
$('#1').fadeIn({
duration: 1000,
done:function(){
$('#2').fadeOut(1000);
// etc
}
});
});
I have 4 div bars in my home page. I'm loading those div bars by on click. But I want to load the the 1st div when page loading, then the 2nd div should load after 5 seconds. after 5 sec 3rd div should load like wise. this is my code : -
$(document).ready(function () {
$('#click1').click(function () {
$('#desc1').toggle(400);
$('#desc2').hide();
$('#desc3').hide();
$('#desc4').hide();
$('#desc5').hide();
});
});
Thnx,
var delay=5000;
$(document).ready(function () {
$('#desc1').toggle(function(){
$('#desc2').toggle(delay,function(){
$('#desc3').toggle(delay,function(){
$('#desc4').toggle(delay,function(){
$('#desc5').toggle(delay,function(){
});
});
});
});
});
});
Try this
You can show them with delay(ms);
$('#desc2').delay(5000).show();
$('#desc3').delay(10000).show();
$('#desc4').delay(15000).show();
$('#desc5').delay(20000).show();
You should consider setInterval();, cleanest way to achieve that IMHO.
Something like:
$('#click1').click(function () {
var nb = 1;
var int = setInterval( function(){
var el = $('#desc'+ nb);
el.addClass('show');
nb++;
if( nb > 5) {
clearInterval(int);
}
}, 400);
});
I copied that from an old project. Note that I use CSS to toggle the div.
Try this code
$('#click1').click(function () {
$('#desc1').fadeIn(400);
$('#desc2').delay(5000).fadeIn();
$('#desc3').delay(10000).fadeIn();
$('#desc4').delay(15000).fadeIn();
$('#desc5').delay(20000).fadeIn();
})
(function(s){
var i = 2, flag, url;
function load(){
if( i == 6){
console.log("complete output!");
clearTimeout(flag);
return ;
}
//make something
$(selector+i).load(ulr+"&index="+i, function(){
i++;
flag = setTimeout(load,5000);
})
}
load();
})('desc');
toggle can complete display or hide , i would like to use load and setTimeout
I'm implementing a jquery carousel into my page. Because I have used percentage units rather than fixed units, I need to redraw the carousel after window resize.
My problem is that the carousel stops to work correctly and its function call does not behave normally and renders the carousel oddly after resizing using the following code:
jQuery(document).ready(function ($) {
FnUpdateCarousel();
}); // end ready
var lightbox_resize = false;
$(window).resize(function() {
if (lightbox_resize)
clearTimeout(lightbox_resize);
lightbox_resize = setTimeout(function() {
FnUpdateCarousel();
}, 100);
});
function FnUpdateCarousel() {
var widthof =
Math.round(parseInt(jQuery('#services-example-1').css('width'))-(45));
jQuery('#services-example-1').services(
{
width:widthof,
height:290,
slideAmount:6,
slideSpacing:30,
touchenabled:"on",
mouseWheel:"on",
hoverAlpha:"off",
slideshow:3000,
hovereffect:"off"
});
};
Please guide me on how can I make it behave normally.
Here is the solution I reached:
<script type="text/javascript">
var initialContent = jQuery('#services-example-1').html();
jQuery(document).ready(function ($) {
FnUpdateCarousel();
}); // end ready
var lightbox_resize = false;
$(window).resize(function() {
if (lightbox_resize)
clearTimeout(lightbox_resize);
lightbox_resize = setTimeout(function() {
jQuery('#services-example-1').empty();
jQuery('#services-example-1').html(initialContent);
FnUpdateCarousel();
}, 200);
});
function FnUpdateCarousel() {
var widthof =
Math.round(parseInt(jQuery('#services-example-1').css('width'))-(45));
jQuery('#services-example-1').services(
{
width:widthof,
height:290,
slideAmount:6,
slideSpacing:30,
touchenabled:"on",
mouseWheel:"on",
hoverAlpha:"off",
slideshow:3000,
hovereffect:"off"
});
};
</script>
Context: On my product website I have a link for a Java webstart application (in several locations).
My goal: prevent users from double-clicking, i. e. only "fire" on first click, wait 3 secs before enabling the link again. On clicking, change the link image to something that signifies that the application is launching.
My solution works, except the image doesn't update reliably after clicking. The commented out debug output gives me the right content and the mouseover callbacks work correctly, too.
See it running here: http://www.auctober.de/beta/ (click the Button "jetzt starten").
BTW: if anybody has a better way of calling a function with a delay than that dummy-animate, let me know.
JavaScript:
<script type="text/javascript">
<!--
allowClick = true;
linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
$(document).ready(function() {
$('#jnlpLink').mouseover(function() {
if ( allowClick ) {
setImage('images/jetzt_starten2.gif');
}
});
$('#jnlpLink').mouseout(function() {
if ( allowClick ) {
setImage('images/jetzt_starten.gif');
}
});
$(linkElements).click(function(evt) {
if ( ! allowClick ) {
evt.preventDefault();
}
else {
setAllowClick(false);
var altContent = $('#jnlpLink').attr('altContent');
var oldContent = $('#launchImg').attr('src');
setImage(altContent);
$(this).animate({opacity: 1.0}, 3000, "", function() {
setAllowClick(true);
setImage(oldContent);
});
}
});
});
function setAllowClick(flag) {
allowClick = flag;
}
function setImage(imgSrc) {
//$('#debug').html("img:"+imgSrc);
$('#launchImg').attr('src', imgSrc);
}
//-->
</script>
A delay can be achieved with the setTimeout function
setTimeout(function() { alert('something')}, 3000);//3 secs
And for your src problem, try:
$('#launchImg')[0].src = imgSrc;
Check out the BlockUI plug-in. Sounds like it could be what you're looking for.
You'll find a nice demo here.
...or just use:
$(this).animate({opacity: '1'}, 1000);
wherever you want in your code, where $(this) is something that is already at opacity=1...which means everything seemingly pauses for one second. I use this all the time.
Add this variable at the top of your script:
var timer;
Implement this function:
function setFlagAndImage(flag) {
setAllowClick(flag);
setImage();
}
And then replace the dummy animation with:
timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);
If something else then happens and you want to stop the timer, you can just call:
window.clearTimeout(timer);