CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BurebistaRuler
BurebistaRuler

Reputation: 6519

detect browser size and apply css for every resolution

I have this function that I use to apply some css to a menu when browser is resized or when the menu is rendering on different resolutions. My problem is this, why the browser is not interpreting correctly my function? because when I resize my browser in full mode from half mode the browser interprets only '800-1024' resolution but if I do ctrl+f5 in browser (clear all) interprets correctly my resolution so what is wrong in my function? 

function renderMenuCorection(){
                if ($('#containerHeader').exists()) {
                    var resizeObject = {

                        '0-640': '9px,2px,-3px,12px',
                        '640-800': '10px,2px,-5px,12px',
                        '800-1024': '10px,8px,-8px,15px',
                        '1024-1300': '12px,12px,-13px,11px',
                        '1300-2000': ',20px,-21px'
                    }

                    var win = $(window);
                    var win_width = win.width();

                    if (win_width > 0 && win_width <= 640) {
                        var value = getValueByKey(resizeObject, '0-640');
                        modifayMenu(value);
                    }
                    else 
                        if (win_width > 640 && win_width <= 800) {
                            var value = getValueByKey(resizeObject, '640-800');
                            modifayMenu(value);
                        }
                        else 
                            if (win_width > 800 && win_width <= 1024) {
                                var value = getValueByKey(resizeObject, '800-1024');
                                modifayMenu(value);
                                alert("I'm on: 800-1024 ," + win_width);
                            }
                            else 
                                if (win_width > 1024 && win_width <= 1300) {
                                    var value = getValueByKey(resizeObject, '1024-1300');
                                    modifayMenu(value);
                                    alert("I'm on: 1024-1300 ," + win_width);
                                }

                                else 
                                    if (win_width > 1300 ) {
                                       var value = getValueByKey(resizeObject, '1300-2000');
                                        modifayMenu(value);
                                    }
                }
            }
          function modifayMenu(value){
            var vals = value.split(',')
                $('#containerHeader').find('.roundMenuLi').each(function(index, item){
                    $(item).find('a').css('font-size', vals[0]);
                    $(item).css('padding-right', vals[1]);
                    $(item).css('padding-left', vals[1]);
                    $(item).find('#secondUl').css('margin-left', vals[2]);
                    $(item).css('padding-bottom', vals[3]);
              });

            }
          function getValueByKey(obj, myKey){

                $.each(obj, function(key, value){

                    if (key == myKey) {
                        returnValue = value;
                    }
                });
                return returnValue;
            }

Thank you !

Upvotes: 0

Views: 28878

Answers (4)

jhunlio
jhunlio

Reputation: 2660

you main you want to create a responsive design this link can help you.

building responsive design you must consider

  • Flexible Grid
  • Flexible Images
  • Media Quires

/* below code play important part of your responsive design without that you cannot achieve what you want */

<meta name="viewport" content="width=device-width" /> /* put this before the end tag of head */

@media (max-width: 320px) {

}

@media (min-width: 720px) {

}

Upvotes: 2

Barbara PM
Barbara PM

Reputation: 512

Media-queries are the best solution as Pavel remarks, besides they're much faster than all the access to the DOM you're making using your code. The compatibility problem with IE8 can be solved using a JavaScript pluging called Respond.js. Haven't tried it but it seems a good solution to your problem.

Upvotes: 1

Pavel Štěrba
Pavel Štěrba

Reputation: 2912

Use CSS3 and its media queries. Example:

@media (max-width: 500px) {
    /* some CSS for small resolution */
}

@media (min-width: 1000px) {
    /* some CSS for large resolution */
}

Upvotes: 12

Hans
Hans

Reputation: 968

It's hard to tell from your code, but most likely you are only calling the function once on pageload. In order to make this do what you want, you will have to attach an event listener and call the code each time the window is resized.

As commented above, consider researching Responsive Web Design to utilize native browser functionality so you don't have to roll your own script to do this. A good place to start is an A List Apart article under the same name.

Upvotes: 1

Related Questions