I can't find a title for this because it's a complicated issue.
Let's say i have this:
<div style="color:red;width:900px;height:250px;">
I Can Control This DIV
</div>
<div style="position:absolute;top:0px;color:green;width:40px;height:40px">
I CANNOT control this DIV
</div>
Is there any way for the first div to reserve it's area and the 0px should be beneath it.
I mean i want the second div to stay beneath the first div like it's inside an iframe BUT i don't want to use iframes or frames at all.
Any way? i don't have a prob if it's Javascript solution.
Thanks
You can enclose second div in position:relative container. This way, top:0px will be counted from that div and not the whole window:
http://jsfiddle.net/z9KbD/
Explanation is in definition of position:absolute: Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static.
Can you wrap both of them in another div and them control that one?
If you give the second div a clear:both, that should do the trick I think you are looking for. Essentially, it will act as a carriage return for that div.
On a side note, if you were looking to absolutely position an element, you will need a parent element that contains it to be relatively positioned. Chris Coyier goes over it in depth here.
Related
I'm trying to make a div element with certain content move (Jump) between an specific area that has some duplicates inside an article while scrolling.
The div #hotswapdiv should be inserted inside each <div id="div_identifier">
</div> while scrolling the page, by moving from the previous #div_identifier to the next #div_identifier.
It's like teleporting the #hotswapdiv between the elements with the same ID while scrolling.
JSFIDDLE:
https://jsfiddle.net/2n8k8g4L/7/
But for some reason it's not working.
Reference: https://api.jquery.com/detach/
Any ideas?
you can only use one #div_identifier because it is an id ,
i think class="div_identifier" and .div_identifier will fix your issue
I'm writting a dynamic page using jQuery and I have a problem. I'm for example adding to my html file div's using append() function like this:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'></div>");
I will be creating different amount of that div's base on datebase so that's why I use this variable i to assign different id's for each div.
My problem is that even if I'm creating that div's in body and when I look at code they are in it, if I check body's height it is 0 (width is ok, something like 1200).
Main problem with that is when there are too many div's they are beyond screen but there is no scroll bar. It's something like div's aren't in body although in code they are in.
Could you propose me any solution for that? Or what am I doing wrong? My line of thought is that I'm using $(document).ready so html file is creating a page, but see empty body so height = 0 and all my div's are beyond body. What do you think about that?
Take care of positioning; position:fixed removes your divs from normal flow ->
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
as W3C says
An empty <div> does not have a height. Thus you could add as many as you want to the page and it will never get any longer. For the scroll-bar to appear you need to either set a height to the <div> with CSS like this:
.diamond_div{
height:100px;
}
Or add some content to the <div> so you would have something like this instead:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'>hello</div>");
Then your <div> would have height and once there are enough on the page to go beyond the height of the browser, the scroll-bar will then appear.
Following on from your comments. Setting the position to "fixed" removes the element from the workflow and thus will not extend the length of the page in the normal way.
My script here needs a little work on the positioning of the sentence. If you click on any of the choices, the sentence should slide down to that height. I'm trying to use .position() to obtain a relative position (as the doc says, relative to the offset parent, which is why I'm writing this thread).
Obviously, the .position() is a little off right now because it seem to think it's offset parent is the document itself and the jQuery doc didn't mention anything about setting the offset parent. Any inputs are greatly appreciated.
PS: I'm currently using position: relative on the sentence, which are 2 <p> tags.
on css add position: relative; to the parent element/container
Add position:relative; to your CSS for div[id^=wrapper].
All absolute positions are taken relative to the closest positioned container. In your original code, the closest positioned container is the <body> tag, which obviously isn't what you want.
Just found the link with a visible element with position:fixed behaves kinda strange:
http://www.steadyhealth.com/Do_you_need_to_use_a_back_up_method_for_the_first_week_of_every_month_while_on_birth_control__t267326.html
The element is div with id equals to centerMessages. It appears to be green, visible and ... moving. How come that a fixed element is moving as the page is scrolled? Or, in other words, which part of the spec I need to re-read/re-learn please?
The div does not move when you scroll. It contains no content, so you can't see it.
Fixed position just means that the element doesn't move relative to the scroll position of the page; it can still be given a position relative to the browser window. You can change this position using CSS and Javascript.
I have a page with many divs and style, with my div buried somewhere inside.
I am trying to have a button that automatically makes my div, that includes a video player, resize and capture the whole browser.
In order to do that I am trying to get the current position of the div and then position it relatively so that it'll get to the top-left corner so I could then use document.body.clientHeight/clientWidth.
Can't get this to work.
I tried the approach of moving my div to the first div and then resizing however this messes up the flash player.
Any ideas? any different approaches?
Thanks,
Guy
Use one of the lightbox clones that can handle DIVs. They usually copy the DIV in question into their own view DIV, which helps with positioning issues and you don't have to do anything to the buried div.
I find Multi-Faceted lightbox to be very easy for customizations:
http://www.gregphoto.net/lightbox/
but there are lots of others around as well.
Why relative?
You should rather use fixed instead of relative. Then set positon to 0,0 and width and height to 100%.
Simple js can do this.
On click, just set the div's style to 'fixed', and position 0,0. Like:
var theDiv = document.getElementById('yourDivsId');
theDiv.style.position = 'fixed';
theDiv.style.top = 0;
theDiv.style.left = 0;
This should do the trick:
<div style="position:absolute;top:0;left:0;width:100%;height:100%">
some content here
</div>