I am looking to get a method to dynamically get scroll position height instance as long as I scroll page, update CSS as well.
I used this snippet, however the value of bodyHeight is fixed on first page load, not updating while scroll and the CSS as well.
var bodyHeight = $('body').scrollTop();
var fixedTop = bodyHeight - 50;//(50)topnav height
$('.fixed-inner').css('top', fixedTop + 'px');
Try with something similar to:
<!DOCTYPE html>
<html>
<head>
<style>
div#main{
background-color:green;
}
</style>
</head>
<body>
<br /><br /><br /><br />
<div id="main" style="height:300px; position:relative; overflow:scroll;">
<div class="stairsImage" style="height:500px; width:300px; background-color:yellow; ">
<h1 id="testName">Lorem Ipsum</h1>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>
$(document).ready(function() {
//-------------------------
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
console.log(wScroll);
$("#testName").css({'transform' : 'translate(0px, '+ wScroll +'px)'});
});
//-------------------------
$("div#main").scroll(function(){
var wScroll = $(this).scrollTop();
console.log(wScroll);
$("#testName").css({'transform' : 'translate(0px, '+ wScroll +'px)'});
})
});
</script>
</body>
</html>
Try this
var bodyHeight = $(window).scrollTop();
var fixedTop = bodyHeight - 50;//(50)topnav height
$('.fixed-inner').css('top', fixedTop + 'px');
I hope this helps you
$(window).scroll(function () {
//You've scrolled this much:
$('div').text("The scrool position is " + $ (window).scrollTop() + " pxs");
});
jsFiddle here
good luck :)
You need to recalculate the bodyHeight when you scroll the page, and there is an jquery event for that, and you can have bodyHeight as a global variable.
var bodyHeight = $('body').scrollTop();
$(window).scroll(function () {
//recalculate the value every time the user scroll
var bodyHeight = $(window).scrollTop();
//doSomething()
});
further reading:
How do I determine height and scrolling position of window in jQuery?
Get scroll position using jquery
Related
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>
The following code is a sample from w3schools.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").offset();
alert("Top: " + x.top + " Left: " + x.left);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Return the offset coordinates of the p element</button>
</body>
</html>
it is possible to get offset right and offset bottom using jquery?
Link :
https://jsfiddle.net/0hhxdbk5/1/
var right = ($(window).width() - ($element.offset().left + $element.outerWidth()));
var bottom = $(window).height() - top - link.height();
This should do it.
If I want to include the margin when measuring the width of an element I may call element.outerWidth(true); However, I can't find a similar way to get the left offset of an element in a container, where the margin is included. element.position().left doesn't include margin.
I've tried element[0].getBoundingClientRect().left, and that works but is there a similar jquery call?
EDIT:
It seems that the native javascript call above doesn't give me the margin either..
This is a limitation of jQuery's .position(), which has this limitation:
Note: jQuery does not support getting the position coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.
Recommended solution:
var position = $element.position();
x = position.left + parseInt($element.css('marginLeft'), 10);
y = position.top + parseInt($element.css('marginTop'), 10);
Use Jquery offset() function
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>offset demo</title>
<style>
p {
margin-left: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $( "p:last" );
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
</body>
</html>
how to get [x,y] position related to the clicked div border?
this position of the clicked box is random , the example bellow is only one situation. I want to get click point position related to the clicked div , how to do it in js ?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>img click positon</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.clickbox').bind('click',function(e){
// how to get [x,y] positon relatived to div.clickbox ?
// console.log(x,y);
})
});
</script>
<style type="text/css">
*{margin:0;padding:0}
.page{margin:0 auto; width:940px}
.box{width:200px; margin:0 auto; margin-top:10%}
.clickbox{width:100%; height:230px;background-color:tan;}
</style>
<div class="page">
<div class="box">
<div class="clickbox"></div>
</div>
</div>
</body>
</html>
$('div.clickbox').click(function(e) {
var offset = $(this).offset();
console.log("X: "+e.clientX - offset.left);
console.log("Y: "+e.clientY - offset.top);
});
<script type="text/javascript">
$(function(){
$('.clickbox').bind('click',function(e){
var offset = $(this).offset();
alert(e.clientX - offset.left);
alert(e.clientY - offset.top);
})
});
</script>
e.pageX and e.pageY
You also find the offset- and the screen-coordinates in the event object
I am using this Tutorial to show a Popup Modal Window on page load, For some reason it is not showing the contents & image inside the Modal.
Code i am working on is at jsFiddle
I want a simple Modal popup on which i can show Message which are in form of image in different dimension, I want Modal to show in the middle of the page and adjust width & height as per the image. I would appreciate help in this regard.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});
</script>
<style>
/* Z-index of #mask must lower than #boxes .window */
#mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
display:none;
z-index:9999;
padding:20px;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
}
</style>
</head>
<body>
<div id="boxes">
<!-- #customize your modal window here -->
<div id="dialog" class="window">
<b>Testing of Modal Window</b> |
<!-- close button is defined as close class -->
Close it
<br />
<img src="http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg" />
</div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
</div>
</body>
</html>
The error is this line op
var id = $(this).attr('href');
On document.ready you dont have a href attribute, but if you replace it to
var id = "#dialog";
Youre modal will work. See: http://jsfiddle.net/HJUZm/3/
More...
For the tutorial you are reading, I can see 2 possible mistakes.
First is that in your HTML you are missing
<!-- #dialog is the id of a DIV defined in the code below -->
Simple Modal Window
And for some reason you have forgotten to use $('a[name=modal]').click(function(e) { and instead just have inserted it in document.ready
The differences between $('a[name=modal]') is that document.ready is fired once when page is ready, and $('a[name=modal]').click(function(e){...}); is fired on every click where a name attribute is modal