I am working with HTML code that looks like this:
<div class='box'>
<div class='left'>content left</div>
<div class='right'>content right</div>
</div>
Now, for smartphone devices, I want the div element with the class "right" to appear before the one with the class "left."
What is the best way to achieve this?
If you decide to adjust the sequence of elements, a pure CSS/HTML approach could look like this:
Take a look at this jsFiddle example - experiment by resizing the window
HTML
<div class='box'>
<div class='right'>content right</div>
<div class='left'>content left</div>
</div>
CSS
.left {
background:red;
height:200px;
width:50%;
float:left;
}
.right {
background:blue;
height:200px;
width:50%;
float:right;
}
@media screen and (max-width: 481px) {
.left {
width:100%;
float:none;
}
.right {
width:100%;
float:none;
}
}
If that method doesn't suit your needs, there's an alternative where the element order remains unchanged. Since you're interested in jQuery, check out this solution:
Here's another jsFiddle example - resize the window to see it in action
HTML
<div class='box'>
<div class='left'>content left</div>
<div class='right'>content right</div>
</div>
jQuery
$(window).resize(function(){
if ($(window).width() <= 481){
$('.right').insertBefore('.left');
}
else {
$('.right').insertAfter('.left');
}
});
If you have knowledge of JavaScript and can identify when the user is using a smartphone, you may consider implementing the following code snippet:
var divs = document.getElementsByClassName('box');
for(var i=0; i<divs.length; i++) {
var rightDiv = divs[i].childNodes[1];
divs[i].removeChild(rightDiv);
divs[i].insertBefore(divs[i].childNodes[0], rightDiv);
}
This is the provided code snippet: Responsive design for Smartphones in both portrait and landscape modes
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
.right,
.left{
float: left;
}
}
I am currently working on a project involving Vite+Vue.js where I need to import data from a headless-cms Wordpress using REST API and JSON. The goal is to display the titles and content of the posts, including images when they appear. However, I have enco ...
I was attempting to retrieve values using ngOnInit and initializing the form with default values, but for some reason the form is returning as undefined. I also tried using patchValue, but since the form is undefined, it doesn't work. It's intere ...
When using an AngularJS ng-repeat, I encounter an issue with aligning elements on a new line. Instead of aligning the element above it, all elements on the same 'row' align with the lowest-hanging element. Even though I am using Bootstrap, I cou ...
I am developing an application that utilizes multiple forms loaded through AJAX requests. Let's say my main file is index.html. Within this file, various forms are dynamically loaded using AJAX calls. My goal is to determine if a specific text input ...
I recently started building a small website using Zurb Foundation. I have created a basic grid layout with large metro style div thumbnails (about 10 on the page). Now, I want to enhance user interaction by implementing modal windows that appear when a th ...
I am experiencing an issue with the fixed navigation at the top of my site. The navigation links to sections further down on the page, but it overlaps part of the section I link to instead of stopping exactly at the beginning of the section. You can see an ...
Within my AngularJS app, I've come across the following code: example.html <div> <p>{{name}}</p> </div> <div> <button ng-click="someFunction()"></button> </div> exa ...
I'm interested in learning how to implement jQuery to highlight related tables. Initially, I explored this JS fiddle and discovered a method for highlighting both vertically and horizontally. I conducted several searches to find a similar approach, ...
Searching for an answer to display only one div with a rate of 1/100. Currently, I am utilizing the following JavaScript: var random = Math.floor(Math.random() * $('.item').length); $('.item').hide().eq(random).show(); This method wor ...
Currently, I am implementing a workaround using JQuery to fix a visual bug in a library that I am working with. Everything was going smoothly until I started preparing for a tested version and encountered an error. Within my component, the code looks like ...
As I work on building a website using a template (https://github.com/learning-zone/web-templates/tree/master/victory-school-free-html5-bootstrap-template), I encountered an issue with the navigation bar. The original design appears like this: Before shrin ...
Do you know how to create an infinite scroll widget similar to Google Reader on iGoogle? This widget should be able to dynamically load data as the user scrolls, and replace the traditional scroll bar with a pair of up and down arrows. The HTML structure ...
Hey there, I'm no expert in this field so I could really use some help with my PHP document. Here's the situation: I have a PHP document that includes a form. Every time a user submits text into the input field, the text is echoed as a list item ...
Currently, I am working on an HTML code where the number of components that need to be edited varies, it could range from 3 to 20. To illustrate my situation, I have provided a small example on my website. You can see that my script successfully modifies ...
Recently, I stumbled upon a snippet of code in an Angular project that caught my eye. Naturally, I decided to incorporate it into my own program: <div style="text-align:center"> <a mat-icon-button class="btn-google-plus" href="http://google.com ...
Working with Backbone, I have a list container view that should house multiple section views with event handling. However, the issue is that the event is triggered as many times as there are subviews inside the container. I understand that moving the clos ...
Our team is working on creating an HTML game that incorporates abobe edge for animations within iframes. To enhance user experience, we are attempting to preload the iframes before removing the 'loading screen' to prevent users from seeing blank ...
My JSON file contains a list of elements, each creating a container. See the code below: $.getJSON('/data/risks.json', function(data) { var html = ''; $.each(data.risk, function(key, value){ html += '<div class="elementlis ...
Hey everyone, I need some assistance with web programming. I'm facing an issue with ajax while trying to read a JSON response. The catch is, I have to use Internet Explorer for this task, so switching browsers is not an option. I'm stuck because ...
I'm attempting to make sure the tail of the speechbubble aligns with the center of the image, regardless of their respective heights. Essentially, I want the image to always be centered within the current height of the wrapper, similar to how the spee ...