Develop Reference

Animate some divs only once

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!

From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};

var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.

The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});

jQuery responsive hover and click swtich

How to switch hover and click when window size change
function checkWidth() {
var windowsize = $window.width();
if (windowsize > 480) {
$('#clickPoint').on('click', function(){
......//code
});
}else {
$('#clickPoint').on('hover',function(){
......//code
});
}
}();
$(window).resize(checkWidth);
However I found hover is always on, so I had to change to this way
var windowsize = $window.width();
if (windowsize > 480) {
$('#clickPoint').on('click', function(){
......//code
});
}else {
$('#clickPoint').off('click', function(){
......//code
});
$('#clickPoint').on('hover',function(){
......//code
});
}
}();
but still doesn't work properly, if someone has a better solution?Thanks

Take a close look at $window.width(). I suspect that. Try changing it to $(window).width(). Make changes to the code that you provided at the top. Because the code at the bottom looks messed up.
Also make sure to check the window width by using an alert or log. Just to make sure that the if statement is working right.

Try it like this
var permit=2;
$('#clickPoint').on('click', function(){
if(permit==0)
{
......//code
}
});
$('#clickPoint').on('hover',function(){
if(permit==1)
{
......//code
}
});
function checkWidth() {
var windowsize = $(window).width();
if (windowsize > 480) {
permit=0;
}else {
permit=1;
}
}
$(window).resize(checkWidth);

Change font color javascript

I have this code.
$(window).bind("scroll", function() {
if ($(this).scrollTop() > a.top -80) {
$(".introHeader").fadeIn();
} else {
$(".introHeader").stop().fadeOut();
}
Now i want to change the font color of the text in the div called: introHeader.
So:
$(window).bind("scroll", function() {
if ($(this).scrollTop() > a.top -80) {
$(".introHeader").fadeIn();
// Change font color.
} else {
$(".introHeader").stop().fadeOut();
How can i fix this,
$(window).bind("scroll", function() {
if ($(this).scrollTop() > a.top -80) {
$(".introHeader").fadeIn();
document.getElementById('introHeader').color = '#999999';
} else {
$(".introHeader").stop().fadeOut();
Does'nt work ..

$(".introHeader").css('color', '#999').fadeIn();
You're already using jquery. Might as well make use of the css method.
And your sample is not working because color is not a property. You would have to use style.color
document.getElementById('introHeader').style.color = '#999999';

This should work
if ($(this).scrollTop() > a.top -80) {
$(".introHeader").fadeIn();
// Change font color.
$(".introHeader").attr('style', 'color: #999999;');
} else {
...
}
It should be noted there's better ways to do this. Use a CSS class to better refine the child selectors, and then use .addClass('className')

hide sticky navigation when browser resize

I have create sticky navigation for my project and this sticky navigation must show only on desktop mininum 980px and hide below 980px on the fly when I resize my browser.
here is my code
if ($(window).width() > 980) {
$('.stickynav a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 132) {
$('.stickynav').fadeIn(250);
}
else if(scrolltop <= 210) {
$('.stickynav').fadeOut(250);
}
});
}
I create in jsfiddle
how can I resolve this?

You can do this in css with media queries.
#media only screen and (max-width: 979px) {
.stickynav{
display: none;
}
}
I've updated your fiddle: http://jsfiddle.net/cXH5g/2/
Media queries allows you to define css for specific devices/screen size.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

the best way to do this is using CSS3 media queries.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
but if you want to do it with jquery:
$(function(){
if ($(window).width() > 980) {
alert($(window).width());
$('.stickynav').on('click', function(e) {
e.preventDefault();
});
$(window).scroll(function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 132) {
$('.stickynav').fadeIn(250);
}
else if(scrolltop <= 210) {
$('.stickynav').fadeOut(250);
}
});
}
});
I put an alert to see when you code should work.
check this fiddle

Scrolling to show div elements

I'm wanting to show two divs when the page has been scrolled, but once they've appeared not be hidden anymore. The following code works for showing the divs but once I scroll back to the top they hide.
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$("#tip-2").show();
$("#now-available").show();
} else {
$("#tip-2").hide();
$("#now-available").hide();
}
});

How about...
var madeVis = false;
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$("#tip-2").show();
$("#now-available").show();
madeVis = true;
} else if (!madeVis) {
$("#tip-2").hide();
$("#now-available").hide();
}
});