SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div expander/slider?

    Hey,

    I need to do something but i don't know how. On this page:

    http://www.freemanholland.com/jemma/Jemma/

    If you look at the #slider element (Aboutme purple bit), i need this to slide down as soon as the page loads. So when you see load the page, the #slider element will expand down to show the "Aboutme" text..

    Can this be done? If so how?

    Thanks in advance.

    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Has anybody got an idea of how i can do this?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Sounds like something Javascript does.

    Stuff "sliding" isn't a CSS thing, so first look around for some Javascripts that do something like what you're after (the word "slider" will likely bring up plenty), then after some investigation into whatever looks like it does what you want, head over to the Javascript forums here and ask if what you've found looks to be a good idea/good code (since there are plenty of bad scripts floating around as well).

  4. #4
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div expander/slider?

    Hey,

    I need to do something but i don't know how. On this page:

    http://www.freemanholland.com/jemma/Jemma/

    If you look at the #slider element (Aboutme purple bit), i need this to slide down as soon as the page loads. So when you see load the page, the #slider element will expand down to show the "Aboutme" text..

    Can this be done? If so how?

    Thanks in advance.

    :-)
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Threads merged - Please do not cross post - Just ask for the thread to be moved if it's in the wrong forum.

  6. #6
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok sorry Paul

    So is there a way i can achieve this?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Jquery has a number of in built sliding effects if you don't mind using a library.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Something like this I guess:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="stylesheet" href="http://www.freemanholland.com/jemma/styles.css" />
    <style>
    /*
          Created by Ibrar Hussain of Freeman Holland Ltd
          
          E-Mail: ibrar@freemanholland.com
                
    */
    
    * {
        padding: 0;
        margin: 0;
    }
    body {
        font-family: "Kozuka Gothic Pro R";
        font-size: 13px;
        background:#20201d
    }
    .left {
        float:left;
        margin-right:10px
    }
    .right {
        float:right
    }
    .minusmargin {
        margin-top:-1px
    }
    .jemma {
        position:absolute;
        margin-top:40px;
        z-index:100
    }
    h1 {
        font-size:23px;
        font-weight:normal;
        font-family:"Kozuka Gothic Pro EL";
        color:#fff;
        margin-bottom:5px
    }
    .width {
        width:100px
    }
    .height120px {
        height:120px;
    }
    .margin-right {
        margin-right:15px
    }
    a {
        color:#cacaca;
        text-decoration:underline
    }
    a:hover {
        text-decoration:none
    }
    /********************************************
       LAYOUT
    ********************************************/ 
    
    #wrapper {
        margin: 0 auto;
        width: 922px;
    }
    /********************************************
       HEADER
    ********************************************/ 
    
    #header {
        width: auto;
        color: #cacaca;
        padding: 10px;
        height: 19px;
        margin: 0px 0px 0px 0px;
        background:url('http://www.freemanholland.com/jemma/images/header.jpg');
        padding-left:80px
    }
    #header img {
        margin-left:18px
    }
    /********************************************
       NAVIGATION
    ********************************************/
    
    #navigation {
        color: #333;
        margin: 0px 0px 0px 0px;
        float:right;
        height: 22px;
        width: 607px;
        font-size:14px;
        padding-top:3px;
    }
    #navigation ul {
        margin-left:5px
    }
    #navigation li {
        list-style:none;
        display:inline;
        padding-bottom:3px;
        margin-right:30px
    }
    #navigation li a {
        color:#fff;
        text-decoration:none
    }
    #navigation li a:hover {
        border-bottom:3px solid #5c408f
    }
    /********************************************
       CONTENT WRAP
    ********************************************/
    
    #content-wrap {
        width: 922px;
        color: #333;
        overflow:hidden
    }
    /********************************************
       MIDDLE
    ********************************************/
    
    #middle {
        background:url('http://www.freemanholland.com/jemma/images/manc.jpg') no-repeat;
        height:300px;
        width:922px;
        border-bottom:1px solid #fff;
    }
    #play {
        float:right;
        background:url('http://www.freemanholland.com/jemma/images/play.png');
        margin-right:60px;
        width:260px;
        height:20px;
        padding:6px;
        color:#fff;
        font-size:15px;
        padding-left:20px;
        margin-top:44px
    }
    #quote {
        position:absolute;
        background:url('http://www.freemanholland.com/jemma/images/quote.png');
        margin-top:264px;
        width:618px;
        height:22px;
        font-size:16px;
        color:#fff;
        padding:8px 6px 6px 300px;
    }
    #quote span {
        margin-left:20px
    }
    /********************************************
       BOTTOM
    ********************************************/
    
    #bottom {
        background:url('http://www.freemanholland.com/jemma/images/bottom.jpg') no-repeat;
        height:300px;
        width:922px;
    }
    #boxes {
        height:230px;
        width:822px;
        float:right;
        margin-top:30px
    }
    .bottom-right {
        background:url('http://www.freemanholland.com/jemma/images/home-content.png') no-repeat;
        height:300px;
        width:250px;
        float:right;
        padding:20px;
        color:#cdcdcd
    }
    .bottom-right span {
        color:#cacaca;
        font-weight:bold
    }
    .bottom-right li {
        margin-bottom:4px
    }
    .links {
        width:200px;
        margin-left:15px;
        margin-top:6px
    }
    /******************************************** END OF HOMEPAGE ********************************************/
    
      /********************************************
       WRAPPER
    ********************************************/
    
    #inner-content-wrapper {
        float:left;
        width:922px;
        overflow:hidden;
        background:#d0d0d0 url('http://www.freemanholland.com/jemma/images/inner.jpg') repeat-x;
    }
    /********************************************
       LEFT COLUMN
    ********************************************/
    
    #left-column {
        float:left;
        width:600px;
        height:400px
    }
    #slider {
        float:left;
        height:49px;
        background:url('http://www.freemanholland.com/jemma/images/slider.jpg');
        width:922px;
        padding:25px;
    }
    /********************************************
       RIGHT COLUMN
    ********************************************/
    
    #right-column {
        float:right;
        width:320px;
        height:400px
    }
    /********************************************
       FOOTER
    ********************************************/
    
    #footer {
        width: 888px;
        background: url('http://www.freemanholland.com/jemma/images/footer.jpg');
        margin: 0px 0px 0px 0px;
        padding: 17px;
        height:70px;
        color:#fff;
        padding-top:12px;
        clear:both
    }
    .f-left {
        float:left;
        font-family:"Kozuka Gothic Pro L";
        width:360px;
        padding:5px 40px;
    }
    .f-middle {
        float:left;
        font-family:"Kozuka Gothic Pro L";
        width:120px;
        padding:5px 40px;
        padding-right:0px;
    }
    .f-right {
        float:right;
        font-family:"Kozuka Gothic Pro L";
        width:110px;
        padding:5px 40px;
        margin-right:40px;
    }
    .font {
        font-size:18px;
        margin-bottom:5px
    }
    .phone {
        font-size:18px;
    }
    .f-left span {
        color:#5e4290;
        font-family:"Kozuka Gothic Pro L";
    }
    .f-middle span {
        color:#5e4290;
        font-family:"Kozuka Gothic Pro L";
    }
    .f-right span {
        color:#5e4290;
        font-family:"Kozuka Gothic Pro L";
    }
    .f-right a {
        color:#fff;
        text-decoration:none
    }
    .f-right a:hover {
        text-decoration:underline
    }
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $("#slider").hide(); //Hide 
        $('#slider').slideDown('slow', function() {
        // Animation complete.
      });
    
    
    });
    </script>
    
    <link rel="stylesheet" href="http://www.freemanholland.com/jemma/twitter.css" />
    </head>
    <body>
    <!-- Begin Wrapper -->
    <div id="wrapper">
        <!-- Begin Header -->
        <div id="header">
            <!-- Begin Naviagtion -->
            <div id="navigation">
                <ul>
                    <li><a href="http://www.freemanholland.com/jemma/">Home</a></li>
                    <li><a href="http://www.freemanholland.com/jemma/Jemma">Jemma</a></li>
                    <li><a href="http://www.freemanholland.com/jemma/TV">Tv</a></li>
                    <li><a href="http://www.freemanholland.com/jemma/Radio">Radio</a></li>
                    <li><a href="http://www.freemanholland.com/jemma/CV">CV</a></li>
                    <li><a href="http://www.freemanholland.com/jemma/Fashion">Fashion</a></li>
                    <li><a href="http://www.freemanholland.com/jemma/Charity">Charity</a></li>
                    <li><a href="http://www.freemanholland.com/jemma/Contact-Jemma">Contact Jemma</a></li>
                </ul>
            </div>
            <!-- End Naviagtion -->
            <img src="http://www.freemanholland.com/jemma/images/logo.png" alt=""/> </div>
        <!-- End Header -->
        <!-- Begin Content Wrap -->
        <div id="inner-content-wrapper">
            <div id="slider">
                <h1>About<span>me</span></h1>
            </div>
            <div id="left-column"> </div>
            <!-- Begin Footer -->
            <div id="footer">
                <div class="f-left">
                    <p class="font">Contact<span>Jemma</span></p>
                    <p>If you have any questions or queries please feel free to get in touch, either
                        by phone or via e-mail. </p>
                </div>
                <div class="f-middle">
                    <p class="font">Phone<span>me</span></p>
                    <p class="phone">07847 573 234</p>
                </div>
                <div class="f-right">
                    <p class="font">Email<span>me</span></p>
                    <p class="phone"><a href="mailto:jemma@hotmail.com">jemma@hotmail.com</a></p>
                </div>
            </div>
            <!-- End Footer -->
        </div>
        <!-- End Wrapper -->
    </div>
    </body>
    </html>

  9. #9
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks,

    Just one thing, on page load i get a white sort of line and then it slides down. It only does this once, i have implemented on all the pages now so you can check all the pages.

    Any ideas why this is? (If you see it )

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  10. #10
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also i am trying to use it on the homepage, see link:

    http://www.freemanholland.com/jemma/

    Aim is when i click on "Play Jemma's latest video trailer" The black box you can see now will slide down.

    If you view source i have tried to do something with it using the same approach but it does not work..

    Any ideas? Am i missing something?

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by billy_111 View Post
    Hey thanks,

    Just one thing, on page load i get a white sort of line and then it slides down. It only does this once, i have implemented on all the pages now so you can check all the pages.

    Any ideas why this is? (If you see it )

    Thanks
    Hi,

    I don't see a white line on this page although you will get a slight flash because the js hides the element on page load. You could switch the element off to start with (#slider{display:none}) but then anyone with js disabled won't be able to see it.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by billy_111 View Post
    Also i am trying to use it on the homepage, see link:

    http://www.freemanholland.com/jemma/

    Aim is when i click on "Play Jemma's latest video trailer" The black box you can see now will slide down.

    If you view source i have tried to do something with it using the same approach but it does not work..

    Any ideas? Am i missing something?

    Thanks
    You haven't done it right

    Code:
    <style type="text/css">
    #book {
        height:160px;
        background:#000;
        padding:10px;
        font-size:20px;
        width:240px;
        color:#fff;
        margin-top:7px;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#book').hide(); //Hide 
        $('#clickme').click(function() {
         $('#book').slideDown('slow', function() {
        // Animation complete.
         });
        });
    });
    </script>

  13. #13
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks

    I'm not so good with JS

    Is there a way so i can click the link again to slide back up?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    use toggle instead.
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#book').hide(); //Hide 
        $('#clickme').click(function() {
          $("#book").slideToggle("slow");
        });
    });
    </script>
    Leave the js in the head and don't mix it in with your html (or put it at the end of the html before the closing body tag)

  15. #15
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    You have saved me hours of work!

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy


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
  •