Put to div's next to each other and one disappears....

Discussion in 'Web Design and Development' started by Kingsly, Oct 7, 2010.

  1. Kingsly macrumors 68040

    Kingsly

    #1
    I know just enough code to dig my own grave...

    Anyway, trying to put two (eventually three) embedded vimeo's onto a page, where they load into a fancybox when clicked.

    Code:
    <DIV ALIGN=left>
    <a class="fancybox" href="#testube"><img src="http://noteworthyphotography.com/wp-content/uploads/2010/10/habitat.jpg" width="400" height="197" alt="Habitat For Humanity" /></a>
    
    <div style="display:none" id="testube">
    <iframe src="http://player.vimeo.com/video/15375984?autoplay=1" width="560" height="338" frameborder="0"></p>
    </div>
    
    <DIV ALIGN=right>
    <a class="fancybox" href="#testube"><img src="http://noteworthyphotography.com/wp-content/uploads/2010/09/A011_C024_1031CF_00390.jpg" width="400" height="197" alt="Noteworthy Reel" /></a>
    
    <div style="display:none" id="testube">
    <iframe src="http://player.vimeo.com/video/9085243?autoplay=1" width="560" height="338" frameborder="0"></p>
    </div>
    
    However, when I do that only the first element in the line loads. If I reverse the order they are in the code (the one that's aligned right is listed first in the html) then that one will load.
    See the website to see what I'm talking about.

    Help?? I'm a film guy, not a web designer! :rolleyes:
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    One issue, you're using the same id attribute (testube) more than once. An id, by definition, can only exist in one spot on the page. This will be part of the problem. Another big one, your code is not valid. Viewing the source code in Firefox shows the syntax coloring goes awry when you get to the iframe code, which is a strong indicator of badly formatted code. Proper use of iframe.
     
  3. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #3
    Edit: scrap that, mis-read on my part.

    As angelwatt suggests the problem is likely fancy box is using the id to determine which video to load and the ids are both the same (test tube). So for the second video make the id of the <div> "testtube1" and also change the href of the anchor (<a>) to "testtube1".

    Try this:

    HTML:
    <DIV ALIGN=right>
        <a class="fancybox" href="#testube1"><img src="http://noteworthyphotography.com/wp-content/uploads/2010/09/A011_C024_1031CF_00390.jpg" width="400" height="197" alt="Noteworthy Reel" /></a>
        <div style="display:none" id="testube1">
            <iframe src="http://player.vimeo.com/video/9085243?autoplay=1" width="560" height="338" frameborder="0"></p>
        </div>
    </div>
    
    And if it works then just keep incrementing the count for each new video you wish to add to the page.
     
  4. whatsgooddan macrumors member

    Joined:
    Apr 6, 2009
    Location:
    NY, USA
    #4
    what happens when you use the old embed code? (from vimeo)
     
  5. Kingsly thread starter macrumors 68040

    Kingsly

    #5
    What does the id reference? Do I have to change something in the fancybox css? I pasted your above code in and still have the same problem. It makes sense what you're saying though, how it needs seperate id's to load everything okay.
    I just completely fail at any and all code. :(
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    The id was only one issue, the invalid HTML is the bigger one, which you need to fix. You're not using the iframe tag correctly.
     
  7. Kingsly thread starter macrumors 68040

    Kingsly

    #7
    I see. How do I fix it? I was serious when I said I completely fail at code.

    Wordpress is a dangerous thing for somebody who thinks they're smart enough to do fancy html magic with google and copy/paste... :eek:
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    I gave a link before on the iframe tag. You never close your iframe tag.
     
  9. Kingsly thread starter macrumors 68040

    Kingsly

    #9
    Oh man, I completely overlooked the link you included. Okay, now we're cooking. Closing the iframe tags made the second video appear, and numbering the id's as ellpa suggested made the second video load correctly.

    Now, one last issue and we can close this case! As you can see on the site, the second element loads below the first. How do I get them on the same line? :confused:
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Well, you're using div tags, which are block elements, which means they naturally have a line break before and after. There's also p tags in between your images, which are also block elements. You can either use CSS to make the block elements display as inline ones (using the display property) or you can float them (using the float property). The link above will get you rolling on the block to inline technique. Lastly, you could move them all into the same div in their own anchor tag (<a>).
     

Share This Page