jQuery/arrays

hi,

how do I grab items from an array in jQuery? what I’m trying to do (standard tabbed-content switcheroo):

  
    var height = [440, 520, 540, 550, 415 ];


  $('#marquee_content a.tablink').click(function(e) {
        e.preventDefault();
        $('#marquee_content .marquee').css('visibility', 'hidden');
        $('#marquee_content .marquee').eq($(this).index('#marquee_content a.tablink')).css('visibility', 'visible');
                
	   for (i=0; i < 6; i++ ) {
            $('#marquee_content').css('height',height[i]);  // is ignored.. how can I do this, please...
                                                                           //  but throws no errors...
        }

    });

You need to include a unit of measurement to set the height, eg:


$('#marquee_content').css('height',height[i] + "px")

thank you for yr response… actually jQuery, if you do sthg like (element).css(‘height’,80); jQuery autom. converts the value to a px value… BUT: I did also try initializing the array thus:

var height = [“440px”, “520px”… ]; that also didn’t work… can’t test your suggestion now… has to be at work tomorrow…

thank you very much…

Are you certain you are applying the height to the correct element? $(‘#marquee_content’) looks like a single div container, but you are looping 6 times applying a height to the same element?

hi,

thank u for yr response…

actually it’s an unusual situation… yes, the element I need to chg the height of is the element containing all the tabbed-content (incl the sprite links on top…) the unusual thing is that the structure of the whole thing is:

[FONT=Courier New]<overall container>

<ul>
<li><a…>
<main container for the 1st tab>
</li>
<li><a…>
<main content 2nd tab>
</li>
</ul>[/FONT]

etc… u get the picture… this is how they insist we do it for accessibility…

so: that main div for each tab (right under the link) is positioned absolute, which means it has no height… so the footer is at wrong place…
so that container at the top level has to have a height, but: each tabbed div has content of diff height… and they don’t want extraneous whitespace betw tabbed section and the footer… (why is this textarea so small? and why no

 tags?????? )

I tried giving a height to those containers under each tab/li (which of course I could do w/referring classes in the markup, but I can't do that for top-level container b/c it's only one....;-) but, since it's positioned the height has no effect on the flow of elements on the page.. & so the footer sits right beneath the sprite links..

soooo..  that's the situation..  but actually I think my syntax is wrong.. I think maybe it should be something like (pseudo-code):

give the that top-level element the height that in the array corresponds to the link being clicked.. i.e., if third link was clicked then give that top-level container the height that corresponds to the third element in array, etc..  like I do for popping the tabbed content...

something similar to this line, maybe

        $('#marquee_content .marquee').eq($(this).index('#marquee_content a.tablink')).css('visibility', 'visible');

this is the line that says:  if user clicks on third link, then pop the third tabbed content, etc...  

would appreciate some help..   thank you..

Could you replace that line with something like this:


$('#marquee_content').css('height',$(this).parent().height() + "px");

So each time the link is clicked it checks the height of the parent li and applies that to the height of the container. I’m sure there is a better way to achieve it but that could work for the purposes of getting this functional.

hmmm… interesting… I will try this tomorrow…

thank you very much…