Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

bowzer

bowzer

macrumors 6502
Original poster
Apr 25, 2005
408
0
Ottawa, Canada
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 ;)
 
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.
 
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).
 
hobbbz said:
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).
Click to expand...

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.
 
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
 
bowzer said:
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
Click to expand...

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.
 
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..
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back