Jquery kick wenn screen-Breite weniger als 500 Pixel

Habe ich dass dieser code zeigt den Inhalt, wenn auf Sie geklickt wird. Die Sache ist, dass diese Funktion nur verfügbar, wenn der Bildschirm/Gerät Breite ist 500 Pixel maximale. Wie würde ich gehen über das tun dies?

$(function () {
    $('.row1').hide();
    $('#show').toggle(function () {
        $('.row1').slideDown("slow");
        $(this).attr("src", "bilder/cancel.png");
    }, function () {
        $('.row1').slideUp("slow");
        $(this).attr("src", "bilder/add.png");
    });
});

UPDATE:
Ich nicht tun, einen guten job zu erklären, was ich erreichen wollte : /ich möchte ich dieses Bild zeigen, wenn die Bildschirm-Breite über 500 Pixel. Und wenn die Breite weniger als 500 Pixel ich möchte eine Linie, die sagen, klicken Sie hier, um Bild und das Bild erscheint

FYI, die Verwendung von der .toggle () - event (vs der Wirkung), so wurde als veraltet markiert (api.jquery.com/category/deprecated/deprecated-1.8)

InformationsquelleAutor user2141649 | 2013-03-18

5

Müssen Sie zuerst den Bildschirm-Breite und dann Sie können verwenden Sie eine if-Anweisung führen Sie dann den code, den Sie oben gepostet, wenn der Bildschirm breit ist oben der auf eine bestimmte Breite.

Zum Beispiel.
```
if($(window).width() > 500){
   $('.row1').hide();
   $('#show').toggle(function(){
      $('.row1').slideDown("slow");
      $(this).attr("src","bilder/cancel.png" );
   },function(){
      $('.row1').slideUp("slow");
      $(this).attr("src", "bilder/add.png" );
   });
};
```
BEARBEITEN

Blick auf Ihre Kommentare, die Sie wollen, um zu zeigen, ein anderes Bild zu verstecken. Wahrscheinlich würde ich dem Zustimmen, wäre schöner und einfacher mit css-media-Abfragen, aber sehen Sie bitte in der unten Bearbeiten, das zeigt eine JS-Lösung.
```
if($(window).width() > 500){
   //show the image
   $('.row1').slideDown("slow");
   //etc...   
}else{
   //hide the image
   $('.row1').slideUp("slow");
   //etc...
}
```
bitte siehe mein edit...

InformationsquelleAutor dev

Versuchen tracking screen.width und screen.height.

Etwas wie dieses:

    function doSomething(){
        if (screen.width < 500){
            //Do Something
       }
    }

InformationsquelleAutor 97ldave

Können Sie binden Sie das Ereignis aus, wenn die Größe des Fensters ist kleiner als 500 ist, oder verwenden Sie eine if-Anweisung in der Prozedur. Beachten Sie, dass toggle - Ereignis-Methode ist veraltet, können Sie slideToggle Methode statt.

$(function () {
    var $row = $('.row1').hide();
    $('#show').click(function () {
        if ($(window).width() > 500) return;
        $row.stop().slideToggle("slow");
        $(this).prop("src", function(i, src){
            return src === "bilder/cancel.png" 
                   ? "bilder/add.png" 
                   : "bilder/cancel.png";
        });
    });
});

Oder:

$(function () {
    if ($(window).width() > 500) {
       var $row = $('.row1').hide();
       $('#show').click(function () {
           $row.stop().slideToggle("slow");
           $(this).prop("src", function(i, src){
                return src === "bilder/cancel.png" 
                       ? "bilder/add.png" 
                       : "bilder/cancel.png";
           });
       });
    }
});

Ich nicht tun, einen guten job zu erklären, was ich erreichen wollte : / ich möchte ich dieses Bild zeigen, wenn die Bildschirm-Breite über 500 Pixel. Und wenn die Breite weniger als 500 Pixel ich möchte eine Linie, die sagen, klicken Sie hier, um Bild und das Bild wird angezeigt.
Warum kommst du nicht mit CSS3 Media Queries?

InformationsquelleAutor undefined

Können Sie auch binden Sie Ihre Funktion, um die resize Veranstaltung. Dadurch wird die Funktion aufrufen, wenn das Browserfenster skaliert wird.

function myFunction() {
    if($(window).width() > 500)
    {   
        //Code to run when greater than...
    }
    else
    {
        //Code to run when less than...
    }
}

//initialize
myFunction();

//call when the page resizes.
$(window).resize(function() {
    myFunction();
});

Können Sie die Ansicht einer funktionierenden visual Beispiel hier: http://jsfiddle.net/q6BpH/1/

InformationsquelleAutor Axel

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.