bootstrap resizing the page not finding viewport

Question

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

If it's the only requirement **" I want to open a popUp, depending on the width of the page I want to resize the popUp accordingly."** isn't it a solution to define CSS-style width of popup in either `%` or `vw` units? — Banzay, Jan 10 '17 at 11:07

score 1 · Answer 1 · edited Mar 11 '19 at 21:43

1

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...

edited Mar 11 '19 at 21:43

Raul Guiu

2,374
22
37

answered Jan 10 '17 at 10:50

Idoshin

363
2
17

1

thanks for your help. Moving the referenced files to the top of the page instead of inside the body tag resolved my issue (even though the example says to have them inside the body tag....anywho) your answer did help...thanks – John Jan 10 '17 at 13:25

score 1 · Answer 2 · answered Jan 10 '17 at 11:03

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.

thanks for your help. Moving the referenced files to the top of the page instead of inside the body tag resolved my issue (even though the example says to have them inside the body tag....anywho) your answer did help...thanks — John, Jan 10 '17 at 13:24

bootstrap resizing the page not finding viewport

2 Answers2