CODEWITHSUNDEEP
javascriptjquery
Glen Selle
Glen Selle

Reputation: 3956

How to dynamically call jquery function when browser width goes below 950px?

I am trying to resize a video so that if fills 100% of its container ONLY when the browser width drops below 960 pixels. For reasons pertaining to inline styles I wrote this simple function in jquery. If works fine--but it is only called when the window is loaded. 

$(document).ready(function(){
    if ($(window).width() < 950) {
        $("video").width("100%");
    }
});

How would I write a similar jquery function which can change the width of the video dynamically as the browser window is resized? I have tried the following but to no avail.

$(window).resize(function() {
if ( $(window).width() < 950) {
    $("video").width("100%");
}
});

*EDIT*Here is the new video html code:

<div id="sliderbg">
   <div class="container">
      <div id="slider" class="row">
      <div class="eight columns">   
    <div id="text-6" class="widget widget_text">            <div class="textwidget"><br>
<video id="wp_mep_1"   width="600" height="330" poster="http://www.first1444.com/wp-content/themes/lightningyellow/images/poster.png" controls="controls" preload="none"  >
    <source src="http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" type="video/mp4" />      
    <object width="600" height="330" type="application/x-shockwave-flash" data="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf">
        <param name="movie" value="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&amp;file=http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" />          
    </object>       
</video>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#wp_mep_1').mediaelementplayer({
    m:1

    ,features: ['playpause','current','progress','volume','tracks']

});
});
</script>

<br/><h6 id="tagline">See <b><i>FIRST</i></b> Team #1444 in action building this years robot</h6>
</div>
</div><script type="text/javascript">
$(document).ready(function() {
if ( $(window).width() < 960) {
    $("video").width("100%");
}
});
</script>

</div><!-- eight columns -->

By the way I am using the foundation css framework. I doubt that would be causing the problem.

Upvotes: 2

Views: 3929

Answers (3)

Jasper
Jasper

Reputation: 76003

You can also use CSS Media Queries:

#my-element {
    width : 950px;
}

@media all and (max-width: 950px) {
    #my-element {
        width : 100%;
    }
}

This sets the element to 950px wide unless the viewport is less than 950px in which case the element is set to 100% width.

Here is a demo using media queries: http://jsfiddle.net/G9gx6/

Here is a good source for finding what browsers support what: http://caniuse.com/#feat=css-mediaqueries

Update

Of-course you can use JavaScript as well:

//bind to the windows resize event
$(window).on('resize', function () {

    //check if the viewport width is less than 950px
    if ($(this).width() < 950) {

        //if so then set some element's width to 100%
        $('#my-element').width('100%');
    } else {

        //otherwise set the element's width to 950px
        $('#my-element').width('950px');
    }

//trigger a resize event on the window object so this code runs on page-load
}).trigger('resize');

Update

To optimize this code I would cache the $('#my-element') selection as well as throttle the resize event handler to only run once-in-a-while:

$(function () {
    var $element = $('#my-element'),
        resizeOK = true,
        timer    = setInterval(function () {
            resizeOK = true;
        }, 100);
    $(window).on('resize', function () {
        if (resizeOK) {
            resizeOK = false;
            if ($(this).width() < 950) {
                $element.width('100%');
            } else {
                $element.width('950px');
            }
        }
    }).trigger('resize');
});

Here is a demo: http://jsfiddle.net/G9gx6/1/

Upvotes: 3

Jakub
Jakub

Reputation: 20475

What you want to do is wrap your function in:

$(window).resize(function(){
    alert('You resized the window!');
});

Reference: .resize()

Upvotes: 1

Jonathan M
Jonathan M

Reputation: 17451

You just have a typo. It should be:

$(window).resize(function() {

resize() documentation: http://api.jquery.com/resize/

Upvotes: 1

Related Questions