Problem with create div section and button inside from a form

jakecigar

Re: Problem with create div section and button inside from a form

8 years ago

my code is correct because dreamviewer live mode works well

You made a mistake when you published your code.

JΛ̊KE

Siamak

Re: Problem with create div section and button inside from a form

8 years ago

Sorry,It`s my code:
$('.formDpto .bodyDep .ad').on('click',function(){
        texto=$('.formDpto .bodyDep .requerido').val();
        if(texto.length==0){
        alert("Campo Obligatorio");    //good

    }else
    {
    var    tercero= $("<div>", {
            "class":"tercero",
            css:{
                "float":"left",
                "width":"243px",
                "height":"auto",
                "top":"1px",
                "font-size":"12px",
                "visibility":"visible"

                }
            }).append(
            $("<button>", {
                id:"botonas",
                "class":"departamentos",
                text:texto,
                css:
                {
                    "float": "left",
                    "width": "150px",
                    "height": "55px",
                    "text-height": "max-size",
                    "font-size": "12px",
                    "font-style":"italic",
                    "color": "#000000",
                    "text-shadow": "1px 0px #000",
                    "overflow":"auto"

                    },
                    click:function(){
                        alert("lo consegui")}
                    }))
                $('.menu').append(tercero).show();
I have two more divs with the same properties and structure ,
.menu{
float:left;
    width: 900px;
    height: auto;
    padding-bottom: 10px;
    top: 321px;
    left: 131px;
    background-color: #FF9;
}
thanks.

Siamak

Re: Problem with create div section and button inside from a form

8 years ago

And the fragment of HTML:
<div class="container">
<header>
<button id="AddPro"><strong>Añadir Proyecto</strong></button>
<button id="AddDpto"><strong>Añadir Departamento</strong></button>

       <form class="formDpto" >
       <fieldset class="bodyDep">

        <input type="text" title="Dpto" class="requerido" autofocus
        placeholder="Nombre del Departamento a Añadir:" size="45" required>

<input type="submit" class="ad" value="AñadirDepartamento">

     <input type="reset" value="Borrar">

   </fieldset>
   </form>
</header>
<div class="menu">

    <div class=primero>
        <button id="botoncc" class="departamentos" >Departamento de Ciencias de la Computación</button>
        <div class="DptoCC">
          <ul class="nav">
            <li class="imagen" ><img src="images/Empleado1.jpg"></li>
            
            <span class="ver">Nombre:</span>
            <li class="nombre">María Salcedo Ibañez</li>
            <span class="ver">Puesto:</span>
            <li class="puesto">Desarrolladora Web</li>
            <span class="ver">Proyectos:</span>
            <li class="cantidad">1</li>
          </ul>

jakecigar

Re: Problem with create div section and button inside from a form

8 years ago

You said it worked in your program, but does not work when you deployed it.

Did you check for errors with the browser’s dev tools? Did you serve your code from a server? Are the parts of your page all there?

No amount of code snippets will let me know what went wrong after it worked in " dreamviewer".

JΛ̊KE

Siamak

Re: Problem with create div section and button inside from a form

8 years ago

It`s job on only client side , with firebug no errors debug js.
here is the entire html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>TrabajoIntermedioJQ</title>
<link href="miestilo.css" rel="stylesheet" type="text/css">


<script src="jquery.js"></script>

<script src="miscript.js"></script>


</head>

<body>

<div class="container">
<header>
<button id="AddPro"><strong>Añadir Proyecto</strong></button>
<button id="AddDpto"><strong>Añadir Departamento</strong></button>

       <form class="formDpto" >
       <fieldset class="bodyDep">

        <input type="text" title="Dpto" class="requerido" autofocus
        placeholder="Nombre del Departamento a Añadir:" size="45" required>

<input type="submit" class="ad" value="AñadirDepartamento">

     <input type="reset" value="Borrar">

   </fieldset>
   </form>
</header>
<div class="menu">

    <div class=primero>
        <button id="botoncc" class="departamentos" >Departamento de Ciencias de la computación</button>
        <div class="DptoCC">
          <ul class="nav">
            <li class="imagen" ><img src="images/Empleado1.jpg"></li>
            
            <span class="ver">Nombre:</span>
            <li class="nombre">María Salcedo Ibañez</li>
            <span class="ver">Puesto:</span>
            <li class="puesto">Desarrolladora Web</li>
            <span class="ver">Proyectos:</span>
            <li class="cantidad">1</li>
          </ul>
          <ul class="nav2">
            <li class="imagen"><img src="images/Empleado2.jpg"></li>
            <span class="ver">Nombre:</span>
            <li class="nombre">Jose Córtes Sánchez</li>
            <span class="ver">Puesto:</span>
            <li class="puesto">Diseñador Web</li>
            <span class="ver">Proyectos:</span>
            <li class="cantidad">1</li>

          </ul>
          <ul class="nav3">


          </ul>
        </div>
        <p>
          <button class="AddEmp1" ><strong>Añadir Empleado</strong></button>
</p>

<form class="formEmp1" >
    <fieldset class="bodyEmp">
      <fieldset>
        <input type="text" class="nombre" placeholder="Introduzca el Nombre:" size="30" autofocus required >
      </fieldset>
      <fieldset>
        <input type="text" class="puesto" placeholder="El Puesto:" size="30" required>
      </fieldset>
      <fieldset>
        <input type="button" name="subir" class="subir" value="Subir Imágen"size="20">
      </fieldset>
      <input type="submit" class="ad" value="Añadir Empleado">
      <input type="reset" value="Borrar">
    </fieldset>
</form>
    </div>
      


<div class="segundo">

    <button id="botonma" class="departamentos" >Departamento de Marketing</button>


<div class="DptoMA">

           <ul class="nav">
             <li class="imagen"><img src="images/Empleado3.jpg" alt="imàgen Empleado3"></li>
            
             <span class="ver">Nombre:</span>
             <li class="nombre">Juan Palacios</li>
             <span class="ver">Puesto:</span>

             <li class="puesto">Programador Java</li>
             <span class="ver">Proyectos:</span>
             <li class="cantidad">1</li>

        </ul>
           <ul class="nav2">
             <li class="imagen"><img src="images/Empleado4.jpg"></li>
           
             <span class="ver">Nombre:</span>
             <li class="nombre">Jose Carrasco</li>
             <span class="ver">Puesto:</span>
             <li class="puesto">Diseñador Gráfico</li>
            <span class="ver">Proyectos:</span>
             <li class="cantidad">1</li>
        </ul>




    </div>
<p>
    <button class="AddEmp2" ><strong>Añadir Empleado</strong></button>
</p>
<form class="formEmp2" >
    <fieldset class="bodyEmp">
      <fieldset>
        <input type="text" name="Emp" class="nombre" placeholder="Introduzca el Nombre " size="30" autofocus required>
      </fieldset>
      <fieldset>
        <input type="text" name="Puesto" class="puesto" placeholder="El Puesto: " size="30" required>
      </fieldset>
      <fieldset>
        <input type="button" name="subir" class="subir" value="Subir Imágen" size="20">
      </fieldset>
      <input type="submit" class="ad" value="Añadir Empleado">
      <input type="reset" value="Borrar">
    </fieldset>
</form>


   </div>

</div>

<div class="content">
   <div class="contenedorproyectos">
    <div class="proyecto">
        <button class="botonproyecto "><strong>Proyecto Seo</strong></button>


    </div>
   </div>
</div>

<footer>

</footer>
</div>

</body>
</html>
and jquery code:
var texto,botond,botonw,botone,botonx,requerido,tercero;
$(document).on('ready',function(){

    $('.formEmp1').hide();
    $('.formEmp2').hide();
    $('.AddEmp1').on('click',function(){
            $('.formEmp1').slideToggle('slow');
            });
    $('.AddEmp2').on('click',function(){
            $('.formEmp2').slideToggle('slow');
            });
    $('.formDpto').hide();
    $('#AddDpto').on('click',function(){
        $('.formDpto').slideToggle('slow');
            });


    /*Al pulsar el botón añadir Departamentos nos crea el botón y le da
    las propiedades , igual a los demás botones ya creados por defecto*/
    $('.formDpto .bodyDep .ad').on('click',function(){
        texto=$('.formDpto .bodyDep .requerido').val();
        if(texto.length==0){
        alert("Campo Obligatorio");

    }else
    {


        tercero= $("<div>", {
            "class":"tercero",
            css:{
                "float":"left",
                "width":"243px",
                "height":"auto",
                "top":"1px",
                "font-size":"12px",
                "visibility":"visible"

                }
            }).append(
            $("<button>", {
                id:"botonas",
                "class":"departamentos",
                text:texto,
                css:
                {
                    "float": "left",
                    "width": "150px",
                    "height": "55px",
                    "text-height": "max-size",
                    "font-size": "12px",
                    "font-style":"italic",
                    "color": "#000000",
                    "text-shadow": "1px 0px #000",
                    "overflow":"auto"

                    },
                    click:function(){
                        alert("lo consegui")}
                    }))
                $('.menu').append(tercero).show();


        /* $('.menu ').append("<div class=tercero><button id='botonas' class='.departamentos' >"+texto+"</button></div>").show();


           $(".tercero #botonas").css({'float': 'left','width': '150px',
    'height': '55px',
    'text-height': 'max-size',
    'font-size': '12px',
    'font-style':'italic',
    'color': '#000000',
    'text-shadow': '1px 0px #000'});*/


        //$('.menu').append($('#' + 'tercero')).show();


    }
        });




    $('.DptoCC').toggle();
    $('.DptoMA').toggle();
    /*$('form:input').on('submit',function(){
        error = 0;
         $('.requerido').each(function(i, elem){
         if($(elem).val() == ''){
$(elem).css({'border':'1px solid red'});
error++;
}

if(error > 0){
event.preventDefault();
alert('Debe rellenar los campos requeridos');
}
        });});


/* $('.departamentos').on('click',function(){
       $('.DptoCC').each(function() {
           if($('.DptoCC').is(':hidden')){
       $('.DptoCC').slideDown('slow');
       }else{ $('.DptoCC').slideUp('slow');}

    });

        }); */

    $('.formEmp1 .bodyEmp .ad').on('click',function(){
        var nombre= $('.formEmp1 .bodyEmp .nombre').val();
        var puesto=$('.formEmp1 .bodyEmp .puesto').val();
        var subir=$('.formEmp1 .bodyEmp subir').val();
        if(nombre.length==0){
            alert('Campo Obligatorio')
            }
        else{



            }




        });

   $('.AddEmp1').hide();
   $('#botoncc').on('click',function(){
        $('.DptoCC').slideToggle('slow');
        $('.AddEmp1').slideToggle('slow');
        });



    $('.AddEmp2').hide();
    $('#botonma').on('click',function(){
       $('.DptoMA').slideToggle('slow');
       $('.AddEmp2').slideToggle('slow');

        });
    $('img').hover(function(){
        $(this).animate({'width':"124",'height':"124"},'slow');
},function(){$(this).animate({'width':"60",'height':"60"},'slow');});

});

part of this is commented for ease !
It is an application client side consisting of departments and employees primarily and projects , create departments ( some predefined by me) and others to add , and each department can add employees but add this button and operate in my browser I will solve everything else .
its my css file:
@charset "utf-8";
body,html {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: url(images/gradient_bkg.png);
    margin: 0;
    padding: 0;
    color: #000;
}
/* ~~ Selectores de elemento/etiqueta ~~ */
ul, ol, dl { /* Debido a las diferencias existentes entre los navegadores, es recomendable no añadir relleno ni márgenes en las listas. Para lograr coherencia, puede especificar las cantidades deseadas aquí o en los elementos de lista (LI, DT, DD) que contienen. Recuerde que lo que haga aquí se aplicará en cascada en la lista .nav, a no ser que escriba un selector más específico. */
    padding: 0;
    margin-top: 10px;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;    /* la eliminación del margen superior resuelve un problema que origina que los márgenes escapen del bloque contenedor. El margen inferior restante lo mantendrá separado de los elementos de que le sigan. */
    padding-right: 15px;
    padding-left: 15px; /* la adición de relleno a los lados del elemento dentro de los bloques, en lugar de en los elementos del bloque propiamente dicho, elimina todas las matemáticas de modelo de cuadro. Un bloque anidado con relleno lateral también puede usarse como método alternativo. */
}
a img { /* este selector elimina el borde azul predeterminado que se muestra en algunos navegadores alrededor de una imagen cuando está rodeada por un vínculo */
    border:none;
}
/* ~~ La aplicación de estilo a los vínculos del sitio debe permanecer en este orden (incluido el grupo de selectores que crea el efecto hover -paso por encima-). ~~ */
a:link {
    color: #42413C;
    text-decoration: underline; /* a no ser que aplique estilos a los vínculos para que tengan un aspecto muy exclusivo, es recomendable proporcionar subrayados para facilitar una identificación visual rápida */
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus { /* este grupo de selectores proporcionará a un usuario que navegue mediante el teclado la misma experiencia de hover (paso por encima) que experimenta un usuario que emplea un ratón. */
    text-decoration: none;
}
/* ~~ Este contenedor de anchura fija rodea a todas las demás bloques ~~ */
.container {
    width: 1260px;

    margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */
}
/* ~~ No se asigna una anchura al encabezado. Se extenderá por toda la anchura del diseño. ~~ */
header {
background:url(images/full-bkg.png);
    width:1260px;
    height:200px;
}

.ad{
    border-radius:5px;
    -webkit-border-radius:5px;


    background-color:#FC6;
    }

#AddDpto {
    position:relative;
    left:25em;
    top:1em;
}
#AddDpto:hover{
    background:#999;

}

#AddPro {
    position:relative;
    left:650px;
    top:1em;
}

#AddPro:hover{
    background:#1C2B4F

    }



.formDpto{
    position: relative;
    width: 130px;
    left: 20.5em;
    top: 2.8em;
    height: 30px;

    }
    .bodyDep{
        border-radius:1em;
        -webkit-border-radius:1em;
        }



.menu {
    float:left;
    width: 900px;
    height: auto;
    padding-bottom: 10px;
    top: 321px;
    left: 131px;
    background-color: #FF9;



}

.primero,.segundo{
    float:left;
    width:243px;
    height:auto;
    top:1px;
    font-size: 12px;
    }

#botoncc,#botonma,.proyecto {

    width: 150px;
    height: 55px;
    text-height: max-size;
    font-style:italic;
    color: #000000;
    text-shadow: 1px 0px #000;
    overflow:auto;


}

.DptoCC,.DptoMA{

    margin-left:20px;
    overflow:auto;


    }

.AddEmp {

}
.AddEmp:hover{
    background:#666;
    }
.formEmp1,.formEmp2{
    width:200px;


    }
fieldset{
    border-radius:1em;

    width:200px;
    }
.bodyEmp {
    width:200px;
        border-radius:1em;
        }

img {
    width:60px;
    heigth:60px;
    border:5px solid #000;
    box-shadow:5px 5px 5px #006699;
    }

.ver{
    position:relative;
    color: #999;
    text-decoration: underline;


}

li {
    list-style-type:none;
    width:150px;
    heigth:300px;}

/* ~~ Este selector agrupado da espacio a las listas del área de .content ~~ */
.content ul {
    padding: 0 15px 15px 40px;
}

/* ~~ Los estilos de lista de navegación (pueden eliminarse si opta por usar un menú desplegable predefinido como el de Spry) ~~ */

ul.nav a, ul.nav a:visited,ul.nav2 a,ul.nav2 a.visited { /* al agrupar estos selectores, se asegurará de que los vínculos mantengan el aspecto de botón incluso después de haber sido visitados */
    padding: 5px 5px 5px 15px;

    width: 140px; /*esta anchura hace que se pueda hacer clic en todo el botón para IE6. Puede eliminarse si no es necesario proporcionar compatibilidad con IE6. Calcule la anchura adecuada restando el relleno de este vínculo de la anchura del contenedor de barra lateral. */
    text-decoration: none;

}
ul.nav li:hover, ul.nav li:active, ul.nav li:focus {

    color: #000;
}

.content {
    position: absolute;
    width: 300px;
    height: auto;
    left: 978px;
    top: 225px;



}

.contenedorproyectos{


    top:5px;
    right:10px;

    width:240px;

    padding:15px;
    border-radius:5px;
    box-shadow:0px 5px 10px rgba(0,0,0,0.2) inset;
    background:rgb(200,200,200);
}

/* ~~ El pie de página ~~ */
footer {
    display:none;
}
Thank you very much for your help

Siamak

Re: Problem with create div section and button inside from a form

8 years ago

I`m deploy it with xampp

jakecigar

Re: Problem with create div section and button inside from a form

8 years ago

I can’t read all the code to look for an error.

Make a demo of your page in http://plnkr.co or on your own web site.

JΛ̊KE

Siamak

Re: Problem with create div section and button inside from a form

8 years ago

http://plnkr.co/edit/E5a0jqUpLiXpdFvBhnoi?p=preview

jakecigar

Re: Problem with create div section and button inside from a form

8 years ago

http://plnkr.co/edit/m22ruX0nrUCk1wTMttNn?p=preview is just reformatted.

Now , try to rephrase the question.

Hi: I am trying to create a div and inside a button with their properties css, from a form but in browsers listed and said button disappears ( department ), which after I'll add employees, my code is correct because dreamviewer live mode works well , without disappearing .

I see dynamic buttons with CSS. When I click

The page submits.

JΛ̊KE

Siamak

Re: Problem with create div section and button inside from a form

8 years ago

If you click 'Añadir Departamento' Button, you can see the form with one field , fill the field with placeholder='Nombre del Departamento a Añadir ' and then click the Submit Button" Añadir Departamento"
You will see that Button

appears and disappears

jakecigar