SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    787
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    jQuery/arrays...

    hi,

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

    Code:
      
        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...
            }
    
        });

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to include a unit of measurement to set the height, eg:

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

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    787
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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...

  4. #4
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    787
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:

    <overall container>

    <ul>
    <li><a...>
    <main container for the 1st tab>
    </li>
    <li><a...>
    <main content 2nd tab>
    </li>
    </ul>


    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 [CODE] 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..

  6. #6
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you replace that line with something like this:

    Code:
    $('#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.

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    787
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hmmm.. interesting... I will try this tomorrow..

    thank you very much....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •