window.resize() function and return back the fact that the script did

Question

I have a problem. I want to stop the script at a resolution of less 980px and bring back all the things that the script done. Accordingly, at a resolution of more 980px I would want that the script is working again. I found similar questions on stackoverflow here is links question1 question2 but the answers are out there do not help me though the same script.

Here is script

( function( $ ) {

$.fn.hoverfold = function( args ) {

    this.each( function() {

        $( this ).children( '.view' ).each( function() {

            var $item   = $( this ),
                img     = $item.children( 'img' ).attr( 'src' ),
                struct  = '<div class="slice s1">';
                    struct  +='<div class="slice s2">';
                        struct  +='<div class="slice s3">';
                            struct  +='<div class="slice s4">';
                                struct  +='<div class="slice s5">';
                                struct  +='</div>';
                            struct  +='</div>';
                        struct  +='</div>';
                    struct  +='</div>';
                struct  +='</div>';

            var $struct = $( struct );

            $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );

        } );

    });

};

} )

( jQuery );

Please, see JsFiddle and do not judge strictly, I'm a newbie in js and jQuery. Thanks for any help!

Well, I see that they voted for the close of this question, the reason - it is not clear what I want. I would want that this script was working at a resolution of more 980px and stopped working at a resolution of less than 980px. As we can see from the script, it turns tag img to background-image, I would want that at a resolution of less than 980pks it was not.

If I opened browser in the resolution more 980px and gradually reduce it, I would want that when the script 980px turned back batskground-imago to img. I hope it is clear.

I tried for a long time and wrote this code:

var MY_WIDTH=980;

var f=true;
var first=true;
var temp=new Array();
var temp2=new Array();
( function( $ ) {


function my_cancel () {
    $.makeArray($(".view")).forEach (function (a, i) {
        $(a).html(temp[i][0]);
    });
}

function my_do () {
    $.makeArray($(".view")).forEach (function (a, i) {
        $(a).html(temp2[i][0]);
    });
}

if ($(window).width()<MY_WIDTH) {
    f=true;
    //$.fn.hoverfold ();
    //my_cancel ();
}

function WindowSizeChange (){
    $("#size").html ($(window).width());
        if ($(window).width()>=MY_WIDTH){
        f=true;
        if (first==true) { $.fn.hoverfold (); first=false; }
        else my_do ();
    } else {
        if (f!=false) my_cancel (); 
        f=false;
    }
}   
$(window).on("load resize", WindowSizeChange);


$.fn.hoverfold = function() {
    if (f==true) {
        this.each( function() {
            var i=0;
            $( this ).children( '.view' ).each( function() {

                var $item   = $( this ),
                    img     = $item.children( 'img' ).attr( 'src' ),
                    struct  = '<div class="slice s1">';
                        struct  +='<div class="slice s2">';
                            struct  +='<div class="slice s3">';
                                struct  +='<div class="slice s4">';
                                    struct  +='<div class="slice s5">';
                                    struct  +='</div>';
                                struct  +='</div>';
                            struct  +='</div>';
                        struct  +='</div>';
                    struct  +='</div>';

                var $struct = $( struct );

                temp[i]=$item.find( 'img' );

                temp2[i]=temp[i].remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
                i++;
            } );    
        });
    }
};



} )( jQuery );

At first glance, everything works well, but this code that hides the buttons below the image... I do not know how to prevent it.

See JsFiddle update DEMO

I'm still not clear?

Open the EXAMPLE at a resolution of more than 980px. Do you see hover effect? Do you see structure? In html there is 1 tag <img> but in inspector you will see that the script created 5 divs, and shared this <img> tag to 5 parts and put each part to divs background-image. Ok, now lower the resolution to 979px. I want to see in inspector simple tag <img> with no effects. Now again to increase the resolution of 980px. I want see the hover effect again.

I hope this time everyone understands.

Answer 1

Like here? I suggest you do this:

a) Don't remove the <img> element, just place all the beautiful stuff next to it:

( function( $ ) {
    $.fn.hoverfold = function( args ) {
                ...
                // Not removing the image, just appending ".slice" structure
                $item.append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
                ...             
    };
} )
( jQuery );

b) show/hide <img> and .slice in turns via media queries:

.view img{display: none}             /* This hides the image by default */

@media screen and (max-width:980px){ /* And if the screen width is 980px or less: */
    .view .slice{display: none}      /* ... the fancy rolling stuff is invisible,.. */
    .view img{display: block}        /* ... but the image shows up */
}

---

The thing is: the JS is fired on when it is loaded, typically on page load (not always, but let's assume it is so). So, your script 1) removes the image and adds rolling structure at the very beginning, 2) or it doesn't, if you place a $(window).width() condition. And to undo the rolling effect in a way you first planned ("stop script from working") would mean completely undoing all the changes the script did on small page sizes and redoing it again on wide screend. Lots of unnecessary work.

Instead, the practice is: add all the needed elements and control their appearance (visibility, color, size) and even behavior (transitions, transforms on hover|etc.) directly in css, using media queries. We place a condision (max-width:980px means "on screens of 980px and narrower") on a query, and all the rules inside it will be applied only if this condition is met.

You can read on CSS media queries here, if you are not yet famitiar with the technique.

Answer 2

Sorry but I am really confused by the question. However, if you are trying to keep the images (looks like a "zoom" and "info" image) in place, then you need to check your media queries. Like @Nit said, you probably want to read up on CSS Media Queries. At your 980px media query remove the following styles:

.view .view-back .info {
    display: none;
}

.view .view-back .zoom {
    top: 230px;
}

(That is in your "style.css" file under "@media screen and (max-width: 980px)". I would have edited in jsFiddle but couldn't seem to access that file.)

What's happening is the 'info' image is disappearing and the 'zoom' image is moving down to the bottom. Again, I'm not 100% sure if this is what you're looking for, but the whole thing is a bit unclear. I hope that helps. There definitely are some other interesting issues with the code, but that's a separate thing I guess.

EDIT: And if you want to remove the "script" that happens at 980px, I think what you mean is the media query as a whole. Just delete the style contained in the query:

@media screen and (max-width: 980px) {

    /*Delete all styles here, or the entire @media block*/

}