Adjusting the CSS class name based on the screen size and applying styles to that class only during the "onload" event

Question

Adjusting the CSS class name based on the screen size and applying styles to that class only during the "onload" event

The website I am currently developing can be found at . It is built on WordPress using the Avada theme and everything seems to be functioning correctly. The image move up effect on this site is achieved with the following JavaScript:

window.onload = function() {
    var size = -500;
    document.getElementById("sliders-container").style.marginTop = size + "px";
};

Additionally, the CSS used for this effect is as follows:

#sliders-container{
    transition: 5s;
}

However, upon testing the site in various responsive layouts, I noticed that the image moves up too much and eventually becomes invisible. My goal is to ensure that the image remains visible to some extent instead of completely disappearing. To address this issue, I attempted to adjust the JavaScript code based on window width:

window.onload = function() {   
    var windowWidth = $(window).width();
    if(windowWidth > 768){
        var size = -500;
    }
    document.getElementById("sliders-container").style.marginTop = size + "px";
};

Despite my efforts, this modified script did not produce the desired results. I am relatively new to JavaScript and eager to expand my knowledge in this area.

javascript jquery css wordpress

Answer 1

Answer №1

Implement media queries within your CSS stylesheet.

Consider the following example:

<style>
@media screen and (max-width: 500px) {
body {
    background-color: lightblue;
}
}
</style>

Answer 2

Implement media queries within your CSS stylesheet.

Consider the following example:

<style>
@media screen and (max-width: 500px) {
body {
    background-color: lightblue;
}
}
</style>

Answer 3

Answer №2

I implemented my desired functionality using the following JavaScript code:

window.onload = function()
    {
        if ( jQuery(window).width() > 1280) {      
            document.getElementById('sliders-container').className = 'transition2';
        }
        else if ( jQuery(window).width() > 600 && jQuery(window).width() < 1280) {
            document.getElementById('sliders-container').className = 'transition3';
        }
        else if ( jQuery(window).width() < 600) {
            document.getElementById('sliders-container').className = 'transition4';
        }
        var size = -500;
        var elems = document.getElementsByClassName('transition2');
        for(var i = 0; i < elems.length; i++) {
        elems[i].style.marginTop = size + "px";
        }
        var size = -360;
        var elems = document.getElementsByClassName('transition3');
        for(var i = 0; i < elems.length; i++) {
        elems[i].style.marginTop = size + "px";
        }
        var size = -200;
        var elems = document.getElementsByClassName('transition4');
        for(var i = 0; i < elems.length; i++) {
        elems[i].style.marginTop = size + "px";
        }
    };

Credits to @CBroe for the inspiration.

Answer 4

I implemented my desired functionality using the following JavaScript code:

window.onload = function()
    {
        if ( jQuery(window).width() > 1280) {      
            document.getElementById('sliders-container').className = 'transition2';
        }
        else if ( jQuery(window).width() > 600 && jQuery(window).width() < 1280) {
            document.getElementById('sliders-container').className = 'transition3';
        }
        else if ( jQuery(window).width() < 600) {
            document.getElementById('sliders-container').className = 'transition4';
        }
        var size = -500;
        var elems = document.getElementsByClassName('transition2');
        for(var i = 0; i < elems.length; i++) {
        elems[i].style.marginTop = size + "px";
        }
        var size = -360;
        var elems = document.getElementsByClassName('transition3');
        for(var i = 0; i < elems.length; i++) {
        elems[i].style.marginTop = size + "px";
        }
        var size = -200;
        var elems = document.getElementsByClassName('transition4');
        for(var i = 0; i < elems.length; i++) {
        elems[i].style.marginTop = size + "px";
        }
    };

Credits to @CBroe for the inspiration.

Adjusting the CSS class name based on the screen size and applying styles to that class only during the "onload" event

Answer №1

Answer №2

Similar questions

What is the best way to combine a JSON response object with the variable J inside a for loop?

Why won't both routes for Sequelize model querying work simultaneously?

Utilizing dynamic content to pass arguments to JavaScript functions

Retrieving user input in React by utilizing the onChange event handler

What is the best way to handle AJAX responses in an onchange event

Display a hidden div on hover using JQUERY

Navigating to the left while implementing right-to-left formatting on a single webpage

Encountered a problem when attempting to upload images to Cloudinary through the front-end and save the information in a MySQL database using Axios on Node JS

Issue with bootstrap accordion not collapsing other open tabs automatically

problem encountered when converting SVG HTML into SVG paths

Passport sessions do not retain persistence

Google Chart Fails to Display

What is the correct way to invoke a function contained within an object that is stored in an array?

Stop the inclusion of the scrollbar in the mat-drawer-inner-container within the Angular mat-drawer Component

A guide on pulling all orders simultaneously in WooCommerce through their REST API

What steps can I take to enhance the efficiency of this JavaScript DOM data manipulation algorithm?

Utilizing Electron and jQuery to incorporate a loading animated GIF into a newly opened window, where the animation pauses

What is the best way to save a JavaScript variable in local storage?

Utilizing Nicknames in a JavaScript Function

JavaScript Promise Fundamentals