By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,677 Members | 1,877 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,677 IT Pros & Developers. It's quick & easy.

Add a new style on the fly (IE, FF)

P: n/a
Hi,

this time I am trying to add a style on the fly.I wish equivalency with
this one (only the menuItemStyle line):

<head>
<style type="text/css" media="screen">
... some static styles ...
..menuItemStyle{
background:#ddeeff;border-width:1px;border-style:inset;font-family:Arial;font-size:11px
}
.....
img { behavior: url(iepngfix.htc); }
</style>

I tried to get from the NG, but so far I came out with this one:

var style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.addRule('.menuItemStyle, '
background:#ddeeff;border-width:1px;border-style:inset;font-family:Arial;font-size:11px');

document.getElementsByTagName('head')[0].appendChild(style)

and it is not working. I need it to work with FF and IE. Can you please
help me correct the above. What am I getting wrong?

Thanks you,

Pam

Jan 20 '07 #1
Share this Question
Share on Google+
10 Replies


P: n/a
Daz


On Jan 20, 5:21 pm, pamelaflue...@libero.it wrote:
Hi,

this time I am trying to add a style on the fly.I wish equivalency with
this one (only the menuItemStyle line):

<head>
<style type="text/css" media="screen">
.. some static styles ...
.menuItemStyle{
background:#ddeeff;border-width:1px;border-style:inset;font-family:Arial;font-size:11px}....
img { behavior: url(iepngfix.htc); }
</style>

I tried to get from the NG, but so far I came out with this one:

var style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.addRule('.menuItemStyle, '
background:#ddeeff;border-width:1px;border-style:inset;font-family:Arial;font-size:11px');

document.getElementsByTagName('head')[0].appendChild(style)

and it is not working. I need it to work with FF and IE. Can you please
help me correct the above. What am I getting wrong?

Thanks you,

Pam
Are you getting any errors that you know of? Using the JavaScript
console in Firefox would probably help a lot as it lets you know of
errors in both JavaScript and CSS. Also, I believe that Firefox uses
insertRule as opposed to addRule, which Internet Explorer uses.

Hope this helps.

Daz.

Jan 20 '07 #2

P: n/a
>
Are you getting any errors that you know of? Using the JavaScript
console in Firefox would probably help a lot as it lets you know of
errors in both JavaScript and CSS. Also, I believe that Firefox uses
insertRule as opposed to addRule, which Internet Explorer uses.

Hope this helps.
Thanks Daz I will try that.

Another problem is that I do not know how to debug
javascript in FIrefox, with my IDE (Visual Studio) is
there any step by step explanation somewhere?
>
Daz.
Jan 21 '07 #3

P: n/a
Daz

pa***********@libero.it wrote:

Are you getting any errors that you know of? Using the JavaScript
console in Firefox would probably help a lot as it lets you know of
errors in both JavaScript and CSS. Also, I believe that Firefox uses
insertRule as opposed to addRule, which Internet Explorer uses.

Hope this helps.

Thanks Daz I will try that.

Another problem is that I do not know how to debug
javascript in FIrefox, with my IDE (Visual Studio) is
there any step by step explanation somewhere?
I am not sure. Personally, I rarely find the need to debug as such. I
just use the console, and fix the errors/warnings that come up, as and
when they come up. Also, I use jslint.com to check my code for obvious
mistakes.

If you install Firefox, and then install the Firebug addon (from
https://addons.mozilla.org/firefox/1843/), you will be able to do just
about all the JavaScript debugging you will ever need to do, including
(but not limited to) adding break points, stepping through the code and
inspecting the DOM.

Another extension that I find extremely handy, is the Web Developer
extension, which can be download from
https://addons.mozilla.org/firefox/60/. It's a little hard to get used
to at first, but once you realise just how powerful it is, there's not
really much you cannot do between the two extensions. Also, I have
never seen anything quite like this for IE.

Personally, I don't know how I ever managed without the tools, so I
recommend them to everyone as it makes life a lot easier, for sure.

Hope this helps.

Daz.

Jan 21 '07 #4

P: n/a

Daz ha scritto:

I am not sure. Personally, I rarely find the need to debug as such. I
just use the console, and fix the errors/warnings that come up, as and
when they come up. Also, I use jslint.com to check my code for obvious
mistakes.

If you install Firefox, and then install the Firebug addon (from
https://addons.mozilla.org/firefox/1843/), you will be able to do just
about all the JavaScript debugging you will ever need to do, including
(but not limited to) adding break points, stepping through the code and
inspecting the DOM.

Another extension that I find extremely handy, is the Web Developer
extension, which can be download from
https://addons.mozilla.org/firefox/60/. It's a little hard to get used
to at first, but once you realise just how powerful it is, there's not
really much you cannot do between the two extensions. Also, I have
never seen anything quite like this for IE.
Thanks Daz I will them a try.

For IE there is no problem as VS debugger I think
is the very best one can find around...

Thank you,

PAm
>
Daz.
Jan 21 '07 #5

P: n/a
Daz

pa***********@libero.it wrote:
Daz ha scritto:

I am not sure. Personally, I rarely find the need to debug as such. I
just use the console, and fix the errors/warnings that come up, as and
when they come up. Also, I use jslint.com to check my code for obvious
mistakes.

If you install Firefox, and then install the Firebug addon (from
https://addons.mozilla.org/firefox/1843/), you will be able to do just
about all the JavaScript debugging you will ever need to do, including
(but not limited to) adding break points, stepping through the code and
inspecting the DOM.

Another extension that I find extremely handy, is the Web Developer
extension, which can be download from
https://addons.mozilla.org/firefox/60/. It's a little hard to get used
to at first, but once you realise just how powerful it is, there's not
really much you cannot do between the two extensions. Also, I have
never seen anything quite like this for IE.

Thanks Daz I will them a try.

For IE there is no problem as VS debugger I think
is the very best one can find around...

Thank you,

PAm

Daz.
Hi Pam.

This article should help you. I know it helped me.

http://www.javascriptkit.com/dhtmltu...rnalcss2.shtml

Daz.

Jan 21 '07 #6

P: n/a

pa***********@libero.it wrote:
Daz ha scritto:
I am not sure. Personally, I rarely find the need to debug as such. I
just use the console, and fix the errors/warnings that come up, as and
when they come up. Also, I use jslint.com to check my code for obvious
mistakes.

If you install Firefox, and then install the Firebug addon (from
https://addons.mozilla.org/firefox/1843/), you will be able to do just
about all the JavaScript debugging you will ever need to do, including
(but not limited to) adding break points, stepping through the code and
inspecting the DOM.
For IE there is no problem as VS debugger I think
is the very best one can find around...
I second Daz' recommendation. Be sure to get Firebug from
http://getfirebug.com as the version on the Mozilla website is somewhat
out of date and the new beta Firebug 1.0 is amazingly more powerful
than the previous release.

VS may be the best money can buy, but it still doesn't hold a candle to
Firebug. VS's debugger was designed by and for C++ programmers and
doesn't help much in the domain of web development.

-DG

Jan 21 '07 #7

P: n/a
Daz

David Golightly wrote:
pa***********@libero.it wrote:
Daz ha scritto:
I am not sure. Personally, I rarely find the need to debug as such. I
just use the console, and fix the errors/warnings that come up, as and
when they come up. Also, I use jslint.com to check my code for obvious
mistakes.
>
If you install Firefox, and then install the Firebug addon (from
https://addons.mozilla.org/firefox/1843/), you will be able to do just
about all the JavaScript debugging you will ever need to do, including
(but not limited to) adding break points, stepping through the code and
inspecting the DOM.
>
For IE there is no problem as VS debugger I think
is the very best one can find around...

I second Daz' recommendation. Be sure to get Firebug from
http://getfirebug.com as the version on the Mozilla website is somewhat
out of date and the new beta Firebug 1.0 is amazingly more powerful
than the previous release.

VS may be the best money can buy, but it still doesn't hold a candle to
Firebug. VS's debugger was designed by and for C++ programmers and
doesn't help much in the domain of web development.

-DG
Thank you for that David. I assumed that a) the one at
addons.mozilla.org would be up-to-date, and b) even if it wasn't, it
would automatically update itself periodically. It would seem that this
wasn't the case. I have upgraded to the new beta version, and so far I
am seriously impressed with the wealth of features added since the
version that I was using originally. Thank again.

Daz.

Jan 22 '07 #8

P: n/a

David Golightly ha scritto:
I second Daz' recommendation. Be sure to get Firebug from
http://getfirebug.com as the version on the Mozilla website is somewhat
out of date and the new beta Firebug 1.0 is amazingly more powerful
than the previous release.
Thanks David.

You guys in this ng are always so much helpful and generous.

keep up with the good work!

Pam
-DG
Jan 22 '07 #9

P: n/a

pa***********@libero.it wrote:

Are you getting any errors that you know of? Using the JavaScript
console in Firefox would probably help a lot as it lets you know of
errors in both JavaScript and CSS. Also, I believe that Firefox uses
insertRule as opposed to addRule, which Internet Explorer uses.

Hope this helps.

Thanks Daz I will try that.

Another problem is that I do not know how to debug
javascript in FIrefox, with my IDE (Visual Studio) is
there any step by step explanation somewhere?

Daz.
You might have a look at http://javascript.ide.googlepages.com/home
You can debug and step trough your Javascript code, but it is not meant
for big programs.

Jon

Jan 22 '07 #10

P: n/a
Try the class below. With it, you should be able to say:

var myStylesheet = new CSSStyleSheet();
myStylesheet.addRule(".menuItemStyle",
"background:#ddeeff;border-width:1px;border-style:inset;font-family:Arial;font-size:11px");

You can add and modify style rules which enables you to manipulate the attributes of many elements at once:

myStylesheet.changeRule(".menuItemStyle", "background", "red");

Tested on IE, FF and Opera. As ever, YMMV.

/**
An object which encapsulates a dynamically created, modifiable stylesheet.
*/
function CSSStyleSheet()
{
/**
* The array of rules for this stylesheet.
* @private
*/
this.rules = [];

/**
* An associative array, keyed by the selector text containing the rule index number for
* the rule for that selector text.
* @private
*/
this.ruleIndex = [];

this.sheet = this.createSheet();
}

/**
Create the prototype with correct functions for the environment; No testing at runtime.
*/
CSSStyleSheet.prototype = function()
{
var useIEStyle = (document.createStyleSheet !== undefined);
var useDOMStyle = (!useIEStyle && (document.styleSheets !== undefined));

return {
createSheet: useIEStyle ?
function() {
return document.createStyleSheet();
} :
function() {
this.styleElement = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(this.styleElement);
return this.styleElement.styleSheet ? this.styleElement.styleSheet : this.styleElement.sheet;
},

addRule: useDOMStyle ?
function(selectorText, ruleText) {
if (!/^\{[^\}]*\}$/.test(ruleText))
ruleText = "{" + ruleText + "}";

var r = this.sheet.cssRules.length;
this.sheet.insertRule(selectorText + " " + ruleText, r);
var result = this.sheet.cssRules[r];
this.ruleIndex[selectorText] = r;

if (this.rules.length == 0)
this.rules = this.sheet.cssRules;
return result;
} : useIEStyle ?
function(selectorText, ruleText) {
ruleText = ruleText.replace(/^\{?([^\}])/, "$1");
var r = this.sheet.rules.length;
if (ruleText.length == 0)
ruleText = " "
this.sheet.addRule(selectorText, ruleText);
result = this.sheet.rules[r];
this.ruleIndex[selectorText] = r;

if (this.rules.length == 0)
this.rules = this.sheet.rules;
return result;
} :
// Browsers with no DOM stylesheet support
function(selectorText, ruleText) {
ruleText = ruleText.replace(/^\{?([^\}])/, "$1");

// If it exists, modify it.
if (!this.ruleIndex[selectorText])
this.ruleIndex[selectorText] = this.rules.length;
this.rules[this.ruleIndex[selectorText]] = ruleText;

// Build the innerHTML of the style element from our rules.
var cssText = "";
for (var sel in this.ruleIndex)
cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
this.styleElement.innerHTML = cssText;
},

/**
* Change a style property in a rule.
* @param selectorText The identifier of the rule to change
* @param property The name of the style property to change
* @param value The new value of the style property.
*/
changeRule: useDOMStyle ?
function(selectorText, property, value)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (index == undefined)
{
return this.addRule(selectorText, property + ":" + value);
}

var oldRule = this.rules[index];
if (oldRule)
{
var cssText = oldRule.cssText;
var propSearch = new RegExp("^[^\\{]*(\\{.*" + property + "\\s*\\:\\s*)([^};]*)([^}]*})");
var ruleText = propSearch.exec(cssText);

// If the value was in the old rule...
if (ruleText)
{
// And it was different...
if (ruleText[4] != value)
{
cssText = ruleText[1] + value + ruleText[3];
this.sheet.deleteRule(index);
this.sheet.insertRule(selectorText + " " + cssText, index);
}
}
else
{
var propSearch = new RegExp("\\{([^}]*)}");
ruleText = propSearch.exec(cssText);
cssText = "{ " + ruleText[1] + "; " + property + ": " + value + " }";
this.sheet.deleteRule(index);
this.sheet.insertRule(selectorText + " " + cssText, index);
}
}
} :
useIEStyle ?
function(selectorText, property, value)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (index == undefined)
{
return this.addRule(selectorText, property + ":" + value);
}
var style = this.rules[index].style;
property = property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase();});
style[property] = value;
} :
// Browsers with no DOM stylesheet support
function(selectorText, property, value)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (index == undefined)
{
return this.addRule(selectorText, property + ":" + value);
}
var cssText = this.rules[index];
if (cssText)
{
var propSearch = new RegExp("^(.*" + property + "\\s*\:\\s*)([^;]*)(.*)$");
var ruleText = propSearch.exec(cssText);
// If the value was in the old rule...
if (ruleText)
{
// And it was different...
if (ruleText[4] != value)
{
this.rules[index] = ruleText[1] + value + ruleText[3];
}
}
else
{
this.rules[index] = cssText + "; " + property + ": " + value + ";";
}

// Rebuild the innerHTML of the style element from our rules.
cssText = "";
for (var sel in this.ruleIndex)
cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
this.styleElement.innerHTML = cssText;
}
},

getRuleProperty: useDOMStyle ?
function(selectorText, property)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (typeof index == "undefined")
{
return;
}
var oldRule = this.rules[index];
if (oldRule)
{
cssText = oldRule.cssText;
var propSearch = new RegExp("^.*" + property + "\\s*\\:\\s*([^};]*)");
var ruleText = propSearch.exec(cssText);

// If the value was in the old rule...
if (ruleText)
{
return ruleText[1];
}
}
} : useIEStyle ?
function(selectorText, property)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (typeof index == "undefined")
{
return;
}
var style = this.rules[index].style;
property = property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase();});
return style[property];
} :

// Browsers with no DOM stylesheet support
function(selectorText, property)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (typeof index == "undefined")
{
return;
}
var cssText = this.rules[index];
if (cssText)
{
var propSearch = new RegExp("^.*" + property + "\s*\:\s*([^;]*)");
var ruleText = propSearch.exec(cssText);

// If the value was in the old rule...
if (ruleText)
{
return ruleText[1];
}
}
}
};
}();
Jan 25 '07 #11

This discussion thread is closed

Replies have been disabled for this discussion.