utilizing jquery for individual media queries

Looking to adjust the values in a jQuery script based on media query specifications.

HTML

<div id="content">
</div>

JS

$("html,body").animate({scrollTop: 360}, 1000);

Desired Outcome, something like this

@media handheld, only screen and (max-width: 1024px) {

$("html,body").animate({scrollTop: 660}, 1000);

}

@media handheld, only screen and (max-width: 768px) {

$("html,body").animate({scrollTop: 260}, 1000);

}

What is the best approach for achieving this?

Answer №1

One suggestion from a commenter is to avoid using JS and CSS together in the way you are attempting. A possible alternative approach could be:

var width = $(window).width(), scroll = 360;

if(width <= 1024){
    scroll = width > 768 ? 660 : 260;
    // if (width > 768) means width must be 769-1024 so scroll = 660.
    // else the width must be 768 or below so scroll = 260 
}

$("html, body").animate({scrollTop: scroll}, 1000);

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

How to use jQuery to retrieve the height of the elements inside a specific container

I'm uncertain if it's feasible, but I am looking to determine the total height of the content within a specific container. Imagine I have <div id="container" style="min-height:100vh"> <div class="child"> <p>Some text ...

Avoid sudden page movements when validating user input

After successfully implementing the "Stars rating" feature from https://codepen.io/462960/pen/WZXEWd, I noticed that the page abruptly jumps up after each click. Determined to find a solution, I attempted the following: const labels = document.querySelect ...

Identifying Browsers using CSS

I am struggling to understand why my HTML5 website appears differently in each browser. It seems like a CSS issue, but I can't pinpoint the exact problem. Here are screenshots of how the site looks on different browsers: Chrome: Safari: Internet E ...

The issue arises when attempting to use Bootstrap date and time components simultaneously

I am encountering an issue with the date picker and datetimepicker when used together in my form. If I only work on time or date individually, they function properly. However, when both are included, the time is not working correctly as it displays the dat ...

Implement a vertical scrollbar within the Bootstrap navbar to accommodate a large number of items

I implemented a sidebar using Bootstrap within a React application. Below is the code snippet: import React from 'react'; import './style_sidebar.css'; export default class Sidebar2 extends React.Component { render() { ret ...

Exploring the functionality of the shopping cart feature in ASP.net

I have a masterpage with a header and footer, and the content page displays a list of products with associated quantities. When users change the quantities, the prices are automatically updated. Everything is functioning properly so far. However, I also h ...

Retrieve JSON key values dynamically with jQuery

My JSON data is dynamic, and I need to access the 'bf' key within it. The keys 'xxxxxx20160929' and 'yyy813AI20160929' can change but the structure of the JSON remains consistent. { "resultData": [ { "a": "124", ...

A basic problem involving appending content using jQuery

I have encountered a puzzling issue. Whenever I attempt to insert new content into the <div> element using my JS code, it briefly appears and then disappears abruptly. I am unsure of the reason behind this behavior. Is there a way to prevent this fr ...

MD-List Equilibrium Elevation

Seeking a solution for implementing a simple chat using the md-list template. The issue arises when new items are added to the md-list, causing it to expand. Desiring the list to behave similarly to other chat platforms, where the height remains constant ...

Content and visual side by side

My logo and header image are giving me trouble. Whenever I attempt to center the header image, it keeps moving to the next row. How can I make sure it stays on the same row? Check out our website Thank you ...

Exploring the world of jQuery: Toggling radio buttons with variables on click

On the right side, there is a table of data that initially contains certain values, but can be modified using radio buttons and a slider on the left. If you select the first radio button for the "pay in full" option, it will increase the estimated discoun ...

Layer images of the same size in a seamless overlap on top of another image

As a novice web developer, I am aiming to stack two images perfectly on top of each other in my project. The application I am working on checks the correctness of user inputted answers by displaying either a checkmark or an "X" mark accordingly. To achieve ...

Conceal a tag only visible at specific screen sizes

Is there a way to hide the following code when the screen resolution is 1024 X 768 or lower? <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style"> <a class="addthis_button_facebook_like" fb:like:layout="button_co ...

table with flexible cell width and fixed table width

I've been troubleshooting this issue for days, but I just can't seem to find a solution! The problem lies within a table used on a webpage. If I don't specify table-layout, I can make one cell width dynamic, but I lose the ability to set &a ...

What is the best way to implement the Gotham-Light font using @font-face?

Looking to display Gotham-Light font on a website using CSS but lacking coding skills? I have the fonts Gotham-Light.eot and Gotham-Light.ttf. How do I go about using them in a browser? Thank you for your assistance! ...

How can I include a close/ok button at the bottom of a bootstrap multiselect component?

Currently, I am utilizing the Bootstrap multiselect tool to filter query outcomes on a specific page. After selecting one or multiple options, my goal is to have a "close" or "OK" button visible at the bottom of the selection list. Upon clicking this butto ...

Trigger submission issue encountered with Jquery in a dialog (modal) window

It's somewhat difficult for me to fully explain my problem. Nevertheless, I'll give it a go. In my HTML code, I have implemented several triggers using Jquery. Trigger 1 is responsible for validating specific items within a form. Once Trigger 1 ...

Developing a Jquery solution for creating radio buttons layout

Looking to create a radio button functionality within different groups using multiple select. For Group A: If the user selects A1, then it should automatically deselect A2 and A3. If the user selects A2, then it should automatically deselect A1 and A3. I ...

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

I successfully created an slds path element with multiple steps. I want to display additional subtext information below each current step, but there might not always be subtext for every step. To achieve this, I created an absolute positioned div containi ...

Changing the keys and values of multiple dropdown selects when switching languages with jQuery

I've been working on a way to dynamically change the values of multiple select options based on a language selector. After some effort, I've come up with a solution that seems to be working well. Here's the HTML code: <button ID="lSel" ...