On click scroll to the top with 100px more - javascript

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>

Related

I have a Div Element acting as a button but it will only work once

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.

JQuery: Image appear by mouse move?

I want to make a image appear on my site when the mouse moves. It can appear to be a stupid thing to do, but it's really important that when the page loads the image is not yet visible.
My HTML is like this:
<html>
<head>
</head>
<body>
<div class="page-container">
<div>
<a id="entrar" href="_pt/log_in.html"><img src="_assets/entrar.jpg" alt="entrar"></a>
</div>
</div>
<script src="_js/jquery-1.10.2.js"></script>
<script src="_js/jquery-ui-1.10.3.js"></script>
<script src="_js/exp.js"></script>
</body>
</html>
In my CSS i'm making the image not visible
#entrar {
display: none;
}
And in my Javascript:
function PrepareHandlers() {
$(".page-container").mousemove(function(){
$("a#entrar").css("display", "inline");
});
}
...
window.onload = function(){
....
PrepareHandlers();
}
Could anyone tell me what I'm doing wrong plz. Thanks
Declare this in your source file , not inside a function !
$(document).ready( function(){
$(".page-container").mousemove(function(){
$("a#entrar").css("display", "inline");
});
})
It appears likely the page container is not taking up any space, and therefore it never receives a mousemove event. Here is an easy CSS fix to test this theory:
body { position : absolute; top :0; bottom : 0; left : 0; right: 0;}
.page-container { width : 100%; height : 100%; background-color : #ddd; }
Check out this solution.
You should preload the image to minimize or avoid an annoying/confusing lag like so:
var img = new Image();
img.src = '//your/url/to/image';

jQuery - Draggable UI - How to detect if element has been dragged to a spot, then call an animation

I have this div that can be dragged vertically off the screen. I want to know if there's a way to detect if that div has reached passed a certain limit, then display an animation where it automatically slides off the page. What I have done so far I thought should work, but alas, my mediocre knowledge of JavaScript has reared it's ugly end. Here's what I have so far:
$(document).ready(function() {
$("div").draggable({
axis: "y", // vertical drag only
drag: function(event, ui) { // THIS NEXT BLOCK JUST MAKES SURE IT WON'T DRAG OFF THE BOTTOM OF SCREEN
if($(this).offset().top + $(this).outerHeight() > $(window).height()) {
$(this).offset({"top": $(window).height() - $(this).outerHeight()});
event.preventDefault();
}
}
});
if($("div").css("top") == "-340px") {
$("div").animate({
top: "-100%"
});
}
});
I know that the jQuery UI "Draggable" uses the property top because I looked in Google Chrome's debugger tool and as I was dragging it dynamically inserts inline styles, and I read top: -(x)px; keep climbing while I was dragging the div. So, logically, I tested to see if it gets dragged pass -340px then just automatically drag it the rest of the way.
And also, if possible, I would like for the div to drop down (using revert?) if it doesn't go past -340px, but that's not a huge issue really.
Your condition is not in the right place; you should make the verification once the Drag even is fired !
See bellow the code here check if position is upper then 100 and fire the animation :
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="draggable" class="ui-widget-content ui-draggable" style="position: relative;">
<p>Drag me around</p>
</div>
<script>
$(document).ready(function() {
$("div").draggable({
axis: "y", // vertical drag only
drag: function(event, ui) { // THIS NEXT BLOCK JUST MAKES SURE IT WON'T DRAG OFF THE BOTTOM OF SCREEN
if($(this).offset().top + $(this).outerHeight() > $(window).height()) {
$(this).offset({"top": $(window).height() - $(this).outerHeight()});
event.preventDefault();
}
if(Number($("div").css("top").replace("px","")) > 100) {
$("div").animate({
top: "-100%"
});
}
}
});
});
</script>
</body>
</html>

Get element's horizontal and vertical position with javascript

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

Help me understand scrolling in javascript(jquery) terms

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.

Categories

Resources