CODEWITHSUNDEEP
javascriptjqueryhtmlcss
twan
twan

Reputation: 2659

Animation script not working in browsers other than Chrome

I got a script which changes the background color of some items when hovering it. This works perfectly in Chrome, but not in Firefox and MS Edge (other browsers I've tested).

Why is that?

Script:

var oldfeatureitem = '';
$(document).delegate('div.wrap-feature-item', 'mouseenter',( function(){
 oldfeatureitem = $(this).clone();
 var ele = $(this).find('div.front').find('div')[0];
 var kleur = ($(ele).css('border-color'));
 $(this).find('div.feature-item').css('background-color', kleur);
  $(this).find('div.front').css('background-color', kleur);
 $(this).css('background-color', kleur);
 $(ele).css('background-color', kleur);
 $(this).find('div.back').css('background-color', kleur);
}));

$(document).delegate('div.wrap-feature-item', 'mouseleave',(function(){
  $(this).replaceWith(oldfeatureitem);
}));

Html structure:

<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12 wow fadeInUp pad-5" data-wow-duration="2s" >
    <div class="wrap-feature-item">
        <div class="feature-item">
        <a href="diensten/strategie.html">
            <div class="front face ">
                <div class="strategie_ico"><i class="icon-lamp"class="ico"></i></div>
                <div class="title">Strategie</div>
            </div>
        </a>

            <div class="back face center">
                <div class="ico strategie_ico"><i class="icon-lamp"></i></div>
                <div class="title">Strategie</div>
                <div class="text">
                     Lorem ipsumm
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 57

Answers (2)

Rahi
Rahi

Reputation: 1485

Other than Chrome, var kleur = ($(ele).css('border-color')); returns nothing and therefore not changing the background using kleur later on.

Chrome support border-color property but with other browsers you have to be specific like below.

$(ele).css("border-top-color");
$(ele).css("border-right-color");

See the updated code below.

var oldfeatureitem = '';
$(document).delegate('div.wrap-feature-item', 'mouseenter',( function(){
 oldfeatureitem = $(this).clone();
 var ele = $(this).find('div.front').find('div')[0];
 var kleur = ($(ele).css('border-top-color'));
  console.log(kleur);
 $(this).find('div.feature-item').css('background-color', kleur);
  $(this).find('div.front').css('background-color', kleur);
 $(this).css('background-color', kleur);
 $(ele).css('background-color', kleur);
 $(this).find('div.back').css('background-color', kleur);
}));

$(document).delegate('div.wrap-feature-item', 'mouseleave',(function(){
  $(this).replaceWith(oldfeatureitem);
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Html structure:

<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12 wow fadeInUp pad-5" data-wow-duration="2s" >
    <div class="wrap-feature-item">
        <div class="feature-item">
        <a href="diensten/strategie.html">
            <div class="front face ">
                <div class="strategie_ico"><i class="icon-lamp"class="ico"></i></div>
                <div class="title">Strategie</div>
            </div>
        </a>

            <div class="back face center">
                <div class="ico strategie_ico"><i class="icon-lamp"></i></div>
                <div class="title">Strategie</div>
                <div class="text">
                     Lorem ipsumm
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Zenel Rrushi
Zenel Rrushi

Reputation: 2366

The problem with your code is that in google chrome the value of 

var kleur = $(ele).css('border-colour');

is rgb(51, 122, 183) while in other browsers the value is returned as empty.

it should be empty in chrome to because if you console.log() the element $(ele) it has no border-colour or if you check it at style properties of the element.

if you want a specific colour give it to the kleur variable. and it will work. So the reason that your code doesn't work is that the variable in other browsers except google chrome has an empty value.

Upvotes: 1

Related Questions