Twitter Bootstrap Question posted in

bootstrap resizing the page not finding viewport – Twitter bootstrap

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

Tags:

2

Answers


  1. 0

    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…

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search