Start function JS when you reach a specific div - javascript

I have the following Javascript code found on the internet, that run well in Chrome and Safari. Only in Firefox and IE the code will not run. Is there an alternative?
$(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
start_count();
}
});
});
function start_count(){
alert('start_count');
//Add your code here
}

Answer:
$(function() {
var oTop = $('.wordpress').offset().top - $(window).height();
$(window).scroll(function(){
var scrollTop = window.pageYOffset;
if( scrollTop > oTop ){
start_count();
}
});
});

Related

Javascript code does not work in Safari browser

I have code that works great on google crome, firefox, ... but it does not work in Safari browser.
What code does? It hide/show logo depends on the section that fixed element goes trought - it works but in Safari logo is just hidden.
Is there something that Safari does not supports?
<script>
jQuery(document).ready(function($) {
$('#logoimode3').css({'display' : 'none'});
$(function() {
var $window = $(window);
var logo = $('#logoimode3');
var div1 = $('#section1stran');
var div2 = $('#section2stran');
var div1_height = div1.height();
var div2_height = div2.height();
$window.on('scroll', function() {
var scrollTop = document.documentElement.scrollTop;
var viewport_height = $window.height();
var scrollTop_bottom = scrollTop + viewport_height;
if (scrollTop >= div1_height && (scrollTop_bottom <= div1_height + div1_height + div2_height )) {
logo.css({'display' : 'block'});
}
else {
logo.css({'display' : 'none'});
}
});
});
});
</script>
Did it.
Change:
$window.on('scroll', function() {
var scrollTop = document.documentElement.scrollTop;
To:
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();

How can I write jquery plugin that works on multiple elements

I wrote following functon and I am trying to use that in different elements but it doesn't work.
$.fn.sticky = function() {
var
scrollTop = $(window).scrollTop();
replace_class = $(this),
sticky = "ceras_sticky_header",
elementOffset = replace_class.offset().top,
distance = (elementOffset - scrollTop),
leftPositionofImage = replace_class.offset().left,
windowWidth = $(window).width(),
elementWidth = replace_class.width(),
rightPosition = (windowWidth - leftPositionofImage - elementWidth - 12);
$(window).scroll(function() {
if( $(this).scrollTop() > distance) {
replace_class.addClass(sticky);
replace_class.css('right',rightPosition);
replace_class.draggable();
} else {
replace_class.removeClass(sticky);
}
});
};
I want to it to work like:
$( ".ancor_controls" ).sticky();
$( ".ancor_controls1" ).sticky();

How to select non-parent elements by class and id with JQuery?

I need to select element by id and class with JQuery function. Problem is that elements are not parents. Smth like this:
<div class="image"></div>
<div id="contact"></div>
My code is working but this isn't a solution.
$(document).ready(function() {
$(window).scroll(function() {
$('.featurette-image').each(function() {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 700);
}
});
$("#contactme").each(function() {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 500);
}
});
});
});
Thanks in advance.
You can join jquery selectors using commas , like so:
$("#contactme, .featurette-image").each(...
This behavior is described in their documentation here: https://api.jquery.com/multiple-selector/
Maybe this :
$("#contactme, .featurette-image").each(function() {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 700);
}
});
or
$(document).ready(function() {
$(window).scroll(function() {
$('body div').each(function() {
if ($(this).hasClass('featurette-image') || $(this).attr('id') == 'contact') {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 700);
}
}
});
});
});

How to adjust page to scroll to center on clicking on carousel?

I'm trying to get it so that when you click on the carousel, the page will adjust to have the carousel in the center. This website (http://studionewwork.com/) shows this when you click on their carousel. I'm still learning about Jquery so I'm not yet adept at commands yet.
http://jsfiddle.net/8bJUc/614/
$(document).ready(function () {
$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});
});
$('.owl-demo').on('click', function(e) {
var el = $( e.target.getAttribute('href') );
var elOffset = el.offset().top;
var elHeight = el.height();
var windowHeight = $(window).height();
var offset;
if (elHeight < windowHeight) {
offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
}
else {
offset = elOffset;
}
var speed = 700;
$('html, body').animate({scrollTop:offset}, speed);
});
Hey I updated your fiddle to make it work: http://jsfiddle.net/8bJUc/649/
Basically you are using $(".owl-demo") as if it's a class, but it's an ID. Then the onClick function tries to get the clicked element but fails doing so.
var el = $( e.target.getAttribute('href') );
This line basically says:
Get the href-attribute from the clicked element and use jQuery to locate any elements matching the href attribute. I removed this since you don't specify the href attribute anywhere.
$('.owl-carousel').on('click', function(e) {
var el = $(".lazyOwl", this);
var elOffset = el.offset().top;
var elHeight = el.height();
var windowHeight = $(window).height();
var offset;
if (elHeight < windowHeight) {
offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
}
else {
offset = elOffset;
}
var speed = 700;
$('html, body').animate({scrollTop:offset}, speed);
});
Please note that the example carousel you posted doesn't work as expected on my Macbook Air 11''. The carousel jumps around whenever I click on it.

Add a class to the sections once they are visible in viewport

This is how I am trying but the condition would never fire..
$(window).scroll(function(e){
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
$('section').each(function(){
var top = $(this).offset().top;
var bottom = top + $(this).height();
if(top <= scrollTop && bottom >= (scrollTop + vieportHeight) ){
$(this).addClass('visible');
console.log('Hola');
}else{
console.log(top,bottom,scrollTop,viewportHeight);
}
});
});
Fiddle: http://jsfiddle.net/rYeMC/
Any idea whyat i'm doing wrong?
In addition to the typo, you have a slight math error. The easiest way I've found to determine if an element is onscreen is to determine the top and bottom of the viewport and compare that with the top and bottom of the element:
$(document).ready(function () {
var viewport = $(window),
setVisible = function (e) {
var viewportTop = viewport.scrollTop(),
viewportBottom = viewport.scrollTop() + viewport.height();
$('section').each(function () {
var self = $(this),
top = self.offset().top,
bottom = top + self.height(),
topOnScreen = top >= viewportTop && top <= viewportBottom,
bottomOnScreen = bottom >= viewportTop && bottom <= viewportBottom,
elemVisible = topOnScreen || bottomOnScreen;
self.toggleClass('visible', elemVisible);
});
};
viewport.scroll(setVisible);
setVisible();
});
Working fiddle: http://jsfiddle.net/rYeMC/2/
Looks like what you want:
http://jsfiddle.net/rYeMC/1/
$(function () {
$(window).scroll(function (e) {
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
$('section').each(function () {
var top = $(this).offset().top;
var bottom = top + $(this).height();
if (top <= scrollTop && bottom >= (scrollTop + viewportHeight)) {
$(this).addClass('visible');
} else {
console.log(top, bottom, scrollTop, viewportHeight);
$(this).removeClass('visible');
}
});
});
});
everything's fine with your code. just correct the typo (vieport) and be aware that the style attribute overrules your external css!
This is the condition
if(scrollTop + viewportHeight >= top ){
$(this).addClass('visible');
}

Categories