Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

OnMouseOver font size wont change in FireFox.

Posted on 2008-10-05
10
Medium Priority
?
710 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
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
 
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 800 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

721 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