CODEWITHSUNDEEP
jquerycssresponsive-designbootstrap-4viewport
zookastos
zookastos

Reputation: 935

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

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.

Upvotes: 7

Views: 2277

Answers (4)

Alexander Belokon
Alexander Belokon

Reputation: 1522

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');
})

Upvotes: 5

AndrewL64
AndrewL64

Reputation: 16301

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>

Upvotes: 1

Abhineet
Abhineet

Reputation: 632

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;
}

Upvotes: 0

Tim Higgins
Tim Higgins

Reputation: 383

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.

Upvotes: 0

Related Questions