We Keep Coding

how to show div when scroll reach?

divs are showing underneath one bye one of DIV
is there any option to show each .slide on the basis of mouse scrolling ?
go to underneath while scroll up
http://jsfiddle.net/WQ3hE/

You can check out the current scroll top, and then based on that, fire a jQuery code to activate the current tab. That's possible. A few things are unclear about your question. First being, this looks like a homework question. We would like to know what you have done so far. Secondly, you didn't provide what you need to do after the scroll.
$(document).ready(function(){
$(window).scroll(function(){
if (window.scrollY > 100)
$(".slide[data-slide='2']").height(2000);
});
});
Fiddle: http://jsfiddle.net/praveenscience/WQ3hE/1/

Jquery expand and scroll at the same time

I was wondering if the following is possible. Currently I have some code which opens a DIV at the bottom of the page using jquery. It is something as simple as this:
$("#country_slide").slideToggle();
Then I have some example code which scrolls to the bottom of the page (just an example):
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
The trouble is this div that opens up will be off the bottom of the page when it expands, so I want it to not only open but also have the page scroll down to show the now opened div as it is opening.
I can only work out how to fully expand the div, then scroll to the availible area. I want both processes to run at the same time, not one after the other.
Is this possible with jquery, and if it is, can someone please explain how.

Check out this fiddle: JsFiddle
I am calling the events, to display (show, fadeIn, slideDown, etc..) and scroll to element, when the $(document) is ready.
I placed timers in milliseconds for the display function at 3 seconds, and the scroll to at 4 seconds. You can adjust these times as necessary to display your hidden element as you see fit.
CSS
#container{height:850px;background-color:red;width:300px;text-align:center; }
#bottomDiv{display:none;position:relative;top:400px;width:260px;height:200px; background-color:dodgerblue;margin:20px auto;border: 1px solid #000000;text-align:center;}
HTML
<div id="container" style="height:1500px;background-color:red;width:300px;">
<p>I'm opening a div and scrolling below</p>
<div id="bottomDiv" class="tempCss">Bottom Div</div>
</div>
SCRIPT
$(document).ready(function(){
$("#bottomDiv").slideDown(3000);
$('html, body').animate({ scrollTop: $("#bottomDiv").offset().top }, 4000,function(){
});
});

Scroll to Top does not work after hiding elements (jQuery)

Currently I have a function for my menu that scrolls to different divs on the page, as a form of navigation. Currently I'm using the following method.
Scroll to Portfolio
$("html, body").animate({ scrollTop: $('#portfolio').offset().top }, 600);
Since I'm building the entire page dynamically, when someone clicks on a link, I am using .hide() to hide main page elements, and generating additional content.
function hideElements() {
$("#something").hide();
}
While on the content page, if they want to go back to portfolio, they click on the portfolio link again. I'm using the following method to "scroll" them to the re-shown element.
$("#nav").click(){
unhideMainElements();
$("html, body").animate({ scrollTop: $('#portfolio').offset().top }, 1200);
$("#container").fadeIn(300);
}
The problem is, the fade will work, but it won't scroll to the element. I'd figure it has to do with .hide() the element and .show() the element, but I don't know why. I appreciate any insight. Thanks!

You might try the visibility proprety instead of display :
$('#something').css({'visibility':'hidden'}); //or visible
The element should keep his native dimensions without been showed.

Instead of hide() and show(), why don't you try .animate({'opacity':0}) to hide and then .animate({'opacity':1}) to show.

Resolved
The two functions of animation and fadeIn were put into the .show() callback in unhideMainElements();. That way, the animation will only fire when all the .show() completes.
I guess it was a timing thing.
Thanks for your help.

Is there a js function that scrolls a site left right up and down?

I was wondering if anyone knows if there was a javascript or something that scrolls a site left right up and down on a click.
For example I want to create a site with multiple divs. Look at photo below.
I want each div to fit to screen and div 1 being the main div, the starting point. Say that I had a link in the menu for biography and the content for biography was in div 4 and someone click biography, I want the site to move down to div 3 and then right to div 4 and the same thing goes for div 4 and all the divs. When someone clicks a link in the divs I want the site to scroll in a direction I specify, is this possible.
Left Right Up Down

The jquery animate function is the right way.
Here you can find a simple and clear tutorial on how to use it: http://gazpo.com/2012/03/horizontal-content-scroll/
The tutorial is for horizontal scroll only, but you can easily extend to scroll your page in both directions (vertical and horizontal at the same time).

Yes, they are:
.scrollLeft()
.scrollRight()

With jQuery, you can animate the body's scrollTop value to scroll up and down:
$("html,body").animate({
scrollTop: $("#bio").offset().top
}, 1000);
The above code will scroll to the element with the id of #bio.
In terms of scrolling sideways, I supposed you could use a little trick. Set the body's overflow-x to hidden to hide anything that overflows to the right of the browser viewport. Then you can adjust the margin-left of body to "scroll" to the right or left. But, of course, this removes the ability for users to scroll through all of your divs.
$("body").animate({
marginLeft: "-100%"
}, 1000);

you can use jquery animate function ,it will give you more control
$('#div').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
read more from -
http://api.jquery.com/animate/

How to open a div with slideUp in jquery

I have a div that I want when user click on a button slideUp in bottom of page and cover 30% of my page and if user click on that button my div slideDown.How I can do this?
thanks
EDIT 1)
$(document).ready(function () {
$('#btnWorks').on("click", function () {
$('#tblWorks').slideToggle();
});
});
but it open from top to bottom.but I want open it from bottom to top

Check out some of jQuery's documentation:
http://api.jquery.com/slideUp/
http://api.jquery.com/slideDown/

It depends on where you have this element positioned or placed. If it's positioned absolute it may look like it slides up but it is really sliding down. When you call slideToggle() it will slideDown() if the element is hidden, and slideUp() if the element is already visible.
jsFiddle of slideToggle, 2 examples: http://jsfiddle.net/HjJBZ/
You should put the element in a container div and slide the container div down instead which may work better.

Try using jQuery's slideToggle.
http://jsfiddle.net/CLbzf/
$('#trigger').click( function() {
$('#slider').slideToggle();
});​

slideUp hides the elements, slideDown shows the elements. If you've anchored the elements via absolute positioning, you should still use slideDown to show the element, even though it might animate upwards.