I need to have a div box in a static position meaning that when someone scrolls down the page, the div stays in the same position.
I have googled a lot and I found some solutions, but they were all using defined positions like top left, top right etc.. and I need a solution that will work regardless of the place the div is in. So basically the script needs to either take the current position and set that to the fixed position, or not work with fixed X/Y position..
Any ideas?
Thanks,
You need to use position:fixed for your element.
Example:
#dv{
position:fixed; /* this is important for you */
width:200px;
height:200px;
background:blue;
}
Check out the example
Notice that div remains there even if you scroll :)
http://jsfiddle.net/Shaz/Fqr4t/
I'm not entirely sure what you mean by 'regardless of the place the div is in', however, if you can't use position: fixed, there is an onscroll event in Javascript that you can hook into. You can update the position of the div there. Do note that this is usually isn't fast enough to look fluent.
Related
Consider the following HTML:
<div id="mydiv">Big shiny error goes here</div>
Using below CSS, this div sticks to the top right corner, even if the page is scrolled.
#mydiv {
position:fixed;
right:0;
top:0;
background-color: red;
}
Is it possible to have mydiv fade out to, say, 10% of opacity on hover and allow user to use page elements underneath, such as select text and copy to clipboard? The idea is that mydiv should stay visible at all times, but it should NOT block user's actions.
As an added bonus, it would be nice to select mydiv's text, if no elements are found underneath.
EDIT: hover + z-index approach does not seem to work well, see this jsfiddle.
The closest I can think of is to give the content area a z-index of, say, 1. Then, using :hover, give the error div a lower z-index to position it behind the main area. This will allow mouse events on the main content. You can also adjust opacity to fade it out as needed. I believe that IE will allow you to click/drag/whatever on the element if there's nothing else in front of it, but Chrome and Firefox will consider it hidden by the content area even if there's "nothing" actually there.
$(document).ready(function(){
var id = $('#selector')
id.mouseover(function(){
id.fadeOut(800,function(){
id.hide();
});
})
id.mouseout(function(){
id.fadeIn(800,function(){
});
})
});
selector should point the division on top
I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.
What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.
Ajax Page (this runs when the page is called)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
If I can find the top of the viewport I think I'd be able to get this working right.
I've looked into: http://www.appelsiini.net/projects/viewport but it doesn't really solve my problem.
Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!
Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you're scrolled (which I assume is what you want).
So:
.popup {
position:fixed;
top:20px;
left:40px;
right:40px;
}
Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).
Next, setting both left AND right will "stretch" the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That's a convenient way of centering this popup div.
If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.
P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won't be able to vertically center it using the margin:auto trick.
Don't know if it's the case, but If $(".popup") it's initially hidden by display:none, then it's width and height will be zero on page load.
I'm trying to toggle a div from relative to fixed when I scroll down 200px using javascript. When I reach 200px from the top of the window, my div should toggle to fixed. And when I'm above that 200px from the top it should go back to relative. Does anyone have an idea on how to do this?
Something like:
$(window).on('scroll', function() {
$("#myDivID").css({
position: $(this).scrollTop()<200?'relative':'fixed',
top: $(this).scrollTop()<200?'200px':'0px'
});
});
You'll probably also have to reset the top position of the element.
I know there's at least a couple of plugins that do this. Can't remember the name of the one I saw last, but here's one I've written myself: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/JS/jQuery.fixedIfNeeded.js
You use it like so:
$('#my-element').fixedIfNeeded();
There's one optional argument that specifies if the element should stop being fixed before it reaches another element (like a footer for example):
$('#my-element').fixedIfNeeded('#footer');
I have a fixed width element that I want to essentially shoot off the screen either to the left or to the right, I want it to be seen visually though hence the use of animate. However its not working out as planned with my current attempts.
What it currently seems to be doing is jumping to the opposite side of the screen then panning across in the direction I want. However what I want it to do is from where it sits go across the screen
$('.element').animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#dashboardWidgetContainer').hide().html('')});
that is what I am attempting to use to achieve my desired goal
a sample of the layout would be
<div id="container">
<div class="element"></div>
</div>
set it a fixed position first
go:
$el = $('.element');
$el.css({
position: 'fixed',
top: $el.offset().top,
left: $el.offset().left
}).animate({left:'100%'}, 1000);
Are you trying to achieve something like this:
http://jsfiddle.net/t2FxV/
If it is jumping across the screen it probably has to do with margin changing from auto to 0, like in this example: http://jsfiddle.net/Paulpro/t2FxV/1/.
Make sure you set the marginLeft to the current position before animating:
$('#element').css('marginLeft', $('#element').position().left).animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#container').hide().html('')});
http://jsfiddle.net/Paulpro/pakCP/
Your script works fine as jdavies pointed out (post deleted?), you might need to change the dashboardWidgetContainer to a selector for an element that exists. One thing you should note is that if you don't plan on reinserting the element into the page you should replace .hide().html('') with .remove() as it's much cleaner to remove the element from the DOM altogether than leave it sitting out there with display: none; and no contents.
$('#element').css('marginLeft', $('#element').position().left).animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#container').remove()});
I'm having trouble properly positioning some divs within a larger div and having them behave as I want.
The source and a preview is here: http://jsbin.com/usuniw/6/edit
Problem 1
When the hidden div is unhidden it appears under the div I want it to appear inside. Once the dive inside is resized (using a handle on the left hand side) it pops into place
Problem 2
When resizing the originally hidden div it moves outside the boundry of it's parent rather than aligning itself to the right-hand side of it.
Thanks for any help you can give.
At the moment, you have the #selectedResult element set as float right which is causing it to appear underneath the #ipad element.
If you get rid of the float:right on #selectedResult and instead set it to:
position: absolute;
right:0;
top:0;
And set the #ipad element to:
position:relative;
Then the element will be fixed to the top and right sides of its parent.
You can see an updated version of your example here: http://jsbin.com/uxavov/edit#preview