Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    I have a photo, and I want a details button just below it. so when I click it, information would slide down, and provide more information.

    here is a flash example of what I am tring to do. Link

    I tried this tutorial, but its not made to do exactly I want. I tried to mess around with the code, but it got messy, and I came across too many bugs.

  2.  

  3. #2
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    you could try doing it with scriptaculous effect.SlideDown - this could be done very simply actually

  4. #3
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    I cheaked out the website, and downloaded the java scripts. but I am confused

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Using advanced javascript libraries can indeed be highly confusing. I suggest mootools alongside the tutorial here, go down to the "fx.slide" section. The effect you want is either that or the accordion effect.

    Good luck, because it took me 3 days to grasp with this library.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Effect.BlindDown.

    To achieve this, you'd do something where you'd have the data and the `details' section in a div:
    Code:
    <div>
        This is my cool data. <a id="showDetails" href="#">Details...</a>
        <div id="details" style="display: none;">
            Details.
        </div>
    </div>
    Then, you'd assign, in Javascript, an onclick method for the a tag.
    Code:
    $('showDetails').onclick = function()
        {
            if ( $('details').getStyle( 'display' ) == 'none' )
                new Effect.BlindDown( 'details' );
            else
                new Effect.BlindUp( 'details' );
    
            return false;
        }
    That'll do it. As long as you've included the Prototype and script.aculo.us libraries, and you put that second chunk in <script> tags, that should achieve the effects you're looking for, including blinding up when it's already open.

  7. #6
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    I have no idea on how js works (even though I know java). so how I include the Prototype and script.aculo.us. The other script I was using had a simple copy/paste tutorial and have no idea what I am doing.

  8. #7
    Senior Member leprechaun13's Avatar
    Join Date
    May 2005
    Location
    Northampton
    Posts
    487
    Member #
    10058
    Sorry to hijack thread but im using scriptaculous with the follwoing code
    HTML Code:
        <div class="button"  onclick="new Effect.toggle($('sub'),'blind')">Home</div>
      <div id="sub" class="sub">Link 1 </div>
    and dont understand how i would have the 'sub' div start as collapsed
    Regards Phil,


  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Add style="display: none;" to it. Unfortunately, you have to do this inline, as CSS-based display: specifications present problems with script.aculo.us's implementation of displaying and hiding.

    For those who are curious, script.aculo.us restores an item's proper display by clearing the display property -- since, especially in IE, it's impossible to tell, say, a table row to go back to default display unless you clear the display property.

    Unfortunately, if you clear the display property from Javascript ([minicode]element.style.display = '';[/minicode]) and a display: none; was originally applied via an external stylesheet, that property takes over, so the item hides instead of showing in its default state.

  10. #9
    Senior Member leprechaun13's Avatar
    Join Date
    May 2005
    Location
    Northampton
    Posts
    487
    Member #
    10058
    Great Thanks works like a dream
    Regards Phil,


  11. #10
    Senior Member leprechaun13's Avatar
    Join Date
    May 2005
    Location
    Northampton
    Posts
    487
    Member #
    10058
    So how would i get it to work in this list?

    HTML Code:
    <ul>
    <li class="button" onMouseOver="new Effect.toggle($('sub1'),'blind',{duration: .1})" onMouseOut="new Effect.toggle($('sub'),'blind',{duration: .1})"><a href="#">Home</a></li><div id="sub1">
    <li class="sub"><a href="#">Link1</a></li>
    <li class="sub"><a href="#">Link2</a></li>
    </div>
    
    <li class="button" onMouseOver="new Effect.toggle($('sub2'),'blind',{duration: .1})" onMouseOut="new Effect.toggle($('sub'),'blind',{duration: .1})"><a href="#">Link 2</a></li><div id="sub2">
    <li class="sub"><a href="#">Link3</a></li>
    <li class="sub"><a href="#">Link4</a></li>
    </div>
    </ul>
    or is it Divs Only?
    Regards Phil,



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com