How can I ensure that my jQuery code only executes after the mobile CSS has been loaded

When it comes to loading my mobile-only CSS, I typically use a media query similar to:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" />

However, in addition to these CSS modifications, I sometimes find the need to rearrange certain parts of the HTML. For example:

$('#moveOne').after($('#theOther');

I prefer this reordering action to be performed only after the browser has successfully loaded the mobile.css file. One method I considered is adding a unique CSS value inside mobile.css and then checking its properties like so:

if($'#notVisible').css('color') == 'red') {
    $('#moveOne').after($('#theOther');
}

Do you know of a more effective way to accomplish this task?

jquerycss

Answer №1

I believe your approach is commendable.

However, a more practical solution would be to specify the width instead of the color.

if($'#notVisible').width() == '500px') {
    $('#moveOne').after($('#theOther');
}

You could also experiment with matchMedia.js

Check out this resource too: Using_media_queries_from_code

Answer №2

Consider implementing a similar approach to your media query

if (document.documentElement.clientWidth <= 480) {
    $('#moveOne').append($('#theOther');
}

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

arrangeable database table

I have created a large PHP generated table from a database and now the customer is requesting for it to be sortable. Below is a sample of the table's contents: ID BRAND KIND DESCRIPTION PRICE The customer wants to sort by price, and also have the a ...

jqueryhtmltwitter-bootstrapjquery-ui

Pass information from ColdFusion to jQuery

I'm attempting to achieve a similar result as this, but I believe the syntax is not quite right: <cfset details = '{ name: "name", address:"address"}' /> <img data-details='#details#' onClick="DisplayDetails()" /> &l ...

javascriptjquerycoldfusion

Using Jquery to retrieve data from PHP for validation in a datepicker widget

I am currently working on a project where I need to retrieve an array of invalid dates from a PHP file and highlight them in red on the date picker. However, the code below is not correctly populating the unavailableDates array as expected. It seems to d ...

phpjqueryjquery-ui-datepicker

What is the correct way to align these two blocks side by side?

I have an image (https://i.stack.imgur.com/v71LR.png) and I'm trying to achieve a similar layout. Currently, my approach involves using two divs - one for the left column (containing the image) and one for the right column (with heading and paragraph ...

htmlcss

Incorporating a new dropdown menu above the content of a pre-existing jQuery accordion dropdown, causing the content to shift downwards

Seeking a way to overlay a second-level dropdown menu on top of the content beneath a jQuery accordion-style dropdown. Typically, the jQuery accordion pushes down the content below, but I want the second-level dropdown to remain unaffected. Is there a solu ...

javascriptjquerycssjquery-uiaccordion

CSS - sticky header causing issues when resizing the browser window

I'm currently facing an issue with the layout of my navbar. While I've managed to create a fixed navbar that stays at the top, the content on the page seems to be hidden underneath it. To address this problem, I attempted to add a 5% margin from ...

htmlcss

Placing a table within a div causes the div to expand in width beyond 100%

A situation has arisen where a table with a large number of columns (30 columns) is being affected by the white-space:nowrap style set on each th tag, causing the parent div to stretch unnaturally. How can this issue be resolved and allow for a horizonta ...

htmlcsshtml-table

CSS Trick: How to Clear Content in a 3-Column Div arrangement

I've been struggling to clear the content below my three div columns, each consisting of a span with centered text and a textarea. It seems that the issue arises from the floating div tags without proper clearing. When viewed in Firefox, the next ele ...

csshtml

The elements within the Popup Modal are not displaying as expected

I found a helpful tutorial that teaches how to display a Popup Modal Window when the page loads. However, I'm facing an issue where the modal is not showing the contents and images properly. The code I am working on can be found at jsFiddle. My goal ...

javascriptjqueryjquery-uisimplemodal

Click on the checkboxes to the left labeled "Mark"

https://i.stack.imgur.com/2u1dI.png In designing a permission management form for user access, the concept I have in mind is as follows: When "Manage" is selected, the options for view/edit/lend should also be automatically selected and disabled. If any ...

javascriptjquery

A guide to building your own live HTML editing tool

I'm currently developing a PHP website that allows users to enter text into a textarea, and have the input displayed in a table in real time for a preview of the result. I am seeking guidance on how to make this feature possible. I have come across w ...

javascriptphpjqueryhtml

Utilize a single JavaScript file to handle various views without encountering errors due to undefined functions

My backend editing requires a single JS file. However, I face the challenge of needing different sets of methods for view A and view B — never both at the same time. To streamline this process, I combined all the jQuery functions for both views into one ...

javascriptjquery

Issue with margin:auto in Internet Explorer 5

I have been experimenting with IE11's developer tools and discovered that when changing the browser mode, everything appears as expected in Edge, 10, 9, 8, and 7. However, in IE5, the div is forced to align to the left instead of the middle. Could so ...

htmlcssinternet-explorerinternet-explorer-5

Ways to troubleshoot and verify values in PHP that are sent through AJAX

In my jQuery function, I am using AJAX to send values to a PHP file: $.ajax({ //make ajax request to cart_process.php url: "cart_process.php", type: "POST", dataType: "json", //expect json value from server data: { quantity: iqty, ...

javascriptphpjqueryajaxjson

IE9 not triggering jQuery's .load method

I am facing an issue where the load method is not firing on IE9.0 for 4 divs (class=mydiv) with images inside, while it works on other browsers I've tested. I'm unsure if this issue persists in other versions of Internet Explorer. $.noConflict() ...

jqueryinternet-explorerinternet-explorer-9

Add an image to a div element and determine its height, then apply the height to the CSS property

Here is my JavaScript code that utilizes jQuery: $(".article_big_photo").click(function() { $('#screen').css({ opacity: 0.5, 'width':$(document).width(),'height':$(document).height()}); $('#screen').show() ...

javascriptjquery

PHP-MySQL FlipClock: Counting Down in Reverse

I am looking for a solution to implement a reverse counter using Flipclock. The timer should start from a given time (for example, 19:40:46) and count down to 00:00:00. Here is the code: var clock; $(document).ready(function() { // Get the current ...

phpjquerymysqlflipclock

Balancing heights with jQuery

Is there a way to set the height of an h3 element based on the tallest version of its siblings, but only for certain elements? I have a list where CSS organizes items into rows of 3. The last li element in each row has the class "endRow". I want to find t ...

jquerycssheight

How can I use jQuery to vertically align an element?

Here's my website: Take a look here! I have a menu on the left column that I want to center. Take a look at the image below for a better understanding of what I'm trying to achieve. https://i.stack.imgur.com/ZzprT.png Here is the JavaScript c ...

javascriptjqueryhtmlcss

What could be the reason for the misalignment between md-menu and md-button when ng-href is included in the button?

Check out the demo by clicking here: http://codepen.io/audiodude/pen/vLyNvw The main distinction between the top and bottom sections lies in the fact that the top section utilizes an md-button with an ng-href attribute, which Angular Material compiles int ...

htmlcssangularjsangular-material