I wrote the following code that includes a "down arrow" which when pressed, is meant to scroll the page down one section at a time. It only seems to work once though - can anyone see what I've done wrong?
Note: The body height intentional and is enough to support my needs.
<STYLE>
*{margin:0;padding:0}
body{height:1000px; width:2000px; overflow:hidden;}
SECTION{border: 1px dashed black; height:100px; width:300px; overflow:auto; float:top;}
.int{position:relative; width:100px;height:100px;background:#fff; float:left;}
</STYLE>
<SECTION ID="1">1</SECTION>
<SECTION ID="2">2</SECTION>
<SECTION ID="3">3</SECTION>
<SCRIPT SRC="jquery.js"></SCRIPT>
<SCRIPT SRC="jquery.easing.1.3.min.js"></SCRIPT>
<SCRIPT>
function scroll($dir){
// This is the main scroll function
if($dir=="down")
$('html,body').stop().animate({
scrollTop: $('html,body').offset().top + $("SECTION#1").height()
}, 800, "easeInQuart");
}
// Function which controls key-based navigation
$(document).on("keydown", function(e) {
if(e.which == 40) scroll("down");
});
</SCRIPT>
$('html,body').offset().top + $("SECTION#1").height() always returns the same value. So that is why it is not working.
As a solution, try $(document).offset().top or use a counter like so:
var currentPage = 0;
function scrollDown() {
$(...).animate({scrollTop: pageHeight * (currentPage++)});
}
Related
So what I want to do is have a page that is split into 4 divs (let's say 1, 2, 3, and 4). So whenever I try to scroll down after div 1, the page would automatically scroll to div 2; if I try to scroll my mouse down below div 2, it would scroll automatically to div 3; and the same way for div 3 to div 2, etc. I'm sure you have seen something similar to this in some online pages (can't think of any right now but if I find something I will link it).
Basically what it would do is, when you scroll up from a div it would animate the transition to the top of the previous div on its own.
I tried using jQuery and doing scrollTop, but couldn't get it to work.
See this:
$('html, body').animate({scrollTop: $('#div1').offset().top},'slow');
The whole code took me a long time to make
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var n=1;
var classes=$('.class').length;
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
n--;
n=n<1?1:n;
} else {
n++;
n=n>classes?classes:n;
}
//to prevent duplicate event
setTimeout(function () {
$('html,body').animate({scrollTop: $('.class[data-number='+n+']').offset().top},'fast');
},10);
});
});
</script>
<style>
html, body {
margin: 0;
height: 100%;
}
.class{
height: 100%;
}
.class:nth-child(2n){
background: red;
}
.class:nth-child(2n+1){
background: blue;
}
</style>
</head>
<body>
<div class="class" data-number="1" ></div>
<div class="class" data-number="2" ></div>
<div class="class" data-number="3" ></div>
<div class="class" data-number="4" ></div>
</body>
</html>
I am trying to swap divs in IE 9 and less. But my javascript is not working. Can anybody help me out?
You can see my script here: http://jsfiddle.net/pny71Lqd/
Not sure why the JS is also not working on jsfiddle. It is working in my browsers (also IE), but when i try IE 9 or smaller it brakes down.
Find the code below:
<style>
body{ background:#f6f6f6;}
#container2 {
width: 926px;
}
#leftCol2{ float: left;
width: 300px;
background:#FFFFFF;
}
#rightCol2{float:left;
width:300px;
background: #FF9;
}
</style>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$(window).resize(function() { //Fires when window is resized
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width < 1024) {
$("#container2").each(function() {
var detach = $(this).find("#leftCol2").detach();
$(detach).insertAfter($(this).find("#rightCol2"));
})
}
else {
$("#container2").each(function() {
var detach = $(this).find("#rightCol2").detach();
$(detach).insertAfter($(this).find("#leftCol2"));
})
}
});
});//]]>
</script>
</head>
<body>
<div id="container2">
<div id="leftCol2">
<p>Div 1.</p>
</div>
<div id="rightCol2">
<p>Div 2.</p>
</div>
</div>
As you can see I try to swap around leftCol2 with rightCol2 when the screen is resized smaller than 1024. Actually I'd like also the divs to be swapped around when the page is just loaded (and not necessarily resized). Who can help? Thank you very much!
Seemed to be a problem with my emulator. Got a different one and it worked for IE9 and less!
I'm making a simple javascript game where you click the ball, it goes up, and you have to click it again before it touches the ground. How do I make it so that you click the ball on the way down and it stop the last request and begin moving back up again?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function moveBall() {
$.fx.speeds._default = 3000;
$("#ball").animate({bottom:'360px'});
$("#ball").animate({bottom:'0px'});
setTimeout( function(){
document.getElementById("block").innerHTML = "Game Over";
}, 6000 );
}
</script>
<style>
#ballGame {
height:350px;
width:350px;
border-style:solid;
border-width:5px;
overflow:hidden;
}
#ball {
background:#98bf21;
height:50px;
width:50px;
position:relative;
border-radius:100px;
outline:0;
}
#block {
height:300px;
}
</style>
<div id="ballGame">
<center>
<div id="block"></div>
<button id="ball" onclick="moveBall()"></button>
</center>
</div>
Try $("#ball").stop(true, false) at the beginning of your moveBall function.
See the jQuery doc : http://api.jquery.com/stop/
Since you are already using jQuery, I would clean up the code a little first; you don't need to call a function (onclick="moveBall()") within the HTML code. Instead, just create a click-function:
$('#ball').click(function() {
$('#ball').stop(true);
$("#ball").animate({bottom:'360px'});
$("#ball").animate({bottom:'0px'}, function() {
$('#block').text("Game Over");
});
}
I also changed the part where it shows the text "Game Over", so that it only appears when the animation that brings the ball down is complete.
Here's a fiddle: http://jsfiddle.net/Niffler/a71xf13k/
Here's the simplified html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function handle() { console.log("fired"); };
</script>
</head>
<body>
<div style="width:200px; height:100px; overflow-y: scroll; border: 1px solid gray;" onscroll="handle()">
<div style="width:150px; height:400px;"> </div>
</div>
</body>
</html>
The problem is, when div is not scrolled at all (initial position) the small button with triangle symbol on top of scrollbar does not fire an event. Maybe it's logical, but I search a way to work around this behaviour, because it's the only way for now to work around dojo framework tree widget with enabled drag-n-drop. Yep, I know, workaround for workaround.
Well, it's not pretty, but this should do the trick:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function handle() { console.log("fired"); };
</script>
</head>
<body>
<div id="div" style="width:200px; height:100px; overflow-y: scroll; border: 1px solid gray;">
<div style="width:150px; height:400px;"> </div>
</div>
<script>
//Get the element
var div = document.getElementById("div");
var ignore = true;
//Set the scroll to 1 (this will allow it to scroll up)
div.scrollTop = 1;
div.addEventListener("scroll", function(){
//Ignore generating output if the code set the scroll position
if(ignore) {
ignore = !ignore;
return;
}
//CODE GOES HERE
handle();
//If the scroll is at the top, go down one so that the user
//is still allowed to scroll.
if(div.scrollTop <= 1) {
ignore = true;
div.scrollTop = 1;
}
//If the scroll is at the bottom, go up one so the user can
//still scroll down
else if(div.scrollTop >= div.scrollHeight-div.clientHeight - 1) {
ignore = true;
div.scrollTop = div.scrollHeight-div.clientHeight - 1;
}
}, true);
</script>
</body>
</html>
I removed the inline function call and replaced it with an eventListener. Basically, it makes sure the user never scrolls completely to the top or bottom, ensuring that there will always be a scroll event.
I've got a problem in internet explorer 6 and FF with something I'm trying to implement in jQuery. Basically there is an object at the top of the page using floated content that seems to be interfering with the $(window).scrollTop() property.
It was my understanding (and if I'm wrong, please help me by telling me the right way!) that $(window).scrollTop() would return the whitespace hidden by scrolling. I did some tests without the floated content and they seem to support this.
This is my code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) { //is the window scrolled enough to hide the header?
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) { //if mydiv is currently hidden, show it
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); //move mydiv to the top edge of the page... OR SO I THOUGHT!
}
else { //otherwise hide it, since the header is visible
$("#scrollingDiv").hide();
}
});
});
This is the html document that shows the error (you just comment out the "evilFloatomoton" div below to see it working properly)
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) {
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) {
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ });
}
else {
$("#scrollingDiv").hide();
}
});
});
</script>
<style type="text/css">
<!-- Enter any CSS to make objects viewable here -->
#scrollingDiv
{
width: 100%;
position: absolute;
margin-top: 0px;
}
</style>
</HEAD>
<BODY>
<!-- Enter in test elements here -->
<div style="overflow: auto;">
<div id="evilFloatomoton" style="float: left; height: 200px; width: 100%;">
CONTENT<br /><br />
</div>
</div>
<div id="scrollingDiv" style="background-color: #000; color: #FFF;">
Scrolling floating div of doom
</div>
<div style="height: 180px; border: solid 1px #000;">
*Highlight the 180 px scroll area*
</div>
<div style="height: 10000px;">
</div>
</BODY>
</HTML>
So instead of being against the top edge like I thought, it's halfway down the page in my tests. Can anyone help me?
For your scrollingDiv container, set the style to Position:absolute and top: 0px. That should keep your floating div in one spot.