So this question is not necessarily how to get it to work, because it does. But it is very very buggy. The problem I'm having is that when you scroll down, it sometimes takes a while to load so that the function reactivates or something. Either way the variable is reset and it loads like 5 pages in a row. So it's buggy. I have the code here:
var ldid = 10;
jQuery(
function ($) {
$('#allpostcontainer').bind('scroll', function () {
if ($(this).scrollTop() +
$(this).innerHeight() >= $(this)[0].scrollHeight) {
$("#allpostcontainer").append($("<div>").load("/streampage.php?id=" + ldid, function () {
ldid = ldid + 10;
}));
}
})
}
);
You can use a flag.
If it is loading you can set it to true.
If loading finished you set it back to false
and you make ajax request only if it is false.
var ldid = 10,
isPageLoading = false;
jQuery(
function ($) {
$('#allpostcontainer').bind('scroll', function () {
if ($(this).scrollTop() +
$(this).innerHeight() >= $(this)[0].scrollHeight && !isPageLoading) {
isPageLoading = true;
$("#allpostcontainer").append($("<div>").load("/streampage.php?id=" + ldid, function () {
ldid = ldid + 10;
isPageLoading = false;
}));
}
})
}
);
If you want to set your Div tag at the end of the "allpostcontainer" div then put below script in your page.
(#bottom is Div tag id which you need to display at the bottom. #allpostcontainer is div tag id which is main Div with scroll)
<script>
$(document).ready(function () {
$('#bottom').css('position', 'absolute');
$('#bottom').css('top', $('#allpostcontainer').height() - $('#bottom').height());
});
</script>
Please let me know if you have any query.
Thank you...
Related
I try to resize an iframe with jQuery and JS. First I get the iframe out of a list of iframes and resize it when the iframe-content is ready.
NOTE: The two-steps resize is necessary because otherwise after the
content of the iframe-page is a huge space.
Problem: In the while-loop I check if the content of the iframe is ready, when not I set a timeout of 1 second. But jQuery don’t check if the content ready it always goes inside the if and try to resize the iframe but fails because jQuery cannot get the size of a NULL element.
Has someone of you a solution for my problem?
My Code:
$(document).ready(function () {
var iframes = $(".my-iframe");
$.each(iframes, function () {
resizeIframe(this);
});
});
function resizeIframe(iframe) {
$(iframe).width("100%");
var iframeIsReady = false;
do
{
if ($(iframe).ready)
{
var iframeHeight = iframe.contentDocument.body.scrollHeight;
$(iframe).height(iframeHeight);
var iframeContentHeight = $(iframe).children("#DivInPage").height();
$(iframe).height(iframeContentHeight);
iframeIsReady = true;
}
else
{
setTimeout(resizeIframe(iframe), 1000);
}
}while(!iframeIsReady);
}
Edit:
Check out my solution
Hi there is small change in your code please check following.
$(document).ready(function () {
var iframes = $(".my-iframe")[0]; // $(".my-iframe"); /Edited
$.each(iframes, function () {
resizeIframe(this);
});
});
function resizeIframe(iframe) {
$(iframe).width("100%");
var iframeIsReady = false;
do
{
if ($(iframe.contentDocument).ready) // added 'iframe.contentDocument' instead of iframe
{
var iframeHeight = iframe.contentDocument.body.scrollHeight;
$(iframe).height(iframeHeight);
var iframeContentHeight = $(iframe).children("#DivInPage").height();
$(iframe).height(iframeContentHeight);
iframeIsReady = true;
}
else
{
setTimeout(resizeIframe(iframe), 1000);
}
}while(!iframeIsReady);
}
try this.
I checked code again found that $(".my-iframe") returns array of element object.
We need object here not array.
So i hard coded 0th index. you can use id instead of this.
Solution of my problem is:
$(document).ready(function () {
var iframes = $(".my-iframe");
$.each(iframes, function () {
resizeIframe(this);
});
});
function resizeIframe(iframe) {
$(iframe).width("100%");
setInterval(function () {
//Check if the Content inside the iframe is ready
if ($(iframe.contentDocument.body).ready) {
var iframeHeight = iframe.contentDocument.body.scrollHeight;
$(iframe).height(iframeHeight);
var iframeContentHeight = $(iframe).children("#DivInPage").height();
$(iframe).height(iframeContentHeight);
//Close the Function
return;
}
}, 1000);
}
I have small angular SPA with couple routes. What I wanted is to have fadein effect only on #/welcome/ page. My jquery works ok but the problem is - its running on all pages and in another pages elements what should be animated just doesnt exist and thats the reason I have errors on my console when user scroll... I tried run script only when route changed and than check if location is /#/welcome but it always running even if not... I tried to put code only to controller which should scoped it to section with animating elements but it also run in another pages... Im confused please help
$scope.$on('$routeChangeSuccess', function() {
if (window.location.hash == '#/welcome') {
function check(element , fadeEffect ) {
$(window).on('scroll' , function(){
var position = $(document).scrollTop() + $(window).innerHeight() ;
var elem = $(element).offset().top + ($(element).innerHeight()) / 2;
if (elem <= position) {
$(element).addClass(fadeEffect);
}
else {
$(element).removeClass(fadeEffect);
}
});
}
check('.tablet' , 'fadeInRight');
check('.padding' , 'fadeInLeft');
}
else {
console.log('another page');
}
});
Your app is SPA, so once you add event to window it will keep until you close the browser tab.
You have to remove the event on destroying welcome page, so remove all those codes and add these to your welcome page controller:
//in welcome page controller
var onScroll = function(){
var queries = [
{elm: '.tablet', effect: 'fadeInRight'},
{elm: '.padding', effect: 'fadeInLeft'}
];
for (var i=0, j=queries.length; i<j; i++) {
var position = $(document).scrollTop() + $(window).innerHeight() ;
var elem = $(queries[i].elm).offset().top + ($(queries[i].elm).innerHeight()) / 2;
if (elem <= position) {
$(queries[i].elm).addClass(queries[i].effect);
}
else {
$(queries[i].elm).removeClass(queries[i].effect);
}
}
}
$(window).on('scroll' , onScroll);
$scope.$on('$destroy', function() {
$(window).off('scroll' , onScroll);
});
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 am trying to add class or remove class on getting element top by using This DEMO . Here is the code as well:
$(document).ready(function () {
var sec1_offset = $("#sec1").offset();
var sec2_offset = $("#sec2").offset();
var sec3_offset = $("#sec3").offset();
var sec4_offset = $("#sec4").offset();
var sec5_offset = $("#sec5").offset();
var sec6_offset = $("#sec6").offset();
var sec7_offset = $("#sec7").offset();
$("section").scroll(function () {
if (sec4_offset.top < 100) {
alert("You Are in Sec 4");
}
});
});
I also change the $("section").scroll(function () { to $(body).scroll(function () { and $(document).scroll(function () { but it didn't work!
Can you please let me know what I am doing wrong? Thanks
You can listen to the scroll event of the window object, scroll event like the resize event is fired so many times, for efficiency you can throttle the handler, ie the handler is executed after a specified timeout.
$(document).ready(function () {
var $sec = $("section"),
handle = null;
var $w = $(window).scroll(function () {
// clear the timeout handle
clearTimeout(handle);
// throttling the event handler
handle = setTimeout(function() {
var top = $w.scrollTop();
// filtering the first matched element
var $f = $sec.filter(function() {
return $(this).offset().top + $(this).height() >= top;
}).first().addClass('active');
$sec.not($f).removeClass('active');
}, 50);
}).scroll();
});
http://jsfiddle.net/UTCER/
edit: If you want to add a class to another element, the most efficient way is using the index method:
// Cache the object outside the `scroll` handler
var $items = $('#menu li');
// within the `setTimeout` context:
var $f = $sec.filter(function() {
return $(this).offset().top + $(this).height() >= top;
}).first();
$items.removeClass('active').eq( $sec.index($f) ).addClass('active');
use $(window).scroll for the scroll event listener
also you want to check sec4_offset.top against window.scrollY
JS
$(document).ready(function () {
var sec1_offset = $("#sec1").offset();
var sec2_offset = $("#sec2").offset();
var sec3_offset = $("#sec3").offset();
var sec4_offset = $("#sec4").offset();
var sec5_offset = $("#sec5").offset();
var sec6_offset = $("#sec6").offset();
var sec7_offset = $("#sec7").offset();
$(window).scroll(function () {
if (window.scrollY >= sec4_offset.top) {
alert("You Are in Sec 4");
}
});
});
JSFiddle Demo
Use $(window).scroll()
Here's what jQuery documentation says about scroll event
The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).
I know this answer has already been answered, but I'd like to provide an alternative answer on JSFiddle that might accomplish what you're looking for to a more dynamic extent. I would not ask to be voted as the answer, but simply noted as a reference for an alternative approach to this problem
http://jsfiddle.net/mLfAq/5/
$(document).ready(function () {
var offsets = [];
$('[id^="#sec"]').each(function() {
offsets.push([$(this).attr('id'), $(this).offset().top + $(this).height()]);
});
$(window).scroll(function () {
for(var i = 0; i < offsets.length; i++) {
if(offsets[i][1] > $(window).scrollTop()) {
console.log('You are in ' + offsets[i][0]);
return;
}
}
});
});
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);
});