"Seamless responsiveness in design with jQuery, but encountering compatibility issues

My usage of jQuery is quite basic to ensure that elements are properly positioned when they are moved:

function ipad() {
var width = jQuery(window).width();
if (width < 1200 && width >= 768){ //if tablet 
jQuery('.mobbut').css('width', '33.333%');
jQuery('#re2').css('max-width', '');
} else {
jQuery('.mobbut').css('width', '100%'); 
jQuery('#re2').css('max-width', '400px');
}
if (width < 768){  //if mobile phone
jQuery('._btnselect').hide();   
} else {
jQuery('._btnselect').show();   
}
}

jQuery(document).ready(function() {
ipad();//run when page first loads
});
jQuery(window).resize(function() {
ipad();//run on every window resize
});
jQuery(window).load(function() {
ipad();//run when page is fully loaded
});

I have successfully tested my website in Chrome, Safari, iPad, and iPhone, but the layout messes up on Firefox when the window is resized smaller than 1200px wide. You can see for yourself here's the webpage. Could this issue be related to the jQuery code or is it more about how the page was originally designed? The homepage was inherited from another designer and previously used tables, which might be causing problems specifically with Firefox.

javascriptjqueryhtmlcssfirefox

Answer №1

When attempting to implement responsive design using media queries, I encountered some issues and had to resort to using jQuery for the desired outcome.

If you are facing issues with media queries not working, it is likely due to incorrect syntax. You can simplify your approach by trying the following code, which achieves similar results to jQuery but in a more straightforward manner:

#re2 {
  max-width: 400px;
}
.mobbut {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  ._btnselect {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  #re2 {
    max-width: none;
  }
  .mobbut {
    width: 33.333%;
  }
}

--EDIT--

If your target audience includes iPad users, consider using these specific media queries tailored for iPads from this resource:

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

By utilizing device-specific media queries, you may achieve better responsiveness compared to relying solely on jQuery adjustments based on page width.

Answer №2

After running an evaluation of your site using firebug (which I highly recommend), I identified an error in the following function:

** function futsal(){
   var wid = jQuery(window).width();
   if (wid <= 1024 && width >= 768){ //if tablet **

It appears that you declared the variable 'wid' but then tested it against 'width'.

Although I agree with the comments mentioned above, I suggest utilizing media queries as they are much simpler to implement.

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

Retrieving saved data from LocalStorage upon page reload

<div ng-repeat="section in filterSections"> <h4>{{ section.title }}</h4> <div class="checkbox" ng-click="loaderStart()" ng-if="section.control == 'checkbox'" ng-repeat="option in section.options"> <label ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Tips for effectively binding attributes based on conditions in Vue.js

Is it possible to conditionally bind attributes in Vue? Yes, you can achieve this using the v-bind directive: Here is an example: <img :src=" status = true ? 'open.svg' : 'close.svg'"> In Angular, this functionality i ...

javascriptvue.jsvuejs2

What is the best way to incorporate several functions within a resize function?

Is it possible to incorporate multiple functions within the windows.width resize function? I have been experimenting with some code, but I would like to restrict its usage to tablet and mobile devices only, excluding laptops and PCs. Any suggestions on h ...

javascriptjqueryhtmlresponsive-design

Organize Dates in React Table

I need help with sorting the Date column in my code. Currently, the sorting is being done alphabetically. Here is the JSON data and code snippet: JSON [ { "date": "Jun-2022" }, { "date": "Jul-2022" } ...

javascriptreactjstypescriptreact-hooks

Using JavaScript to Redirect to Homepage upon successful Ajax response on local server

I need assistance with redirecting to the Homepage from the SignIn Page once the user credentials have been validated. The response is working correctly, and upon receiving a successful response, I want to navigate to the Homepage. My setup involves Javasc ...

javascriptphpajaxhttp-redirectauthentication

Transferring items between different containers without using innerHTML

I've got an embedded <ul> within a (hidden) <aside id="idDetails">. How can I move the ul element from inside the aside and position it in a <div id="projectSide"> without using innerHTML? Any solutions in both plain JavaScript and j ...

javascriptjquery

Tips for automatically refreshing a div in Drupal

I'm currently working with Drupal and I'm looking to update a specific field every X seconds without having to refresh the entire page. My current approach involves using the following code: <script> var refreshId = setInterval(function ...

jquerydrupal

Using a data loader with react-router

I am currently working on a react app where I have implemented routes using the new data loaders from react-router-dom import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom'; import Home fr ...

javascriptreactjsreact-routerreact-router-dom

Utilize an Ajax dropdown menu that allows users to enter search criteria, such as location or city

Looking for a way to display weather information based on a selected city? Check out this code snippet that uses Yahoo API to pull data and show weather details. Here's the code: <HTML> <HEAD> <TITLE>Find Weather in major cities ar ...

javascriptphpjqueryajax

How to load several stylesheets for a component in Angular 2

Struggling with my angular2 application, I encountered an issue when attempting to load multiple stylesheets for the same component. Below is a snippet of the code: import { Component } from '@angular/core'; @Component({ selector: 'my-tag& ...

csstwitter-bootstrapangularwebpackstyles

Sending data from Flask to Ajax

Upon accessing the main page, my Flask application generates a base Jinja template with specific elements: <div><span id="var_1">{{ var1|safe }}</span></div> <div><span id="var_2">{{ var2|safe }}</span></div> ...

javascriptjquerypythonajaxflask

Exploring the functionality of window.matchmedia in React while incorporating Typescript

Recently, I have been working on implementing a dark mode toggle switch in React Typescript. In the past, I successfully built one using plain JavaScript along with useState and window.matchmedia('(prefers-color-scheme dark)').matches. However, w ...

javascriptreactjstypescriptnext.js

Exploring the use of properties in JavaScript

I recently began learning Vue.js 2, but I encountered an issue when passing props to a child component. Here's the code snippet where I pass the prop: <div class="user"> <h3>{{ user.name }}</h3> <depenses :user-id="user.id"&g ...

javascriptvue.jsvuejs2

Steps for correctly invoking a function based on input value conditions

Lately, I've been developing a new website geared towards serving as a platform for various travel agencies to showcase their tour packages. The homepage features a functional filter section that enables users to search for offers based on different ...

javascriptajax

What measures can be taken to avoid the entire page from reloading?

Within my page, there exist two containers. The first container is designated for displaying a list of items, while the second container showcases actions corresponding to each item. A feature allows me to add a new item dynamically to the first container ...

jqueryajaxangularjs

Is it possible to utilize a keyboard listener to activate a tooltip upon being invoked?

I've created a basic pie chart that shows a tooltip when you click on a pie wedge. Now, I want to achieve the SAME functionality, but for div elements located OUTSIDE of the pie chart. Situation: A user focusing on the 'Cat 1' div and ...

javascriptjqueryd3.jscharts

The img-fluid class is not properly adjusting the height of the image

I'm currently working with Bootstrap 4 and facing a challenge with creating a grid of 4 images - 2 on top and 2 at the bottom. I've applied the img-fluid class, but the image resizing is based solely on width, leading to the height being too larg ...

htmlcssbootstrap-4fluid-layout

Why Are My JavaScript GET Request Parameters Displaying as Strings Rather Than Numbers?

Currently, I am in the process of developing a REST API where one of the defined routes looks like this: router.get("/objects/:id?/:val1?/:val2?", getObject); Specifically, my request from Postman appears as follows: http://localhost:8000/objects?val1= ...

javascriptnode.jsrestful-urlget-request

The positioning of the Kendo UI window is off-center

I have encountered a problem with the alignment of the Kendo Window. There is a simple fiddle available to demonstrate this issue. Despite having ample space for the Kendo window to show without triggering the browser's vertical scroll bar, the cente ...

javascriptkendo-uikendo-window

ensure that the element matches the height of its parent element

Allow me to illustrate the issue with a visual aid. In the provided image, you can observe that the checkmark is perfectly centered vertically in the one-line p element. However, as the text extends to two or three lines within the p element, the checkmar ...

css