• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 556
  • Last Modified:

Web: button does not change color in Firefox on mouseover

I have some procedures that change the color of buttons on mouseover – these work in the IDE (I am developing in asp.net 2.0 w VB), on IE, Safari and Chrome but NOT in  Firefox…. Does anybody have an idea why ?

I am running a Master form and Content forms
Every time the Master page loads (ie every new page) this code runs:

            btnHome.Attributes.Add("onMouseOver", "FlickerOnToolbar();")
          btnHome.Attributes.Add("onMouseOut", "RestoreOnToolbar();")

Then in my Jscript.js file I code:

      function FlickerOnToolbar()
      {
          window.event.srcElement.style.backgroundColor = "#F5F5F5";      
          window.event.srcElement.style.borderColor= "ActiveBorder";
          window.event.srcElement.style.borderStyle= "none none ridge none";
          window.event.srcElement.style.borderWidth="1px";      
      }

      function RestoreOnToolbar()
      {
          previousColor = "White";                                      
          window.event.srcElement.style.backgroundColor = previousColor;
          window.event.srcElement.style.borderColor= "White";              
          window.event.srcElement.style.borderStyle= "None";
      }

There is no error reported, just no response.
Any idea why Firefox ignores this ??


0
GregoryNelson
Asked:
GregoryNelson
  • 3
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
FX does not have window.event, you need to add (evt) and test it in the function. I'll show you when I get to a computer in a little while
0
 
Michel PlungjanIT ExpertCommented:
Your code is not very optimal

to fix YOUR code, one would do

function FlickerOnToolbar(evt) {
  var tgt = evt?evt.target:window.event.srcElement;
  tgt.style.backgroundColor = "#F5F5F5";  

however this is much more elegant


<style>
.over {
  background-color:#F5F5F5; 
  border-color:ActiveBorder;
  border-style:none none ridge none;
  border-width:1px; 
}
.out {
  background-color:white; 
  border-color:white;
  border-style:none;
  border-width:1px; 
}
</style>


btnHome.Attributes.Add("onMouseOver", "FlickerOnToolbar();")
btnHome.Attributes.Add("onMouseOut", "RestoreOnToolbar();")

function FlickerOnToolbar() {
  this.className="over";
}
function RestoreOnToolbar() {
  this.className="out";      
}

Open in new window

0
 
GregoryNelsonAuthor Commented:
Still not working in Firefox !
I initially tried your 1st amendment option using:

code behind:

        button1.Attributes.Add("onMouseOver", "TFlickerOnToolbar();")
        button1.Attributes.Add("onMouseOut", "TRestoreOnToolbar();")

and in js:
        function TFlickerOnToolbar(evt) {
            var tgt = evt?evt.target:window.event.srcElement;
            tgt.style.backgroundColor = "#F5F5F5";  
            tgt.style.borderStyle= "none none ridge none";
            tgt.style.borderWidth="1px";    
            }
        function TRestoreOnToolbar(evt) {
            var tgt = evt?evt.target:window.event.srcElement;
            tgt.style.backgroundColor = "White";  
            tgt.style.borderStyle= "None";
            }

Again, none of the buttons have onmouseover 'flicker' in Firefox while all of them 'flicker' in IE & Chrome (original buttons use original procs eg FlickerOnToolbar while new Button1 uses 'TFlickerOnToolbar')

You can see this on www.silksuitsyou.CO.UK (not COM) -- pwd for entry is 'CAT'.... the new button is on the lower horizontal menu/toolbar.

I was going to use the <style> option after getting 1st fix working.


0
 
Michel PlungjanIT ExpertCommented:
You have not wired the TFlicker up on that page

I strongly suggest you look into using CSS for all this. No script is necessary in modern browsers to have hover effects

Anyway. For a quick fix, change all
onMouseOver="FlickerOnToolbar();" onMouseOut="RestoreOnToolbar();"
to

onMouseOver="FlickerOnToolbar(event);" onMouseOut="RestoreOnToolbar(event);"

also for secondary toolbars

I added

function getElem(event) {
  return window.event? window.event.srcElement:event.target;
}

and changed all

window.event.srcElement
to
getElem(event)

and all
function ....Toolbar() {
   window.event.srcElement.
}
to

function ....Toolbar(event) {
   getElem(event).
}

like this:

function FlickerOnToolbar(event)  {
  getElem(event).style.backgroundColor = "#F5F5F5";       // "White"; "#ECE9D8";, "BISQUE"; //lighter colour, when hovering
0
 
GregoryNelsonAuthor Commented:
Excellent !!
I shall look into the CSS alternative when I can (I have avoided it all these years - rather, there never has been a calling)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now