Home / Questions / 199442
Accepted
Fernanda
Asked: 2020-09-26 13:01:32 +0800 CST 2020-09-26 13:01:32 +0800 CST

how to execute different functions depending on the screen size

  • 772

I have a problem with a menu because when it is reduced to small screen sizes, I put a function in js so that when selecting the desired section it closes automatically to improve the UX.

html

<div id="cardMenu">
            <figure id="hideMenu" class="ioMenuMovil exit" onClick="displayMenu()"></figure>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li id="diseño"><a href="diseño_Grafico.html">DISEÑO GRAFICO</a></li>
                <li id="bolsas"><a href="bolsas_de_papel.html">BOLSAS IMPRESAS</a></li>
                <li id="carteleria"><a href="carteleria.html">CARTELERIA</a></li>
                <li id="cYE" onClick="displayCyE()"><a href="#">CUMPLES Y EVENTOS</a>
                    <ul id="subMenuCyE">
                        <li>Diseños personalizados de</li>
                        <li><a href="cumples_y_eventos.html#souvenirs">SOUVENIRS</a></li>
                        <li><a href="cumples_y_eventos.html#tarjetas">TARJETAS </a></li>
                        <li><a href="cumples_y_eventos.html#pins">PINS</a></li>
                        <li><a href="cumples_y_eventos.html#banderines">BANDERINES</a></li>
                        <li><a href="cumples_y_eventos.html#mesas">MESAS DULCES</a></li>
                        <li><a href="cumples_y_eventos.html#bolcita">BOLCITAS PARA CARAMELOS</a></li>
                        <li><a class="ultimo" href="cumples_y_eventos.html#bolcita">CAJITAS</a></li>
                    </ul>
                </li>
                <li id="otrosServicios" onClick="displayOs()"><a href="#">OTROS SERVICIOS</a>
                    <ul id="subMenuOS">
                        <li><a href="otros_servicios.html#papeleria">PAPELERIA COMERCIAL</a></li>
                        <li><a href="otros_servicios.html#redes">MANEJO DE REDES</a></li>                           
                        <li><a href="otros_servicios.html#web">DISEÑO WEB</a></li>
                        <li><a href="otros_servicios.html#estampado">ESTAMPADOS Y BORDADOS</a></li>
                        <li><a href="otros_servicios.html#sublimacion">SUBLIMACION</a></li>
                        <li><a href="otros_servicios.html#pins">PINS PUBLICITARIOS</a></li>
                        <li><a href="otros_servicios.html#impresion">IMPRESION FOTOGRAFICA</a></li>
                        <li><a class="ultimo" href="otros_servicios.html#tarjetas">TARJETAS Y SOUVENIRS</a></li>
                    </ul>
                </li>
                <li id="contacto"><a onClick="displayFormContact('block')">CONTACTO</a></li>
            </ul>
        </div>

javascript function

function displayFormContact(status){
var form = document.getElementById("contact_form")
form.style.display = status;


document.getElementById("cardMenu").style.display = "none";  //////////*CIERRA MENU AL SELECCIONAR LA SECCION*/
}

I have the problem with the largest sizes where the menu is displayed at the top (as it always is). When I select a section everything is fine, but when selecting the contact form (which appears in the same section I am in, without directing to another section) the menu disappears due to the function it has (necessary in small screen sizes)

How can I activate or deactivate this function depending on the user's screen size.

To see the menu working and the problem live, please enter

www.graficaelpunto.com/web

Thank you

javascript

2 Answers

  1. Best Answer

    I made a little code so that you can guide yourself on how you can detect the width of the window and how it interacts with various functions, apart from that I made a resize event for the window object so that you can test when it changes resolution how it calls other functions:

    var anchoVentana = window.innerWidth

const funcion1 = () => {
  alert("funcion1");
}

const funcion2 = () => {
  alert("funcion2");
}

const funcion3 = () => {
  alert("funcion3");
}

window.onresize = function(){

 anchoVentana = window.innerWidth;
 console.log(anchoVentana)

};

if(anchoVentana > 1000){
  funcion1();
}else if(anchoVentana > 750 && anchoVentana < 1000){
  funcion2();
}else{
  funcion3();
}

    If you look, I get the width of the window with window.innerWidth , then I evaluate it according to my criteria or yours, which function to call, where the ifs are there, you place or contemplate in what resolution you are going to call one or another function.

    • 1

  2. In case someone has the same problem, here is how the javascript function looks.

    var anchoVentana = window.innerWidth

function displayFormContact(status){

    if(anchoVentana < 600){
        var form = document.getElementById("contact_form")
        form.style.display = status;

        document.getElementById("cardMenu").style.display = "none";  //////////*CIERRA MENU AL SELECCIONAR LA SECCION*/

    } else{
        var form = document.getElementById("contact_form")
        form.style.display = status;
    }
}

    Thank you very much for the guidance David Molina

    • 0