Is it possible to save off all CSS that is 'currently' applied to an element, then later reapply it? I am working on a sticking table header, and when I i change position:fixed it loses all the applied styles. I currently save off the column widths and reapply to the table header with:
$('#tableHeader').css({
position:'fixed',
width:$('#tablePanel').width(),
top:$('#top').height(),
});
$('.column1Value').width(col1Width);
$('#col1').width(col1Width);
$('.column2Value').width(col2Width);
$('#col2').width(col2Width);
$('.column3Value').width(col3Width);
$('#col3').width(col3Width);
$('.column4Value').width(col4Width);
$('#col4').width(col4Width);
$('.column5Value').width(col5Width);
$('#col5').width(col5Width);
$('.column6Value').width(col6Width);
$('#col6').width(col6Width);
$('.column7Value').width(col7Width);
$('#col7').width(col7Width);
This make the columns the correct size and line up closely, but there is extra padding or margin being applied from somewhere I can't completely figure out (bootstrap probably), and this makes the headers and columns not line up. I was hoping for something like:
var savedCSS = $('#table').css(); and retrieve it like $('#table').css(savedCSS)
You could save off the individual styles that you are interested in one by one and then re-apply them later using the jQuery("selector").css("styleName") method that you alluded to, but I don't think there's an easy way to do them all at once. It's not impossible, but wouldn't be very efficient and probably wouldn't actually give you the result you want, once the element is in its new position.
After the discussion, we found that the sizing issue wasn't really due to the styles, but due to the element that the width was being calculated from.
When the element is positioned normally in the page-flow, it uses its most recent positioned parent's width and then takes off margin to find the width of the child content.
When the element is removed from the page flow, its width is then independent of the parent. So to get the two to match up, record the parent's width rather than the element itself and set the width to match the parent, instead of trying to maintain the element's width.
Related
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.
jQuery's .width() method doesn't seem to account for scroll bars. This is problematic for me, since I'd like to set the width of some children to equal the width of their parent. I used jQuery similar to the following:
$('#contentDiv').width($('#containerDiv').width())
In this example, #contentDiv is the element I'd like to size, and I want to set it to have the width of #containerDiv, which is its parent element. My problem is that this cuts off the side of #contentDiv, as seen in this fiddle.
In my actual code, I have several elements that I'm sizing with jQuery, which all need to fit in the scrollable div, so just setting the css of #contentDiv to 100% is not an option. What's the best way of dealing with scroll bar widths of divs in jQuery?
The best solution I found while working around this solution is this:
http://chris-spittles.co.uk/?p=531
jQuery is all powerful and everything but sometimes a small dash of native JS is all you need to render pixel perfect pages... I hope you will find this solution helpful!
UPDATED:
None of the jQuery width-finding methods account for the scroll bar. In my original example, using .innerWidth(true) LOOKS like it works, but only because it returns and object, which causes width to fail and the inner contents size themselves to fit in the available space, because the example wasn't very good. However, it's possible to write a function to compute the available space in a div with a scroll bar in it, which can then be used to position the contents as you wish.
To write that function, I took advantage of the fact that, when a div is appended to a div with a scroll bar in it, it takes up the full available width (i.e. the inner width of the parent minus the width of the scroll bar).
The function looks like this:
function noScrollWidth(div){
var measureDiv = $('<div id="measureDiv">');
div.append(measureDiv);
var width = measureDiv.outerWidth();
measureDiv.remove();
return width
};
I then use this to size my content div:
$('#contentDiv').width(noScrollWidth($('#containerDiv')));
Working fiddle.
Try this:
$('#contentDiv').width($('#containerDiv')[0].clientWidth)
For more information about that solution, see this StackOverflow answer.
Another approach I'd try is setting both elements' box-sizing property to 'border-box', and see whether setting your contentDiv's width to 100% then works the way you want.
Now that fewer projects worry about crufty old browsers anymore, 'border-box' can make things easier to work with. Be sure to test multiple browsers on multiple platforms, though, because I'm not sure they all handle scrollbars the same way.
How do know width of an inline element, without adding to document?
With adding
var span = document.createElement('span');
span.innerHTML = 'Hello, world!';
span.offsetWidth; //0
document.body.appendChild(span);
span.offsetWidth; //70
How without adding to document?
Sorry for my english)
The width of an element does obviously depend on the styles used (e.g. on the font size), so it is impossible to compute the width of the element without knowing where it is in the DOM.
You may add it to some invisible element if you don't want it to show on the screen.
You cannot get a width of an element if the element itself is not part of the DOM.
You need to append it, but you may also position it outside the visible area (with position: absolute and a negative left/top property) and remove it once you got the width
Until the element is added, there's no way to know for sure how wide it is, because it depends on the styling context.
jQuery's width() method has a trick that it uses for display: none elements, I don't know if it will work for an element that hasn't even been added to the DOM (it works by temporarily showing the element, getting the width, then hiding it again).
In other words, is there a way to get width of cell text in spite of overflowing?
There's a concept of a 'text node', but frankly I don't know how to access its width. My first instinct is if it's a must-have, wrap the cell contents up in a span and get the span's width. Strikes me as kind of ugly, but sometimes purpose is more important than appearance. ;-)
$('td span').width(); // the width
Fiddle: http://jsfiddle.net/Cvv4b/
If you really need to avoid the span, you could write a wee little utility that gets the text, copies it into a hidden element that doesn't have a width restriction (this element could be created on the fly if need be), and return the width of that hidden element.
I have a table that represents Tab-structure.
Some cells are set to display: none; and only the active tab is displayed.
I want to set the max-height to all of them.
To do it, I go through the array of tabs and do the following
// get the max-tab-height
for (var i = 0; i < TabPageList.length; i++)
{
// get max height
if (TabPageList[i].offsetHeight>MaxTabHeight)
MaxTabHeight = TabPageList[i].offsetHeight;
}
The problem with this approach is that offsetHeight is working only for the active tab that is displayed.
So, what's the Height of the ones that are not shown, when they will be shown?
Because the inactive tabs are set to display:none, the offsetHeight is not useful. Try running your MaxTabHeight routine at the same time that you activate the tab, after it is made visible. I'm assuming that's inside the tab's click event.
Try using visibility:hidden (not display:none). As I recall, using visibility elements are just hidden but keep their dimensions.
For usability, the tabs shouldn't be set to hidden with CSS. (There are still the small percentage out there that has js disabled). If you run through the tabs, reading their height, while hiding them, you can easily find the tallest tab. And at the same time make your site more user-friendly (:
And if you don't want the hidden cells to collapse, you could also use visibility:hidden; like stated above.
As the others have said you may get the height by setting the visibility to hidden (which makes the object keep its dimensions while hidden):
visibility:hidden;
with the additional trick of setting its position to absolute to avoid it taking space on the page (you may do this just for the time needed to get at the height, restoring its position attribute afterward).
A second approach may be to keep the tab visible but move it off the page by setting its absolute position to some sufficiently large coordinates.