Change the div element to a different div element as the window size is adjusted

Here is the HTML snippet I am dealing with:

<div id="div_top"></div>
<div id="div_bottom"></div>

When viewing the website on a mobile device or resizing the window, I need div_bottom to appear before div_top.

To achieve this, I have implemented the following code:

if(window.innerWidth <= 480){
    jQuery(document).ready(function(){
      jQuery('#div_bottom').insertBefore('#div_top');
    });

    jQuery(document).resize(function(){
        jQuery('#div_bottom').insertBefore('#div_top');
    });
}

The onload function seems to be working fine, but the resize function is not functioning as expected.

Is there a jQuery or CSS solution that can help resolve this issue?

jquerycsshtml

Answer №2

$(window).resize(function() {
    if (window.innerWidth <= 480) {
        $("div#div_bottom").insertBefore("div#div_top");
    }
});

It should work perfectly.

Answer №3

Make sure to utilize the 

$(window).resize(function() {...});
method for proper function. Take a look at the demonstration provided in this fiddle

Remember to include $(document).read(function() {}); as well. The implementation of this method is already included in the fiddle, although it may not be immediately visible. (Look for the checkmark in the far left column indicating that the method is present)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch between different table rows

I have here a table that is used for displaying menu and submenu items. It's a mix of PHP (to fetch the menu items and their respective submenus) and HTML. What I am trying to figure out is how to toggle the visibility of only the submenu items under ...

javascriptphpjqueryhtmlcss

The first Ajax request is successful, however, the final one is failing to properly pass the data to the designated page

I have encountered an issue with two parsing scripts. The message.php script works without any problems, but when attempting to send data to data.php, the following error occurs: "Notice: Undefined index: userid in D:\xampp\htdocs\metro&b ...

phpjquerymysqlajax

Stop child elements from spilling out of the parent container without using fixed height measurements

I am in the process of creating an angular component with a header, buttons, a table, more buttons, and a footer. However, I am facing some challenges with the layout. <my-component> <div>Header Section</div> <some-stuff class=&quo ...

htmlcssreactjsangularsass

Issues with HTML5 video playback in Apple machines using the Firefox browser

On a website I'm developing, I've included an HTML5 video that works perfectly except for one specific issue - it won't play on Firefox in Apple devices. Surprisingly, it functions well on all other browsers and even on Firefox in Windows an ...

javascriptioshtmlfirefoxvideo

What is the best way to trigger click events within a select dropdown using Angular?

I have implemented two buttons (month, year) that trigger different events. Now, I want to replace these buttons with a select element. Can you guide me on how to achieve this? Here is my current code: // Button implementation <button class="menu-butt ...

htmlangulardom-eventseventemitter

Sending the HTML input value to a Knockout view

Can someone assist me with a dilemma I'm facing? Within CRM on Demand, I have a view that needs to extract values from CRM input fields to conduct a search against CRM via web service. If duplicate records are found, the view should display them. Be ...

javascriptjqueryknockout.jstypescript

What could be the reason for my Ajax failing to send the data to the external file?

My current setup involves sending data to an external PHP file via AJAX in order to generate a PDF using TCPDF and return it back to the page. However, I seem to be facing some issues with this process. Despite my efforts, I am unable to pinpoint the mist ...

javascriptphpjqueryajaxtcpdf

What are your preferred HTMLPurifier configurations for sanitizing CSS styles?

I'm currently in the process of developing an application that allows users to input their own custom CSS for their profiles, similar to platforms like MySpace, Friendster, and Blogger. However, I'm struggling to find an effective method to prot ...

phpcsshtmlpurifierxss

Retrieving a targeted JSON element and adding it to a fresh object

Hello everyone, I have an object that resembles the following structure: [ { "app": 1, "scalable": true, "zoomable": true, "cropBoxResizable": true }, { "app" ...

javascriptjqueryjson

Issue with scroll down button functionality not functioning as expected

Is there a way to create a simple scroll down button that smoothly takes you to a specific section on the page? I've tried numerous buttons, jQuery, and JavaScript methods, but for some reason, it's not working as expected. The link is set up co ...

javascriptjqueryhtmlcss

Executing a webservice method in an html page using javascript without the need to refresh the page

Is it possible to call a webservice from an index.html page using JavaScript? My webservice is located at "localhost/ws/service.asmx" and the specific web method I want to call is called HelloWorld. The index.html page contains an HTML submit button whic ...

javascriptjqueryhtmlweb-services

"Utilize ajax and a modal window to insert a new record

Unable to retrieve values from ajax request when trying to add records using modal. (home.php) <script type="text/javascript> function saveData(){ var modsubj = $('#modalsubject').val(); var modsect = $('#modalse ...

javascriptphpjqueryajax

Is there a way for me to direct to a different HTML page once I click on a certain data point?

At the moment, I have been utilizing this complete set of calendar codes. <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='fullcalendar.css' rel='stylesheet' /> <link href=&a ...

javascriptjqueryhtmlfullcalendar

Ways to display and conceal a div when hovering over another div

Currently, I have 4 divs grouped under the class "menubut." I am attempting to create a small overlay that appears when hovering over the menubut classes. Additionally, I want another div called "red" to show up about one-tenth of the size of the menubut ...

javascriptjqueryhtmlcss

Activate Bootstrap dropdown with an external button click

I am currently working with Bootstrap 5 dropdowns and I have a specific requirement. I want the button that triggers the dropdown to be located outside of its parent element (under A). Is there a way to achieve this using Jquery or JS? <div class=&quo ...

javascriptjquerytwitter-bootstrapbootstrap-5

The "pointer" cursor style is simply not functioning in any way

Here is the angular template code I am working with: <!-- Modal --> <ng-template #levelsmodal let-c="close" let-d="dismiss"> <div class="modal-header"> Select the levels you want to show in the table and chart ...

htmlcssangular

Searching for the element that triggered the event using jQuery or JavaScript

Can anyone offer tips on how to use console.log to identify the element that triggered a hover event? I'm trying to debug an issue specifically on iOS. I'm not looking to locate the specific item that the action was performed on, but rather what ...

javascriptjqueryjquery-events

Enhancing live query functionality and providing a substitute for DOMNodeInserted specifically tailored for

I have searched multiple times on various platforms for a solution to my specific issue, but have not found one that fits my unique circumstances. My goal is to replace outdated code such as livequery and DOMNodeInserted. See examples below. I am current ...

javascriptjqueryinternet-explorerdeprecatedlivequery

"Fill the designated area on the webpage with data retrieved from an external script

In my current project, I am utilizing Angular and JQuery to enhance re-usability by setting the header and footer as partials. However, I encountered an issue where I needed certain javascript functions to be executed within the footer upon loading - a tas ...

javascriptjqueryangularjs

Why is it that the bootstrap text color class isn't applying for my project?

After some experience with bootstrap, I have encountered an issue with the text-white class. Despite trying to change the text color using this class, it doesn't seem to work. Below is the code that I've been working on. Can anyone spot what migh ...

htmlcsstwitter-bootstraptwitter-bootstrap-3