div overlapping each other

Question

erum 0 Junior Poster in Training

14 Years Ago

have a single look on code based on jquery,the code is running fine but the problem is when ever i click on any radio button to create div it created div but overlap each other ,i added blank row or <BR> but useless any help

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
         <input id="Radio1" type="radio" value="1" name="group1" />1<br />
        <input id="Radio2" type="radio" value="2" name="group1" />2<br />
        <input id="Radio3" type="radio" value="3" name="group1" />3<br />
        <input id="Radio4" type="radio" value="4" name="group1" />4<br />
        <input id="Radio5" type="radio" value="5" name="group1" />5<br />
        <input id="Radio6" type="radio" value="6" name="group1" />6<br />
        <input id="Radio7" type="radio" value="7" name="group1" />7<br />
        
        <input id="btn1" type="button" runat=server value="create div" onclick="createDiv();" />
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </div>
    </form>
</body>

<script type="text/javascript">

          $(document).ready(function() {
              $('input[name=group1]').change(function() {

                  $('div.dynamicDiv').remove();

                  for (var j = 0; j < $('input[name=group1]:checked').val(); j++) {

                      var d = $('<div />', { "class": "dynamicDiv", id: 'div' + j }).appendTo('body');

                      var t = $('<table width="100%" CellSpacing=0 CellPadding=0 Border=0><tr><td Width="20%" Align = "Left">Name</td><td Width="10%" Align="Left"><SELECT name="SAL"> <OPTION SELECTED value="MR">MR<OPTION value="MRs">MRS<OPTION value="MRs">Ms </SELECT> </td><td Width="70%" Align ="Left"><input type="text"  name="txt_name"+j/></td></tr><tr><td width="20%" align="left">Telephone</td><td align="left" Width="10%"></td><td align="left" width="70%"><input type="text"  name="txt_tel"+j/></td></tr><tr><td width="20%" align="left">Email</td><td align="left" Width="10%"></td><td align="left" width="70%"><input type="text"  name="txt_email"+j/></td></tr></table>').appendTo(d);
                      
                      $('<br/>').appendTo(t); 
                      
                     
                  }

              });

          });


           

    </script>

asp.net html-css javascript jquery vb.net

2 Contributors
4 Replies
263 Views
9 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by Taywin

Taywin 312 Posting Virtuoso

14 Years Ago

I'm not sure if this is the case... One possibility, I have a feeling that the new div created has style as 'position:absolute' which allows div to be overlapping and ignores your line break tag. Another possibility (which I have not tested but just think) is that your outer scope element (maybe another div) has a fixed style size, and you attempt to create a bigger size div inside the div. As a result, the auto layout tries to do its job and force multiple div inside the div. Just my two cents.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

erum 0 Junior Poster in Training · Answer 1 · 2010-11-12T18:24:31+00:00

i m sending u whole code ignore method creatediv1 and creatediv ,and correct any mistake

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="gfln1.WebForm2" %>

<!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 runat="server">
   <title>Javascript create new div</title>   
    <link href="css/styles.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">  
                  .dynamicDiv {margin:"65px", border-bottom:#ccc solid 0px; height:23px; line-height:20px; padding-left:15px; padding-right:15px;}
          </style>  
           <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
            <script type="text/javascript" language="javascript">
          function createDiv() {  
           var divTag = document.createElement("div"); 
             divTag.id = "div1";  
              divTag.setAttribute("align", "center");
                 divTag.style.margin = "0px auto";  
                  divTag.className = "dynamicDiv";  
                   divTag.innerHTML = "This HTML Div tag is created using Javascript DOM dynamically.";  
                    document.body.appendChild(divTag);
                }

                function createDiv1() {
                    for (var i = 0; i < document.form1.group1.length; i++) {
                        if (document.form1.group1[i].checked) {
                            alert(parseInt(document.form1.group1[i].value));
                            for (var j = 0; j < parseInt(document.form1.group1[i].value); j++) {
                            var divTag = document.createElement("div");
                            divTag.id = "div" + j ;
                            divTag.setAttribute("align", "center");
                            divTag.style.margin = "0px auto";
                            divTag.className = "dynamicDiv";
                            divTag.innerHTML = "div" + j 
                          
                            document.body.appendChild(divTag);
                          

                            }
                          
                        }
                    }


                }  
                      
                 </script>
       
      <script type="text/javascript">

          $(document).ready(function() {
              $('input[name=group1]').change(function() {

                  $('div.dynamicDiv').remove();

                  for (var j = 0; j < $('input[name=group1]:checked').val(); j++) {

                      var d = $('<div />', { "class": "dynamicDiv", id: 'div' + j }).appendTo('body');

                      var t = $('<table width="100%" CellSpacing=0 CellPadding=0 Border=0><tr><td Width="20%" Align = "Left">Name</td><td Width="10%" Align="Left"><SELECT name="SAL"> <OPTION SELECTED value="MR">MR<OPTION value="MRs">MRS<OPTION value="MRs">Ms </SELECT> </td><td Width="70%" Align ="Left"><input type="text"  name="txt_name"+j/></td></tr><tr><td width="20%" align="left">Telephone</td><td align="left" Width="10%"></td><td align="left" width="70%"><input type="text"  name="txt_tel"+j/></td></tr><tr><td width="20%" align="left">Email</td><td align="left" Width="10%"></td><td align="left" width="70%"><input type="text"  name="txt_email"+j/></td></tr></table>').appendTo(d);
                      
                      $('<br/>').appendTo(t); 
                      
                     
                  }

              });

          });


           

    </script>
          
                 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
         <input id="Radio1" type="radio" value="1" name="group1" />1<br />
        <input id="Radio2" type="radio" value="2" name="group1" />2<br />
        <input id="Radio3" type="radio" value="3" name="group1" />3<br />
        <input id="Radio4" type="radio" value="4" name="group1" />4<br />
        <input id="Radio5" type="radio" value="5" name="group1" />5<br />
        <input id="Radio6" type="radio" value="6" name="group1" />6<br />
        <input id="Radio7" type="radio" value="7" name="group1" />7<br />
        
        <input id="btn1" type="button" runat=server value="create div" onclick="createDiv();" />
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </div>
    </form>
</body>
</html>

Taywin 312 Posting Virtuoso · Answer 2 · 2010-11-12T20:55:06+00:00

Line 10 "65px", takes out the double quote (") and change the comma to semicolon. The CSS is not applied correctly.

Taywin 312 Posting Virtuoso · Answer 3 · 2010-11-12T21:42:35+00:00

OK, after trying to convert your jquery to regular JavaScript, I see that your string in the creation contains unexpected result you may not want to. The 'j' will never be replace with the number you want because you place it as a string instead of a variable.

One note here, you are using so many deprecated property assignments (according to W3C), such as align, cellspecing, cellpadding, border, etc. You should use CSS for all of these styles instead of assign a value directly to these properties. Below is an example I converted from yours to regular JavaScript -- cDiv(), removeDynamic(), and getDynamicDivContent() (without asp part & no jquery) -- and I added radio button onchange event (same as .change {} in jquery).

<!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>
  <title>Javascript create new div</title>   
  <style type="text/css">  
  .dynamicDiv {
    margin: 0px auto;
    border-bottom: #ccc solid 0px;
    height: 23px;
    line-height: 20px;
    padding-left: 15px;
    padding-right: 15px;
  }
  </style>  

  <script type="text/javascript" language="javascript">
  function createDiv() {  
    var divTag = document.createElement("div"); 
    divTag.id = "div1";  
    divTag.setAttribute("align", "center");
    divTag.className = "dynamicDiv";  
    divTag.innerHTML = "This HTML Div tag is created using Javascript DOM dynamically.";  
    document.body.appendChild(divTag);
  }

  function cDiv(radioElement) {
    if (radioElement) {
      removeDynamicDiv(radioElement.value)
      var newDiv = document.createElement("div")
      newDiv.id = "myDynamicDiv"+radioElement.value
      newDiv.className = "dynamicDiv"
      newDiv.setAttribute("align", "center");
      newDiv.innerHTML = getDynamicDivContent(radioElement.value)
      document.body.appendChild(newDiv);
    }
  }  

  function removeDynamicDiv(divNum) {
    var el = document.getElementById("myDynamicDiv"+divNum)
    if (el) { el.parentNode.removeChild(el) }
  }

  function getDynamicDivContent(divNum) {
    var out = "<table width=\"100%\" cellSpacing=0 cellPadding=0 border=0>\n"
    out += "<tr>\n<td width=\"20%\" align =\"Left\">Name</td>\n"
    out += "<td width=\"10%\" align=\"Left\">\n"
    out += "<SELECT name=\"SAL\">\n<OPTION SELECTED value=\"MR\">MR</option>\n"
    out += "<OPTION value=\"MRs\">MRS</option\n<OPTION value=\"MRs\">Ms</option>\n"
    out += "</SELECT>\n</td><td width=\"70%\" align =\"Left\">\n"
    out += "<input type=\"text\"  name=\"txt_name"+divNum+"\"/>\n"
    out += "</td>\n</tr>\n<tr><td width=\"20%\" align=\"left\">"
    out += "Telephone</td><td align=\"left\" Width=\"10%\"></td>\n"
    out += "<td align=\"left\" width=\"70%\">\n"
    out += "<input type=\"text\" name=\"txt_tel"+divNum+"\"/>\n</td>\n"
    out += "</tr>\n<tr>\n<td width=\"20%\" align=\"left\">Email</td>\n"
    out += "<td align=\"left\" width=\"10%\"></td>\n"
    out += "<td align=\"left\" width=\"70%\">\n"
    out += "<input type=\"text\" name=\"txt_email"+divNum+"\"/>\n</td>\n</tr></table>"

    return out
  }
  </script>
          
                 
</head>
<body>
  <form id="form1">
  <div>
    <input id="Radio1" type="radio" value="1" name="group1" onchange="cDiv(this)" />1<br />
    <input id="Radio2" type="radio" value="2" name="group1" onchange="cDiv(this)" />2<br />
    <input id="Radio3" type="radio" value="3" name="group1" onchange="cDiv(this)" />3<br />
    <input id="Radio4" type="radio" value="4" name="group1" onchange="cDiv(this)" />4<br />
    <input id="Radio5" type="radio" value="5" name="group1" onchange="cDiv(this)" />5<br />
    <input id="Radio6" type="radio" value="6" name="group1" onchange="cDiv(this)" />6<br />
    <input id="Radio7" type="radio" value="7" name="group1" onchange="cDiv(this)" />7<br />
        
    <input id="btn1" type="button" value="create div" onclick="createDiv()" />
  </div>
  </form>
</body>
</html>