Solved

How to make these sliding CSS DIV Content layers?

Posted on 2012-03-18
13
431 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

DevOps Toolchain Recommendations

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

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

821 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