Switch between webpage design for different devices (mobile/desktop) using javascript, jquery, and bootstrap

Question

Switch between webpage design for different devices (mobile/desktop) using javascript, jquery, and bootstrap

I am currently working on a webpage that contains various html elements with bootstrap classes applied to them.

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

My goal is to implement a button that, when clicked, will toggle the viewport/layout changes of these divs on the webpage. Upon clicking the button, I need to be able to instantly see the layout change in real-time, displaying "col-xs-12" for mobile view and "col-lg-4" for laptop view. However, I am unsure which specific CSS or Bootstrap property I should be utilizing for this functionality.

Any guidance or assistance on this matter would be greatly appreciated.

EDIT - Use case - I am providing a platform for users to edit CSS and classes. I aim to include a toggle button so users can visualize how their elements will appear in both laptop and mobile views.

jquery css responsive-design bootstrap-4 viewport

Answer 1

Answer №1

To begin, you can set up an iframe and load your website's content into it asynchronously.

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

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

Bootstrap's media queries are responsive to the width of the iframe. This allows you to define specific widths in your CSS and then add these classes to the iframe using jQuery:

.xs {
  width: 375px;
}

.sm {
   width: 576px
}

.md {
   width: 768px
}

.lg { 
   width: 992px
}

.xl {
   width: 1200px
}

Add click handlers to your buttons to toggle the desired class. For example, here is an event handler to toggle the 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');
})

Answer 2

To begin, you can set up an iframe and load your website's content into it asynchronously.

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

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

Bootstrap's media queries are responsive to the width of the iframe. This allows you to define specific widths in your CSS and then add these classes to the iframe using jQuery:

.xs {
  width: 375px;
}

.sm {
   width: 576px
}

.md {
   width: 768px
}

.lg { 
   width: 992px
}

.xl {
   width: 1200px
}

Add click handlers to your buttons to toggle the desired class. For example, here is an event handler to toggle the 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');
})

Answer 3

Answer №2

In a previous discussion, it was mentioned that media queries are limited to detecting the device width and not the width of an element.

To overcome this limitation, one could consider using a JavaScript shim such as the CSS Element Queries polyfill, which extends support for element-based media queries in modern browsers (IE7+).

According to the official documentation of the polyfill, CSS Element Queries enables defining media queries based on both window size and the size of specific elements, without sacrificing performance due to its event-based implementation.

For a demonstration, refer to this JSFiddle or review the following Code Snippet showcasing how the polyfill introduces new element attributes with the ~= attribute selector on DOM elements based on your CSS and the dimensions of the elements:

/* 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>Enhanced Element Responsiveness!</h2>
</div>

Answer 4

In a previous discussion, it was mentioned that media queries are limited to detecting the device width and not the width of an element.

To overcome this limitation, one could consider using a JavaScript shim such as the CSS Element Queries polyfill, which extends support for element-based media queries in modern browsers (IE7+).

According to the official documentation of the polyfill, CSS Element Queries enables defining media queries based on both window size and the size of specific elements, without sacrificing performance due to its event-based implementation.

For a demonstration, refer to this JSFiddle or review the following Code Snippet showcasing how the polyfill introduces new element attributes with the ~= attribute selector on DOM elements based on your CSS and the dimensions of the elements:

/* 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>Enhanced Element Responsiveness!</h2>
</div>

Answer 5

Answer №3

If you are utilizing bootstrap classes, the design should automatically adjust based on the browser or screen size. However, if you specifically want a button to trigger a layout change, you can achieve this by toggling classes using JavaScript.

To modify the element(s) you wish to change, assign them a unique identifier such as an id or class for easy selection. Apply only one of the classes initially (e.g., just col-lg-4), then use JavaScript to toggle between classes. By creating a button that calls a function, you can successfully implement this functionality.

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

For multiple elements, you will need to make some adjustments while following the same approach.

I hope this explanation proves helpful! If I have misunderstood your query, I apologize and would appreciate further clarification.

Answer 6

If you are utilizing bootstrap classes, the design should automatically adjust based on the browser or screen size. However, if you specifically want a button to trigger a layout change, you can achieve this by toggling classes using JavaScript.

To modify the element(s) you wish to change, assign them a unique identifier such as an id or class for easy selection. Apply only one of the classes initially (e.g., just col-lg-4), then use JavaScript to toggle between classes. By creating a button that calls a function, you can successfully implement this functionality.

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

For multiple elements, you will need to make some adjustments while following the same approach.

I hope this explanation proves helpful! If I have misunderstood your query, I apologize and would appreciate further clarification.

Answer 7

Answer №4

Have you considered using a toggle simulator for changing the website's view? Give this a try and see if it works for you: fiddle

Here is the HTML code:

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

And here is the JS code:

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

Lastly, the CSS code:

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

Answer 8

Have you considered using a toggle simulator for changing the website's view? Give this a try and see if it works for you: fiddle

Here is the HTML code:

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

And here is the JS code:

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

Lastly, the CSS code:

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

Switch between webpage design for different devices (mobile/desktop) using javascript, jquery, and bootstrap

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Step-by-step guide to creating a clickable div

The callback function in Ajax is returning an undefined response, causing an Uncaught Reference

Ensuring consistent column height in HTML Tables

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

What is the best way to compare two times in the hh:mm AM/PM format?

What is the process for assigning an item from the result list to the parent Div tag of the current object?

Collapsing table row in Bootstrap upon button click within the same row

The Bootstrap dropdown menu is cut off and not fully visible on mobile devices

What could be causing the JSF ajax status success to fail in Chrome?

Send form using AJAX, then insert the data into a DIV once it has been validated by jQuery

Trouble with using AJAX to transfer a JavaScript variable to a PHP file

Having trouble targeting a div with jQuery

Progress to the following pages after each page remains inactive for 3 seconds

Tips for modifying a particular element within a class?

Maintaining Scene Integrity in THREE.JS: Tips for Handling Window Resizing

What is the best way to implement the nth:child selector in conjunction with the each function for handling JSON data in

Using JQuery to parse data in a $.post request

Positioning the div to align perfectly alongside the list items

Capture the onclick attribute with jQuery and then reapply it

Columns with adjustable widths