mozilla blue highlight color in clickeable javascript elements

Question

I have a problem with Mozilla and the classic blue highlight color. But there's no problem with highlighted text, I mean, I've been searching and I tried the ::-moz-selection css property, and it works fine, but the real deal comes with some clickeable javascript events I have on my page, for example...

CSS

figure:nth-of-type(1) { 
    -o-transform: translate(60%,-25%) rotate(-10deg) scale(0.60);
    -webkit-transform: translate(60%,-25%) rotate(-10deg) scale(0.60);
    -moz-transform: translate(60%,-25%) rotate(-10deg) scale(0.60);
    transform: translate(60%,-25%) rotate(-10deg) scale(0.60); }

figure.active:nth-of-type(1) {
    z-index:10; 
    box-shadow:0px 0px 50px black;
    -o-transform: translate(-6.5%,-13.5%) rotate(0deg) scale(0.70); 
    -webkit-transform: translate(-6.5%,-13.5%) rotate(0deg) scale(0.70); 
    -moz-transform: translate(-6.5%,-13.5%) rotate(0deg) scale(0.70); 
    transform: translate(-6.5%,-13.5%) rotate(0deg) scale(0.70); }

JavaScript

<script type="text/javascript" >
    <!--
    function listen() {
        var images=document.getElementsByTagName("figure");
        var i=images.length;
        while(i--){images[i].addEventListener('click', focusImage);}
    }
    function heard() {
        var images=document.getElementsByClassName("active");
        var i=images.length;
        while(i--){images[i].addEventListener('click', unfocusImage);}
    }   
    function focusImage(x){
        var target=x.target;
        var images=document.getElementsByTagName("figure");
        var i=images.length;
        while(i--){images[i].className=""; images[i].addEventListener('click', focusImage)}
        if (target.tagName=="FIGURE"){target.className='active';}
        target.removeEventListener('click', focusImage)
        heard();
    }   
    function unfocusImage(x){
        var target=x.target;
        if (target.className=="active"){target.className='';}                   
        target.addEventListener('click', focusImage);
    }
    //-->

    window.addEventListener('load', listen);                
</script>

HTML

<figure> 
    <img src="<?php bloginfo('template_directory'); ?>/assets/art_home/01.jpg"  alt="" />
</figure>

So... When I click, the figure/img becomes blue highlightning (it disappears if I click on another place)...

I tried all css selectors I know (::selection, ::-moz-selection, visited, active, etc.), and in Chrome I don't have any problem.

Help please!!

Well... I didn't even knew what was that... I've been playin' with it, but don't really know how works — user2744115, Sep 03 '13 at 19:13
@user2744115 paste your HTML/CSS/JS code http://jsfiddle.net/ and then click "save" button. With JSFiddle you can share your problem with us, so we can reproduce it. — Inferpse, Sep 03 '13 at 19:15
ok! but I'm working in localhost, so the images will not show right? (and sorry for my english, I'm from Spain and it's hard for me). there's a problem with it?? — user2744115, Sep 03 '13 at 19:23

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

This solution should work in all non-ie browsers (and IE 10) as per this SO post:

Prevent text selection after double click

In your CSS:

.no_selection {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

In your HTML:

<figure class="no_selection"> 
    <img src="<?php bloginfo('template_directory'); ?>/assets/art_home/01.jpg"  alt="" />
</figure>

edited May 23 '17 at 10:31

Community

1
1

answered Sep 03 '13 at 20:16

Jonathan Crowe

5,793
1
18
28

Hey! Thanks! With only the CSS does not work (I don't know if it has to be double click to work, 'cause my event goes with only one click), but with the function I found in the link that you put goes well! – user2744115 Sep 03 '13 at 20:44
this one: function clearSelection() { if(document.selection && document.selection.empty) { document.selection.empty(); } else if(window.getSelection) { var sel = window.getSelection(); sel.removeAllRanges(); } } – user2744115 Sep 03 '13 at 20:45
By the way, thank you so much for the help. I want to mark as useful your answer but it seems that I have enough reputation... – user2744115 Sep 03 '13 at 20:47

mozilla blue highlight color in clickeable javascript elements

CSS

JavaScript

HTML

1 Answers1