I got this code bit from another Stack Overflow question, but there seems to be a minor problem. The hash changes correctly as I move from section to section, but when I try to scroll back up, it jumps to the very top instead of a smooth manual scrolling. Any help would be appreciated :)
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<header>
</header>
<body>
<div class="main">
<section id="one" class="section"></section>
<section id="two" class="section"></section>
<section id="three" class="section"></section>
<section id="four" class="section"></section>
<section id="five" class="section"></section>
<section id="six" class="section"></section>
</div>
</body>
</html>
And here is the JS:
$(document).scroll(function(){
$('section').each(function(){
if (
$(this).offset().top < window.pageYOffset
//begins before top
&& $(this).offset().top + $(this).height() > window.pageYOffset
//but ends in visible area
//+ 10 allows you to change hash before it hits the top border
) {
window.location.hash = $(this).attr('id');
}
});
});
instead of pageYOffset you can do $(window).scrollTop() which will return the top of the page offset distance from the top of the document in the window. If you wish to animate the scroll to the property you will want to scroll to the position of the element with the id. If you wish to animate scrolling to the top of the page you can do
$(window).animate({
top: 0
}, 1000);
you can overcome this problem by adding a scroll up animation in javascript, in this way we add delay to the scroll, which gives perfect effect of scroll to top.
Javascript
window.onload = function() {
// short timeout
setTimeout(function() {
$(document.body).scrollTop(0);
}, 15);
};
Related
I have a problem with the code below. The window does not scroll to the third section. The code jumps from slide two to slide four.
In my console log the data is correct 600, 1200, 1800 and 2400.
I tried different things but the bug is still there.
<html>
<head>
<style>
body, html{margin:0;}
.slide{height: 600px;}
button{position:fixed; top:0; left:50%; margin-left:-32px;}
</style>
</head>
<body>
<div class="container">
<div class="slide onscreen" style="background-color:#FFC000;"></div>
<div class="slide" style="background-color:#FF4800;"></div>
<div class="slide" style="background-color:#FFC480;"></div>
<div class="slide" style="background-color:#AA4560;"></div>
<div class="slide" style="background-color:#000000;"></div>
</div>
<button onclick="next()">volgende</button>
<script>
var section = document.getElementsByClassName("onscreen");
function next() {
if (section[0].nextElementSibling) {
section[0].nextElementSibling.className = "slide onscreen";
section[0].className = "slide";
var newTop = section[0].offsetTop;
window.scrollBy(0, newTop);
console.log(newTop);
}
}
</script>
</body>
</html>
These slides are all siblings. So offsetTop is going to be incrementally greater on each slide. Slide 1, 600px, slide 2, 1200px, and so on. window.scrollBy scrolls to the windows current position + the amount given. So if you are at window.scrollY = 0, and pass 600, you'll be at window.scrollY = 600. When you pass 1200 on the next go round, you'll be at window.scrollY = 1800! So now it appears as if you've skipped over slide 3, because you scrolled 2x a slide's height.
Possible answer, if you don't want the challenge of figuring the rest out:
If you have a hardcoded height for your slides, you could try passing a hardcoded scrollBy value as well. Or if you want to make your code a bit more flexible, you could query each slider for its height and pass that value instead. Then you can adjust your slide's height in css-land without breaking your js logic.
I am new to coding and need help with jQuery. I have 2 <div>s (one with an image, the other with a menu list, both 50% width) and I need to be able to click one of the menu options to make a new div (50% width) appear from the right while reducing the other 2 divs width to 25% each. Then clicking on the same menu option to hide the new div and revert back to the original widths. But if I click on another menu option while the new div is visible, I need it to change the content to that specific menu option content.
How can I swap the left-hand <div> out with jQuery?
Here's the HTML I'm working with:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- SCRIPT FILES -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<!-- CSS STYLESHEETS -->
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!--header-->
<div id="container">
<div class="box-container">
<div class="box1">
<img src="images/Untitled-1.png" alt="logo">
</div>
<div class="box2">
<div id="nav">
<ul>
<li><a>hello!</a></li>
<li><a>ADVERTISING</a></li>
<li><a>DESIGN</a></li>
<li><a>ABOUT</a></li>
<li><a>BLOG</a></li>
<li><a>SHOP</a></li>
</ul>
</div><!--nav-->
</div><!--box2-->
<div class="box3">
<div id="ADVERTISING" class="content">ADVERTISING</div>
<div id="DESIGN" class="content">DESIGN</div>
<div id="ABOUT" class="content">ABOUT</div>
<div id="BLOG" class="content">BLOG</div>
<div id="SHOP" class="content">SHOP</div>
</div>
</div><!--box-container-->
</div><!--container-->
<div id="footer">
</div><!--footer-->
</div><!-- wrapper-->
</body>
</html>
Here's a working jsFiddle with the styles: http://jsfiddle.net/YcphY/6/
For starters, here's a method that ties the below examples of how to do this into the animation you're after:
$(function() {
$("#nav").delegate("li","click", function() {
var newDiv = $(".box3 .content").eq($(this).index()-1);
newDiv.siblings().hide().end(); // hide the others
if(newDiv.is(":visible")) {
// if shown, fade it out, when the fade finishes, slide everything back
newDiv.fadeOut(function() {
$(".box3").hide();
$(".box1, .box2").animate({ width: "50%" });
});
} else {
// if not shown, then slide over space, then fade in
$(".box1, .box2").animate({ width: "25%" }, function() {
$(".box3").show();
newDiv.fadeIn("fast");
});
}
});
});
Given your current CSS you can do this:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + $(this).text()).show().siblings().hide();
});
});
Here's a working example, though you can see the CSS will need a bit of work to get it going 100%. I suggest a few changes though: give your links and containers matching IDs, like this:
<li><a id="ad">ADVERTISING</a></li>
<div id="ad-container" class="content">ADVERTISING</div>
Then the JS can be:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + this.id + "-container").show().siblings().hide();
});
});
Here's a working example of that...it allows you to change the text at will and not worry about the JS breaking later. Another alternative yet is to go off the index of the link in the list using .index() of the <li>, if the number of links was consistent with the <div>s in all cases, even if there's an offset because of the "hello!" link.
Here's an example of an index approach with your current HTML:
$(function() {
$("#nav").delegate("li","click", function() {
$(".box3").show();
$(".box3 .content").hide().eq($(this).index()-1).show();
});
});
I think jQuery's animate function might be of use to you.
What you'd need to do is either have a hidden div positioned out of the window added to your HTML (or maybe add it dynamically using jquery on document.ready event, if you prefer) and the use the above mentioned animate function to slide it in and out and bind it to the menu item's click function.
Sample Code
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-1000px"}, "slow");
hidden.removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow");
hidden.addClass('visible');
}
});
});
Explanation
In the above code we are binding code to the click event of an element with a id "slide". Once the element is clicked the code gets initiated. We check if the .hidden has a css class called "visible". If not we animate the hidden div to slide in. and if it has a visible class then slide it out.
Working Fiddle
Here is a working JSFiddle for you
Some pointers
In the hidden div's CSS remember to specify a z-index greater than that of the current left panel.
In the hidden div's CSS remember to set position to absolute and left to around -1200px (or greater than window.width() to make it work on all screen sizes.)
I have a blog at Blogger.com and I want to add a Scroll Triggered Box like Dreamgrow or Qoate Scroll Triggered Box of Wordpress. I referred Scroll Triggered Box with jQuery. I have created a HTML file and testing it but this is not working for me. May be I have mistaken somewhere. My coding is
<html>
<head>
<title>Scroll Triggered Box With jQuery</title>
<style type="text/css">
.Comments
{
font:georgia;
display:none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var y = $(window).scrollTop();
var c = $('#comments').offset();
if (y > (c.top - $(window).height())) {
$('#the_box').fadeIn("slow");
} else {
$('#the_box').fadeOut('slow');
}
});
});
</script>
<div>
<!--My long post here-->
</div>
<div class="Comments" id="the_box">
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments
</div>
</body>
</html>
I am little weak in jScript. I don't know how jScript works.
How can I resolve my issue and get this working in my Blogger.com blog?
i can tell your code is haywire.
var a =$(window).height();
var num = c-y;
if (y > num){
do your function
}else{
do whatever
}
I've been at this for awhile and I'm just stuck. I'm using Win XP, IE8, and JQuery 1.4.4.
What I want is that the nav menu starts under the header. But once the header is out of view, the nav menu will stay at the top of the scrolled window. When the user scrolls back up and header comes back into view, the nav menu should then stay under the header again.
Right now, it's floating but not adjusting the way I want it to.
Here's the code I've tried:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Please make this scrolling work</title>
<link href="Styles/Navigation.css" rel="Stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.4.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
//var bottom = $('#contents').height() + 100;
var bottom = $(window).height();
var top = $('#header').height();
var top_start = top + 1;
var top_limit;
if (document.body.scrollTop <= top_start) {
top_limit = top_start;
}
else {
top_limit = 0;
}
$('#menu-bar').css('top', (top_limit) + "px");
//$('#menu-bar').css('bottom', (bottom) + "px");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="header" style="clear:both;height:40%;">
stuff
<br />
<br />
more stuff
<br />
</div>
<div class="menu-bar" style="float:left;width:25%;" id="menu-bar">
<ul>
<li>Main Page
<ul>
<li>Search</li>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
<li>Blah</li>
</ul>
</li>
</ul>
</div>
<div id="contents" style="float:left;margin-left:25%;">
olwqfjapnwvqjpfqjwfeoqjfepqfewjqpfjnqpefpkqjmewpofqne
<br />
powjunvejpqlewkjrvqpnewkjmqwofvjnewpfoqewkjponqejpewfmqewp
<br />
</div>
And the CSS for the menu:
.menu-bar{
position: fixed;
overflow:scroll;
height:100%;
/*top:0;
bottom:0;*/
}
EDIT:
This was the fix.
<script language="javascript" type="text/javascript">
$(window).scroll(function () {
//var bottom = $('#contents').height() + 100;
var bottom = $(window).height();
var top = $('#header').height();
var top_start = top + 1;
var top_limit;
if ($(window).scrollTop() <= top_start) {
top_limit = top_start;
}
else {
top_limit = 0;
}
$('#menu-bar').css('top', (top_limit) + "px");
$('#menu-bar').css('bottom', (bottom) + "px");
});
</script>
</div>
</form>
</body>
</html>
Though I don't quite understand why:
top_limit = 0; //works but...
top_limit = $(window).scrollTop(); //doesn't work.
I think that what you need is to calculate how much space is there above the screen of the user.
you have to calculate that with
this
$(document).height() // this will give you the size of the whole document
this
window.innerHeight // this will give you the size of the screen
and this
window.pageYOffset // this will give you how much you had scrolled vertically
a long time a made a function in order to make a similar effect that you require, I was needing that the menu stay on top if the header is out of sight, the header was 200px
function scrollControl(){
if(($(document).height() - (window.innerHeight + window.pageYOffset))<=500){
//what to do if the space below is 500px or less, for the footer
}else if(window.pageYOffset>=200){
//what to do if the space above is 200px or more, for the header
}else{
//what to do if the element was in the rest of the space
}
}
this is an old code if you think there is a mistake please be kind, I hope this help you out.
Is it possible to write a JavaScript to make an action when a DIV Layer's scroll bar is manually scrolled up or scrolled down?
If so please give me a hint to implement a simple such as alert box saying you scrolled up and you scrolled down.
You can simple use onscroll event of java-script.
OnScroll Event Reference : http://www.w3schools.com/jquery/event_scroll.asp
Here is example,
<head>
<script type="text/javascript">
function OnScrollDiv (div) {
var info = document.getElementById ("info");
info.innerHTML = "Horizontal: " + div.scrollLeft
+ "px<br/>Vertical: " + div.scrollTop + "px";
}
</script>
</head>
<body>
<div style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
Please scroll this field!
<div style="height:300px; width:2000px; background-color:#a08080;"></div>
Please scroll this field!
<div style="height:300px; width:2000px; background-color:#a08080;"></div>
Please scroll this field!
</div>
<br /><br />
Current scroll amounts:
<div id="info"></div>
</body>
Working copy here : http://jsbin.com/iledat/2/edit
Try jquery scroll event.
$('div').scroll(function(){alert('scrolled!')})