Div expander/slider?

JavaScript
1

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.

:slight_smile:

2

Hey,

Has anybody got an idea of how i can do this?

3

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

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.

:slight_smile:

5

Threads merged - Please do not cross post - Just ask for the thread to be moved if it’s in the wrong forum.

6

Ok sorry Paul :rolleyes:

So is there a way i can achieve this?

7

Hi,

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

8

Something like this I guess:


<!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

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

10

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

11

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

You haven’t done it right :slight_smile:


<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

Hey,

Thanks :slight_smile:

I’m not so good with JS :frowning:

Is there a way so i can click the link again to slide back up?

14

use toggle instead.


<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

Thanks Paul,

You have saved me hours of work! :slight_smile:

Thanks again