i have a link which is placed ontop of a site. when it is clicked , a DIV will be shown. the div will sit just below the LINK. if the link position from left is 215px , the DIV position from left will also be 215px. How can i track the position of the link to determine the position of the DIV so it could stick to it.
Link
<div id="float" style="display:none;">Some text</div>
jQuery:
$('#link').click(function(){
$('#float').css('display','block');
});
Thanks.
The best way to stick something absolute positioned to something on the page is to wrap it with relative positioned element.
You can try this:
<div style="position: relative">
Link
<div id="float" style="display:none; position: absolute; top: 10px; left: 0;">Some text</div>
</div>
Then you can position your floating element as you wish relative to the corners of the wrapping div (or other wrapping element) using left, top, right or bottom.
Serious advantage of that approach is that floating div will always be tied to the parent even if the window size is changed.
JQuery has built in functions for getting positions of elements.
See Offset for position related to document, or Position for position related to element's parent
Example to get the position of the link element...
$('#link').click(function () {
var link = $(this);
var linkOffset = link.offset();
var xPos = linkOffset.left;
var yPos = linkOffset.top;
$('#float').css('display', 'block');
});
<style>
#float {
display:none;
position:absolute;
border:1px solid red;
padding:5px;
margin:0;
}
</style>
Link
<div id="float">Some text</div>
<script>
$(function() {
$("#link").click(function() {
$("#float")
.css("left", $(this).offset().left)
.css("top", $(this).offset().top + $(this).height())
.show();
});
});
</script>
Related
I want to keep a div (id='fixedDiv') at the top of the window while the user scrolls up and down the webpage. The page has another much taller div (id='tallDiv'). I want the user to scroll the page up and down to see the content of tallDiv, and fixedDiv to always be displayed at the top of the window during the scrolling.
The problem is if the user does a horizontal scroll, tallDiv appears to move left or right, while fixedDiv stays put. My question is how do I keep tallDiv from "moving?"
I tried to detect a horizontal scroll in the $(window).scroll event by keeping track of $(document).scrollLeft() and setting tallDiv's position to 'fixed' during a horizontal scroll. I then use a timer to set tallDiv's position back to 'relative' But that gets ugly.
Does anyone have any ideas on how I can accomplish what I want? My code follows:
function SetScrollable() {
$('#tallDiv').css('position', 'relative');
}
var lastScrollLeft;
$(window).scroll(function (event) {
// what the y position of the scroll is
var documentScrollLeft = $(document).scrollLeft();
if (lastScrollLeft != documentScrollLeft) {
lastScrollLeft = documentScrollLeft;
$('#tallDiv').css('position', 'fixed');
setTimeout('SetScrollable()', 500);
}
else {
$('#tallDiv').css('position', 'relative');
}
});
<form id="form1" runat="server">
<div id="fixedDiv" style="position:absolute;background-color:yellow; height:40px; width:40px;" >
</div>
<div id="tallDiv" style="position:relative; left:300px; top:0px; background-color:green; height:400px; width:40px;" >
</div>
</form>
can you position the tallDiv absolute and right aligned? (ex:position absolute; right: 100px;)
Okay so I have a page that uses javascript to fix the header to the top of the page (thus removing the banner) when you scroll past the bottom of the banner (about 200px down page).
On this website I've been using containers that have the position:inherit; property set to contain each part of the page. These then have a relatively positioned element inside them so I can place all my absolutely positioned elements where I like.
My problem is that id="content" keeps jumping to the top of the page when the javascript changes id="header" to position:fixed;
See here: www.obsojb.com
I have tried absolutely positioning id="content" and setting it's top value but it wouldn't work and I'm a bit stuck.
Here is a very simplified version of the HTML:
<body>
<div id="page"> <!--inherit-->
<a id="banner"></a> <!--inherit-->
<div id="header"> <!--inherit-->
<div id="lang"> <!--relative-->
<ul>...</ul> <!--inherit-->
<other divs> <!--absolute-->
</div>
<div id="nav"> <!--relative-->
<ul>..</ul> <!--inherit-->
<a id="userbutton"></a> <!--absolute-->
</div>
</div
<div id="content0"> <!--inherit-->
<div id="content"> <!--relative-->
<PAGE CONTENT> <!--absolute-->
</div>
</div>
<div id="footer"></div>
</div>
</body>
Here is my javascript:
var bannerheight // Glob var
window.onload = function() {
window.bannerheight = $('#bannerimg').height();
checkOffset();
};
window.onscroll = function(oEvent) {
checkOffset();
}
function checkOffset() {
if (window.pageYOffset >= window.bannerheight) {
document.getElementById("header").style.position = "fixed";
document.getElementById("banner").style.display = "none";
document.getElementById("padding").style.height = window.bannerheight+"px";
}
else {
document.getElementById("header").style.position = "inherit";
document.getElementById("banner").style.display = "block";
document.getElementById("padding").style.height = "0px";
}
}
and here is the relevant CSS:
#page {
margin:0px auto;
}
#lang {
position:relative;
}
#nav {
position:relative;
margin:0px auto;
}
#content0 {
height:800px;
}
#content {
position:relative;
margin:0px auto;
}
Try giving the content div a "margin-top" and set it to the number of pixels that the page is "jumping". Then when you scroll up and reset the position, undo the margin-top back to zero.
I've tested this and it solved my jumping issue.
I'm not sure what you expect as output but position: fixed works on the document, globally. It not only ignores element flow (like position: absolute) but it also ignores scrolling.
position: absolute is relative to it's offset parent which can be an item with position: relative.
You typically only want to use position: fixed if something needs to stick to the window, like a little popup that scrolls with as you go down the page. The Facebook header is a good example. Their header bar is fixed to the top of the window and stays there even if you scroll.
So i have the following HTML markup;
<div id ="page_shadow">
<div id="blog_content">
<div id="main_content_container>
Main Content
</div>
<div id="swrapper">
<div id="blog_sidebar">
Sidebar Content
</div>
</div>
</div>
</div>
The following CSS;
#blog_sidebar.fixed {
position: fixed;
top: 0;
}
#swrapper {
position:absolute;
right:0;
}
#blog_sidebar {
width: 330px;
padding:10px;
padding-top:25px;
height:auto;
}
#main_content_container {
width:600px;
float:left;
height:auto;
padding-bottom:15px;
}
#blog_content {
position:relative;
width:960px;
margin-left:auto;
margin-right:auto;
min-height:1300px;
height:auto;
background:#FFFFFF;
z-index:5;
}
#page_shadow {
background:url('../images/background_shadow.png') top center no-repeat;
padding:10px;
margin-top:-60px;
}
The following javascript;
<script>
$(document).ready(function(){
var top = $('#blog_sidebar').offset().top - parseFloat($('#blog_sidebar').css('marginTop').replace(/auto/, 0));
var bottom = $('#blog_content').position().top+$('#blog_content').outerHeight(true) - $('#blog_sidebar').height() - 35;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) { //&& y <= bottom
// if so, ad the fixed class
$('#blog_sidebar').addClass('fixed');
} else {
// otherwise remove it
$('#blog_sidebar').removeClass('fixed');
}
});
});
</script>
Ok so basically there are two scenarios which occur. IF the page is loaded with the browser viewport above the y position before #blog_sidebar's position is changed to fixed then the element stays within the blog_content container.
HOWEVER, if the page is loaded with if (y >= top) = True resulting in $('#blog_sidebar').addClass('fixed'); the element is then pushed outside the blog_content container.
Again this only occurs if the viewport is = or below the trigger when the page is loaded.
For example if i were to go half way down the page and then click for the page to refresh, the browser loads the page and the element and then jumps to the position it was previously. The fixed position element shown up in the correct position for a split second and then jumps outside #blog_content aligning with the left of the element.
Ive got a little example to show the basics of the layout etc, but i dont think i can show exactly whats happening within jsfiddle. http://jsfiddle.net/ce3V3/
TLDR
Since this is quite confusing. Short version is i am changing a static positioned element with a fixed position element within the DOM, which is resulting in the fixed positioned element being out of place if the window is refreshed and jumps past a certain point. I dont want the fixed position element to jump out of place if a user relaods the page and the window jumps halfway down the page.
I'm struggling to find the right Jquery to show/hide a div at a height that is parallel to the trigger button. I attempted to offset the show/hide div to the right, but because the footnotes appear in different left/right positioning, each would be different. Instead, I will need to place the divs inside of another div along the right.
My hope is to add hyperlinked footnotes to some text, so that readers will not have to search for the footnotes, but also won't be overwhelmed with too much text. I would prefer to have more than one footnote open at a time, but if it needs to be one at a time to properly display, so be it.
EDIT:
#rohan-kumar helped with this code
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
console.log(divId);
$('#'+divId).toggle();
});
So here's the way it stands: http://jsfiddle.net/6n28t/21/
However, my primary problem remains -- how can I make the footnote appear at the same height as the trigger? These will be long pieces of text and I want the footnotes to appear at the same height as the corresponding mark. How can I made [2] appear farther down on the page?
So, basically combining the other answers leads to this Fiddle
Html is the same as what you have in your fiddle.
CSS
.wrapp{
border:1px solid red;
height:100%;
}
.clear{
clear:both;
}
.footnotes div {
position: relative;
display: none;
}
JavaScript
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
var height = $(this).position().top;
console.log(divId);
$(".footnotes div").hide();
$('#'+divId).toggle().css("top", height - 10);
});
You don't need the floats, I am assuming that you would want this text to appear inline in your paragraphs. You need to position the notes absolutely and then set the top/left according to the position of your clicked element + width of element + offset.
jsFiddle Demo
HTML:
<div class="content">
<p> Lorem ipsum ([1]).</p>
<p> Lorem ipsum ([2]).</p>
</div>
<div class="footnotes">
<div class="footnote1">1. Foo Bar</div>
<div class="footnote2">2. Foo Bar</div>
</div>
CSS
.footnotes > div { display: none; position: absolute; border: solid 1px red; }
JavaScript
$('.footnote').on('click', function(e) {
e.preventDefault();
var $note = $('.' + this.id);
var $position = $(this).position();
$('.footnotes > div').hide();
$note.css({
top : $position.top,
left: $position.left + $(this).width() + 5
}).show(); })
Try this,
HTML
<div class="wrapp">
<div class="content" style="float:left;">
<div> Lorem ipsum (<a class="a_footnote" href='javascript:;' data-divid="footnote1">[1]</a>).</div>
</div>
<div class="footnotes" style="float:right">
<div id="footnote1">1. Foo Bar</div>
</div>
<div class="clear"></div>
</div>
CSS
.wrapp{
border:1px solid red;
height:50px;
}
.clear{
clear:both;
}
SCRIPT
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
console.log(divId);
$('#'+divId).toggle();
});
If you want the div.footnotes will be hidden initially, then you need to add a css like
div.footnotes {display:none;}
Fiddle http://jsfiddle.net/6n28t/7
I am trying to run some script when div reaches to a certain point when it's scrolled. There is a fixed navigation and when the user scrolls the window it suppose change the nav name once it reaches close to the nav. I am using the $(window).scroll function but it only checking the div position once and not updating the value. How to make scroll check the window size every 5-10 px move so that it doesn't take too much memory/processing.
The code is set up at: http://jsfiddle.net/rexonms/hyMxq/
HTML
<div id="nav"> NAVIGATION
<div class="message">div name</div>
</div>
<div id="main">
<div id="a">Div A</div>
<div id ="b"> Div B</div>
<div id ="c"> Div C</div>
</div>
CSS
#nav {
height: 50px;
background-color: #999;
position:fixed;
top:0;
width:100%;
}
#main{
margin-top:55px;
}
#a, #b, #c {
height:300px;
background-color:#ddd;
margin-bottom:2px;
}
SCRIPT
$(window).scroll(function() {
var b = $('#b').position();
$('.message').text(b.top);
if (b.top == 55) {
$('.message').text("Div B");
}
});
Try this jsFiddle example
$(window).scroll(function() {
var scrollTop = $(window).scrollTop(),
divOffset = $('#b').offset().top,
dist = (divOffset - scrollTop);
$('.message').text(dist);
if (b.top == 55) {
$('.message').text("Div B");
}
});
Your original code was only checking the position of the div relative to the top of the document which never changes. You need to calculate in the amount of scroll the window has incurred and calculate accordingly.
Also note the difference beyween jQuery's .position() and .offset() methods. The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document.