0

I am using twitter bootstrap 3 I need to adjust some user UI specific values that should be different for particular screen size.

I need to set that values based on screen resolution and also I need to change that values if screen resolution get changed.

So here is my code

function SetOffsets()
{
    var navbarOffet = 80;
    var pageMenuNavOffset = 350;

    if ($(window).width() <= 768) {
        navbarOffet = 80;
        pageMenuNavOffset = 350;
    }
    else if ($(window).width() > 768) {
        navbarOffet = 600;
        pageMenuNavOffset = 100;
    }

    $('.mainHeader').affix({
        offset: {
            top: navbarOffet
        }
    });

    $('.mainNav').onePageNav({
    currentClass: 'active',
        scrollOffset: pageMenuNavOffset
    });
}

To achieve my goal I am calling that function on document ready and on window resize But for some reason $('.mainHeader').affix and $('.mainNav').onePageNav do not gets overridden with a new values. In result .affix and .onePageNav just getting called with initial values(document ready values).

$(window).resize(function() {
        SetOffsets();
    });

$(document).ready(function() {
        SetOffsets();
    });

So if I load the page with initial resolution <=768 of >768 - all working fine. But when resolution getting changed the new values is not applied in .affix and .onePageNav calls. I clearly can see on debugger that navbarOffet and pageMenuNavOffset changed when screen resized.

How can I fix that?

Sergino
  • 10,128
  • 30
  • 98
  • 159

1 Answers1

0

Honestly I am not sure I'd approach this using JavaScript. You can do a lot of this in CSS using Media Queries. These kinds of issues are what they were made to solve. Check out this link on CSS Tricks that goes over some of the basics.

With Media Queries you can achieve:

  1. Screen resolution detection
  2. Pixel density detection
  3. Orientation detection
  4. Respond to changes in size, resolution, and pixel density

For example, this snippet will give you a valid detection for retina displays:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Here are a few other CSS rules as well for detection: 

/* 1.25 dpr */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}

CSS Tricks has a list of these that you can take a look at which covers a lot of the display types out there currently.

Liam
  • 1,712
  • 1
  • 17
  • 30
  • Is there any way with media query I can check for scroll offset? If i go mediaquery way I need to apply the query only if page was scrolled down to xxxx pixels. – Sergino Dec 25 '13 at 11:58
  • Detecting scroll position is not something you'd do in a media query, that requires JavaScript. Your question was about adjusting the UI based on screen size, which is something you can do in a more reliable manner using media queries. If you have another question regarding scroll detection I'd be happy to answer that as well if you post it as another question on Stack Overflow. One thing I can suggest (possibly save you some hassle) is to look into ScrollSpy. Since you're already using Bootstrap you should have that available. ScrollSpy is made for monitoring scroll position in the page. – Liam Dec 25 '13 at 14:46
  • http://stackoverflow.com/questions/20772689/css-media-query-offset-is-it-possible – Sergino Dec 25 '13 at 22:39