I have the following structure of the code. If the height of UL exceeds 270 pixels, then I want to add the CSS property overflow-y:scroll; or else as it is.
<ul class="tabs">
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
Add a comment
|
4 Answers
The following code uses jQuery to get the height and compare it. Note that it probably needs to be visible at the point where you call this to have a valid height.
$(function() {
$(".tabs").each( function() {
var $this = $(this);
if ($this.height() > 270) {
$this.css( 'overflow-y', 'scroll' );
}
});
});
Note this will work on all elements with the class tabs, not just the first one.
3 Comments
Matt
Upvoted for only calling the selector once, vs the others who are forgetting basic jQuery principles.
Corey Ballou
This could be optimized by storing var $this = $(this) which would reduce the selector lookups by one for each iteration. +1
tvanfosson
@caballou -- typically, that's what I would do as well. I've updated.
if($(".tabs").height() > 270) {
$(".tabs").css("overflow-y", "scroll");
}
Assuming you're using jQuery.
1 Comment
tvanfosson
Also assumes that there's only one mathching element on the page or that the CSS should be applied to all matching elements if the first element exceeds the height requirement...though that may be a safe assumption.
You can do this:
$(".tabs").attr("style", "overflow-y:scroll");
This will remove the current style from the element(s). You can also use the .css function referenced here. This will keep other style values.
$(".tabs").css("overflow-y","scroll");
You have to check if the height is over 270px. To do so use the .height() method referenced here. You need to figure out where and when you want to do this test.
7 Comments
Matt
Assuming he's even using jQuery, you should be using the .css() function.
marcgg
that's true that works as well. I'mm adding that to my answer. He's using jquery(see tags)
Rakesh Juyal
thats simple :). How about checking if the
height of UL exceed 270pxRakesh Juyal
@marcgg: +1
He's using jquery(see tags) correction She. ;)marcgg
@rakesh: My bad ^^ I also added some references to check height
|
Other answers give good methods to check the size. Just to add a tidbit, I prefer to keep my markup in a .css file, link that in and then apply the markup in my JavaScript file:
.scrollList
{
overflow-y:scroll;
}
And then in the script:
$('.tabs').addClass('scrollList');
And if you want to remove it again:
$('.tabs').removeClass('scrollList');
And, if you wish to fix the size you can do that in that markup section in the .css file as well.
answered Nov 18, 2009 at 13:35
Mark Schultheiss
34.3k13 gold badges75 silver badges116 bronze badges