How to create a div (html) dynamically?

Question

How to create a div (html) dynamically?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Good day. I do not know if the question I put is something that you will understand easily, so I will explain.

I was thinking, when we want a menu to be hidden or displayed according to the scrolling scroll up or down, we can do it according to this logic:

If scroll-top is greater than a certain height then show me the menu, but if the scroll-top is less than the determined height then make the menu remain hidden.

Good.

This menu is made and designed in a html and css code, which is inserted in the same page where it is used.

But the question is how to make this menu created and dynamically recreated as scroll down and upload without this code (html) is inserted on the page.

Hopefully you can understand what I want. That occurred to me today.

jquery html5 css3

asked by luis 03.09.2017 в 16:56

source

2 answers

Stacks a file in C Create 2 references to the same model in another Rails: 4

score 1 · Answer 1

1

Using javascript, and changing the styles with display: none and display: block as appropriate to the situation you need, it seems to me that you can achieve your goal.

answered by 03.09.2017 в 17:27

score 1 · Answer 2

If you want to create it , then you need to consider:
1.- Function to dynamically create the menu, you can consider creating it only with javascript , or if you need information from the server you can include a request ajax .
2.- Show the Menu on page, you could use some function jquery to facilitate it

//LLamar ArmarMenu o DestruirMenu segun el scroll
ArmarMenu:function(){
    //1. obteniendo informacion y armando menu
    $.ajax({
      url: "obtenerInformacionMenu.php",  
      success: function(data) {
           //1. armando menu
           var vhtml="";
           vhtml = vhtml+"<div>"+data.opcion[1]+"</div>"
           vhtml = vhtml+"<div>"+data.opcion[2]+"</div>"
           vhtml = vhtml+"<div>"+data.opcion[3]+"</div>"
           vhtml = vhtml+"<div>"+data.opcion[4]+"</div>"    
           //2. colocando menu en vista
           $('#ContenedorMenu').html(vhtml);
      }
    });
}

DestruirMenu:function(){
    $('#ContenedorMenu').html('');
}