Web Design Code / Script

Andy Rivers

Hi all,

I am looking for a code / script that will give a similar effect
to what Nintendo use on the website at http://www.nintendo.com/games/wifi

Any ideas of how this has been implemented?

Thanks,

Andy

p

Which bit? Just looks like a normal page to me.

louie

Same here. A normal template designed in Photoshop or Fireworks, sliced and html coded using CSS stylesheet.

Andy Rivers

Oops....I forgot to mention the effect. When you hover over any of the games the box expands with extra details. I can layout the page but just
that effect of the box expanding on this site - how is this achieved? http://www.nintendo.com/games/guide

Thanks again,

Andy Rivers
"I don't own a cell phone or a pager. I just hang around everyone I know, all the time. If someone wants to get a hold of me, they just say 'Andy,' and I say 'what?' and turn my head slightly"

Adam

Andy Rivers wrote: »

Oops....I forgot to mention the effect. When you hover over any of the games the box expands with extra details. I can layout the page but just
that effect of the box expanding on this site - how is this achieved? http://www.nintendo.com/games/guide

Thanks again,

Andy Rivers
"I don't own a cell phone or a pager. I just hang around everyone I know, all the time. If someone wants to get a hold of me, they just say 'Andy,' and I say 'what?' and turn my head slightly"

Well it's not a very easy thing to do well, but a point in the right direction: http://dojotoolkit.org/

that's the library they're using to get that effect.

p

They've done it with something like dojokit Mirror mentioned, but you can actually do it with CSS quite simply.

Essentially you just have some code in a link that changes from display: none; to display:block when you hover over the link:

Here's a few links that'll might help:
http://www.cssplay.co.uk/menu/balloons.html
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/
http://www.briggs.net.nz/log/2007/04/06/basic-css-popups/

Andy Rivers

Thanks for the help those links will be a great start.

Andy

Webmonkey

Scriptaculous would make that simple enough.

http://script.aculo.us/

Create the Divs for the headers
Under each div, have the content divs.
Have all content divs except first on display:hidden first and then use scriptulous to create that open BlindDown/BlindUp effect.

Need bit of javascript to track which opened and which closed. So close opened once and open new one, on the Onclick event that is done when they click the Header divs.

Andy Rivers

Ta for that Webmonkey - certainly making the job easier.

Andy