DIV / Javascript issue with my portfolio site, help going nuts.

Discussion in 'Web Design and Development' started by bowzer, Jun 30, 2010.

  1. bowzer macrumors 6502

    bowzer

    Joined:
    Apr 25, 2005
    Location:
    Ottawa, Canada
    #1
    So I've spent way too many hours trying to fix this on my own, Im not really the best at coding. For some reason, my image carousel in the website section isnt pushing the content below it down. It's overlapping. But, if you click on the image, it then pushes stuff down and works as it should. It's just happening on the initial load.

    Check out my issue here:
    http://andrewbowser.ca/

    Anyone have any suggestions? (Don't mind the content and the other things that are abit out of place... just trying to fix the functionality first! Thanks ;)
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Seems to only be an issue for the second set. There are some validation errors, but I don't think they're causing this problem. I saw the setup JavaScript for each gallery and they look essentially identical other than the id attribute. I don't know what other script was being used to investigate. You might want to try using Firebug in Firefox to debug the JavaScript.
     
  3. hobbbz macrumors 6502a

    hobbbz

    Joined:
    Mar 8, 2005
    #3
    I think your problem is the floats. there's no reason to float any of those gallery items.

    Float brings an element out of the flow of the page and everything below it acts like the floated element is not there (moves up).
     
  4. thirdkind macrumors member

    Joined:
    Oct 20, 2005
    Location:
    Columbus
    #4
    Trying giving div#cbcgallery a fixed height that matches the height of the images.
     
  5. thirdkind macrumors member

    Joined:
    Oct 20, 2005
    Location:
    Columbus
    #5
    None of the list items are floating, they're positioned absolutely using inline styles, which I'm guessing the carousel script is doing. But the net effect is the same: those absolutely positioned list items aren't in the normal document flow, so the parent div (cbcgallery) is collapsing.

    Giving that div a fixed height should help.
     
  6. bowzer thread starter macrumors 6502

    bowzer

    Joined:
    Apr 25, 2005
    Location:
    Ottawa, Canada
    #6
    Thanks for the replies! Unfortunatly I just uploaded an old version of the header.php so now its busted... I have to get my backup from my other computer, lol..


    but i'll try those suggestions when i get home
     
  7. bowzer thread starter macrumors 6502

    bowzer

    Joined:
    Apr 25, 2005
    Location:
    Ottawa, Canada
    #7
    My only concern with doing that is I don't think all my images are going to be the same height. I guess I could considering that as a last resort, but I was hoping I wouldn't have to do that.

    here is the image script im using
    http://github.com/nathansearles/Faded
     
  8. thirdkind macrumors member

    Joined:
    Oct 20, 2005
    Location:
    Columbus
    #8
    So the height of the image viewer is going to change as the images rotate, causing the content below to jump around? Kind of a bad experience, isn't it?

    I think it would be best to give the div a fixed height matching that of your tallest image so it doesn't cause other content to shift.
     
  9. bowzer thread starter macrumors 6502

    bowzer

    Joined:
    Apr 25, 2005
    Location:
    Ottawa, Canada
    #9
    the plugin is supposed to scroll the content as it comes in, so it wouldnt be just a straight jump... i'll see... seems like the easiest thing is to just make everything the same height..
     
  10. bowzer thread starter macrumors 6502

    bowzer

    Joined:
    Apr 25, 2005
    Location:
    Ottawa, Canada
    #10
    I figured out a way I am happy with... basically I needed to give the images a height, and change the image carosel so it didnt cross fade the images. Giving the images a height, pushed the content down below it, and not crossfading the images means when it transitions, it deletes the image, then puts a new one in, and if the new one is taller it will push the content below it properly.

    I hate coding. lol so many hours spent on the stupidest stuff no one will notice.
     

Share This Page