up vote 3 down vote favorite
2
share [g+] share [fb]

I have the following structure of the code, if the height of UL exceed 270px, 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>
link|improve this question
feedback

4 Answers

up vote 6 down vote

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.

link|improve this answer
Upvoted for only calling the selector once, vs the others who are forgetting basic jQuery principles. – Matt Nov 18 '09 at 13:28
This could be optimized by storing var $this = $(this) which would reduce the selector lookups by one for each iteration. +1 – cballou Nov 18 '09 at 13:58
@caballou -- typically, that's what I would do as well. I've updated. – tvanfosson Nov 18 '09 at 14:22
feedback
up vote 1 down vote

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 again:

$('.tabs').removeClass('scrollList');

And, IF you wish to fix the size you can do that in that markup section in the .css as well.

link|improve this answer
feedback
up vote 3 down vote

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.

link|improve this answer
Assuming he's even using jQuery, you should be using the .css() function. – Matt Nov 18 '09 at 13:17
1  
that's true that works as well. I'mm adding that to my answer. He's using jquery(see tags) – marcgg Nov 18 '09 at 13:18
thats simple :). How about checking if the height of UL exceed 270px – Rakesh Juyal Nov 18 '09 at 13:19
@marcgg: +1 He's using jquery(see tags) correction She. ;) – Rakesh Juyal Nov 18 '09 at 13:20
@rakesh: My bad ^^ I also added some references to check height – marcgg Nov 18 '09 at 13:22
show 2 more comments
feedback
up vote 4 down vote 
if($(".tabs").height() > 270) {
    $(".tabs").css("overflow-y", "scroll");
}

Assuming you're using jQuery.

link|improve this answer
1  
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. – tvanfosson Nov 18 '09 at 13:28
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.