Solved

OnMouseOver font size wont change in FireFox.

Posted on 2008-10-05
10
694 Views
Last Modified: 2012-05-05
Hi.
I have this code that works in IE but not in FFox :

onmouseover="getElementById('101').style.color='#286EA0'; getElementById('101').style.fontSize='18';"

onmouseout="getElementById('101').style.color='#808080'; getElementById('101').style.fontSize='12';">

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~

Font color is theonly thing i can change in FFox...
How can i make the font size work ?
0
Comment
Question by:CodedK
  • 5
  • 5
10 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 22644223
Try using:

document.getElementById

instead of only:

getElementById
0
 
LVL 16

Author Comment

by:CodedK
ID: 22644638
No, nothing.
I've also tried using a script, function... But the only things Firefox can do is change colors...
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22645643
If you put the font sizing before the color changing, what happens?
0
 
LVL 16

Author Comment

by:CodedK
ID: 22645682
If i put only font sizing alone ... nothing...
If i put it first also nothing.
Anything else except font color wont work !
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22645921
This link discusses a different approach:

http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 16

Author Comment

by:CodedK
ID: 22647346
Sorry Badotz, i'm not that advanced.
I cant understand how to implement this.
0
 
LVL 29

Accepted Solution

by:
Badotz earned 200 total points
ID: 22648534
Here is code that works in IE and FF. Copy it into your page and make any necessary changes.


<script type="text/javascript">
 

var css = document.styleSheets[0]; // get the FIRST stylesheet

var rules = css.cssRules ? css.cssRules : css.rules; // x-browser CSS rules
 

var mode = 0; // swap indicator

// -------------------------------------
 

function find_rule(rule) {

    for (var i = 0; i < rules.length; i++) {

        if (rules[i].selectorText.toLowerCase().indexOf(rule) >= 0) { // find rule

            return rules[i];

        }

    }

     return null;

}

// -------------------------------------
 

function change_rule(new_rule) {

    var old_rule = find_rule(new_rule.rule);

    if (old_rule != null) {

        old_rule.style[new_rule.attr] = new_rule.valu; // apply new css

    }

}

// -------------------------------------
 

function change_css(new_rule) {

    for (var i = 0; i < new_rule.length; i++) {

        change_rule(new_rule[i]); // apply all new css

    }

}

// -------------------------------------
 
 

function css_hack() {

/*

 Presumably, you have CSS to set the font size and color. Let's call this rule 'base'.

 It looks like this:

 

 base { color: #808080; font-size: 12px; font-style: normal; }

 

You change the base rule like this:

 

 var new_rule = 

     [

         {'rule':'base','attr':'color', 'valu':'#286ea0' },

         {'rule':'base','attr':'fontSize', 'valu':'18px'; }

     ];

     change_css(new_rule);

 */

	var new_rule = [];

	

	if (mode == 0) { /* 'normal' mode */

		new_rule.push({'rule':'base','attr':'color','valu':'#ff0000'});

		new_rule.push({'rule':'base','attr':'fontSize','valu':'48px'});

		new_rule.push({'rule':'base','attr':'fontStyle','valu':'normal'});

	}

	else { /* changed mode */

		new_rule.push({'rule':'base','attr':'color','valu':'#0000ff'});

		new_rule.push({'rule':'base','attr':'fontSize','valu':'14px'});

		new_rule.push({'rule':'base','attr':'fontStyle','valu':'italic'});

	}

	mode = ((mode == 0) ? 1 : 0);

	change_css(x);

	document.getElementById('cmd_css').value = 'Change CSS (' + mode + ')';

}
 

</script>

Open in new window

0
 
LVL 16

Author Comment

by:CodedK
ID: 22648733
Thank you very much for your time and effort.
Give me some time to apply this and aword the points :)
0
 
LVL 16

Author Closing Comment

by:CodedK
ID: 31503148
Thank you Badotz.

Sorry for the delay. I didnt find any time to check it earlier ... :)
Anyway thank you very much.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22724782
No worries - glad to help.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now