Skip to main content

¿Como ¿Cómo bloquear una función javascript para que sólo funcione a partir de cierta resolución?

Tengo un inconveniente al hacer responsive mi página.

Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo; con un botón que se oculta y despliega mis secciones.

El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.

Éste es el enlace de mi paginapágina que contiene el siguiente código:

$(document).ready(main);
var contador = 1;

function main() {
  $("header nav").hide(); //Ocultamos el Menu
  $(".menu_bar").click(function() { //Funcion del Click
    $("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
  }); //Terminamos la Funcion del Click

  $(".menu_bar").click(function() {
    if (contador == 1) {
      $('nav').animate({
        left: "0"
      });
      contador = 0;
    } else {
      contador = 1;
      $("nav").animate({
        left: "-100%"
      });
    }
  });
}
$(window).resize(function() {
  if (window.matchMedia("(min-width: 400px)").matches) {
    $("header nav").addClass("show"); //Mostramos el menu
    // si estas utilizando hide(), quizá deberías usar show(),
  }
});

¿Como bloquear una función javascript para que sólo funcione a partir de cierta resolución?

Tengo un inconveniente al hacer responsive mi página.

Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo; con un botón que se oculta y despliega mis secciones.

El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.

Éste es el enlace de mi pagina que contiene el siguiente código:

$(document).ready(main);
var contador = 1;

function main() {
  $("header nav").hide(); //Ocultamos el Menu
  $(".menu_bar").click(function() { //Funcion del Click
    $("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
  }); //Terminamos la Funcion del Click

  $(".menu_bar").click(function() {
    if (contador == 1) {
      $('nav').animate({
        left: "0"
      });
      contador = 0;
    } else {
      contador = 1;
      $("nav").animate({
        left: "-100%"
      });
    }
  });
}
$(window).resize(function() {
  if (window.matchMedia("(min-width: 400px)").matches) {
    $("header nav").addClass("show"); //Mostramos el menu
    // si estas utilizando hide(), quizá deberías usar show(),
  }
});

¿Cómo bloquear una función javascript para que sólo funcione a partir de cierta resolución?

Tengo un inconveniente al hacer responsive mi página.

Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo con un botón que se oculta y despliega mis secciones.

El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.

Éste es el enlace de mi página que contiene el siguiente código:

$(document).ready(main);
var contador = 1;

function main() {
  $("header nav").hide(); //Ocultamos el Menu
  $(".menu_bar").click(function() { //Funcion del Click
    $("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
  }); //Terminamos la Funcion del Click

  $(".menu_bar").click(function() {
    if (contador == 1) {
      $('nav').animate({
        left: "0"
      });
      contador = 0;
    } else {
      contador = 1;
      $("nav").animate({
        left: "-100%"
      });
    }
  });
}
$(window).resize(function() {
  if (window.matchMedia("(min-width: 400px)").matches) {
    $("header nav").addClass("show"); //Mostramos el menu
    // si estas utilizando hide(), quizá deberías usar show(),
  }
});
se añadieron 17 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

Tengo un inconveniente al hacer responsive mi página.

Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo; con un botón que se oculta y despliega mis secciones.

El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.

Éste es el enlace de mi pagina que contiene el siguiente código:

$(document).ready(main); var contador = 1;

$(document).ready(main);
var contador = 1;

function main () {
  $("header nav").hide(); //Ocultamos el Menu
  $(".menu_bar").click(function() { //Funcion del Click
    $("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
  }); //Terminamos la Funcion del Click

  $(".menu_bar").click(function() {
    if (contador == 1) {
        $('nav').animate({
            left: "0"
        });
        contador = 0;
    } else {
        contador = 1;
        $("nav").animate({
            left: "-100%"
        });
    }
  });
}
$(window).resize(function() {
  if (window.matchMedia("(min-width: 400px)").matches) {
    $("header nav").addClass("show"); //Mostramos el menu
    // si estas utilizando hide(), quizá deberías usar show(),
  }
});

}
});

Tengo un inconveniente al hacer responsive mi página.

Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo; con un botón que se oculta y despliega mis secciones.

El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.

Éste es el enlace de mi pagina que contiene el siguiente código:

$(document).ready(main); var contador = 1;

function main () {
$("header nav").hide();//Ocultamos el Menu
$(".menu_bar").click(function() { //Funcion del Click
$("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
}); //Terminamos la Funcion del Click

$(".menu_bar").click(function(){
    if (contador == 1) {
        $('nav').animate({
            left: "0"
        });
        contador = 0;
    } else {
        contador = 1;
        $("nav").animate({
            left: "-100%"
        });
    }
});
}
$(window).resize(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$("header nav").addClass("show"); //Mostramos el menu
// si estas utilizando hide(), quizá deberías usar show(),

}
});

Tengo un inconveniente al hacer responsive mi página.

Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo; con un botón que se oculta y despliega mis secciones.

El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.

Éste es el enlace de mi pagina que contiene el siguiente código:

$(document).ready(main);
var contador = 1;

function main() {
  $("header nav").hide(); //Ocultamos el Menu
  $(".menu_bar").click(function() { //Funcion del Click
    $("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
  }); //Terminamos la Funcion del Click

  $(".menu_bar").click(function() {
    if (contador == 1) {
      $('nav').animate({
        left: "0"
      });
      contador = 0;
    } else {
      contador = 1;
      $("nav").animate({
        left: "-100%"
      });
    }
  });
}
$(window).resize(function() {
  if (window.matchMedia("(min-width: 400px)").matches) {
    $("header nav").addClass("show"); //Mostramos el menu
    // si estas utilizando hide(), quizá deberías usar show(),
  }
});
se añadieron 230 caracteres en el cuerpo
Origen Enlace

Tengo un inconveniente al hacer responsive mi página.

Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo; con un botón que se oculta y despliega mis secciones.

El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.

Éste es el enlace de mi pagina que contiene el siguiente código:

$(document).ready(main); var contador = 1;

$(document).ready(main);
var contador = 1;
function main () {
$("header nav").hide(); //Ocultamos el Menu
$(".menu_bar").click(function() { //Funcion del Click
    $("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
}); //Terminamos la Funcion del Click

$(".menu_bar").click(function() {
    if (contador == 1) {
        $('nav').animate({
            left: "0"
        });
        contador = 0;
    } else {
        contador = 1;
        $("nav").animate({
            left: "-100%"
        });
    }
});
}
$(window).resize(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$("header nav").addClass("show"); //Mostramos el menu
// si estas utilizando hide(), quizá deberías usar show(),

}
});

Tengo un inconveniente al hacer responsive mi página.

Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo; con un botón que se oculta y despliega mis secciones.

El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.

Éste es el enlace de mi pagina que contiene el siguiente código:

$(document).ready(main);
var contador = 1;
function main() {
$("header nav").hide(); //Ocultamos el Menu
$(".menu_bar").click(function() { //Funcion del Click
    $("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
}); //Terminamos la Funcion del Click

$(".menu_bar").click(function() {
    if (contador == 1) {
        $('nav').animate({
            left: "0"
        });
        contador = 0;
    } else {
        contador = 1;
        $("nav").animate({
            left: "-100%"
        });
    }
});
}

Tengo un inconveniente al hacer responsive mi página.

Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo; con un botón que se oculta y despliega mis secciones.

El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.

Éste es el enlace de mi pagina que contiene el siguiente código:

$(document).ready(main); var contador = 1;

function main () {
$("header nav").hide();//Ocultamos el Menu
$(".menu_bar").click(function() { //Funcion del Click
$("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
}); //Terminamos la Funcion del Click

$(".menu_bar").click(function(){
    if (contador == 1) {
        $('nav').animate({
            left: "0"
        });
        contador = 0;
    } else {
        contador = 1;
        $("nav").animate({
            left: "-100%"
        });
    }
});
}
$(window).resize(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$("header nav").addClass("show"); //Mostramos el menu
// si estas utilizando hide(), quizá deberías usar show(),

}
});

fix en el codigo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81
Loading
se añadieron 2 caracteres en el cuerpo; título editado
Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88
Loading
Origen Enlace
Loading