Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to make these sliding CSS DIV Content layers?

Posted on 2012-03-18
13
Medium Priority
?
438 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Implementing Azure Infrastructure Exam 70-533

This course is designed to familiarize and instruct students in the content that is covered by Microsoft Exam 70-533, Implementing Microsoft Azure Solutions. It focuses on all the November 2016 objective domain topics.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

715 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