PDA

View Full Version : Collapsible Scrolls



redwall_hp
08-22-2006, 01:45 AM
If you look at www.the-leaky-cauldron.org, you'll see some cool looking scrolls on the right-hand sidebar. If you point to them, they expand and show HTML text and links in them. How do you do this? I haven't managed to build anything that works. Could someone help? I would appreciate a script. I can probably make any scroll images myself.

jscheuer1
08-22-2006, 07:30 AM
Note: This could be copyright in whole and/or in part. Do not use this code without determining the legal ramifications and your rights our lack thereof to use it.

This appears to be rather simple and at the same time quite ingenious. Here is the markup for the first scroll:


<div id="shop" onmouseover="openShop();" onmouseout="closeShop();">
<div id="shop-content" style="display: none;">

<h2>The Cauldron Shop</h2>
<h3>What's New!</h3>
<ul>
<li><a href="http://www.thecauldronshop.com/product.php?cid=53&l=us" target="_blank">Goblet DVDs!</a></li>
<li><a href="http://www.thecauldronshop.com/product.php?cid=7&l=us&p=5" target="_blank">Hermione's Earrings</a></li>
<li><a href="http://www.thecauldronshop.com/product.php?cid=3&l=us&p=12" target="_blank">Lucius's Walking Stick</a></li>

<li><a href="http://www.thecauldronshop.com/product.php?cid=67&l=us&p=5" target="_blank">Chess Set</a></li>
<li><a href="http://www.thecauldronshop.com" target="_blank">and More!</a></li>
</ul>
</div>
</div>

There is only one background image for the division with the id of 'shop':

http://www.the-leaky-cauldron.org/css/images/scroll-shop.jpg

as you can see, it is both the furled and unfurled versions of the image together in one, with one over the other. The css for #shop would be like:


#shop {
background-image:url('filename.jpg');
height:118px;
width:200px;
}

What the mouseover function must be is something like:


function openShop(){
document.getElementById('shop').style.backgroundPosition="0 118px";
document.getElementById('shop').style.height="262px";
document.getElementById('shop-content').style.display="";
}

The mouseout:


function closeShop(){
document.getElementById('shop').style.backgroundPosition="0 0";
document.getElementById('shop').style.height="118px";
document.getElementById('shop-content').style.display="none";
}

I didn't steal these, and they would need adjustment for other scrolls. They are just my idea of what must be happening.

redwall_hp
08-22-2006, 12:10 PM
yeah im gonna talk to Leaky Cauldron about that.

redwall_hp
08-22-2006, 01:27 PM
I still coudln't get it to work, but I just figured out how to make my own. It works by clicking instead and I used by own scroll images.

jscheuer1
08-22-2006, 06:05 PM
I made a notation error in my script code. I have corrected it, in the original post.

redwall_hp
08-23-2006, 01:14 PM
it sorta works now.

jscheuer1
08-23-2006, 03:01 PM
Well, the numbers would have to be fine tuned via trial and error but, the concept should be sound. This is something I intend to play around with when I get some extra time.

redwall_hp
08-24-2006, 12:24 PM
it is a cool script. I'm suprised there isn't more out there like it.