JavaScript slideshow fun

February 22, 2006 at 12:48 am | Posted in javascript, tech | 26 Comments

There are things that go smoothly, run like a dream and never complain; there are others that don’t. For me, debugging JavaScript is always one the latter.

DHTML UtopiaI have only recently begun to appreciate the power and fun to be had hacking at javascript, I used to panic at the thought of it. This was until I joined Torchbox where I received not only the help and confidence boost I needed, but also the office has a copy of Stuart’s book ‘DHTML Utopia‘.

I have only gone through the first three or so chapters in detail but over the past six months I have learnt to love event listeners and writing JavaScript as a seamless behaviour layer. No more do I panic about getting tangled up in ‘onclick‘s and ‘JavaScript:‘ – things become easier and a lot more fun when you can abstract the JavaScript from the page entirely.

I have written one or two snippets that I am quite pleased with, and although I have learnt to love writing JavaScript, I still hate debugging it. My most recent exploit has been into the realm of an accessible slideshow.

For work we wanted a way of showing images as a funky slideshow, the slideshow however needed to change the URL for each image and have the ability for the user to either manually alter the URL to go to an image, use the browser’s back button and bookmark an image. The user should choose when to move to another image so in the previously mentioned situations and when next or previous is clicked the images should fade into the next.

In true 2.0 style I have a beta‘ version up and running, its not yet there but its a start. The next and previous links work and fade nicely, the back button really does work (even with the fade) as does the ability to change the URL manually. All images used are ones I have taken and are licensed under the creative commons.

The final version will:

  • Fix all the bugs – so the style ‘issues’, (mainly in IE) there is a flash of the previous image in Safari and some nightmarish debugging is needed for the ‘Permission denied’ error I am getting in IE6! (You may have already guessed that I unashamedly developed this in FireFox.)
  • Fix the performance problem – I really don’t know why this occurs but if you click through a number of images by the time you get to 6 or 7 the performance lag is very noticeable. Currently, I am changing the URL with fragment ID’s from the location.hash property and updating the location.href with the id of the current image. Listening to the URL is done through a function on setInterval() on 500ms that checks against one of the few global variables if the location.hash has changed. I’m thinking of changing this to use setTimeout() instead so I can stop it during the fade and start up again straight after, this might work.
  • Have ‘further information’ links – per image that then changes (not necessarily fades) as the images do
  • Use image maps – As this was the original intention of the slideshow, to work with images that are image maps, I am really hoping that this is going to be a nice easy stage; I have yet to try setting the opacity on image maps.
  • Stress test it! – The fun part, its the fixing afterward that might not be quite such a laugh.

Some inspiration for the slideshow came from Matthew Westcott who developed the cool main image fade on http://breakthrough.org.uk/ and from the Image Cross Fader Redux.

Feel free to view my efforts:

Advertisements

26 Comments »

RSS feed for comments on this post. TrackBack URI

  1. Also consider putting a prev/next link set at the top, where it’s fixed location will make it easier to repeatedly click the same link without re-mousing.

    … And the long load time before reorging the page into the slideshow onload may be confusing. I can imagine people thinking its a regular list of photos, scrolling down (as it continues to load) and then being surprised when the page pops down to the first image.

    Two ways I can think of to address that:

    1) Don’t wait for onload to start scripting: you could immediately start watching for img elms (even as the doc is being loaded) and hide them as they are parsed into the DOM.

    2) From script, immediately style all images to be hidden, then onload fix up your viewer and un-hide them.

    … I think the 2nd way is better. In the 1st way, you’re likely to be fighting rendering reflows with the first approach.

    (Sorry for the criticism– I do like the general result. :))

  2. Thanks Jeremy that’s really useful. The second method, like you said, does sound a cleaner way of approaching the solution – Ill have a go at that :)

  3. Nice. I like that. As an alternative to Jeremy’s suggestions, you might want to hook DOMContentLoaded (in Firefox) and use Dean’s defer trick (http://dean.edwards.name/weblog/2005/09/busted/) in IE so you don’t hang while the images are loading.

    And thanks for the book pimpage, although you of course know that the technical editor did all the *hard* work. :-)

  4. […] As pointed out by Jeremy, my linkable slideshow needed some work to fix the load order of the page without altering the ‘unobtrusiveness’ of its behaviour. […]

  5. Hey Stuart– what’s with the frog cover? The one’s I’ve bought (2) both have the hang glider…

  6. I did look at using DOMContentLoaded and Dean’s defer trick but the solution I came up with worked so the slideshow no-longer hangs while the images load, I will probably go back and use that trick anyway though, I just wanted to see if the try / catch on the DOM loading worked as a quick fix for the time being. Thanks for the suggestion … and the book! and I much prefer the frog cover :)

  7. Frog cover…your guess is as good as mine. The covers happen somewhere I don’t know about. :)

  8. Nat, just jumped here from Simon’s site ;) – if you’re looking to get fancy with listeners, definitely check out the Y! util.Event stuff.

    Stuart, the hang Glider was much cooler. at least you don’t have a funny pop-up-clown-box like Cameron’s book. Some of these covers just trip me out – you really have to question what they were thinking.

  9. […] Cosillas de JavaScript, DHTML, DOMScripting o cmo se le quiera llamar… Un fundido de imgenes, otro y un tercero. DOMTab son unas pestaas bastante apaadas, justo igual que JavaScript Tabifier. […]

  10. wedding cake flowers

  11. brunette teens

    Idinax33000i

  12. interracial porno

    cr00topcheg

  13. first masturbation

    Idinax33000i

  14. nude woman

    cr00topcheg

  15. naked and mature women

    cr00topcheg

  16. lesbian bdsm bdsm comics

    zd00linkar

  17. cock sucking monsters of cock

    privegfd000g

  18. asian teens asian schoolgirl porn

    polezsukablya000

  19. fat guy sex

    n00stalgie

  20. http://www.google.com

  21. http://www.google.com

  22. history of airsoft

    Blog Records:the medicine neurotinComments…

  23. Here, Check This Out, Pretty GoodHave you seen my site? AMAZING,

  24. Sources…

    […]check below, are some totally unrelated websites to ours, however, they are most trustworthy sources that we use[…]……

  25. { {Great|Excellent} news, {1|}just {got|finished up} a jumbo mortgage
    so I {can get|have} that cup of coffee with a {politician|pro athlete!

    |what are jumbo loan rates.
    |{Instead of|Forget about getting} a {JUMBO|jumbo} {loan|mortgage}, {aim for|qualify for} the highest conforming limit
    and {put|slap} the rest on a HELOC. {Avoid|Sidestep those} jumbo {guidelines|rules}
    that want more {liquid|cash} reserves and {include|usually have} higher interest rates.
    .…

    |High cost areas are listed mostly by FHA standards as to what the maximum amount
    they will lend in a area based on the high and low cost of homes in
    any one area. . . To find out if you reside in a high cost area
    you should google high mortgage areas. This will bring you to a
    site that will guide you to a site by adding your zip code
    which will indicate if you are in a high cost area or not.
    . . . I hope this has been of some benefit to you, good luck.
    . . . “FIGHT ON”
    |It might be {hard refi-ing a jumbo loan|difficult refinancing a jumbo mortgage} these
    days. . . {Getting additional|Access to} cash out {might be impossible|coudl prove to be fruitless} and a
    {very bad idea|terrible idea} to begin with.
    |Get out there in front of realtors, home improvement companies,
    insurance agents, etc… and earn referrals from them.
    Go to trade shows, local chamber of commerce meetings and such as well.

    |One {tends to follow|typically follows} the other.
    When {regular|conventional|traditional} residential rates start to go up,
    jumbo and commercial rates will go up {accordingly|as
    well}.
    |Last rate cut won’t really affect your refinancing, but interest rates on mortgage refinance are extremely low now anyway, so it may be in your best interest to refinance.
    |It sounds like a marketing gimmick. Either the loan is conforming, non-conforming, or jumbo. New products enter the market every day so it is always worth reading the fine print to see if this is a break-thru product.
    |If {jumbo loans are NOT availble|jumbo mortgage are hard to get} then {it would mean people who cannot afford that expensive house with|borrowers who don’t have} a {big|substantial}
    down payment will have to {settle for something cheaper|purchase
    a smaller home}

    |How {can anyone|do people} afford {real estate|homes|these mansions} in {San
    Francisco|San Diego|Santa Monica|Paradise Valley, AZ|Mercer Island|bel
    Air||Pacific Palisades|Marin County|Manhattan|NYC|La
    Jolla, CA|Corona del Mar|California}?

    |{Looking for|Searching for|I am in need of|Realtor seeking} {well
    known|a solid and established} jumbo {mortgage|} lenders
    in {AZ|CA|CO|WA|OR|Hawaii}. Need to find {lowest|best} jumbo mortgage rate.

    Can {someone|anybody} help?
    |I’m looking to try and {find|secure} {a low|the best} rate on a jumbo mortgage in {california|SoCal. If anyone can {provide|give me} some {feedback|tips} on jumbo {mortgage|loan} rates in {CA|NorCal|SoCal|San Diego} I’d appreciate
    it. Thanks!.
    |what is a jumbo mortgage and is it a good {option|choice} for purchasing a {house|home}?

    |looking to compare traditional mortgage rates to jumbo mortgage rates.

    |”The jumbo mortgage market traditionally has been a very profitable part of the mortgage market with low default rates,” he (Treasury Secretary Paulson)
    said in written testimony. “For that reason, it seems logical that this market will right itself in the weeks and months ahead. Therefore, consideration … should be limited to a provision that is temporary and is part of legislation strengthen the regulatory structure.”.

    . OK, tell me…what underlying premise is flawed in this assumption?
    .
    |How many middle class people would it take to purchase this home if they pooled their funds ?

    |Any good mortgage lender in DC and Virginia?
    |Hi,. . Im looking for some really good mortgage brokers in {DC and or Virginia|the northeast|Boston|New Jersey|new
    York}. Better is if they deal in jumbo {mortgage|home} loans.
    . If you know anyone, please, {let me know|get in touch with me}!

    .
    |{How can I find out”Where online do I go to see} if my city {qualifies|is eligible} as a “high-cost” area for “conforming jumbo” {interest|mortgage} rates?
    |I want to refinance a house but it’s not worth it unless I can get a “conforming jumbo” mortgage instead of a “jumbo”. Where can I find out if my area qualifies? Is there a published set of maps, or zip code information? This seems like such an obvious question, yet several searches have turned up nothing, almost as if this is embargoed information of some sort..
    |What questions should you ask your mortgage broker or lender when applying for a mortgage?…. Such as {fees|costs}, points, {prepayment|prepay penalties}, {appraisal|title insurance}, and so on…
    |How do I {get my PMI removed|remove mortgage insurance|get rid of MI} from my mortgage?
    |I {want|woud like} to {Refinance|refi} and go from {a jumbo loan|our current jumbo size} to a {standard|conventional|conforming} loan?
    |What is the difference between a conforming mortgage loan and a jumbo mortgage loan?
    |I {am new to|just got into} the Mortgage industry, what are some {ways|methods|techniques} to {generate|create|get} new business?
    |What is the {maximum|highest} mortgage amount you can borrow on a home these days?
    |Which is {a good|the best} {forum|place online|website} to {discuss the|learn about} deals on mortgage rates and are there any good deals right now?
    |I am looking for a place online where people {discuss|talk about} the {different deals|various loan programs} offered by the banks. Are there any current good deals on mortgages?.
    |Will jumbo mortgage rates {jump|go up} when the Fed stops buying Mortgage-backed securities?
    |Your thoughts on the special deal that the Obamas got on their jumbo mortgage-was this fair?
    |How do I {know|find out} if jumbo mortgage loans are available {in my area|where I live}?
    |Is anyone planning to refinanace their home since rates {have gone down|are so low}?
    |I am not in the mortgage crisis. I bought a home that I could afford. Yes, the {right|proper} way to buy a home..
    |How to {choose|pick} the {correct|proper} type of Mortgage and Terms of Loan?
    |{How expensive of a|What’s the highest price} house can I afford?
    |{How do I|what is the best way to} {lower|reduce} the {mortgage|interest} rate on a jumbo loan?
    |Can I take two conforming loans for {a single|one} property?
    |{How Should I Figure Out If|What is a good indicator that} I Should {Refinance|Refi} My Jumbo {Mortgage|Loan}?
    |I {am looking|want} to refinance {within a year|in the next 12 months}..
    |How do I Modificate my Jumbo loan from Wells Fargo?
    |I am {doing|involved in} {a loan modification|modifying my loan} with {citi mortgage|chase|US Bank|B of A|Wells Fargo} {due to|because of} a {necessary|horrible} divorce. How do they {figure out what|calculate the} interest?
    |Want to know what interest rate they will give me and how do they calculate it?.
    |When will Fanny mae change the {mortgage|mortgage interest} rates for jumbo {mortgages|loans}?
    |Does it make sense that no matter how high a mortgage is the Interest rate is the same?
    |Let me clear things up. Isn’t there more of a risk involved in lending out more money and therefore there should be a higher interest rate? I’m {a senior in high school|still in high school|a freshman in college} if that {gives you an idea how to explain it to me|helps you to explain it better}..
    |Is High Conforming Loan same thing as Jumbo {Loan?|mortgage}
    |What {percentage do you need down|down payment percent is needed} for a jumbo loan {these days|nowadays}?
    |Is it true That to qualifiy for jumbo loan, I had to prove income and have good score, if not than am I stuck?
    |Which {lender|mortgage company} has easy home {refi|refinance} terms in {Los Angeles|Orange County|San Diego|Scottsdale|Paradise Valley|Seattle|Bellevue} ?
    |Is getting a mortgage this hard for everyone?
    |Can you refinance a jumbo loan into a combo loan to {eliminate|get rid of} {pmi|mortgage insurance} and the higher jumbo rate?
    |Will the {monthly|mortgage} payment be lower if Our {fico|credit} scores are {excellent|760 plus}…?
    |We are in California and our purchase agreement states, “the loan
    contingency shall remain in effect until the loans
    are funded”. We are thinking of backing out. Would we get our good faith deposit back? . . The bank approved us for the loan, but the {loan officer said that he made a mistake|said he made an error} and {“locked” us in for a conforming loan amount|put us on a conforming loan}, whereas, we needed a jumbo loan. We {suspect foul play|believe they just screwed up} and don’t think he {knows about|is aware of} our loan contingency…..
    |Do you have to have a down payment to {take out|get} a {home|mortgage|residential} loan?
    |What is a considered a {super|jumbo} {loan|mortgage}?
    |Do closing costs count in this balance?
    |{Are there mortgage companies|Is there a lender} that will {give|offer} a jumbo {refi|refinance} to {someone|a borrower} with a new {job|career|profession}?

    Wow, {amazing|wonderful|awesome|incredible|marvelous|superb|fantastic} blog layout! How long have you been blogging for? you {make|made} blogging look easy. The overall look of your {site|web site|website} is {great|wonderful|fantastic|magnificent|excellent}, {let alone|as well as} the content!|
    Wow, {amazing|wonderful|awesome|incredible|marvelous|superb|fantastic} {blog|weblog} {layout|format|structure}! How {long|lengthy} {have you|have you ever} been {blogging|running a blog} for? you {make|made} {blogging|running a blog} {glance|look} easy. {The total|The entire|The whole|The full|The overall} {glance|look} of your {site|web site|website} is {great|wonderful|fantastic|magnificent|excellent}, {let alone|as {smartly|well|neatly} as} the {content|content material}!
    }

  26. anxiety test quiz

    JavaScript slideshow fun | Natalie Downe


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

Create a free website or blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: