Σχεδιασμός και Κατασκευή Ιστοσελίδων | gnomon design | Blog

Quick Tutorial: Κρύψτε ένα div ανάλογα με το μήκος του browser

March 4th, 2010 by Vassilis Mastorostergios

Σ’ αυτό το γρήγορο tutorial θα δούμε πώς, χρησιμοποιώντας jQuery, μπορούμε σε λίγες γραμμές κώδικα να ελέγχουμε το μέγεθος (μήκος ή και ύψος αν θέλουμε) του browser window ώστε να περάσουμε περαιτέρω functionality επάνω σε αυτό.

Ουσιαστικά αυτό που θα κάνουμε είναι το εξής: Θα πούμε “Αν το παράθυρο του browser είναι μικρότερο από X pixels τότε κρύψε αυτό το div, αν είναι μεγαλύτερο άστο όπως είναι. Επίσης αν ο χρήστης κάνει resize τον browser κάτω από το επιθυμητό μέγεθος, και πάλι κρύψτο, και αν τον επαναφέρει σε μέγεθος μεγαλύτερο τότε ξανα εμφάνισέ το”.

Demo

Το HTML είναι απλό, το μόνο που χρειαζόμαστε είναι το div που περιέχει το content που θέλουμε να κρύβεται, πχ <div class=”bannerTop”></div>

Έπειτα ερχόμαστε στην jQuery, όπου και εκεί τα πράγματα είναι απλά:

Ας τα δούμε ένα ένα, καταρχήν θέλω να δω σε τι κατάσταση ξεκινάει ο browser να βλέπει το site (δηλαδή σε τι width είναι ήδη). Αυτό το καταφέρνω παίρνοντας το width με την εντολή $(window).width(); και σε ένα μικρό if statement του λέω αν το μήκος είναι μικρότερο από 1024px τότε κρύψε μου το div .bannerTop (ουσιαστικά εδώ το έχω να το φέρνει σε opacity 10%).

            var browserWidth = $(window).width();

            if (browserWidth < 1024) {
                 $('.bannerTop').fadeTo('fast', 0.1);
            }

Αν το μήκος του παραθύρου είναι μεγαλύτερο ή ίσο από 1024 δεν θα έχουμε καμία αλλαγή.
Έπειτα θέλω να ελέγχω τι γίνεται όταν ο χρήστης κάνει resize τον browser του, καθώς πχ δε θέλω να εμφανίζεται το div μου σε ανάλυση μικρότερη των 1024, ό,τι και να γίνει.

Άρα xρησιμοποιώντας το resize() function της jQuery δημιουργώ δύο μικρά if statements:

            $(window).resize(function(){
                var browserWidth = $(window).width();

                if (browserWidth < 1024) {
                    $('.bannerTop').fadeTo('fast', 0.1);
               } else {
                    $('.bannerTop').fadeTo('fast', 1);
               }
            });

Προσοχή: η variable browserWidth δεν γίνεται να οριστεί ως global και να λειτουργεί και εντός της resize() function. Αν γίνει αυτό (αν δηλαδή την ορίσουμε μόνο έξω από την function) τότε δεν θα αλλάζει δυναμικά καθώς οι τιμές του width τροποποιούνται μέσα στη resize().