Shifting div box alignment using jQuery

Question

Shifting div box alignment using jQuery

<div class="full-width">
<div class="content-inner vc_col-sm-5">
    <p>This is some text This is some text This is some text</p>
</div>
<div class="slide-show vc_col-sm-7">
    <img src="imageher.jpg" alt="big image">
</div>

I have a code snippet here that displays two div boxes side by side. However, when the window width is smaller than 859px, I want to change their position so that the image comes first before the text.

<div class="full-width">
<div class="slide-show vc_col-sm-7">
    <img src="imageher.jpg" alt="big image">
</div>
<div class="content-inner vc_col-sm-5">
    <p>This is some text This is some text This is some text</p>
</div>

How can I achieve this using jQuery?

javascript jquery html css

Answer 1

Answer №1

Here's a simple solution: just include "float: right" in the "content-inner" when the screen size drops below 859px.

You can view the code snippet on my fiddle link https://jsfiddle.net/q2x5xsu0/

@media screen and (max-width: 859px) {
    .content-inner {
      float: right;

    }
}

Answer 2

Here's a simple solution: just include "float: right" in the "content-inner" when the screen size drops below 859px.

You can view the code snippet on my fiddle link https://jsfiddle.net/q2x5xsu0/

@media screen and (max-width: 859px) {
    .content-inner {
      float: right;

    }
}

Answer 3

Answer №2

To begin, it is important to determine the size of the window as shown below:

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

After confirming the window size, you can adjust your position accordingly.

Answer 4

To begin, it is important to determine the size of the window as shown below:

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

After confirming the window size, you can adjust your position accordingly.

Answer 5

Answer №3

Here is the code snippet in "JavaScript":

<body onload="updateDisplay()">
<div class="full-width">
<div class="content-inner vc_col-sm-5" id="smallDiv">
    <p>Some sample text Some sample text Some sample text</p>
</div>
<div class="slide-show vc_col-sm-7" id="bigDiv">
    <img src="example.jpg" alt="large image">
</div>
</body>

JavaScript function:
<script>
function updateDisplay()
{
if(window.innerWidth < 859)
{
$("#smallDiv").insertAfter("#bigDiv");
}
}
</script>

Answer 6

Here is the code snippet in "JavaScript":

<body onload="updateDisplay()">
<div class="full-width">
<div class="content-inner vc_col-sm-5" id="smallDiv">
    <p>Some sample text Some sample text Some sample text</p>
</div>
<div class="slide-show vc_col-sm-7" id="bigDiv">
    <img src="example.jpg" alt="large image">
</div>
</body>

JavaScript function:
<script>
function updateDisplay()
{
if(window.innerWidth < 859)
{
$("#smallDiv").insertAfter("#bigDiv");
}
}
</script>

Answer 7

Answer №4

Explore the capabilities of the $.resize() api here: https://api.jquery.com/resize/

To determine the window size, you can utilize $(window).width();

Combining these elements results in the following code snippet:

<div class="full-width">
<div class="content-inner vc_col-sm-5">
    <p>This is some text This is some text This is some text</p>
</div>
<div class="slide-show vc_col-sm-7">
    <img src="imageher.jpg" alt="big image">
</div>

<script>
    $(window).resize(function() {
        var w = $(window).width();
        if(w < 859) {
            //make changes for small configuration
        } else {
            //make changes for large configuration
        }

    });
</script>

Answer 8

Explore the capabilities of the $.resize() api here: https://api.jquery.com/resize/

To determine the window size, you can utilize $(window).width();

Combining these elements results in the following code snippet:

<div class="full-width">
<div class="content-inner vc_col-sm-5">
    <p>This is some text This is some text This is some text</p>
</div>
<div class="slide-show vc_col-sm-7">
    <img src="imageher.jpg" alt="big image">
</div>

<script>
    $(window).resize(function() {
        var w = $(window).width();
        if(w < 859) {
            //make changes for small configuration
        } else {
            //make changes for large configuration
        }

    });
</script>

Shifting div box alignment using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing JSON Data with Angular

Combining CSS percentages with pixels for layout design

What is the best way to develop a script allowing users to input an email address and send them a pre-written email message?

Printing a JSON array in Angular: A step-by-step guide

Nodejs having trouble establishing a connection with mongodb

How to center a container in HTML using Bootstrap techniques

Tips for incorporating CSS 4 custom properties into Angular components

Incorporating HTML into the Ajax Response

Guide to Modifying the Parameter Value in JMeter's "Http Request" for a checkbox with "title" text managing the state

Utilizing AngularJS to dynamically bind input to a value with a filter and keep it updated

Ways to isolate AngularJS files without relying on the global scope

Display the cost within a text box following the selection of the identifier from a dropdown menu

How to add icons to HTML select options using Angular

"Error occurs when attempting to insert indexes into a JSON array, causing the Dat

Tips for maintaining the particles.js interaction while ensuring it stays under other elements

How to retrieve the value of a submit button using PHP

JavaScript for Dynamic Scaling Animations

"Within class methods, the reference to "this" mistakenly points to the window object instead of the class object, and the cause of this behavior eludes

What is the process for identifying the ActiveX control being referenced on a webpage?

Center 3 elements horizontally using Flexbox, ensuring the center element is aligned properly