My code seems to be working fine on JSfiddle, but once im placing it to the a webpage that has jquery already loaded in the DOM, i get this console error, as seen on the screenshot.
The iframe selector that I do target, exists.
Any ideas?
$(document).ready(function() {
var stickyTop = $("iframe[id*='google_ads_iframe']").offset().top;
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop && $(".adSlot.headBanner").height() - $(".sticky").height() > windowTop) {
$("iframe[id*='google_ads_iframe']").css('position', 'fixed');
} else {
$("iframe[id*='google_ads_iframe']").css('position', 'relative');
}
});
});
$("iframe[id*='google_ads_iframe']")
will return array. You need to iterate through each of them.
Something like this
$("iframe[id*='google_ads_iframe']").each(function(i, val){
$(val).offset().top;
...
});
Related
I want to load ajax data when I reach the end of a particular div.
I use now :
$(window).scroll(function() {
if (! loadingAjax) {
if ($(window).scrollTop() > ($element.offset().top + $element.outerHeight() - 500)) {
from++;
loadingAjax = true;
loadMyData(from);
}
}
});
It seems a little random when I show console for example, or on smartphone.
What is the best way to detect user is reaching end of a div ($element here) ? With an offset of 50px for example before the end ?
Please have a look at the solution and you will be console logged in the last div.
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top +
$('.posts').outerHeight() - window.innerHeight) {
console.log('End Div');
}
});
I need help with this since it's showing and I tried with global variable etc an issue remains..
var $ = jQuery;
var $window = $(window),
$moving1 = $(".scroller1"),
$holder1 = $("#scroller-wrap1"),
offset1;
$window.load(function() {
offset1 = $holder1.offset();
});
$window.scroll(function() {
if ($window.scrollTop() > offset1.top) {
$moving1.addClass('fixed');
} else {
$moving1.removeClass('fixed');
}
if ($window.scrollTop() > (offset1.top + $holder1.height() - $moving1.height() - 60)) {
$moving1.removeClass('fixed', 1000);
}
//console.log("scroll: " +$window.scrollTop());
});
Basically I am checking if the windows if fully loaded so I can make the calculations without error but I guess it's not correct.
This is inside wordpress that's why I need the jQuery part.
Ok. The error is coming from this command:
if ($window.scrollTop() > offset1.top) {
and it means that offset1 is undefined. Now, you are initializing offset1 in your .load event, but you are setting it equal to $holder and $holder1 is initialized before the document is ready, so it becomes undefinded.
Your code can be reduced greatly by just adding a document.ready function. You also don't have to do this var $ = JQuery as that is automatic.:
// Passing a function to JQuery creates a "document.ready()" callback
// function that will automatically be executed when the DOM is built.
$(function(){
var $window = $(window);
var $moving1 = $(".scroller1");
var $holder1 = $("#scroller-wrap1");
var offset1 = $holder1.offset();
// JQuery recommends the use of the .on() function to bind
// event callbacks as opposed to event methods.
$window.on("scroll", function() {
if ($window.scrollTop() > offset1.top) {
$moving1.addClass('fixed');
} else {
$moving1.removeClass('fixed');
}
if ($window.scrollTop() > (offset1.top + $holder1.height() - $moving1.height() - 60)) {
$moving1.removeClass('fixed', 1000);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hey guys I am having an issue with $(window).width if statements in jQuery. For some reason my function is running even when the window width is smaller than 991 pixels however my if statement states that it should run if the window width is greater than 991.
function ctaFixTop() {
var mn = $("#new-car-offer-cta");
var offerHead = $('#new-car-offer-head');
mns = "new-car-offer-cta-active";
var hdr = 0;
var ctaHeight = $("#new-car-offer-cta").height();
$('.header-wrapper, #top-bar, #new-car-back, #new-car-offer-head').each(function() {
hdr += $(this).outerHeight();
});
if ($(window).width() > 991) {
$(window).scroll(function() {
if ($(this).scrollTop() > hdr) {
offerHead.css('margin-bottom', ctaHeight);
mn.addClass(mns);
} else {
offerHead.css('margin-bottom', 0);
mn.removeClass(mns);
}
});
}
}
$(window).resize(ctaFixTop);
ctaFixTop();
As you can see the ctaFixTop function is being called twice, once on initial load and whenever the window is resized. When I initially load the page with a window width below 991px the function works how it should however if I then increase the windows size past 911px and size it back down under 911px the $(window).scroll function will be called even when it's wrapped in the if statement that states that it should only run if the window width is greater than 991.
Any idea why this might be happening as I have tried trouble shooting this and simply can't understand why the function is being called even with the if statement around it.
Thanks
That is because the scroll event is already attached to the window and you are not removing it. What you need to do is put the
if ($(window).width() > 991) {
inside the .scroll() method like this.
$(window).scroll(function() {
if ($(window).width() > 991) {
if ($(this).scrollTop() > hdr) {
offerHead.css('margin-bottom', ctaHeight);
mn.addClass(mns);
} else {
offerHead.css('margin-bottom', 0);
mn.removeClass(mns);
}
}});
I do not understand why my variable assignment: var mn = $("nav"); is not working in this piece of code:
var mn = $("nav");
var randomNum = 23;
$(window).scroll(function() {
if( $(this).scrollTop() > 400 ) {
$("nav").addClass("main-nav-scroll");
alert(randomNum);
} else {
mn.removeClass("main-nav-scroll");
}
});
When I manually write it out in $("nav").addClass(...); it works perfectly. I thought the problem was maybe the scope of the variable so I added the randomNum variable to print out and it does so just fine. I'm really stumped. It took me forever to find this simple error So I'd like to understand for next time. Thanks.
Your problem is likely nav. It is a dom element just like <p>. So when you try to select it your query is to general.
Give nav and ID and select it that way.
For example
HTML
<nav id "foob"></nav>
JS
var mn = $("#foob");
In Addition
Also, put a console.log('scroll event fired') in your event handler so that you can verify that the event is actually firing.
This works:
<script type="text/javascript">
jQuery(document).ready(function ($selimatac) {
// öncelikle divi bir gizleyelim
$selimatac("#yukari").hide();
//scroll eğer 100 değerinin üstünde ise divi görünür yapacak, değilse gizleyecektir
$selimatac(function () {
$selimatac(window).scroll(function () {
if ($selimatac(this).scrollTop() > 100) {
$selimatac('#yukari').fadeIn();
} else {
$selimatac('#yukari').fadeOut();
}
});
// butona tıklayınca sayfa en üste çıkması için
$selimatac('div a').click(function () {
$selimatac('window,html,body').animate({
scrollTop: 0
}, 1000);
return false;
});
});
});
</script>
Look at http://selimatac.net/jquery-scrolltop-ile-yukari-cik-butonu/ for more information.
Maybe your var gets rewritten somewhere in your code. Try another var name
I am using the Jquery plugin isotope. Depending on the screen resolution I need to destroy the isotope widget to prevent it from running its function. I am using the following code:
$(window).smartresize(function(){
if($(window).width() < 700) {
container.isotope('destroy');
}else {
container.isotope({$options});
}
});
This works fine on the first resize, the isotope widget is destroyed. However, if I resize again (below 700px) the following exception is thrown:
cannot call methods on isotope prior to initialization; attempted to call method 'destroy'
How can I check to see if container.isotope exists before running container.isotope('destroy');?
Complete Working Code
$(window).load(function(){
var container = $('{$this->selector}')
if($(window).width() > 701){
container.isotope({$options});
}else{
container.isotope = false;
}
$(window).smartresize(function(){
if($(window).width() < 700) {
container.find('.item').removeAttr('style');
if(container.isotope) {
container.isotope('destroy')
container.isotope = false
}
} else{
container = $('{$this->selector}')
container.isotope({$options})
}
});
});
$(window).smartresize(function(){
if($(window).width() < 700) {
if(container.isotope) {
container.isotope('destroy')
container.isotope = false
}
} else if(container.isotope) {
container.isotope({$options})
}
})
How about:
if (container.isotrope)
//It exists. Do whatever
else
//Does not exist. Do whatever else
end