We Keep Coding

ADD/REMOVE class based on div/section change with JQuery

I have a fixed image and I need to animate it based on div/section changes
<div class="fixed">
<img src="some_image.jpg" class="child-fixed">
</div>
<section class="section" id="section-1">
//this is rotating section
</section>
<section class="section" id="section-2">
//this is flip section
</section>
and CSS something looks like this,
.fixed{
position:fixed;
margin:50% auto;
width:50px;
height:50px;
}
.fixed-child{
width:100%;
height:100%;
margin:0;
padding:0;
}
.section{
height:100vh;
width:100vw;
}
.rotate{
//some css totate styles here
}
.flip{
//some css flip styles here
}
and JQuery Code will be like this,
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100){
$('.fixed-child').addClass( "rotate");
}elseif($(window).scrollTop() > 200){
$('.fixed-child').addClass( "flip");
}
});
});
Now I need to add rotate class when that image on section-1 and remove rotate class and add flip class when on section-2 with jquery,
I searched for that, I found some examples but using those examples I can add/remove class based on jquery scrollTop() method, but I want jquery detect that class and add corresponding classes when I scroll down and scroll up vice-versa.
I didn't write rotate and flip CSS code to reduce lines here. but those flip and rotate works.
Please help me to achieve this style!

From what I can gather from your question / comments you need something like Waypoints
Waypoints is the easiest way to trigger a function when you scroll to
an element.

I would also use waypoints for something like this, but as an alternative you can try doing something like:
$( document ).ready(function() {
var section_1 = $('#section-1'),
section_2 = $('#section-2');
$(window).scroll(function() {
var scroll_lvl = $(document).scrollTop(),
section_1_lvl = section_1.offset().top,
section_2_lvl = section_2.offset().top;
if(scroll_lvl >= section_1_lvl && scroll_lvl < section_2_lvl) {
$('.fixed-child').addClass( "rotate");
$('.fixed-child').removeClass( "flip");
} else if (scroll_lvl > section_1_lvl && scroll_lvl >= section_2_lvl) {
$('.fixed-child').addClass( "flip");
$('.fixed-child').removeClass( "rotate");
}
});
});

Internal link without id in url

If we need to jump to top section then we can simple write a code
link to top
or just javascript code
location.href=#top
Result : It takes us to top page with url :http://fiddle.jshell.net/_display/#top.
But what my problem is, I dont' want to show /#top query on url string but i want my page to that top section . Reason why i don't want to show that string in url is, my page get stuck if browser don't find 'id' named top .Context or information which i'm displaying is inside a dialog box so that once the dialog box is closed there isn't any id named top then when user tries to refresh that page i.e http://fiddle.jshell.net/_display/#top , page gets stuck .
Can anyone give a better solution for this problem?

You have few options...
You can use pure Javscript:
window.scrollTo(X, Y); (obvisourly X and Y are the scroll coordinates, and top will be 0,0).
Another option (yet non-jQuery based) can be:
document.body.scrollTop = document.documentElement.scrollTop = 0;
If you prefer jQuery based solution, try the following:
$(document).scrollTop(0);
Or, as well:
$(window).scrollTop(0);
Use the option that better suit your need.
Enjoy coding.

Try
$(".link").on("click", function(e) {
$("body").animate({scrollTop: $(".link").not(this).offset().top}, 500);
return false
})
#top, #bottom {
height:400px;
width:100%;
display:block;
}
div:nth-of-type(1) {
background:blue;
}
div:nth-of-type(2) {
background:orange;
}
span {
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="top">top <span class="link">go to bottom</span></div>
<div id="bottom">bottom <span class="link">go to top</span></div>

Demo Here
Html
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
Jquery
$(document).ready(function (){
$("#click").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
//});
});
});

Links for triggering a certain <div> to slide up and a link for triggering the <div> to slide down

I'd like to make some (let's say 2) links that will trigger a specific to appear by sliding up , then another link that will trigger the specific to huide by sliding down.
The links are generated dynamically by a certain application (something like looping which I personally don't understand)
After researching in this site, I tried the code below but found some problems:
only the first link for sliding up worked well, other blue links didn't work
Current script is sliding up and down the content for each click on the blue link.
I can't figure out how to break apart the script so I can apply sliding up script only for the blue links and the sliding down script for the red link.
to be noted, the blue links are dynamically generated based on a certain application loop, so practically there is no fix number for the amount of the blue links being displayed.
This is the code :
$(function(){
var list = $('#slidingcontent'),
button = $('#triggerup'),
speed = 500;
list.hide().css('bottom', button.css('top'))
.css('margin-top', list.outerHeight() * -1);
button.toggle(function(e) {
e.preventDefault();
e.stopPropagation();
list.slideDown(speed);
},function(e){
e.preventDefault();
e.stopPropagation();
list.slideUp(speed);
});
});
#slidingcontent{
position:absolute;
}
.linkcontainer{
text-align:center;
}
.sliding_up_link a, .sliding_down_link a, #slidingcontent{
color:white;
margin: 1px;
padding: 1px;
text-decoration:none;
font-weight:bold;
}
.sliding_up_link a{
background:blue;
}
.sliding_down_link a{
background:red;
}
#slidingcontent{
background:green;
}
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<div class= "linkcontainer">
<span class="sliding_up_link" id="triggerup" >
<a href ="#">
triggerup1 (for sliding upward)</br>
the amount of links(for triggering content to slide up) is uncertain based on conditions (it maybe only 1 link, or 3 links like this, or 7 links, or 15 links, etc)
</a>
</span>
</div>
<div class= "linkcontainer">
<span class="sliding_up_link" id="triggerup" >
<a href ="#">
triggerup2 (for sliding upward)</br>
the amount of links(for triggering content to slide up) is uncertain based on conditions (it maybe only 1 link, or 3 links like this, or 7 links, or 15 links, etc)
</a>
</span>
</div>
<div class= "linkcontainer">
<span class="sliding_down_link" id="triggerdown" >
<a href ="#">
triggerdown (for sliding down)</br>
only one link (for triggering content to slide down) will be displayed
</a>
</span>
</div>
<div id="slidingcontent">
content here
</div>
</body>
Thanks for help :)

This works for me. I corrected the HTML validation errors in your code as well.
jQuery(function ($) {
$(document).ready(function() {
$("#slidingcontent").css({"display": "none", "opacity": "1"});
});
$(window).load(function () {
var speed = 500,
target = $("#slidingcontent");
$(".sliding_up").on("click", function () {
target.slideDown(speed);
});
$(".sliding_down").on("click", function () {
target.slideUp(speed);
});
});
});
#slidingcontent {
position:absolute;
bottom: -2px;
opacity: 0;
padding: 0!important;
}
.linkcontainer {
text-align:center;
}
p.sliding_up, p.sliding_down, #slidingcontent {
color:white;
margin: 1px;
text-decoration:none;
font-weight:bold;
}
p.sliding_up, p.sliding_down {
cursor: pointer;
display:inline-block;
}
p.sliding_up {
background:blue;
}
p.sliding_down {
background:red;
}
#slidingcontent {
background:green;
}
.wrap {
overflow-y: hidden;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="linkcontainer">
<p class="sliding_up">trigger up 1 (for sliding upward)</p>
</div>
<div class="linkcontainer">
<p class="sliding_up">trigger up 2 (for sliding upward)</p>
</div>
<div class="linkcontainer">
<p class="sliding_down">triggerdown (for sliding down)</p>
</div>
<div id="slidingcontent">content here</div>
</div>

Create fade-out and slide-in animation for HTML content

I am trying to get an animation effect where current content fades out, and is then replaced by content sliding in from the right side of the screen. My current effort:
http://jsfiddle.net/LKazq/3/
<p>header</p>
<div id="wrapper">
<div style="height: 400px; background-color: red;">
<p>Here is some text!</p>
<button id="next">And a button!</button>
</div>
</div>
<p>footer</p>
$('#next').click(function () {
var current = $('#wrapper :first-child');
var next = $('<div>').css("height", "400px").css("background-color", "blue");
next.hide();
current.fadeOut(800, function () {
current.remove();
$('#wrapper').prepend(next);
next.show("slide", { direction: "right" }, 800);
});
});
Two problems:
The removed element is still taking up space; notice how the footer gets pushed down.
Is there anyway to suppress the horizontal scroll bar?
Any tips on better ways to do this are appreciated. Thanks!

The reason for the vertical scroll back is because of an additional UI wrapper that jQuery UI puts in place.
You can do this with regular jQuery and it should be just fine:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').css({
height:400,
backgroundColor:'blue',
marginLeft:'100%',
display:'none'
});
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().animate({marginLeft:0},800);
});
});
Updated jsFiddle.
That's the quick-fix way to do it. An additional step is to externalize your CSS into classes (which you really, really should do instead of inline styles) to make things a bit cleaner:
HTML:
<p>header</p>
<div id="wrapper">
<div class="first">
<p>Here is some text!</p>
<button id="next">And a button!</button>
</div>
</div>
<p>footer</p>
CSS:
wrapper {
overflow:auto;
overflow-x:hidden;
}
.first {
height:400px;
background-color:red;
}
.second {
height:400px;
background-color:blue;
}
Better jQuery:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').addClass('second').css({
marginLeft:'100%',
display:'none'
});
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().animate({marginLeft:0},800,function(){
$(this).removeAttr('style');
});
});
});
Here is a second jsFiddle for that.
And finally the best (although not ancient-browser compliant) way to do it, by maximizing CSS.
CSS:
#wrapper {
overflow:auto;
overflow-x:hidden;
}
.first {
height:400px;
background-color:red;
}
.second {
height:400px;
background-color:blue;
margin-left:0;
-webkit-transition:margin-left 800ms;
-moz-transition:margin-left 800ms;
-o-transition:margin-left 800ms;
transition:margin-left 800ms;
}
.secondPushed {
margin-left:100%;
}
Smaller jQuery:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').addClass('second secondPushed').hide();
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().removeClass('secondPushed');
});
});
This is the best from an overhead perspective, and its the way to do it in the modern web world, but it doesn't work on IE9 and below.
Here's a jsFiddle for that one.

duplicate div then do a horizontal scroll

I'm trying to clone #main then put my ajax result there (hidden), after doing so I will make it scroll horizontally to the left hiding the current one then display the clone.
HTML:
<div class="container">
<div id="main">
<p>Click here to start</p>
</div>
</div>​
CSS:
#main{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
}
.container {
position:relative;
}
​
Javascript:
$('#main').click(function(){
//clone.html(data)
var clone = $(this).clone().html('<p>Ajax loaded content</p>').css(
{position:'absolute',right:'0','margin-right':'-460px',top:0}
).attr('class','love').insertAfter($(this));
$(this).css({position:'relative'});
var width = $(window).width()-$(this).outerWidth()/2;
$('#main').animate({'left':'-'+width},4000);
});
but i'm stuck on the idea on how to make both #main animate to the left and position the second div at the center?
Fiddle
EDIT: Now i'm only stuck on how to animate the clone.

I sort of took a different approach to your question, is this kind of what you are looking for?
http://jsfiddle.net/3s7Fw/5/show
I thought, rather than do some animating ourselves, why not let jQuery's hide function do it for us? This could definitely be made to work better, but it communicates the thought.
JavaScript
$('.container').on('click', '.loaded-content', function(){
$this = $(this);
//clone.html(data)
var clone = $this.clone().html('<p>Ajax loaded content</p>').attr("id", '');
$this.after(clone);
$this.hide('slow');
});​
HTML
<div class="container">
<div id="main" class="loaded-content">
<p>Click here to start</p>
</div>
</div>​
CSS
#main, .loaded-content{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
float: left;
}
.container {
position:relative;
width: 920px;
}
​If this is not the desired functionality, then you might be interested in a slider. There are a number of good slider plugins already out there that you can use. The difficult part would probably be adding a addNewSlide function to your chosen slider, assuming it didn't already have one.