We Keep Coding

Show effect only when that section is reached in a website

I have a chart made using d3.js:
Code for chart
I have put this chart within a website.
website
Problem is that in the above website, when you scroll through the page to the "teamchart" section, I don't see the effect of the chart. When you refresh the page, you can see the chart role the effect.
I want the chart to role and show the effect, when I reach that section of the page or when I use the nav bar, click "teamchart" and reach that section.
I used the below JavaScript code, but it's repeating it continuously:
$(document).scroll(function() {
//Basically your position in the page
var x = $(this).scrollTop();
//How far down (in pixels) you want the user to be when the effect to starts, eg. 500
var y = 500;
if (x > y) {
//Put your effect functions in here.
}
});
Fiddle related to the website:
My code related to website (experiment here)

As i understand, your problem is the part where the animation keeps playing.
this is because every time you scroll the page, to a value greater then 500, you actually repeating your code.
Easy solution: place a flag to signal 'alreadyAnimated'
var g_pieChartAnimated=false;
$(document).scroll(function() {
//Basically your position in the page
var x = $(this).scrollTop();
//How far down (in pixels) you want the user to be when the effect to starts, eg. 500
var y = 500;
if (!g_pieChartAnimated && (x > y)) {
g_pieChartAnimated = true;
//Put your effect functions in here.
}
});
Second solution (bit faster):
is to detach the event handler once it did what you want.
function onScroll_AnimateChart() {
//Basically your position in the page
var x = $(this).scrollTop();
//How far down (in pixels) you want the user to be when the effect to starts, eg. 500
var y = 500;
if (!g_pieChartAnimated && (x > y)) {
$(document).off('scroll', onScroll_AnimateChart); // remove myself from the event handlers, so it won't be called again.
//Put your effect functions in here.
}
}
$(document).on('scroll', onScroll_AnimateChart);

Edit
I missed where you said the animation was repeating - #Tomer W solution is correct.
Similar to what #Tomer W posted, but run the chart function (or the chart the whatever function triggers the animation) in your scroll handler:
var chartInit = false;
var handler = function() {
var y = 500;
var x = $(this).scrollTop();
if (x > y && !charInit) {
charInit = true;
someD3ChartStuff();
}
};
$(document).scroll(handler);

I have the 2 following solutions for your issue, hope it helps!
1 - Pure css + jQuery solution
$(window).on('scroll' , function(){
scroll_pos = $(window).scrollTop() + $(window).height();
element_pos = $(".chart-wrapper").offset().top + $(".chart-wrapper").height() ;
if (scroll_pos > element_pos) {
$(".chart-wrapper").addClass('animation');
};
})
and after that manipulate your animation in the class animation
2- Wow.JS Library
1- Download the script here
2- Download the animate.css here
3- Use this snippet as example and understand how it works
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<link rel="stylesheet" href="css/animate.css">
<script>
new WOW().init();
</script>
<div class="wow bounceInLeft animated">
<h2>animated heading</h2>
</div>
Obs.: There's a bunch of animations that you can use with this library + animate.css just use any of the classes below and put the class wow also
Here's the list
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

Fade my background change

I have to change a div bg each 5 seconds.
But I really want to make this transition as a fade effect..
I'm doing this (but I get an abrupt transition instead of a fade one...):
<script>
var bgArr = ["images/1.jpg", "images/2.jpg", "images/3.jpg" ];
var i=0;
var interval = self.setInterval("changeBg()", 5000)
function changeBg() {
if (i>(bgArr.length-1) ) {
i=0
$("#header").css("background-image", "url("+bgArr[i]+")");
}
else {
$("#header").css("background-image", "url("+bgArr[i]+")");
}
i++;
};
</script>
How can I do this transition as a fade... without showing a white space (I mean.. The second image appears slowly over the first one)??
I'm really stuck.. :(

You can try the bgshuffle script. It uses JqueryUI. You will have to include JqueryUI somewhere in your page. The script is posted on github, feel free to extend it if you like:
https://github.com/vikaskumarsingh123/bgshuffle/
You can simply call it like:
shuffleBG( ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'] );//the array of wallpapers
or Advanced Usage:
shuffleBG(['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'], //the array of wallpapers
'10000', //time between wallpaper change, defaults to 10000ms (10secs)
'1000', //fade in fade out animation speed, defaults to 1000ms
'white' //color to fade in and out of, defaults to body backgroundColor or white
);
You will usually be calling this function on document.load and it will start changing the background image fade-in-out every 10 seconds.

How about using .fadeTo():
DEMO: https://jsfiddle.net/w13bhcgt/
$(function () {
var bgArr = ['http://png-5.findicons.com/files/icons/1243/hello_kitty/256/flower.png',
'http://www.vectorimages.org/01/01201101251549265911.png',
'http://media.janm.org/exhibitions/hellokitty/JANM-HelloKitty-icon-bow.png'];
var i = 0;
function Change() {
$("#header")
.fadeTo('slow', 1)
.css("background-image", "url(" + bgArr[i] + ")")
.fadeTo('slow', 0);
i++;
if (i < bgArr.length) setTimeout(Change, 2000);
}
Change(0);
});

Hide a div at specfic height while using slidetoggle()

I have three divs and i am trying to show/hide div2 when we click on any div. So far i have succeeded in it but now i want to implement some animation while show.hide the div.
I tried a lot and read many solution but due to i am new to jQuery i cant do it. Here is my code that i tried before animation
http://jsfiddle.net/9Lw6T/119/
$(".more , .expander,.headingopen").click(function() {
var expanderDiv = $(this).parents(".content_item").find(".textContent");
if ($(expanderDiv).length > 0 && $(expanderDiv).hasClass("expander") ) {
$(expanderDiv).removeClass("expander");
var MoreDiv = $(this).parents(".content_item").find(".more");
$(MoreDiv).html("Mindre");
}
else {
console.log("addclass");
$(expanderDiv).addClass("expander new");
var MoreDiv = $(this).parents(".content_item").find(".more");
$(MoreDiv).html("More");
}
});
jQuery(document).ready(function() {
jQuery(".more , .expander,.headingopen").click(function() {
jQuery('.expander').slideToggle("slow");
});
});
After Animation or slidetoggle
http://jsfiddle.net/9Lw6T/123/
Is there any way to animate the divs and stop at certain height while slideup as before animation i have done it in my first try without animate. Slidedown needs auto hide and its working with this code.
Thanks

There is an issue when using jQuery animate going to auto so you have to do a little work around (see: JavaScript jQuery Animate to Auto Height)
// get the current height
var curHeight = $textArea.height();
// set set the css to auto height and get how tall it is
var autoHeight = $textArea.css('height', 'auto').height();
// set the css back to the original height, then animate to the new height
$textArea.height(curHeight).animate({height: autoHeight}, 1000);
Here it is all together
http://jsfiddle.net/9Lw6T/127/

Equivalent of #keyframes for jQuery

I'm looking for a way to emulate the CSS #keyframes animations using jQuery.
I need to change the background image each x seconds following a list of images provided when the user moves mouse over an element.
The CSS animations should be:
.readon:hover {
animation: readonin 2s;
}
#keyframes readonin {
0% { background-image: url(1.png); }
50% { background-image: url(2.png); }
100% { background-image: url(3.png); }
}
I've found plugins like Spritely but they works with sprites and I need instead to change the image background of the element.
Use the set-interval function of Javascript seems a bad solution because I can't find a way to stop the animation when the user moves the mouse out of the element.

Use something like...
var images = ["1.png", "2.png", "3.png"];
var $element = $(".readon");
var interval = null;
$element.hover(function () {
var $this = $(this);
var i = 0;
var fn = function () {
$this.css("background-image", "url(" + images[i] + ")");
i = ++i % images.length;
};
interval = setInterval(fn, 666);
fn();
},
function () {
clearInterval(interval);
$(this).css("background-image", "none");
});
jsFiddle of a similar concept (with background colours).
It should be clear enough to see what's going on. Basically we start looping over the images and setting them as the background image on mouse over, and reset it when the mouse leaves.

You can use a library like jQuery-Keyframes
to generate new keyframes at runtime if that is what you are after.

Issue with jquery fadein

I have a piece of code here which it works but not sure why my fadein and fadeout doesn't work for the body,
If you think what the issue i'm having please let me know thanks
<script type="text/javascript">
$(window).load(function() {
var lastSlide = "";
$('#slider').nivoSlider({
effect: 'random',
directionNavHide : true,
slices : 15,
animSpeed : 500,
pauseTime : 6000,
controlNav : false,
pauseOnHover : true,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
beforeChange: function(){
if(lastSlide == "images/header_used.jpg") { //use the bg image of the slide that comes before the newslide
$("body").attr("style","background: #000 url(images/bg.jpg) top center no-repeat;").fadeIn("slow");
} else {
$("body").attr("style","background: #ADADAD url(images/bgnd_grad.jpg) repeat-x;").fadeOut("slow");
}
},
afterChange: function() {
t = $(this).children("a:visible");
lastSlide = $("img", t).attr("src");
}
});
});
</script>

While it may solve your mission with the body background. i would instead have used addClass and removeClass. You are manipulating the style attribute which also show/hide uses it.
I have no way to test it but what happens if you switch the fades to show() and hide(), just to determine if delay is a factor.. :)

It my come by the fact that "lastSlide" variable could store multiple object (the one from img and the one from visible link).
t = $(this).children("a:visible");
lastSlide = $("img", t).attr("src"); //could store multiple source.
This make comparation a little bit tricker and could create bug.
Plus the fact that you use the worst way to style your body. As other says, use class or .css jQuery function (http://api.jquery.com/css/).
Hope this help

fadein and fadeout work for body,absolutely.
as Reflective said, it should be
$("body").css("background","#000 url(images/bg.jpg) top center no-repeat;").fadeOut("slow")
if still doesn't work, you may should look into your nivoSlider function