When you scroll, are you changing the position of something?
How can I change the position of the scroll? Specifically to match the cursors movement.
What I want to do is scroll the window when I click and drag with the cursor inside the window.
For example:
I have a 400px by 400px div with a 900px by 900px div inside of it. I want to scroll around by click and dragging. Note, I do NOT want to move the position of the inside div (easily doable with jQuery UI via draggable), just the scroll position. Moving the actual div position messes with my other javascript applications.
Any help would be appreciated! Thanks!
This should get you going with horizontal scrolling. Vertical would be similar, but with scrollTop().
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var lastPageX;
$(document).ready(function() {
$("#inner").mousedown(function(e) {
// Reference to the drag pad
var inner = $(this);
// Position where mouse was pressed
lastPageX = e.pageX;
// Attach mouse move listener
$(inner).mousemove(function(e) {
var diff = lastPageX - e.pageX;
// Scroll based on the new curson position
$("#outer").scrollLeft($("#outer").scrollLeft() + diff);
lastPageX = e.pageX;
});
// Remove mouse move listener
$(window).mouseup(function() {
$(inner).unbind("mousemove");
});
return false;
});
});
</script>
<style>
#outer {
height: 400px;
width: 400px;
background-color: Lime;
overflow: scroll;
}
#inner {
height: 900px;
width: 900px;
background-color: Yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>
Edit: Return false after the mousedown is handled to prevent firefox from grabbing the div.
Related
I basically want the browser to trigger a function when a section touches the top of the viewport as the user scrolls and I'm not really sure how to do this with Vanilla JS.
I've found some jQuery alternatives, but I'm just trying to figure out how Javascript works at the moment, so I'm not exactly sure where to begin or what to google for that matter.
The following example creates a page with a single div inside.
The scroll event handler uses Element.getBoundingClientRect() in order to get the div's position relative to the viewport and logs a msg to the console when the div is at or above the top edge of the viewport.
var handlerFired;
window.addEventListener('scroll', function(e){
var containerTop = document.querySelector('.container').getBoundingClientRect().top;
if (containerTop <= 0) {
if (!handlerFired) {
handlerFired = 1;
console.log('container at top of viewport or above');
}
}
if (containerTop > 0) {
handlerFired = 0;
}
});
body{
height:2000px;
}
.container{
width:300px;
height:200px;
border:5px solid red;
position: absolute;
top: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class='container'> <p>scroll window ...</p> </div>
</body>
</html>
I am 11 years old and I started learning Javascript a couple of months ago, So I am trying to make a page where if you scroll down too much it will take you back to the top so I made a Div element that fills up a large space and onmouseover it will take you back up to the top but if you try it a second time it won't do anything. Please help. Thanks in advance !
I hope my understanding of your problem is right. You have a div and you want to go up each time you scroll too much.
As an example of how to handle the scroll in vanilla JavaScript you can have a look at the document for the onscroll event: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#container {
height: 500px;
width: 515px;
overflow: auto;
}
#foo {
height: 1000px;
width: 500px;
background-color: #777;
}
</style>
</head>
<body>
<div id="container">
<div id="foo"></div>
</div>
<script>
var container = document.getElementById('container');
container.addEventListener('scroll', function(event) {
// Get top and left value
var top = container.scrollTop
if (top > 400) {
// Go to the top
container.scrollTop = 0;
}
}, false);
</script>
</body>
</html>
In this example the contained element is bigger that the container so the container becomes scrollable with the overflow: auto; css property.
The scripts applies a onscroll event that checks the scroll value of the container and reset it to 0 when it exceed an arbitrary value (400 in the example).
I hope this has been useful to your work.
I use one page website and when I click menu button about it scrolls down to the top of some div... But Because I am using fixed header scrolling goes to 0px top and I need like 100px top like padding in body tag but I need to say in function I need to scroll to the top of item after 100px from top of the page.
Here is my code:
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
var x = $(this.hash).offset().top;
$('html,body').animate({scrollTop:x},2000);
});
});
Just adding 100px to $(this.hash).offset().top will do it if I understand you correctly.
Since, offset is getting data relative to the document.
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document. http://api.jquery.com/offset/
Example:
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
var x = $(this).offset().top;
$('html,body').animate({scrollTop: x - 100 }, 2000);
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="height: 1000px; padding-top: 100px">
<div class="scroll">click to scroll to me</div>
</body>
</html>
I need to make an image viewer that allows large images to be loaded into a container and then dragged within the container so that the entire image is viewable but the image is never dragged out of bounds. The below code works perfectly except the scrollbars are not accurately synchronizing with the position of the dragged image and allow the image to be scrolled out of bounds. How can I synchronize the scroll bars with the image while it is being dragged?
Edit:
Here is a working example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<style>
.container{margin: auto;cursor: move;width: 80%; position: relative; min-width:885px;}
#screen{overflow:auto; width: 80%; height: 600px; clear: both; border: 1px solid black; background-color: #CCCCCC; float:left; margin-right: 15px;}
</style>
</head>
<body>
<div class="container">
<div id="screen">
<img class="drag-image" id="draggable" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
$('#draggable').attr('src', 'http://i.imgur.com/uPjIz.jpg').load(function () {
CreateDraggablePicture();
});
});
function CreateDraggablePicture() {
var x = ($('#draggable').width() - $('#screen').width() - $('#screen').offset().left) * -1;
var y = ($('#draggable').height() - $('#screen').height() - $('#screen').offset().top) * -1;
var x2 = $('#screen').offset().left;
var y2 = $('#screen').offset().top;
$("#draggable").draggable({ containment: [x, y, x2, y2], scroll: true });
}
</script>
These plugins seems to do the same effect you describe here
http://www.azoffdesign.com/overscroll (seems to be the best one)
http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html (I didn't find the download link though)
http://the-taylors.org/jquery.kinetic/ (didn't see an option for scrollbars, but it's mobile friendly)
I had this exact problem with a similar jQuery plugin. I eventually had to figure out and manually modify the plugin's math. I believe the secret was that it was missing css margins or css padding from the calculation.
See if that helps
I made a script that moves my "character" (element ID="character") to where I click. But I need to get it's position so I can make it "walk" to where I click instead of it just appearing there.
This is my code:
<html>
<head>
<script type="text/javascript">
function showCoords(evt){
document.getElementById("character").style.left = evt.pageX;
document.getElementById("character").style.top = evt.pageY;
}
</script>
</head>
<body onmousedown="showCoords(event)">
<div id="character" style="position: absolute; top: 100px; width: 80px; height: 40px; background:black;"> Char </div>
</body>
</html>
Basically I just want to retrieve the element's horizontal and vertical position at the beginning of my function. So I can later use those variables. How do I do it?
Thanks
If you only need this to work in reasonably modern browsers, then document.getElementById("character").getBoundingClientRect() will have left and top properties that give you the offsets from the viewport.
Using MooTools you can get the position of an element with:
$('element').getPosition(); // returns {x: 100, y: 500};
MooTools docs: Element Method: getPosition