Fixing a few JavaScript slideshow loose ends

February 23, 2006 at 1:06 am | Posted in javascript, tech | 11 Comments

As pointed out by Jeremy, my linkable slideshow (v2) needed some work to fix the load order of the page without altering the ‘unobtrusiveness’ of its behaviour.

I opted for Jeremy’s second method; not waiting for the page to load, instead hiding the images and sorting things out later on. Since the slideshow already relied on importing the CSS with JavaScript I simply moved this outside of the function called onload.

To ensure nothing untoward happens with crazy partial loaded DOM editing I encased the addition of the CSS into a try / catch. On fail of inserting the link rel into the page, the function then simply just calls itself again.

So in the root of the JavaScript file:

...
function setCSS(css) {
try {
// append stylesheet to alter
document.getElementsByTagName("head")[0].appendChild(css);
} catch (e) {
setTimeout(function(){setCSS(css)}, 100);
}
}
// on load
addEvent(window, 'load', setupPage);
// create CSS element to set up the page
var css = document.createElement("link");
css.setAttribute("href","style3.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
// attempt to add the css and then keep trying till we do
setCSS(css);

The CSS then sets all the images except the first one (over-ridden in the JS) to have ‘visibility: hidden;’ and to be positioned absolute in the right place.

Other changes to this version include vague attempts to improve performance through clearing the setInterval() during the fade and resetting after, also through using ‘display: none’ as well as the visibility. This seamed to improve it slightly but nothing revolutionary, it always slows down after 7 or so images regardless of how long you leave between page load and moving to an image.

Image maps work right enough with the slideshow too now which is good, since this was part of the original specification. I also stopped the jumping due to the id’s of the image, I am not too pleased with the solution to this as it involves using a different hash fragment to the image id’s.

The jumping was due to the browser automatically moving to the top of the image with the id, using non-existent id’s stopped this problem but does sort of spoil the seamless effect. For example if i bookmark an image then turn off JavaScript that bookmark will no longer work. The only other solution I can think of to this issue is playing with z-indexes of the other page elements and having the image positioned absolute at the top of the page with padding down to the appropriate height.

This new version is available for your interest here:

Advertisements

11 Comments »

RSS feed for comments on this post. TrackBack URI

  1. I think perhaps you meant the Demo to be this:
    http://code.natbat.co.uk/javascript/slideshow/index4.html

    The current link is 404.

    As far as the fake ID to avoid the jumping, if the pics are all the same size, the one (initial) jump is no bother. I was just referring to albums where you had to chase the nav links from picture to picture.

    What’s the license on the code? Can I steal it?

  2. Thanks Jeremy, I have updated the link now. I know that if the link is always in the same place the first jump isn’t a huge usability issue, at the moment I positioned the links absolute so regardless of the image size they are currently in the same place.

    What I was worried about was the aesthetics of it jumping, it is quite nice to click the next previous links and for it not to jump down

    As for the licensing, if it were completely up to me the code would be under an open source license, most likely one from the creative commons batch. Though considering we may use it at work, I don’t know if this complicates matters … ill have to get back to you on that one :)

  3. Very nice!

    One thing that occurs to me is that it’s not immediately obvious where you are in the slideshow; some text saying ‘1 of 9’ might help.

    Also noticed a small bug – something seems to go wrong if you press next/previous, and then press the opposite direction while the transition is playing.

  4. Erk! you are right, that is quite a bug! maybe I could queue up the next requested image and not try fading until the last transition is over … hmm. Neat idea on the number idea, I hadn’t thought of that. :)

  5. […] This evening I have had some fun playing with performance, which incidentally seams to work fine now, there appeared to be a problem with the images stacking on top of each other with ‘visibility: hidden’ and a not-quite-opaque opacity. Using ‘display: none’ in addition seams to sort things out just fine. I also sorted out the weird forward / back problem pointed out by Richard by not letting the fade start unless it is not already running, unfortunately another global variable but unavoidable in this case I think. […]

  6. This is brilliant, I especially love the fact that I can still use the back button. I know “this is gr8!” comments aren’t very useful, but it’s nice to know your hard work’s appreciated, right? :)

  7. Thanks Phil! it is always nice to get a “this is gr8!” comment! :) glad you like it!

  8. its is deffo a BUG. i cant get it to work right.

  9. Bush and the Republicans were not protecting us on 9-11, and we aren’t a lot safer now. We may be more afraid due to george bush, but are we safer? Being fearful does not necessarily make one safer. Fear can cause people to hide and cower. What do you think? How does that work in a democracy again? How does being more threatening make us more likeable?Isn’t the country with
    the most weapons the biggest threat to the rest of the world? When one country is the biggest threat to the rest of the world, isn’t that likely to be the most hated country?
    If ever there was ever a time in our nation’s history that called for a change, this is it!
    The more people that the government puts in jails, the safer we are told to think we are. The real terrorists are wherever they are, but they aren’t living in a country with bars on the windows. We are.

  10. deposit free bonus casino
    see to signature…

  11. popular free ringtones

    http://www.thehotstop.info

    signature…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: