Results 1 to 8 of 8

Thread: Collapsible Scrolls

  1. #1
    Join Date
    Aug 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Collapsible Scrolls

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
        <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/cs...croll-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:

    Code:
    #shop {
    background-image:url('filename.jpg');
    height:118px;
    width:200px;
    }
    What the mouseover function must be is something like:

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

    Code:
    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.
    Last edited by jscheuer1; 08-22-2006 at 06:03 PM. Reason: correct for camel style notation
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yeah im gonna talk to Leaky Cauldron about that.

  4. #4
    Join Date
    Aug 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    I made a notation error in my script code. I have corrected it, in the original post.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Aug 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    it sorta works now.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Aug 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    it is a cool script. I'm suprised there isn't more out there like it.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •