Execute Jscript only at certain width without jQuery

Question

Okay so with much attempt to no prevail, I have been trying to change the order of the below divs using the following JScript command (without jQuery) only when the window is at a certain width; particularly 1024px and below. The JScript used is successful in executing and subsequently changing the order of the divs, however it occurs at all widths.

I wish for box-3 to be above box-1 when the window width is equal to or less than 1024px (without using jQuery).

<html>
 <body>
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
 </body>
</html>

<script type="text/javascript">
 var content = document.querySelector('.box-3');
 var parent = content.parentNode;
 parent.insertBefore(content, parent.firstChild);
</script>

Thanks in advance!

Edit: Question is different from "Execute function based on screen size" (Authored by Jim) because solutions given to Jim included - and accepted - jQuery, whereas this question is purely for vanilla Javascript

What have you tried to make it only occur on the screen sizes you want? — SidTheBeard
– SidTheBeard, Commented Mar 2, 2018 at 3:54
@ObsidianAge I have read that but find it difficult to understand/translate to my needs :/ — KAindex
– KAindex, Commented Mar 2, 2018 at 4:00
@SidTheBeard a variety of 'onresize' function, mq etc, but to be honest I'm not 100% sure of their particular function, I am new to Jscript and trying to put the pieces together haha — KAindex
– KAindex, Commented Mar 2, 2018 at 4:05

SidTheBeard · Accepted Answer · 2018-03-02 05:12:17Z

1

Alright, so you were on the right track using window.onresize.

A suggested edit and a good point:

If you want the reorder to happen before the window is resized, make sure you check the size of window when the page is opened by using window.onload. To make everything more concise you can put your reorder code into a function, let's say myResizeFunction() and then do something like this

var needsReset = false;
window.onresize = function() {
    if( this.innerWidth <= 1024 ) {
        myResizeFunction();
    } else {
        if( needsReset ) {
            //UNDO THE REORDER OR
            //WHATEVER CODE YOU WANT IF SCREEN IS LARGER THAN TARGET SIZE
        }
    }
}
window.onload = function() {
    if( this.innerWidth <= 1024 ) {
        myResizeFunction();
    }
    //NO ELSE BLOCK NEEDED BECAUSE
    //IF SCREEN SIZE ISN'T IN TARGET RANGE WE HAVE NOTHING TO UNDO
}
function myResizeFunction() {
    //NOW YOUR REORDER CODE LIVES HERE
    //SET needsReset TO true BECAUSE WE'VE CHANGED THE ORDER OF ELEMENTS
    needsReset = true;
}

I’m on a mobile so I can’t test how the DOM is changing but try parent.lastChild instead.

If you’re removing the .box-3 and then inserting it in front of .box-1 (I believe this is what is happening) then doing a insertBefore on the parent.lastChild should put box 3 back in its original spot

edited Mar 2, 2018 at 5:12

answered Mar 2, 2018 at 4:18

SidTheBeard

3793 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

KAindex Over a year ago

Thank you, that worked in executing when width was 1024, but unsure how to undo the reorder - tried parent.insertBefore(content, parent.fourthChild); but dont believe that is right :/

SidTheBeard Over a year ago

@KAindex try the changes I made and see if that works.

KAindex Over a year ago

I dont believe it is working, it may be on my end I'm not sure, but when the width is expanded, yes box-3 is in its original position, but then the slightest change in width, even by 1 pixel, either expanding or shrinking the width, sends box-3 last :/

SidTheBeard Over a year ago

@KAindex I added a boolean variable that you need to check, if the variable is true then the elements need to be reset. Otherwise, the elements will stay as is.

KAindex Over a year ago

I have applied this however, 'parent.lastChild' still inserts box-3 after the "lastChild" which is box-4, instead of just before it?

|

Collectives™ on Stack Overflow

Execute Jscript only at certain width without jQuery

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related