responsive website: how to keep on mobile, hover layer element "on" by default

Question

in my website, there are projects icons that have a layer on mouseover, that displays titles.

What I looking for is to have that layer constantly there when viewing the site on mobiles.

There is this piece of javascript code that apparently deals with that effect:

/* Set Default Text Color for all elements */
        $(".ut-hover").each(function(index, element) {

            var text_color = $(this).closest('.ut-portfolio-wrap').data('textcolor');

            $(this).find(".ut-hover-layer").css({ "color" : text_color });
            $(this).find(".ut-hover-layer").find('.portfolio-title').attr('style', 'color: '+text_color+' !important');

        });     

        $('.ut-hover').on('mouseenter touchstart', function() {     
            var hover_color   = $(this).closest('.ut-portfolio-wrap').data('hovercolor'),
                hover_opacity = $(this).closest('.ut-portfolio-wrap').data('opacity');

            $(this).find(".ut-hover-layer").css( "background" , "rgba(" + hover_color + "," + hover_opacity+ ")"  );
            $(this).find(".ut-hover-layer").css( "opacity" , 1 );           

        });

        $('.ut-hover').on('mouseleave touchend', function() { 

            $(this).find(".ut-hover-layer").css( "opacity" , 0 );

        });

The css of the layer containing the text is "ut-hover-layer"

I need to modify that script so that IF the site is seen on a mobile screen, the "ut-hover-layer" is visible on load and always stays, so no mouseover is supposed to happen.

Anyone would have a solution to achieve that ?

if that can help, here is the link to the site

Thanks in advance !

score 0 · Accepted Answer · edited May 23 '17 at 12:20

According to to another answer on stack (What is the best way to detect a mobile device in jQuery?) You should detect if the device on which your page is displayed is a smartphone and if so, you should set ut-hover-layers opacity to 1 like this:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ) {
    jQuery( '.ut-hover-layer' ).each( function() { 
        jQuery( this ).css( 'opacity', '1' ).css( 'background' , 'rgba( 242, 35, 244, 0.8 )' ); 
    });
}

However I think if You try to detect smartphone this way:

if( jQuery( window ).width() < 768 ) { 
    jQuery( '.ut-hover-layer' ).each( function() { 
        jQuery( this ).css( 'opacity', '1' ).css( 'background' , 'rgba( 242, 35, 244, 0.8 )' ); 

    });
}

it will still work.

Also pure js way

if( document.body.clientWidth < 768 ) {
    var elems = document.getElementsByClassName( 'ut-hover-layer' ), 
        i = 0;

    for( ; i < elems.length; i += 1 ) {
        elems[i].style.background = 'rgba( 242, 35, 244, 0.8 )';
        elems[i].style.opacity = '1';
    }
}

Another option is going for a media query and putting this to your css:

@media screen and (max-width: 1024px) and (min-width: 481px)
    .ut-hover-layer {
        opacity: 1!important;
        top: 50%;
        background: rgba(242, 35, 244, 0.8);
    }
}

But then You will have some useless handler in your code.

I hope I understand You correctly and this helps.

Thanks a lot ! I tried the CSS and it works but not 100%. In fact with that solution, I need to put the mouse over the thumbnail for it to appear, and then, it stays. What I need is to have the layer when the page loads. Also, I tried the javascript but it was not better. You can see the result on that page, when you resize your browser window to mobile size. Any other idea ? Thanks in advance. — Wordpress-Man, Mar 04 '15 at 21:58
@Wordpress-Man Okay, so i edited my answers a bit. Try them now :) — patrykf, Mar 06 '15 at 12:58

responsive website: how to keep on mobile, hover layer element "on" by default

1 Answers1