Solved

How to make these sliding CSS DIV Content layers?

Posted on 2012-03-18
13
436 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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

Use Filtering Commands to Process Files in Linux

Learn how to manipulate data with the help of various filtering commands such as `cat`, `fmt`, `pr`, and others in Linux.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

627 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