When you set an element's offset with jQuery.offset({coords}) it also sets the CSS property position to absolute.
I have a div, however, that I set to position: fixed in my CSS, and I want it to remain that way, even after setting the offset of the element with jQuery.
Now, I'm sure I can probably set the offset, then set position: fixed again, but I was wondering if there is a way I can tell jQuery to set the position to fixed instead of absolute when it sets offset.
HTML
<div class="searchResults">
...
</div>
CSS
DIV.searchResults {
position: fixed;
padding: 20px;
background-color: red;
z-index: 501;
}
jQuery
$("DIV.searchResults").offset({left: 0, top: 0});
Rendered HTML
<div class="searchResults" style="position: absolute; top: 0px; left: 0px;">
...
</div>
Obviously, since jQuery is setting the position in the style, it will trump the value of my CSS class. So I need a way to tell jQuery to set position to fixed instead of absolute, or tell it to set the offset without setting the value of the CSS property position.
As I commented above, in your case all you need is to modify the CSS for top and left like this:
$("DIV.searchResults").css({left: 0, top: 0});
Because the $.offset setter method only manipulates the left, top and position values to make the element relative to the page (from static to relative, and from fixed to absolute). Since you want it position fixed, set the values directly.
Maybe not that elegant, but I think you can just chain .css() after that to be sure that position is set to fixed like this:
jquery
$("DIV.searchResults").offset({
left: 0,
top: 0
}).css("position" : "fixed");
Not tested, but I think that'll work.
Related
im working on some graphic representation of journal issues. What I need is to display block of text using simple DIVs (or else) inside of other DIV, exactly the way they are organized on issue page. To do that I need to set coordinates of DIV element to exact number, but in relation to parent DIV. Is there any way to do that by using css or js??
If you outer div is set to position: relative, you can have the inside div as position: absolute and set its top, left, right and bottom properties to the pixels you need. For example.
.outer {
position: relative;
}
.inner {
position: absolute;
top: 10px; //your coordinate
left: 5px; //your coordinate
}
<div class="outer">
<div class="inner">Your content</div>
</div>
Otherwise, you can simply use padding on the inner element.
If you want the div to be display: block;, you can use simple margin-top and margin-left to set coordinates.
Lets say (for example) you need to set the coordinates of the div as <100,50>:
To do that, in CSS, set margin-left: 100px and margin-top: 50px
I have a menu on top of my page, and after that a div tag that uses a class as below:
<div class="a">
Hello!
</div>
a is a general class that has position: absolute; in style.
I want to disable this absolute; since the div content not shown completely. So I decided to use another class that overrides the position setting.
<div class="a overridden-a">
What should I set for position: in .overridden-a{ position: ???? !important } in my other style?
Update: I don't want to edit the a class styles, It is common and general in project.
The default value of position is static.
The use of !important is not best practice and should be avoided where possible. Instead, to override a CSS rule you need to use a selector of a higher specificity. Try this:
.a.overridden-a {
position: static;
}
position: relative; would achieve what you require as well.
What you set it to instead depends on how you want to display it instead. There are 4 possible values (including absolute, which you're trying to override).
From http://www.w3schools.com/css/css_positioning.asp:
position: static; An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page. This is the default.
position: relative; An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
position: fixed; An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
position: absolute; An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
Well, by default it is static, so you could set it to static.
Either by adding style="position:static" or doing it with css, after .a declaration:
.overriden-a{
position:static;
}
The default value of position is position: static, so this will probably work:
.overridden-a {
position: static;
}
You could always use inline-css with !important. This will override any other stylings as the priority will be first.
<div class="a" style="position: static !important">
Hello!
</div>
.overridden-a {
position: static;
}
Should do it but only if you put it after declaration of your a class. !important is usually used not so often if your css file is structured good. On the other hand it is used to overwrite any css rule in your file no matter of position where is declared at. In another words it stands out for css rules of specificity.
Is there a way to get the value of an element's offsetTop after some CSS styles are applied without actually applying that CSS?
For example, if an element's CSS currently is:
position: absolute;
top: 45px;
Is there a way to know what the offsetTop of that element would be for:
top: auto;
without actually applying top: auto;?
If we do actually apply it, even for a short time, it causes a flicker.
There is a simple trick for this:
Render the element but keep it invisible (using opacity: 0 or visibility: hidden or position it outside the viewport) and calculate its dimensions using JavaScript. This way you will avoid FOUC issues.
I've got a <div id="mydiv"> with margin-left: 0px.
But sometimes (the page is dynamically generated) that this <div> is placed within another <div> that has a positive margin-left value.
This way #mydiv will have the margin of the container and not 0.
Is there a way to set
margin-left: 0px (relative to the body margin)
or
margin-left: -(sum of container margins)?
If your div is inside another one, the boundaries for that div are limited to it's container div.
You can break out of it by putting position: absolute; on the div you want to position differently. Then you should put a position: relative; on the container it should be relatively positioned to. Then you can use a negative margin-left.
use:
.mydiv{
position: absolute;
left : 0;
}
By using an absolute position and setting left to 0 your div will always be aligned with the left side of the containing element with no margin.
Use CSS positioning property and align the div's respectively.
For Example
You have a <div class="wrapper"> style this with position:relative
And for the inside <div class="mydiv"> style with position: absolute; left: 0; or left: 50%.
The main point is positioning:
position: fixed; will position the div relative to the browser window
position: relative; will position it relative to its normal position
position: absolute; will position it relative to the first parent element that has a position other than static (so it is not really absolute after all)
check http://www.w3schools.com/css/css_positioning.asp
You can achieve it with positions like relative and absolute.
You just need one top parent above all div.
I have created following example. It will help you to achieve what you need.
[Example](http://jsfiddle.net/dhavalsolanki/tjv5e1tn/)
I've a problem, when I set container element:
position: absolute;
left: 10px;
bottom: 15px;
And initialize draggable, bottom part of the element gets stuck to the border, and it is basically resizing rather than dragging.
http://jsfiddle.net/JVSFS/83/
So what do I do?
jQuery draggable works by modifying the left and top css properties of an object.
Set the top property instead of the bottom.
I know it sounds like a cheap trick, but it's the fastest solution I found here.
You might want to go about it by removing
.popup_click {position: absolute
left: 10px;
bottom: 15px;}
and replacing it with: .popup_click {top: 92%;
left: 1%;}
Fiddle
Please note that the percentages are just estimates based on where you had it placed before.
It is doing what you told it to do. When you set bottom to be 10px on an absolutely-positioned element, the bottom of that element will stay 15px from the bottom of its parent container.
It might be better in your situation to set the CSS to position:relative using mousedown() in your jQuery.