CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-modal
John
John

Reputation: 3945

bootstrap resizing the page not finding viewport

So when user clicks a button I want to open a popUp, depending on the width of the page I want to resize the popUp accordingly.

Found a tasty wee example How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

 // Executes only in XS breakpoint
if( viewport.is('xs') ) {
    // ...
}

// Executes in SM, MD and LG breakpoints
if( viewport.is('>=sm') ) {
    // ...
}

// Executes in XS and SM breakpoints
if( viewport.is('<md') ) {
    // ...
}

Problem is viewpoint is firing as not defined 

Uncaught ReferenceError: viewport is not defined
at <anonymous>:1:1

but I have included it in my head 

    <!--Viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1">

I have also moved the bootstrap scripts from the head to the body.

Does anyone have any idea whats wrong? ta

Upvotes: 0

Views: 1090

Answers (2)

Idoshin
Idoshin

Reputation: 361

I think they meaning "viewport" as string that you should pass to the function.

$(window).on('resize', changeViewport($(window).width()));

function changeViewport(viewport) {
  if(viewport >= 1200) {
      console.log('lg');
  }
  else if(viewport < 1200 && viewport >= 768) {
    console.log('md');
  }
  else if(viewport < 768 && viewport >= 480) {
    console.log('sm');
  }
  else if(viewport < 480) {
    console.log('xs');
  }
}
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

so then you can return the size as string and check if(viewport.is('md'))
and etc...

Upvotes: 1

Jonas Petersson
Jonas Petersson

Reputation: 715

You need to declare the viewport variable in javascript.

In the example it's done using an IIFE as follows:

// Wrap IIFE around your code
(function($, viewport){
    $(document).ready(function() {

        // Executes only in XS breakpoint
        if(viewport.is('xs')) {
            // ...
        }

        // Executes in SM, MD and LG breakpoints
        if(viewport.is('>=sm')) {
            // ...
        }

        // Executes in XS and SM breakpoints
        if(viewport.is('<md')) {
            // ...
        }

        // Execute code each time window size changes
        $(window).resize(
            viewport.changed(function() {
                if(viewport.is('xs')) {
                    // ...
                }
            })
        );
    });
})(jQuery, ResponsiveBootstrapToolkit);

The viewport isset to ResponsiveBootstrapToolkit so you have to include the responsive-bootstrap-toolkit in your project.

Upvotes: 1

Related Questions