I'm helping my friend Aidan with his new website - http://aidan.heroku.com/portfolio

At the top of the page, the sliding thumbnails have a link arrow on either side to allow scrolling. These are hidden/shown when not in use.

When hidden (using javascript), they are removed from the page. To avoid the thumbnails shifting to the left when this happens, we hacked together some containing boxes to keep that space occupied, while the internal link was hidden.

So, can anyone think of a better way to keep that thumbnail box centered, while the two links on either side come and go?

edit: can't seem to update the html/css, which has changed. check out the source if you'd like to. edit: developing this in safari, likely broken on other browsers for now.

3 answers

Mottie 1134

You could animate the opacity to zero instead of using fadeOut/In. These functions use the opacity to fade the element out, but then applies a display:none when it is done.

var rt = ( position == max ) ? 0 : 1;
$("a.js#right").animate({ opacity : rt }, 500 );

var lt = ( position == 0 ) ? 0 : 1;
$("a.js#left").animate({ opacity : lt }, 500 );
Answered almost 8 years ago by Mottie

I tried that, but then the buttons remain clickable and I wanted another way. Better of two evils? :P

Answered almost 8 years ago by xanderbeedle

How about hiding the links using visibility: hidden? (JS: elem.style.visibility = "hidden".) This will precisely make the element invisible (and not respond to clicks, in my testing) but leave space reserved for it.

Answered almost 8 years ago by Kevin Reid