Slide some contents of a page on load

Question

I am totally new to jQuery and starting out basically so please forgive if this question sounds amateurish or stupid. Any how I want to the header and footer of the page to remain static but the center contents of the page to slide in from the right side when page loads. Here is the page which does exactly that : flooring-by-design.com

I have looked into slide down function of jQuery and animate function but slidedown slides from top-bottom and I don't want that. What should I do?

My content goes like this:

<div class="container">
    <h1 class='logo'>Site Name</h1>
    <div class='bcontent'>
        <div id="one">One Content</div>
        <div id="two">Two</div>
        <div id="three">Three</div>
    </div>
    <footer>Copy rights</footer>
</div>

Div one two and three are the ones which I want to slide in nicely on page load. Just like the example link.

you could also have a look at [bxslider](http://bxslider.com/) — Jake Aitchison, Aug 12 '13 at 10:46
I think this question is what you're looking for. http://stackoverflow.com/questions/596608/slide-right-to-left — patricia, Aug 12 '13 at 10:49
If I understand it properly it is a slider for image and content I don't want slider I only want to animate some content on page load @milkshake — Ahmar Ali, Aug 12 '13 at 10:50

Harry · Accepted Answer · 2015-01-08T12:22:20.037

2

You can do this using jQuery.

Basically the content is set at an offset of 800px from the left initially using CSS. Then using jQuery animate, we slide-in the contents till the offset from left is 0px. You can increase or decrease the duration to alter the speed of the slide-in.

jQuery

$(document).ready(function() {

    $("#one").animate({left: "0"}, {
    duration: 2000       
    });
    $("#two").animate({left: "0"}, {
    duration: 2250
    });
    $("#three").animate({left: "0"}, {
    duration: 2500        
    });
});

CSS

.bcontent > div{
    position: relative;
    display: inline-block; /* to display the 3 div's in same line */
    height: 200px; /* height, width and border just added for demo, not mandatory */
    width: 100px;
    border: 1px solid black;
    left: 110%; /* Added to avoid the width issue pointed out by DRP96 */
}
.bcontent{
    width: 100%;
    overflow: hidden; /* added to make the content hidden initially and avoid scroll-bar */
}

$(document).ready(function() {
  $("#one").animate({
    left: "0"
  }, {
    duration: 2000
  });
  $("#two").animate({
    left: "0"
  }, {
    duration: 2250
  });
  $("#three").animate({
    left: "0"
  }, {
    duration: 2500
  });
});

footer {
  bottom: 0px;
  font-size: 20px;
}
.bcontent {
  width: 100%;
  overflow: hidden;
}
.bcontent > div {
  position: relative;
  display: inline-block;
  height: 200px;
  width: 100px;
  left: 110%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="row">

  <h1 class='logo'>Site Name</h1>

  <div class='bcontent'>
    <div id="one" class="span4">One Content</div>
    <div id="two" class="span4">Two</div>
    <div id="three" class="span4">Three</div>
  </div>
  <footer>Copy rights</footer>
</div>

edited Jan 08 '15 at 12:22

answered Aug 12 '13 at 10:48

Harry

87,580
25
202
214

although `left` should be larger than 800.. Maybe 2000, as it would be still visible on larger displays. – Dion Aug 12 '13 at 10:58
And `$("#one").animate({left: "0"}, { duration: 2000 });` could be simply `$("#one").animate({left: "0"}, 2000);` ;) – Dion Aug 12 '13 at 10:59
Harry thanks but the problem is that div one two and three are in one line. I am using twitter bootstrap and they are in each column. So I am using
so how to use it there?
– Ahmar Ali Aug 12 '13 at 11:00
1

@DRP96: Yup, correct on both points. For 1, My jsFiddle window was smaller :D. For 2, I basically wanted to make it obvious as to what the 2000 value is for :) – Harry Aug 12 '13 at 11:01
@AhmarAli Sorry mate, I didn't quite catch that. Can you update my Fiddle with your HTML structure? – Harry Aug 12 '13 at 11:03
@Harry here is my page: http://contestlancer.com/davidicus/ where I want to use it – Ahmar Ali Aug 12 '13 at 11:07
@Harry for some odd reason it still doesn't work on my webpage. Can you take a look at my page http://contestlancer.com/davidicus/ – Ahmar Ali Aug 12 '13 at 11:44
@AhmarAli: try to add `style="position:relative; left: 110%;"` to all 3 div tags and check if it works. – Harry Aug 12 '13 at 11:53
@Harry Can you take a look now at my website. I have added left :110 and also updated the jquery code in footer to my div id's doesn't make a difference – Ahmar Ali Aug 12 '13 at 14:25
@Ahmar Ali I still can't see it reflected. In your bootstrap.css file it still shows `left:0` to me. Also, now I don't see the `overflow:hidden` in your row. – Harry Aug 12 '13 at 14:46
@Harry can you take a look now. When I add overflow:hidden and add left:110% to divs the whole content disappears. – Ahmar Ali Aug 12 '13 at 15:07
You are not able to see anything because the `left:110%` is getting applied but for some reason your animate function doesn't seem to be getting executed. I have no idea why :( – Harry Aug 12 '13 at 16:20
@Harry what is the possible solution then? – Ahmar Ali Aug 12 '13 at 16:50
@AhmarAli I copied your code to my local and saw that there were two issues preventing the slide from working. 1. In your bootstrap.css, remove the `left:0;` rule from the declaration for `#portfolio`, `#music` and `#blog`. 2. In your main HTML file add `position:relative; left:110%;` for `span4` (Note: `!important` is not required). These two changes should make it work as I can see it working on my local. Also, the `id` for the second block is wrongly mentioned as `#message` in the script. Change it to `#music`. – Harry Aug 13 '13 at 03:12
1

@Harry thanks a lot mate. I can't believe someone at the free forum can work so hard to solve someone else's problem. I really appreciate it and thank you from bottom of my heart. You are wonderful. – Ahmar Ali Aug 13 '13 at 05:34

score 1 · Answer 2 · answered Aug 12 '13 at 11:00

1

<div class="container">
<h1 class='logo'>Site Name</h1>

<div class='bcontent'>
<div id="one">One Content</div>
<div id="two">Two</div>
<div id="three">Three</div>
 </div>

<footer>Copy rights</footer>

 </div>

for the above html you can refer to the **demo

answered Aug 12 '13 at 11:00

Ramki

166
1
12

http://contestlancer.com/davidicus/ is where I want to use it. Can you please take a look and tel me how do I achieve this there this code doesn't work there – Ahmar Ali Aug 12 '13 at 11:07
didn't understand what you have commented – Ramki Aug 12 '13 at 11:12

Slide some contents of a page on load

2 Answers2