How to "crush or crush" one function with another?

Question

How to "crush or crush" one function with another?

Navigation

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

0

function lalo () {
    $('<ul id="lalo-uno"><li>UNO</li></ul>').appendTo('body');
}

function lalo2 (  ) {
    $('<ul id="lalo-dos"><li>DOS</li></ul>').appendTo('body');
}

window.onresize = function () {

    if (window.innerWidth > 500) {
        lalo2();
    } else {
        lalo();
    }
}

2 days ago I can not solve this, help please! My above code works but there is a problem. When the width of the browser is greater than 500, it shows me the function LALO2 () and when it is smaller it shows me LALO (), the problem is that when it shows me a function it does not take away the previous one, and that's what I want, that delete the other one, as if it were a hover effect, that when you enter it adds a color and when it comes out it is removed ... the same thing but with the functions.

javascript

asked by user104554 25.11.2018 в 19:00

source

2 answers

display my angular application with ssl and Nginx using docker Building graphics with bokeh - python

score 0 · Answer 1

To make it look good we should know a little better the structure of the page. Or for example if the ul that you try to add is really the last element or there may be others to posteri.

As a clue, something that can work is to assign a id to each menu item and remove the elements when the resize event occurs.

function lalo () {
    $('<ul id="lalo-uno"><li>UNO</li></ul>').appendTo('body');
}

function lalo2 (  ) {
    $('<ul id="lalo-dos"><li>DOS</li></ul>').appendTo('body')
}


window.onresize = function () {
    $('#lalo-uno').remove();
    $('#lalo-dos').remove();
    if (window.innerWidth > 500) {
        lalo2();
    } else {
        lalo();
    }
}

score 0 · Answer 2

A serious solution instead of using appendTo() , using html() . In this way you would replace all previously created content. In the example that I am going to leave you next, "body" would be the div that your menu will contain. I hope you find it useful, greetings!

Example:

   //CARGA INICIAL DE LA PAGINA.
$(function() {
    if ( window.innerWidth > 500) {
    lalo2()
  } else {
  //SI EL ANCH0 ES MENOR LLAMA A LALO()
    lalo()
  }
});

   
   
   function lalo() {
     $('#cuerpo').html('<ul><li>UNO</li></ul>');
    } //ESTA FUNCION AGREGA UN MENU AL BODY REEMPLAZANDO TODO EL CONTENIDO EXISTENTE.

    function lalo2() {
      $('#cuerpo').html('<ul><li>DOS</li></ul>');
    } //ESTA FUNCION AGREGA UN MENU AL BODY REEMPLAZANDO TODO EL CONTENIDO EXISTENTE.

//CUANDO CAMBIO DE TAMAÑO LA VENTANA PASA ALGO
window.onresize = function (  ) {
  //SI EL ANCHO DE LA VENTANA ES MAYOR A 500 LLAMA A LA FUNCION LALO2()
  if ( window.innerWidth > 500) {
    lalo2()
  } else {
  //SI EL ANCH0 ES MENOR LLAMA A LALO()
    lalo()
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cuerpo"></div>