Welcome Guest ( Log In | Register)



 
 Closed TopicStart new topic
> Hiding <div> Boxes With Javascript, Javascript Help #1
Rating 5 V
FirefoxRocks
post Aug 14 2006, 10:28 PM
Post #1


Super Member
*********

Group: Members
Posts: 273
Joined: 14-April 06
From: Ontario, Canada, North America, Planet Earth
Member No.: 21,845
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.

(list)

Go to the top of the page
 
+Quote Post
TypoMage
post Aug 15 2006, 01:33 AM
Post #2


Master of All Typos
*********

Group: Members
Posts: 621
Joined: 30-July 06
From: Earth, Usa, Maine, Waterford,
Member No.: 27,507
Spam Patrol
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.

(list)

Go to the top of the page
 
+Quote Post
hype
post Aug 16 2006, 11:52 AM
Post #3


Legend Killer
*********

Group: Members
Posts: 678
Joined: 15-April 05
From: Singapore
Member No.: 5,697
I try creating the source code for you... I'll give it a shot, hope this what you're looking for...

Preview : http://www.hype.trap17.com/showhide.html

CODE

<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! smile.gif

(list)

Go to the top of the page
 
+Quote Post
FirefoxRocks
post Aug 16 2006, 01:32 PM
Post #4


Super Member
*********

Group: Members
Posts: 273
Joined: 14-April 06
From: Ontario, Canada, North America, Planet Earth
Member No.: 21,845
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.

(list)

Go to the top of the page
 
+Quote Post
hype
post Aug 16 2006, 01:55 PM
Post #5


Legend Killer
*********

Group: Members
Posts: 678
Joined: 15-April 05
From: Singapore
Member No.: 5,697
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...

(list)

Go to the top of the page
 
+Quote Post
fffanatics
post Aug 16 2006, 03:01 PM
Post #6


Privileged Member
*********

Group: [HOSTED]
Posts: 937
Joined: 14-April 05
From: West Chester, PA
Member No.: 5,636
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

CODE

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.

This post has been edited by fffanatics: Aug 16 2006, 03:45 PM

(list)

Go to the top of the page
 
+Quote Post
FirefoxRocks
post Aug 19 2006, 12:27 AM
Post #7


Super Member
*********

Group: Members
Posts: 273
Joined: 14-April 06
From: Ontario, Canada, North America, Planet Earth
Member No.: 21,845
QUOTE(hype @ Aug 16 2006, 06:52 AM) *

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

Preview : http://www.hype.trap17.com/showhide.html

CODE

<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! smile.gif



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.

(list)

Go to the top of the page
 
+Quote Post
serverph
post Aug 19 2006, 12:32 AM
Post #8


Ancient Enigma
Group Icon

Group: [MODERATOR]
Posts: 1,753
Joined: 11-July 04
From: under the stars
Member No.: 76
problem resolved. closed as per thread starter's request.

(list)

Go to the top of the page
 
+Quote Post
iGuest
post Apr 5 2008, 08:02 AM
Post #9


Trap Double Mocha Member
***************

Group: Members
Posts: 2,360
Joined: 21-September 07
Member No.: 50,369
I want some javascript code. I.E.,when I click one radio button one form will be display.

-reply by suhasini