IPB

Welcome Guest ( Log In | Register )



Tags
This content has not been tagged yet
2 Pages V   1 2 >  
 Reply to this topicStart new topic

Help Writing An Html Code (onclick Open Something)
h1dd3n
no avatar
Newbie [Level 1]
*
Group: Members
Posts: 15
Joined: 18-July 06
Member No.: 26,810
Post #1 post Jul 31 2006, 03:06 PM
hi,

I am new in web development i want to make a page in which there are few buttons and on click of each button there is some hidden text field which becomes visible and user can enter the text he wish to in it. how can i ?
Go to the top of the page
+Quote Post
TypoMage
no avatar
Master of All Typos
*********
Group: Members
Posts: 621
Joined: 30-July 06
From: Earth, Usa, Maine, Waterford,
Member No.: 27,507
Spam Patrol
Post #2 post Aug 1 2006, 03:07 AM
I have posted a few things that could help me about that stupid Cpanel mad.gif
I am still looking what icon I click on to make the website!! In my one day of being here. I am kinda disapointed. I wish that the shoutbox was working sad.gif Wahaa sad.gif
Go to the top of the page
+Quote Post
h1dd3n
no avatar
Newbie [Level 1]
*
Group: Members
Posts: 15
Joined: 18-July 06
Member No.: 26,810
Post #3 post Aug 1 2006, 01:13 PM
same here for me ... sad.gif
Go to the top of the page
+Quote Post
rapidget
no avatar
Newbie [Level 2]
**
Group: Members
Posts: 34
Joined: 11-July 06
Member No.: 26,467
Post #4 post Aug 1 2006, 01:16 PM
You guys should search for css tutorial.. it would help you... It's very easy... Look for it on google...
Go to the top of the page
+Quote Post
derickkoo
no avatar
Newbie [Level 2]
**
Group: Members
Posts: 29
Joined: 3-November 06
Member No.: 32,672
Post #5 post Nov 3 2006, 08:02 AM
QUOTE(h1dd3n @ Jul 31 2006, 11:06 PM) [snapback]270638[/snapback]

hi,

I am new in web development i want to make a page in which there are few buttons and on click of each button there is some hidden text field which becomes visible and user can enter the text he wish to in it. how can i ?



ok, i have some time let me have a try
CODE

// test.html

<html>
<head>
    <title>just a demo</title>
    <style type="text/css">
    /*<![CDATA[*/
        #div1 {
            display:none;
        }

        #div2 {
            display:none;
        }
    /*]]>*/
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function show(id) {
      if(id == 1) {
          document.getElementById('div1').style.display='block';
          document.getElementById('div2').style.display='none';
      } else {
          document.getElementById('div2').style.display='block';
          document.getElementById('div1').style.display='none';
      }
    }
    //]]>
    </script>
</head>
  <body>
       <div id="div1">
         <input type="text" name="txt1" value="here is text1 content" />
       </div>
  
        <div id="div2">
         <input type="text" name="txt2" value="here is text2 content" />
       </div>

     <input type="button" value="button1" onclic="show(1);" /> &nbsp;
     <input type="button" value="button2" onclic="show(2);" /> &nbsp;
   </body>
</html>
Go to the top of the page
+Quote Post
electriic ink
no avatar
Incest is a game the whole family can play.
***********
Group: [MODERATOR]
Posts: 1,239
Joined: 11-February 05
From: Heaven
Member No.: 3,709
myCENT:59.86
Post #6 post Nov 3 2006, 08:23 AM
INTO HEAD:

CODE

   <script type="text/javascript">

     function show_buttons(show) {

               if (show == 'content_A') {

                   document.getElementById('content_B').style.visibility='hidden';
                   document.getElementById('content_A').style.visibility='visible';

                } else {

                   document.getElementById('content_A').style.visibility='hidden';
                   document.getElementById('content_B').style.visibility='visible';

                }

      }
   </script>


INTO BODY:

CODE
<input type="button" onclick="show_buttons('content_A');" value="Show A"> &nbsp; <input type="button" onclick="show_buttons('content_B');" value="Show B">

<input type="text" value="A" id="content_A" style="visibility: hidden">
<input type="text" value="B" id="content_B" style="visibility: hidden">


Both will give different results. Mine will reserve space on the page for text fields whereas derickkoo's won't. When a user displays his the content on the page will move down slightly - or so I believe. Try them both out.

NB:

CODE
<input type="button" value="button1" onclic="show(1);" /> &nbsp;
<input type="button" value="button2" onclic="show(2);" /> &nbsp;


Should read:

CODE
  <input type="button" value="button1" onclick="show(1);" /> &nbsp;
<input type="button" value="button2" onclick="show(2);" /> &nbsp;
Go to the top of the page
+Quote Post
iGuest
no avatar
Hail Caesar!
*********************
Group: Members
Posts: 5,876
Joined: 21-September 07
Member No.: 50,369
Post #7 post Apr 17 2009, 10:00 PM
How to make it 3
Help Writing An Html Code (onclick Open Something)

Hi,

I am having some problems with this, the following code works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.W3.Org/TR/xhtml1/DTD/xhtml1-transitional.Dtd">
<html xmlns="http://www.W3.Org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
        #div1 {
            display:none;
        }

        #div2 {
            display:none;
        }
-->
</style>


		
<script type="text/javascript">
    function show(id) {
      if(id == 1) {
          document.GetElementById('div1').Style.Display='block';
          document.GetElementById('div2').Style.Display='none';
       } if(id == 2) {
	  document.GetElementById('div2').Style.Display='block';
          document.GetElementById('div1').Style.Display='none';
	   }
    }
</script>

</head>

<body>
<input type="button" value="button1" onclick="show(1);" /> &nbsp;
<input type="button" value="button2" onclick="show(2);" /> &nbsp;

<div id="div1">
<input type="text" name="txt1" value="here is text1 content" />
</div>
  
<div id="div2">
<input type="text" name="txt2" value="here is text2 content" />
</div>



</body>
</html>

But when I try to make 3 div boxes and 3 buttons it fails miserably! Even the first 2 buttons stop working! The code I am using goes like this:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.W3.Org/TR/xhtml1/DTD/xhtml1-transitional.Dtd">
<html xmlns="http://www.W3.Org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
        #div1 {
            display:none;
        }

        #div2 {
            display:none;
        }
	#div3 {
            display:none;
        }
-->
</style>


		
<script type="text/javascript">
    function show(id) {
      if(id == 1) {
          document.GetElementById('div1').Style.Display='block';
          document.GetElementById('div2').Style.Display='none';
	  document.GetElementById('div3').Style.Display='none';
       } if(id == 2) {
	  document.GetElementById('div2').Style.Display='block';
          document.GetElementById('div1').Style.Display='none';
	  document.GetElementById('div3').Style.Display='none';
      } if{id == 3} {
	  document.GetElementById('div3').Style.Display='block';
          document.GetElementById('div2').Style.Display='none';
	  document.GetElementById('div1').Style.Display='none';
	  }
    }
</script>

</head>

<body>
<input type="button" value="button1" onclick="show(1);" /> &nbsp;
<input type="button" value="button2" onclick="show(2);" /> &nbsp;
<input type="button" value="button3" onclick="show(3);" /> &nbsp;

<div id="div1">
<input type="text" name="txt1" value="here is text1 content" />
</div>
  
<div id="div2">
<input type="text" name="txt2" value="here is text2 content" />
</div>

<div id="div3">
<input type="text" name="txt3" value="here is text3 content" />
</div>


</body>
</html>

Also is there a way to put a default div box on show when the page is first loaded but is then hidden when a button is pressed?

Cheers

Tom


Keywords: php onclick tutorial
Go to the top of the page
+Quote Post
iGuest
no avatar
Hail Caesar!
*********************
Group: Members
Posts: 5,876
Joined: 21-September 07
Member No.: 50,369
Post #8 post Sep 16 2009, 06:42 AM
dynamic add buttons in html
Help Writing An Html Code (onclick Open Something)

Hi, I want a dynamic add button in html code so that when I click on it, it will dispay a text box... Please help.. -reply by antika
Go to the top of the page
+Quote Post
hype
no avatar
Legend Killer
*********
Group: Members
Posts: 723
Joined: 15-April 05
From: Singapore
Member No.: 5,697
myCENT:40.70
Post #9 post Sep 20 2009, 10:44 AM
Just stick to this simple logic, when you wan a box to appear, set the style to "display:none", whether it's dynamic or manual set. If you want a box to be shown as default, set the style to "display:none", then when you click a button to show the box, use javascript onclick function to set it to "display:block". Same goes for you textbox.

Example for click to display a text box"

CODE
<script type="text/javascript">
function showbox() {
document.getElementById('box1').style.display = 'block';
}
</script>
<div id="box1">
<input type="text" />
</div>
Go to the top of the page
+Quote Post
iGuest
no avatar
Hail Caesar!
*********************
Group: Members
Posts: 5,876
Joined: 21-September 07
Member No.: 50,369
Post #10 post Sep 21 2009, 02:51 AM
help with html
Help Writing An Html Code (onclick Open Something)

 friends I am very new to html I am finding adding image to the page difficult I know the code is easy but I have tried many images but the pic does not come when I open the browser it shows a broken image. So Please help 

-question by sudhi
Go to the top of the page
+Quote Post
« Next Oldest · Java, Java Servlets, Java Script, & JSP · Next Newest »
 

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   1 illnet 6,195 20th June 2004 - 04:50 PM
Last post by: ultrasmad
No new   108 chelcy 83,343 18th September 2009 - 09:07 PM
Last post by: domguan
No New Posts   3 -Sky- 657 12th June 2009 - 08:48 PM
Last post by: -Sky-
No new   21 tinoymalayil 1,410 17th November 2009 - 05:27 PM
Last post by: iG-Ed Boi
No new 40 EricDrinkard 39,755 1st November 2009 - 01:34 PM
Last post by: Www.AnthonyLazaroni.Com
No New Posts   11 football123213 8,634 30th July 2004 - 03:34 PM
Last post by: templest
No New Posts 7 odomike 19,017 30th April 2008 - 02:44 PM
Last post by: FeedBacker
No new   97 Xenon 47,355 29th October 2009 - 04:25 PM
Last post by: magiccode9
No new   132 djleli 40,497 17th November 2009 - 11:06 AM
Last post by: mahesh2k
No New Posts   11 bttfpromo 11,537 14th September 2004 - 08:55 PM
Last post by: Magic-Node
No New Posts   10 Saint_Michael 8,946 7th May 2009 - 07:13 AM
Last post by: contactskn
No new   54 habbovalley 3,901 5th November 2009 - 09:59 AM
Last post by: Ho-oh'sRealm
No New Posts   0 deedee2003 3,740 5th September 2004 - 09:11 PM
Last post by: deedee2003
No New Posts   6 XtremeGamer99 6,313 9th February 2005 - 10:48 AM
Last post by: alexwhin
No new   25 gijoe18 24,496 20th February 2009 - 06:55 PM
Last post by: MALISH_


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

RSS Open Discussion Time is now: 21st November 2009 - 07:39 AM
© 2009  Trap17: Open Discussion, Free Web Hosting. a member of xisto.

Web Hosting Powered by ComputingHost.com.