CODEWITHSUNDEEP
javascriptcsswordpress
square_eyes
square_eyes

Reputation: 1271

Remove image URL on small screens using CSS and Javascript

I'm trying to pull some cross device trickery. What I want is to remove a slider image for small screen widths (<622px). I have tested, and seen that removing the image URL in CSS creates the effect I want.

My approach is this...

Enqueue a .js file in Wordpress to detect when the screen is resized to smaller than 622 px in width, then use .js to remove the slider image url with CSS.

My implementation...

Enqueue the script in functions.php

function wpb_adding_scripts() {

    // Register and Enqueue a Script
        wp_register_script('screensizemods', get_stylesheet_directory_uri() . '/js/screensizemods.js');
    wp_enqueue_script('screensizemods');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

My script /js/screensizemods.js

function Resize() {
     width = window.innerWidth;
     height = window.innerHeight;

     if(width < 622) {
          // Modify particular Stylesheet elements.

    document.styleSheets[0].addRule('background-image: url("");}');             
     }
}

But it's not working. And I'm not getting any console .js errors. I can see the the .js is being loaded. Is there a problem with my .js code?

Edit:

Here is the element I am trying to change. It looks like the Theme is rendering it in-line...

element {
    background-image: url("http://www.example.com/wp-content/uploads/2015/05/bgimage.jpg");

Edit 2:

OK here's my media query with a watcher attempt...

It's firing correctly when the screen resizes. But I get an error reference error: style is not defined

     // media query event handler
    if (matchMedia) {
    var mq = window.matchMedia("(min-width: 622px)");
    mq.addListener(screensizemods);
    screensizemods(mq);
    }

    // media query change
    function screensizemods(mq) {

    if (mq.matches) {
        // window width is at least 622px
    }
    else {
        // window width is less than 622px
            // push a new rule onto the top of my stylesheet
            style.css.insertRule("background-image: url('') !important}", 0); 
    }

}

Upvotes: 0

Views: 218

Answers (2)

Mukesh Panchal
Mukesh Panchal

Reputation: 1966

can you plz check below code may be it's help you.

Here you get two answers:

1) CSS code:

<style>
element {
    background-image: url("http://www.example.com/wp-content/uploads/2015/05/bgimage.jpg");
}

@media (max-width: 767px) {
    element { background-image: none; }
}
</style>

2) jQuery code: 

<script type='text/javascript'>
    function checkWidth() {
        //check window width when function call.
        var windowSize = jQuery(window).width();

        if (windowSize <= 767) {
            // remove image for small size window screen.
            jQuery( 'element' ).css('background-image', 'none');
        }else{
            // add image for big size window screen.
            jQuery( 'element' ).css('background-image', 'url(http://www.example.com/wp-content/uploads/2015/05/bgimage.jpg)');
        }
    }

    jQuery(document).ready(function () {
        checkWidth();
        jQuery(window).resize(function(){
            // on window resize call function to check window width.
            checkWidth();
        });
    });
</script>

Upvotes: 0

ceejayoz
ceejayoz

Reputation: 180023

This is best handled via CSS @media queries, aka "responsive design".

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

element { background-image: url(http://www.example.com/wp-content/uploads/2015/05/bgimage.jpg); }

@media (max-width: 622px) {
    element { background-image: none; }
}

Upvotes: 1

Related Questions