[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 443
  • Last Modified:

How to make these sliding CSS DIV Content layers?

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
colonelblue
Asked:
colonelblue
  • 8
  • 4
1 Solution
 
IanThCommented:
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
 
IanThCommented:
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
 
IanThCommented:
<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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
IanThCommented:
its similar to ajax stuff in dreamweaver too
0
 
IanThCommented:
http://jqueryui.com/demos/droppable/

I think its that it looks very similar
0
 
ProculopsisCommented:
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
 
colonelblueAuthor Commented:
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
 
IanThCommented:
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
 
colonelblueAuthor Commented:
Thank you.
0
 
IanThCommented:
didn't you think I helped in any way ?
0
 
colonelblueAuthor Commented:
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
 
IanThCommented:
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
 
colonelblueAuthor Commented:
OMG I'm so sorry.
I did not see that.
Please accept my sincere apologies.
I'm VERY embarrassed.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 8
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now