SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Dynamic div?

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic div?

    I'd like to know the simplest way to allow the user to type into a text box, press an add button, and have a new div created containing the text that was entered. Thanks in advance.

  2. #2
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey does the following code helps you?:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function CreateTab(){
    	if(document.getElementById('txtValue').value != ""){
    		var tracker = document.createElement('div');
    		tracker.style.position = 'relative';
    		tracker.style.background = '#CCCCCC';
    		tracker.style.border = '1px #000000 solid';
    		tracker.style.width = '90px';
    		tracker.style.cursor = 'pointer';
    		tracker.innerHTML = document.getElementById('txtValue').value;
    		tracker.style.align = 'left';
    		tracker.style.height = '20px';
    		tracker.setAttribute('onClick','GetString(\'hello world!!!\')');
    		tracker.style.top = tracker.style.left = '0px';
    		tracker.id = 'tab[]';
    		document.getElementById('TabsCol').appendChild(tracker);
    	}
    }
    function GetString(msg){
    	alert(msg);
    }
    </script>
    </head>
    <body>
    <table width="780" border="0" align="center" cellpadding="0" cellspacing="0" style="border:1px #006699 solid;">
      <tr>
        <td height="92" colspan="3" align="center" valign="middle" bgcolor="#006699">&nbsp;</td>
      </tr>
      <tr>
        <td width="145" height="460" align="left" valign="top" bgcolor="#006699">&nbsp;</td>
        <td colspan="2" align="left" valign="top" id="enterToStart"><table width="100&#37;" border="0" cellspacing="0" cellpadding="2">
          
          <tr>
            <td colspan="4" align="left"><a href="javascript:void(null);" onClick="CreateTab();">New Tab</a></td>
          </tr>
          <tr>
            <td width="100%" colspan="4" align="left">
              <input name="txtValue" type="text" id="txtValue">
            </td>
          </tr>
          <tr>
            <td colspan="4" id="TabsCol"></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="20" colspan="3" bgcolor="#006699">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that works well. How would I go about selecting each dynamic div individually?

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That depends. When would you want to select it? In an onclick event, or something else?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wysiwyg View Post
    That depends. When would you want to select it? In an onclick event, or something else?
    Yes, but also how to i access specific attributes like the text contained inside each dynamic div and how do i attach additional information to each div. Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •