HOME       >>       Programming

Hiding <div> Boxes With Javascript Javascript Help #1


FirefoxRocks

This is my first help post in this Java/JavaScript section.

 

Can someone write/find me a piece of code that will hide <div> boxes?

 

Preferred stuff:

There is a bar that has the subtitle of the <div> box contents. A button on the right side of the bar shows and hides the div box.

Contents are in a box with a border and slides in and out of the bar smoothly and relatively quickly.

Box MUST be customizable using CSS internal/external stylesheets.

 

Any help would be appreciated. All codes will be tested and best code be selected.


TypoMage

Hmm why don't you put your problem in the shoutbox. Someone will know about your problem. Sadly I do not know anything a about JavaScript. But that is all I got.


hype

I try creating the source code for you... I'll give it a shot, hope this what you're looking for...

Preview : http://forums.xisto.com/no_longer_exists/

<html><head><title>Test</title><script type="text/javascript">function Show(num){ if (num == 1) { text1.style.display = "block"; text2.style.display = "none"; } else if (num == 2) { text1.style.display = "none"; text2.style.display = "block"; } }</script></head><body><div id="text1" style="display:none"><a href="java script:void(null)" onclick="Show(2)">Hide Text</a><br/>Text here...</div><div id="text2" style="display:block"><a href="java script:void(null)" onclick="Show(1)">Show Text</a></div></body></html>

If you encounter any problems feel free to ask!

FirefoxRocks

That is sort of what I'm looking for.Could you make it so that the box can slide in and out of the "Text Here" thing? That would make it look neat and attractive.If noone else comes up with another code, I will use what's there.


hype

I dont exactly get what you mean... any examples or what? Is it like a table with border that disappear when you click the word hide? Sorry, my english isnt that good...


fffanatics

In order to make it look like it is sliding from the top of the screen out without using flash, you would have to write a javascript function that would change the the css top attribute from the same height as where the show text link is to that number plus the height of the new text incrementaly so that it looks like it slides. You also would need to set the divs position attribute to aboslute and define exactly where you want it to be on the page. For the functions you would do something like

function slide (element, amount, initTop, finalTop) { if (initTop >= finalTop) { element.style.top = finalTop; break; } else { element.style.top = initTop + amount; slide (element, amount, initTop, finalTop); }}

The only problem with the script above is that you are going to have to find a way to slow down the sliding using a pause script that also still flushes the screen. Try googling for a moving image script and just take the pause part of it. Currently im at work so i cant really spend that much time finding one. Atleast here is a start for you.

FirefoxRocks

I try creating the source code for you... I'll give it a shot, hope this what you're looking for...

 

Preview : http://forums.xisto.com/no_longer_exists/

 

<html><head><title>Test</title><script type="text/javascript">function Show(num){ if (num == 1) { text1.style.display = "block"; text2.style.display = "none"; } else if (num == 2) { text1.style.display = "none"; text2.style.display = "block"; } }</script></head><body><div id="text1" style="display:none"><a href="java script:void(null)" onclick="Show(2)">Hide Text</a><br/>Text here...</div><div id="text2" style="display:block"><a href="java script:void(null)" onclick="Show(1)">Show Text</a></div></body></html>

If you encounter any problems feel free to ask!

 


The selected option is that quoted post. Thank you for the code! I will implement it in plenty of my pages.

 

Look for JavaScript help #2! You might get a chance to answer my question there.


serverph

problem resolved. closed as per thread starter's request.


iGuest

I want some javascript code. I.E.,when I click one radio button one form will be display.-reply by suhasini



VIEW ORIGINAL REGISTER GET FREE HOSTING

Xisto.com offers Free Web Hosting to its Members for their participation in this Community. We moderate all content posted here but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2001-2019 by Xisto Corporation. All Rights Reserved.