Jump to content
xisto Community
FirefoxRocks

Hiding <div> Boxes With Javascript Javascript Help #1

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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! <_<

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.
Edited by fffanatics (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.