Solved

How to make these sliding CSS DIV Content layers?

Posted on 2012-03-18
13
432 Views
Last Modified: 2012-03-20
Hello experts, at this site, https://www.weylandindustries.com/, on the bottom of the screen, 2 divs seem to slide up from below ( titled respectively as "WCCF-73: Module A" and the other"WCCF-73 Module B")
How do you get these 2 slide up from the bottom and more importantly in succession, first "Module A' and then Module B"

Thanks in advance.

I included a snapshot of the two divs.
image1.png
0
Comment
Question by:colonelblue
  • 8
  • 4
13 Comments
 
LVL 30

Expert Comment

by:IanTh
ID: 37734229
if you look at the source there is nothing in the content div so it could be flash or something looking in the source now for that
0
 
LVL 30

Expert Comment

by:IanTh
ID: 37734232
ok one file that pops up is called wc_hp_npthumb.jpg and the other is called wc_hp_tedthumb.jpg and in the source there is nothing called that so it must be in a javascript file still looking
0
 
LVL 30

Expert Comment

by:IanTh
ID: 37734235
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
        <script src="js/libs/jquery-ui-1.8.18.custom.min.js"></script>

I think thats doing it
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 30

Expert Comment

by:IanTh
ID: 37734236
its similar to ajax stuff in dreamweaver too
0
 
LVL 30

Expert Comment

by:IanTh
ID: 37734239
http://jqueryui.com/demos/droppable/

I think its that it looks very similar
0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 500 total points
ID: 37734256
Try this jsfiddle.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by Proculopsis</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
  
  <style type='text/css'>
    .tab {
    position: absolute;
    bottom: -80px;
    width: 100px;
    height: 100px;
    border : solid 1px red;
    background-color: beige;
}
.two {
    left: 111px;
}
 
  </style>
  
 
 
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$("#show").click(one);
 
function one() {
    $(".one").animate({
        bottom: "0%"
    }, "slow", two);
}
 
function two() {
    $(".two").animate({
        bottom: "0%"
    }, "slow");
}
});//]]>  
 
</script>
 
 
</head>
<body>
  
<div class="tab one"></div>
 
<div class="tab two"></div>
 
<input class="trigger" id="show" type="button" value="Click Me" />
 
</body>
</html>

Open in new window

0
 

Author Comment

by:colonelblue
ID: 37735125
OH wow IanTh, that sure lookslike it.
Not much of a coder here, one last question if I may please. How do I do it so that it loads automatically instead of click?

Thanks again you are SO awesome!!!
0
 
LVL 30

Expert Comment

by:IanTh
ID: 37736889
use a timer I suppose

see
http://www.w3schools.com/js/js_timing.asp

like I said there is no code in the content div I suspect its in the javasript which backs up my idea that its been done that way

an onclick event is done in javascript
see
http://www.w3schools.com/jsref/event_onclick.asp
0
 

Author Comment

by:colonelblue
ID: 37740667
Thank you.
0
 
LVL 30

Expert Comment

by:IanTh
ID: 37741345
didn't you think I helped in any way ?
0
 

Author Comment

by:colonelblue
ID: 37742503
Oh my Gosh. Yes of course!! I am so very grateful!
Did I unknowingly convey otherwise, I hope not :(.

I still could t figure how to get the divs to slide up right after the page loaded.
I tried doing an body onload but it just loads the divs without the animation.
I'll keep trying.

Thank you do much , you really are awesome and kind.
I am extremely grateful.

I gave you all A's.

Regards
0
 
LVL 30

Expert Comment

by:IanTh
ID: 37743157
I got no points you gave all the points to ID: 37734256

I dont need the points this month you see I dont pay for EE I just answer questions for my EE account and I need 3000 points a month to maintain my EE account so dont bother I am happy your problem is now working
0
 

Author Comment

by:colonelblue
ID: 37745743
OMG I'm so sorry.
I did not see that.
Please accept my sincere apologies.
I'm VERY embarrassed.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question