Rectangle 27 5

You can use $(window).resize() to detect if the viewport is resized.

jQuery does not have any function to consistently detect the correctly width and height of the viewport[1] when there is a scroll bar present.

I found a solution that uses the Modernizr library and specifically the mq function which opens media queries for javascript.

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

My answer will probably not help resizing a iframe to 100% viewport width with a margin on each side, but I hope it will provide solace for webdevelopers frustrated with browser incoherence of javascript viewport width and height calculation.

Maybe this could help with regards to the iframe:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] You can use $(window).width() and $(window).height() to get a number which will be correct in some browsers, but incorrect in others. In those browsers you can try to use window.innerWidth and window.innerHeight to get the correct width and height, but i would advice against this method because it would rely on user agent sniffing.

Usually the different browsers are inconsistent about whether or not they include the scrollbar as part of the window width and height.

resize - Using jQuery To Get Size of Viewport - Stack Overflow

jquery resize size viewport
Rectangle 27 5

You can use $(window).resize() to detect if the viewport is resized.

jQuery does not have any function to consistently detect the correctly width and height of the viewport[1] when there is a scroll bar present.

I found a solution that uses the Modernizr library and specifically the mq function which opens media queries for javascript.

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

My answer will probably not help resizing a iframe to 100% viewport width with a margin on each side, but I hope it will provide solace for webdevelopers frustrated with browser incoherence of javascript viewport width and height calculation.

Maybe this could help with regards to the iframe:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] You can use $(window).width() and $(window).height() to get a number which will be correct in some browsers, but incorrect in others. In those browsers you can try to use window.innerWidth and window.innerHeight to get the correct width and height, but i would advice against this method because it would rely on user agent sniffing.

Usually the different browsers are inconsistent about whether or not they include the scrollbar as part of the window width and height.

resize - Using jQuery To Get Size of Viewport - Stack Overflow

jquery resize size viewport
Rectangle 27 8

Fluid layout adapts itself to different browser window sizes : all the values used are calculated proportionally to the viewport size, so when resizing, all the columns are resized, but the general layout stays the same.

Responsive layout is able to adapt itself to different sizes as well, but when resizing, the number of columns changes according to the available space. You could think of, for example, you website being resized to one column only on a smartphone.

To get the same layout as instatrip, you'll need to combine fixed layout with fluid layout at least. But there are many ways to do it, I think you should try to understand what is exactly the purpose of each type of layout, and figure out a specific solution for your needs. Here is some reading :

EDIT : Here is a simple example of a fixed + fluid layout. Found here. I post the code below in case the link goes dead.

<div id="page"> 
    <header id="sidebar"> 
        //SIDEBAR CONTENT HERE
    </header> 

    <article id="contentWrapper"> 
        <section id="content"> 
            //CONTENT HERE
        </section> 
    </article> 
</div>
html {
    overflow: hidden;
}

#sidebar { 
    background: #eee;
    float: left;
    left: 300px;
    margin-left: -300px;
    position: relative;
    width: 300px;
    overflow-y: auto;
}

#contentWrapper { 
    float: left;
    width: 100%;
}

#content {
    background: #ccc;
    margin-left: 300px;
    overflow-y: auto;
}
$(document).ready(function() {

    //GET BROWSER WINDOW HEIGHT
    var currHeight = $(window).height();
    //SET HEIGHT OF SIDEBAR AND CONTENT ELEMENTS
    $('#sidebar, #content').css('height', currHeight);

    //ON RESIZE OF WINDOW
    $(window).resize(function() {

        //GET NEW HEIGHT
        var currHeight = $(window).height();    
        //RESIZE BOTH ELEMENTS TO NEW HEIGHT
        $('#sidebar, #content').css('height', currHeight);

    });

});

Oh and by the way, smashingmagazine is an excellent implementation of a fixed, responsive and elastic layout. Try resizing your browser window on their website :)

Yeah sure, you can find many examples with a quick google search. I posted one in the edit.

Bootstrap - Responsive layout vs Fluid layout - Stack Overflow

twitter-bootstrap responsive-design fluid-layout
Rectangle 27 2

You can use window.matchMedia, which is the javascript equivalent of media queries. The matchMedia call creates a mediaQueryList object. We can query the mediaQueryList object matches property to get the state, and attach an event handler using mediaQueryList.addListener to track changes.

I've added an example on fiddle of using matchMedia on load and on resize. Change the bottom left pane height and width (using the borders), and see the states of the two queries.

<div>Min width 400: <span id="minWidth400"></span></div>
<div>Min height 600: <span id="minHeight600"></span></div>

var matchMinWidth400 = window.matchMedia("(min-width: 400px)"); // create a MediaQueryList
var matchMinHeight600 = window.matchMedia("(min-height: 600px)"); // create a MediaQueryList

var minWidth400Status = document.getElementById('minWidth400');
var minHeight600Status = document.getElementById('minHeight600');

function updateMinWidth400(state) {
    minWidth400Status.innerText = state;
}

function updateMinHeight600(state) {
    minHeight600Status.innerText = state;
}

updateMinWidth400(matchMinWidth400.matches); // check match on load

updateMinHeight600(matchMinHeight600.matches); // check match on load

matchMinWidth400.addListener(function(MediaQueryListEvent) { // check match on resize
    updateMinWidth400(MediaQueryListEvent.matches);
});

matchMinHeight600.addListener(function(MediaQueryListEvent) { // check match on resize
    updateMinHeight600(MediaQueryListEvent.matches);
});

Thanks, will this work on resize as well as load? I couldn't get it to work but I'm not that experienced a javascript coder! Do you have an example with the matchMedia/QueryList involving code?

I've add a more detailed example and a fiddle - note that it doesn't work for IE9 and below, although you can patch that with a polyfill - github.com/paulirish/matchMedia.js

jquery - 'Media-queries' for javascript - different code for different...

javascript jquery resize viewport
Rectangle 27 1

In jQuery you can attach/detach listeners to elements with:

// Attach
$(".horgallery").on('mousewheel', function(event, delta) {
  this.scrollLeft -= (delta * 75);
  event.preventDefault();
});

// Detach
$(".horgallery").off('mousewheel');

I updated my question. First I test on the mousewheel. It works but the problem is somehow doubles the speed of the wheel.

Try inserting console.log("test"); into the function, and open the console to check if it's being called twice.

Well, I don't know javascript, but there is a number 5, 9, 28 in front of the "test" word in the console and reaching. My other problem is why addClass and removeClass not working under if ($(window).width() >= 900) { ?

jquery - Attach and de-attach javascript functions on screen (viewport...

javascript jquery dom viewport
Rectangle 27 2

This cannot be done without JavaScript. You need to check and apply different CSS rules depending on viewport height, left column height, right column height and scroll position. I guess it needs further testing, but this should do the trick:

document.checkBanner = function() {
  var ch = $('.contentWrapper').innerHeight(),
    left = $('.left-banner-content'),
    lh = left.innerHeight(),
    s = $(document).scrollTop(),
    wh = $(window).height();
  if (wh > lh) {
    left.css({
      'top': s + 'px'
    })
  } else {
    if ((s + wh) > lh) {
      left.css({
        'top': (s + wh - lh - 20) + 'px'
      });
    } else {
      left.css({
        'top': 0
      });
    }
  }
  if ($(document).height() > ch) {
    $(document).scrollTop(ch - wh);
  }
}
$(document).scroll(function() {
  document.checkBanner();
});
$(document).resize(function() {
  document.checkBanner();
});
body {
  margin: 0;
}
.wrapper {
  margin: 0;
  position: relative;
}
.left-banner {
  position: absolute;
  min-height: 100%;
  height: 100%;
  width: 210px;
  background-color: rgba(0, 76, 0, .84);
  color: white;
}
.left-banner-content {
  position: relative;
  padding: 0 20px 5px;
}
.contentWrapper {
  padding-left: 210px;
  min-height: 100%;
  background-image: url(http://www.plafondchauffant.fr/modules/pm_advancedbackgroundchanger/uploads/slides/53d177879b0e2.jpg);
  -webkit-background-size: cover;
  background-size: cover;
}
.content {
  min-height: 100vh;
  background: rgba(255, 255, 255, .9);
  padding: 0 20px;
  overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="left-banner">
    <div class="left-banner-content">
      <h3>This is left banner</h3>
      <ul>
        <li>some item</li>
        <li>some other item</li>
        <li>yet another item</li>
        <li>and another one</li>
        <li>...</li>
        <li>this is getting boring</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>
  <div class="contentWrapper">
    <div class="content">
      <h1>This is content</h1>
      <p>Ennui pinterest kogi freegan +1, try-hard leggings pickled chillwave chartreuse raw denim 8-bit brooklyn. Cardigan sustainable marfa bitters vice. Humblebrag everyday carry leggings, shoreditch cold-pressed tacos before they sold out gastropub sriracha
        master cleanse distillery migas. Helvetica seitan humblebrag, jean shorts godard organic affogato. Mlkshk XOXO bicycle rights four dollar toast letterpress fap pitchfork salvia, forage meditation irony knausgaard next level. Pabst kogi echo park
        YOLO. Williamsburg ugh drinking vinegar messenger bag offal selvage.</p>

      <p>Actually selvage before they sold out, affogato dreamcatcher squid taxidermy chia cornhole deep v ethical meggings quinoa. Four dollar toast retro green juice, ramps squid truffaut etsy williamsburg artisan. Everyday carry ennui bicycle rights sustainable
        twee, umami portland cornhole blue bottle street art. 90's meh kale chips kitsch. Ennui tattooed pour-over, whatever small batch ethical disrupt YOLO four dollar toast echo park cronut keytar selvage tacos. You probably haven't heard of them master
        cleanse meditation single-origin coffee, ramps trust fund viral pitchfork letterpress yuccie marfa etsy. Keffiyeh mustache ramps put a bird on it slow-carb keytar.</p>

      <p>Locavore kickstarter freegan, pinterest authentic celiac portland four dollar toast affogato cray kogi hashtag direct trade. Dreamcatcher 90's trust fund, occupy fap fanny pack irony shoreditch readymade austin. Asymmetrical aesthetic iPhone, wayfarers
        try-hard dreamcatcher gluten-free kinfolk williamsburg hammock mumblecore sriracha. Migas farm-to-table pickled disrupt, plaid actually four loko bicycle rights vegan try-hard ramps banh mi. Trust fund portland intelligentsia organic. Etsy thundercats
        blue bottle, sartorial taxidermy hella fap flannel kogi seitan echo park. Drinking vinegar paleo pop-up synth roof party food truck.</p>

      <p>Cronut mixtape +1 YOLO helvetica bicycle rights. Offal polaroid authentic mixtape vinyl. Quinoa ramps banh mi ethical, banjo XOXO cornhole asymmetrical tumblr direct trade artisan salvia. Kitsch drinking vinegar gentrify tousled salvia, schlitz
        before they sold out slow-carb gluten-free. Offal viral pork belly plaid wayfarers single-origin coffee, green juice lo-fi kogi cardigan. Sartorial forage ugh pork belly, viral direct trade hashtag austin cronut celiac letterpress helvetica franzen
        chillwave. Vice chicharrones artisan next level pickled seitan.</p>
    </div>
  </div>
</div>

UPDATE: After fiddling with the rendering problems behind such a solution I realized there's no way someone didn't already code something similar. And I was right: here's lockfixed. Nicely wrapped as a jquery plugin. You should have googled your problem first :).

I did google my problem for hours, however I wasn't considering javascript I was checking if this can be done by CSS only. Thanks though for the help!

It took me a good while to realize it's not doable without JS, and I like to think I'm pretty seasoned with these sort of things. It's no biggie, I was trying to be funny.

html - Page layout two divs side by side: right scrollable only, left ...

html css html5 css3
Rectangle 27 4

Why not use flex boxes? It sounds like you want a sticky footer - that is, the footer is at the bottom of the viewport when the content is not very high, but it is at the bottom of the content when the content exceeds the viewport height. This is very similar to the holy grail design. Here is an HTML5+CSS3 solution that does not use JavaScript:

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    height: 100%;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make the body a vertical flex container */
    /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    display: flex;
    flex-direction: column;
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100%; /* this helps with the sticky footer */
}
main {
    /* Allow the content to grow but not shrink */
    flex-grow: 1;
    flex-shrink 0;
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
}
footer {
    /* do not allow the footer to shrink */
    flex-shrink: 0;
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
}
<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

If you don't want to copy the code into a fiddle yourself, I've done that for you. You may need to use some vendor prefixes if you want to support older browsers - flex boxes are relatively new as of the writing of this post.

thanks for your answer, as this is an old question, i do not track it anymore, and just now i logged to my SO and find your answer, I have not test it in my project as i have changed the design, but your answer is the closest to my desired result, so i'll mark your answer as the best answer

css3 - css calc and min-height can not team up properly - Stack Overfl...

css css3
Rectangle 27 2

<meta id="viewport" name="viewport">

<script type="text/javascript">
//mobile viewport hack
(function(){

  function apply_viewport(){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)   ) {

      var ww = window.screen.width;
      var mw = 800; // min width of site
      var ratio =  ww / mw; //calculate ratio
      var viewport_meta_tag = document.getElementById('viewport');
      if( ww < mw){ //smaller than minimum size
        viewport_meta_tag.setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + mw);
      }
      else { //regular size
        viewport_meta_tag.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + ww);
      }
    }
  }

  //ok, i need to update viewport scale if screen dimentions changed
  window.addEventListener('resize', function(){
    apply_viewport();
  });

  apply_viewport();

}());
</script>

android - scale fit mobile web content using viewport meta tag - Stack...

android iphone ios mobile viewport
Rectangle 27 0

PhoneGap uses Android WebView before KitKat (4.4), and Android WebView does not support viewport with specific width. A solution to it is to use a library that enables custom viewport support.

One choice is monaca.viewport.js which is distributed in GitHub: https://github.com/monaca/monaca.js, and here is the API reference.

This library is also a part of Monaca, a free cloud-based tool for PhoneGap development.

I'll give it a try! So you mean that for kitkat onwards it should work just fine? I'm using sdk19 and my phone is a nexus 4 running kitkat.

javascript - Dynamic viewport resizing - Phonegap ignores viewport - S...

javascript android cordova viewport
Rectangle 27 0

function ResizeContent() {
       $('MyElement').css('max-height', $(window).outerHeight() + 'px');
       $('MyElement').css('max-width', $(window).outerWidth() + 'px');
}

Thanks for this - but it doesn't seem to resize proportionally - it just resizes to the full visible viewport.

Updated my answer based on this new information. The reason it would no be proportional is because you still have the width:100%; I'm guessing?

I did yes - but this has a fixed pixel width - Maybe I didn't explain my problem, but I need the div and it's contents to scale proportionally when the browser is resized.

javascript - Resize DIV proportionally in viewport - Stack Overflow

javascript jquery html css viewport
Rectangle 27 0

Your problem is: When you are under 960, you are passing the window's size to the variable w. When you resize over 960, you are checking if the (viewportWidth < 1200 && w >= 1200) and, of course, the w is less than 1200, as you were in a smaller resolution.

Why are you using that variable anyway? I suggest just remove it and do it in this way.

$(window).resize(function() {
    viewportWidth = $(this).width();

    if ( viewportWidth < 960) {
        $('body').css('background', 'blue');
    } else if (viewportWidth < 1200) {
        $('body').css('background', 'green');
    } else {
        $('body').css('background', 'red');
    };
});

As you are using this variable to control your functions, you can still use it, just changing the middle if, like that:

var w = 0;
$(window).resize(function() {
    var viewportWidth = $(this).width();

    if (viewportWidth < 960 && w >= 960) {
        $('body').css('background', 'blue');
    } else if (viewportWidth < 1200 && (w < 960 || w >= 1200)) {
        $('body').css('background', 'green');
    } else if (viewportWidth >= 1200 && w < 1200) {
        $('body').css('background', 'red');
    };

    w = viewportWidth;
});

I'm using it to reinitialize some sliders. The background is just an example.

But have you tried this solution? You don't need to use this variable in the conditionals.

Ok ... I will mark your answer as ok because it will work on my question. I tried to use 'checkpoints' because I didn't want to reinitialize my functions everytime a user resizes the screen. I resolved that problem with a simple setTimeout and no it should be ok.

javascript - jQuery resize and viewport checkpoint - Stack Overflow

javascript jquery css viewport
Rectangle 27 0

One option would be to use a CSS-based solution like viewport height units.

.example {
    height: 50vh; // 50% of viewport height
}

html - Resize images with Javascript to fit them within the viewport -...

javascript html css image
Rectangle 27 0

Don't bother. Use CSS instead. Set the width of the img to be 100% so it will always scale to max available width of the container which should also not have a width set but you can set a max and min width. This why when the screen is resized (or viewed on a different device) the image is scaled by the browser to be as large as it can be. No JS required.

@Jaguar this might work but you'll have to have the images in a fluid container (having it's height at a percent as well).

Using JavaScript to dynamically resize images based on height of windo...

javascript image layout resize fluid
Rectangle 27 0

window.onload = init;
function init()
{
var viewportHeight = "height:" + document.documentElement.clientHeight+"px;"; 
document.getElementById('section-1').setAttribute('style', viewportHeight);

}

javascript - How to resize a div to clients viewport height? - Stack O...

javascript html height
Rectangle 27 0

This is a fucnction I use to dynamically check the window width on resize, I wrapped it in a document ready function that passes the $ as a parameter to prevent any conflicts that might occur with other javascript libraries that use the $. An example would be if you were to use your function inside of a wordpress theme or plugin.

/*
document ready function used to prevent conflict with other javascript libraries
that use the $ parameter
*/
jQuery(document).ready(function($){

     //get the window width
     var winWidth =  $(window).width();

      //set the maxWidth
     var maxWidth = 1000;

          //if the window width is less than the maxWidth pixels on document loading
          if(winWidth < maxWidth){//begin if then

            //add the class hidden to .jobFilter         
            $(".jobfilter").addClass("hidden");

         }//end if then



$(window).resize(function(){//begin resize event


    //get the window width
     var winWidth =  $(window).width();

      //set the maxWidth
     var maxWidth = 1000;    


         //if the window width is less than maxWidth pixels
         if(winWidth < maxWidth){//begin if then

            //add the class hidden to .jobFilter         
            $(".jobfilter").addClass("hidden");

         }
         else{

            //remove the class hidden                 
            $(".jobfilter").removeClass("hidden");


     }//end if then else


     });//end window resize event

});//end document ready function

javascript - Dynamically add class on browser resize (viewport width) ...

javascript jquery
Rectangle 27 0

i would think this needs javascript because you need to figure out how big the viewport is per se...whenever that viewport is changed which cannot be detected by css...which is where the javascript comes in. You should look at the javascript/jquery resize browser event. jQuery implements this very nicely with some examples at http://api.jquery.com/resize/ which you should be able to use quite easily.

The example they give is to add the new width of the body when the window is resized...which is the same trigger when the window is zoomed.

Take a look at this jsfiddle. What I've done is first inserted the width of the new viewport. Then I've also readjusted the width and height of the box to be relative to 1/5 of the viewport.

The magical code is:

$(window).resize(function() {
    $('#log').append('<div>' + $(this).width() + '</div>');
});

and what changes the width is:

if (logWidth == width/3) {
    console.log("hooray.");
}
else {
    console.log("resize the log please.");
    logWidth = width/3;
    $('#log').width(logWidth);
}

This if else statement can be modified for your background image needs.

This gives me the new width which i can use to set the background image/width/whatever of whatever element I want on any resize event.

@mMoovs what are you referencing with your link, some accompanying text is always necessary...

Sorry, I was supposed to add more later because I posted the link in a hurry but forgot it. So, the backstretch.js fills the background with given image and holds it on position when zoomed or resizing window. I believe it would suit @Mdays needs here, though it's not done with CSS as OP would prefer.

javascript - How to make background image stay the same on zoom? - Sta...

javascript jquery html css background-image
Rectangle 27 0

window.onresize = resize;
function resize(){
             $("#fn").css("top", ( $(window).height() - $("#fn").height() ) / 2+$(window).scrollTop() + "px");
             $("#fn").css("left", ( $(window).width() - $("#fn").width() ) / 2+$(window).scrollLeft() + "px");

}

I'm still a bit new to Javascript. How do I call this on the element to center.

jquery - Centering text with Javascript and resize with css3 viewport ...

javascript jquery css3 center viewport
Rectangle 27 0

You don't need jQuery for that. Just set the width and height property of your image to the values you want it to be:

<img src="myimage.jpg" id="varimage" width="100" height="200">

 ....


 var img = getElementById("varimage");
 img.height = 400;
 img.width = 200;

and jQuery (as that's what you asked for):

$("#varimage").width(400);
 $("#varimage").height(200);

This will not work with timthumb, right?

Yes @NicoMartin is correct this wont work with timthumb

javascript - Resize an image height dynamically accoding to viewport w...

javascript jquery html css
Rectangle 27 0

You should play around with the minWidth and the maxWidth properties when using the force fit column so that you don't fall off, they should all be use in combination... Please take a look at 2 of my previous answers I gave to similar questions, that should help you out, hope it does help. Slickgrid column width should automatically get resized according to widest row content Slickgrid: Final column auto size to use all remaining space Hopefully that helps you out, I know that the auto-resizing columns inside the SlickGrid is a little tricky, though I had more success using all properties of column size: width, minWidth, maxWidth...The 2nd link shows you how I made my canvas auto-resize

didn't you say that your column gets out of size and out of the grid?

no, the image shows exactly what happens.

the image is very small from my point of view... anyway, is that a problem with a browser in particular (pointing towards IE), I had some kind of problems similar to that with Bootstrap and IE7-8. In fact you don't seem to be using jQuery UI there, so it's most probably a CSS trick

javascript - SlickGrid - Bizarre: After custom filter and viewport res...

javascript jquery css slickgrid
Rectangle 27 0

This is a fucnction I use to dynamically check the window width on resize, I wrapped it in a document ready function that passes the $ as a parameter to prevent any conflicts that might occur with other javascript libraries that use the $. An example would be if you were to use your function inside of a wordpress theme or plugin.

/*
document ready function used to prevent conflict with other javascript libraries
that use the $ parameter
*/
jQuery(document).ready(function($){

     //get the window width
     var winWidth =  $(window).width();

      //set the maxWidth
     var maxWidth = 1000;

          //if the window width is less than the maxWidth pixels on document loading
          if(winWidth < maxWidth){//begin if then

            //add the class hidden to .jobFilter         
            $(".jobfilter").addClass("hidden");

         }//end if then



$(window).resize(function(){//begin resize event


    //get the window width
     var winWidth =  $(window).width();

      //set the maxWidth
     var maxWidth = 1000;    


         //if the window width is less than maxWidth pixels
         if(winWidth < maxWidth){//begin if then

            //add the class hidden to .jobFilter         
            $(".jobfilter").addClass("hidden");

         }
         else{

            //remove the class hidden                 
            $(".jobfilter").removeClass("hidden");


     }//end if then else


     });//end window resize event

});//end document ready function

javascript - Dynamically add class on browser resize (viewport width) ...

javascript jquery