Toggle between webpage layout (phone/laptop) with javascript, jquery, bootstrap

Question

I have a webpage with certain html elements with bootstrap classes.

<div class="col-xs-12 col-lg-4"></div>

I want to give a button when clicked, should toggle viewport/layout change of divs on webpage. On click of that button, I should be able to see realtime change of layout and bootstrap trigger "col-xs-12" for mobile view and "col-lg-4" for laptop view. I dont know which css or bootstrap or html property I am looking for.

Any help will be much appreciated.

EDIT - Use case - I am giving a screen for user to edit CSS and classes. I want to give toggle button to user, so that he can see how his elements will look like in laptop view and mobile view.

are you looking for something like this - https://codepen.io/nagasai/pen/LMoQpr with toggle button to add and remove classes? — Naga Sai A, Jan 17 '19 at 16:34
No. Instead, toggle should resize the screen size, which should automatically trigger different bootstrap class css according to media queries. Different media query css should fire. Effect should be same as resizing the browser screen, without user resizing it. — zookastos, Jan 17 '19 at 16:48
Most of the newer browsers have a emulate function for this: see https://developers.google.com/web/tools/chrome-devtools/device-mode/ Why invent the wheel again? ;) — dont_trust_me, Jan 17 '19 at 16:52
So basically you just want to wrap you website content into a div container and change the width? — Alexander Belokon, Jan 17 '19 at 16:53
@Entertain: Will just doing that will work? Let me try that. — zookastos, Jan 17 '19 at 17:00
@dont_trust_me: That is a feature in Chrome. I want to give it as a feature in my website, independent of browser. So users dont have to do that. — zookastos, Jan 17 '19 at 17:01
@NalinAgrawal or they can just resize the window? lf you still wantto do it you can try this: https://www.w3schools.com/jsref/met_win_resizeto.asp — dont_trust_me, Jan 17 '19 at 17:24
Look at this: https://tomelliott.com/responsive-web-design/change-viewport-meta-tag-javascript — DaFois, Jan 17 '19 at 18:00
As [discussed here](https://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen), since media queries can only detect the device width and not an element's width, your best bet would be to use the [JavaScript shim](https://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen/#16879505) provided by one of the contributors in that same thread. — AndrewL64, Jan 20 '19 at 10:15
you can use this or similar plugin https://github.com/seyDoggy/rFrame — Ijas Ameenudeen, Jan 24 '19 at 05:04
@AndrewL64: This seems to be something, I was looking for. Can you please your comment as answer. — zookastos, Jan 25 '19 at 21:45

Alexander Belokon · Answer 1 · 2019-01-28T12:15:13.753

First you create an iframe and load the content of your website into the iframe asynchronously.

<iframe id="media-simulator" class="embed-responsive-item"></iframe>

<script>
$(document).ready(function(){
    $('#media-simulator').load('/includes/main-page.html');
})
<script>

The media queries defined in Bootstrap will be sensitive to the iframe's width. Therefore you can define the widths you want to simulate in your CSS code and then later on add this classes with jQuery to your iframe:

.xs {
  width: 375px;
}

.sm {
   width: 576px
}

.md {
   width: 768px
}

.lg { 
   width: 992px
}

.xl {
   width: 1200px
}

And finally write click handlers for your buttons to toggle the wanted class, e.g. the event handler to toggle mobile preview:

$('.button-xs').click(function() {
  $('#media-simulator').removeClass('sm');
  $('#media-simulator').removeClass('md');
  $('#media-simulator').removeClass('lg');
  $('#media-simulator').removeClass('xl');

  $('#media-simulator').addClass('xs');
})

AndrewL64 · Accepted Answer · 2019-01-26T18:56:45.970

As discussed here, media queries can only detect the device width and not an element's width.

Your best bet would be to use a JavaScript shim like the CSS Element Queries polyfill that adds support for element based media-queries to all new browsers (IE7+).

As stated in the polyfill's official Docs, CSS Element Queries not only allows you to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported) size while not causing performance lags due to event based implementation.

Check this JSFiddle or the Code Snippet below to see how this polyfill adds new element attributes with the ~= attribute selector on the DOM element depending on your actual CSS and element's dimension:

/* CSS */

.widget-name h2 {
    font-size: 12px;
}

.widget-name[min-width~="400px"] h2 {
    font-size: 18px;
}

.widget-name[min-width~="600px"] h2 {
    padding: 55px;
    text-align: center;
    font-size: 24px;
}

.widget-name[min-width~="700px"] h2 {
    font-size: 34px;
    color: red;
}

<!-- HTML -->

<script src="https://combinatronics.com/marcj/css-element-queries/master/src/ResizeSensor.js"></script>
<script src="https://combinatronics.com/marcj/css-element-queries/master/src/ElementQueries.js"></script>

<div class="widget-name">
  <h2>Element responsiveness FTW!</h2>
</div>

score 0 · Answer 3 · answered Jan 17 '19 at 17:02

If you're using the bootstrap classes the layout should already change based on the browser/screen widths, so I'm not sure I fully understand, but if you're just wanting a button that forces a change you could toggle classes with javascript.

You'll give the element(s) you are wanting to alter some sort of identifier; an id or class that you can select it by. Give it only one of the classes (e.g. only col-lg-4), then select it and toggle the classes. This will give it either one or the other at a given time. Make a button to fire it from a function and you should be good to go.

<button onclick='changeLayout()'>Change Layout</button>

function changeLayout() {
  var myDiv = document.getElementById('myDiv');
  myDiv.classList.toggle('col-lg-4');
  myDiv.classList.toggle('col-xs-12');
}

You'll need to make some adjustments for changing multiple elements, but it's the same concept.

Hope this helps! If I misunderstood your question, I apologize, maybe you can help clarify some more.

score 0 · Answer 4 · answered Jan 21 '19 at 12:06

I think you need a simulator for toggle website's view. try it, I think it should work for you: fiddle

HTML:

<button type="button" id="toggle_btn">
   Toggle Viewport
</button>
<span id="span">Desktop View</span>
<hr />
<section class="iframe_holder">
  <iframe src="https://getbootstrap.com/" id="dup_viewPort"></iframe>
</section>

JS:

var isToggled = false;
$('#toggle_btn').click(function() {
  if (!isToggled) {
    $('#dup_viewPort').animate({
      width: '375px'
    }, function() {
      isToggled = true;
      $('#span').text('Mobile View');
    });
  } else {
    $('#dup_viewPort').animate({
      width: '100%'
    }, function() {
      isToggled = false;
      $('#span').text('Desktop View');
    });
  }
})

CSS:

#dup_viewPort {
  width: 100%;
  position: relative;
  height: 100%;
  border: 0;
}

Nice copy of my answer – Alexander Belokon Jan 21 '19 at 18:56 — Alexander Belokon, Jan 21 '19 at 18:56

Toggle between webpage layout (phone/laptop) with javascript, jquery, bootstrap

4 Answers4