Solved

Javascript that will "roll up" a div

Posted on 2008-10-08
8
1,690 Views
Last Modified: 2012-08-13
I'm looking for a script that will appear to roll up the div id Block2, revealing the semi-transparent background of the container below it. And a companion script that roll it down and restore it. I would like to have this script activated by clicking on the button that says "See It!"

Please take a look at the file and let me know everything I need to do to create this effect.( I'll look on jquery and Scriptaculous to see if i can find something, but I'm not counting on me to figure it out even if I do find something!)
Here's the file. All the css is onboard: http://www.discretedata.com/A1/Dino/Dinosaurs.html

Thanks!

John
0
Comment
Question by:gabrielPennyback
  • 5
  • 3
8 Comments
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22674580
document.getElementById("div_name").style.visibility="hidden";

That will make the DIV with the name you choose invisible, so whatever is under it will appear --

http://www.w3schools.com/HTMLDOM/prop_style_visibility.asp

If you want some shrinking effect, you will have to create a timer and scale down the size of the DIV per fraction of a second, and you will get a very jerky rendition on some browsers -- it isn't really worth it.
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 22674609
I wasn't thinking of that because I was so focused on the dynamic effect, and I'm enough of a neophyte that I would have forgotten how to construct that line of code. Thanks. Now how do I invoke that code with a button click? iIn particular the "See It" button.

Regarding the shrinking, I'm looking for something like what happens on http://www.cowboom.com when you click on Store and Auction at the bottom of the page.  Is that a cookie cutter script that I can get at jquery or scriptaculous?  Or is it something completely different than what I'm trying to do?

Meanwhile I'll cjheck out your link.

Thanks,

John

0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 22674878
Wow, I just amazed myself by being able to figure out the button thing ... sort of.  I got some code at w3schools and expanded on it and I have a form button (with my button background image) that toggles quite nicely. Other than the shrinking effect which isn't really essential here, I need two more elements to make it perfect:
1) how do I make the background image of the button change upon mouseover?
2) how do I create a link to "www.mysite.com"? (I tried adding onclick="<a href="http://www.mysite.com"></a>" to the input line but of course that didn't work.)

CODE SO FAR:
<script>
function HideDiv()
{
document.getElementById("block2").style.visibility="hidden";
}
function ShowDiv()
{
document.getElementById("block2").style.visibility="visible";
}
</script>

HTML:
<div class="SeeIt" >
<form >
<input type="button" style="width:100px; height:30px; background:#000; border:none; background-image:url(http://www.discretedata.com/A1/Dino/images/SeeItUp.png)" onmouseover="HideDiv()" onmouseout="ShowDiv()"
value="" />
</form>
</div>

Thanks!

John
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22674955
1)
<a href="link.htm" onMouseOver="document.form_name.button_name.background='red.gif'" onMouseOut="document.form_name.button_name.background='green.gif'"><INPUT type="button"></a>

does the above answer (2) as well?  You just put a link around the button, and when you click it, it loads another page.  Perhaps the button code is the key here --

<BUTTON name="link" type="button" value="" style="font-size:11px" onMouseOver="changeBG(); onClick="changeLink();">Click for Link</BUTTON>

You can use the onClick to change the link, or you can wrap a link around the button, either way should work.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 1

Author Comment

by:gabrielPennyback
ID: 22675045
Looks good but I'm unsure as to what goes where.  Could you rewrite my entire HTML snippet with your new code placed where it should go? I'l spend hours and not get it right.

Thanks,

John
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22675175
Well, you will have to test this and check for errors, a little real-time debugging, but here goes in code below.  Remember, you have to NAME or ID your FORM and INPUT buttons for this to work, and give the correct URL for the other BG image.  If not working immediately check the syntax.  Here is the general --

document.form_name.input_name.style.background-image = "url('greyWhite.jpg')";

so you might need the single quotes around the link name too.
function changeBG() {   document.form1.button1.style.background-image=url(http://www.discretedata.com/A1/Dino/images/SeeItDown.png)"

}
 

function restoreBG() {   document.form1.button1.style.background-image="url(http://www.discretedata.com/A1/Dino/images/SeeItUp.png)"

}
 

<FORM name="form1">

<input type="button" name="button1" style="width:100px; height:30px; background:#000; border:none; background-image:url(http://www.discretedata.com/A1/Dino/images/SeeItUp.png)" onmouseover="HideDiv(); changeBG();" onmouseout="ShowDiv(); restoreBG();"

value="" />

</FORM>

Open in new window

0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 22681915
I can't get it to work.  When I add your two new functions, I don't get the background image change, and it doesn't hide the div either. Please take a look at the file (http://www.discretedata.com/A1/Dino/LinkAndChangeBtnImg.html ), and fix the script and/or the form.

As always, I really need you to give me the complete form code from top to bottom or i will probably continue to not get it.

Thanks,
John

This what I have for the button HTML:

<div class="SeeIt" >
<form >
<input type="button" style="width:100px; height:30px; background:#000000; border:#000000; background-image:url(http://www.discretedata.com/A1/Dino/images/SeeItUp.png)" onmouseover="HideDiv(); changeBG();" onmouseout="ShowDiv(); restoreBG();" onclick="<a href="http://www.experts-exchange.com"></a>"
value="" />
</form>
</div>

And here are the scripts:

<script>
function HideDiv()
{
document.getElementById("block2").style.visibility="hidden";
}
function ShowDiv()
{
document.getElementById("block2").style.visibility="visible";
}
function changeBG()
{  
document.form1.button1.style.background-image=url(http://www.discretedata.com/A1/Dino/images/SeeItOver.png)"
}
function restoreBG()
{  
document.form1.button1.style.background-image="url(http://www.discretedata.com/A1/Dino/images/SeeItUp.png)"
}
</script>
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 22682034
Since you really answered my question with your first post, I'm going to award you the points here now.  Please got to this new question to answer the other 2 parts.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23802340.html

Just remember to re-post the entire section of code from top to bottom.

Thanks,

John
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now