| | |
Changing a stylesheet on the fly and saving it with PHP
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Jul 2007
Posts: 18
Reputation:
Solved Threads: 0
Hello all!
I am using some javascript code to change some classes of an external stylesheet on the fly. Is there any way (a variable perhaps?) to access the changed stylesheet so that I store it afterwards with php, or should I rebuild it again (according to the options of the user) with my php code in order to save it?
Thanks in advance
I am using some javascript code to change some classes of an external stylesheet on the fly. Is there any way (a variable perhaps?) to access the changed stylesheet so that I store it afterwards with php, or should I rebuild it again (according to the options of the user) with my php code in order to save it?
Thanks in advance
Save the chosen stylesheet in a cookie. Then PHP can spit out the chosen stylesheet for all new page loads.
John Conde
Brainyminds | Merchant Account Services | I Love Code
IT'S HERE: Merchant Accounts 101 Everything you need to know about merchant accounts!
Brainyminds | Merchant Account Services | I Love Code
IT'S HERE: Merchant Accounts 101 Everything you need to know about merchant accounts!
•
•
•
•
Hello all!
I am using some javascript code to change some classes of an external stylesheet on the fly. Is there any way (a variable perhaps?) to access the changed stylesheet so that I store it afterwards with php, or should I rebuild it again (according to the options of the user) with my php code in order to save it?
Thanks in advance
IE has a (string) cssText property of the Stylesheet Object. FF/NN has a cssText property of each StyleSheet Object's cssRules (Array) Property.
eg:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function myCssText(StyleSheet) { var text = ''; if (typeof (StyleSheet.cssText) == 'string') { return StyleSheet.cssText; } else { for(var i = 0; i < StyleSheet.cssRules.length; i++) { text += StyleSheet.cssRules[i].cssText; } } return text; } // eg alert(myCssText(document.styleSheets[0]));
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
•
•
Join Date: Jul 2007
Posts: 18
Reputation:
Solved Threads: 0
•
•
•
•
Do you mean you're changing the DOM representation of the Style Sheet?
IE has a (string) cssText property of the Stylesheet Object. FF/NN has a cssText property of each StyleSheet Object's cssRules (Array) Property.
eg:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function myCssText(StyleSheet) { var text = ''; if (typeof (StyleSheet.cssText) == 'string') { return StyleSheet.cssText; } else { for(var i = 0; i < StyleSheet.cssRules.length; i++) { text += StyleSheet.cssRules[i].cssText; } } return text; } // eg alert(myCssText(document.styleSheets[0]));
you're most welcome...
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
•
•
Join Date: Jul 2007
Posts: 18
Reputation:
Solved Threads: 0
I just finished my code for manipulating the css, and started on the Save part.
Scaringly enough I noticed that only IE (!) got the css right (it only capitalized the css property names, which was easily overcome with a .toLowerCase() ).
Mozilla firefox (so far I've tested with Mozilla, Safari and IE7) got it so wrong that it would probably work only in itself, adding proprietary css properties all over the place, removing others etc!!
Safari also changed it a bit, but its ok, nothing extreme there.
Is there a way I can easily overcome this with firefox, or the only way is to manipulate the string in my php code after grabbing it?
Thanks in advance..
Scaringly enough I noticed that only IE (!) got the css right (it only capitalized the css property names, which was easily overcome with a .toLowerCase() ).
Mozilla firefox (so far I've tested with Mozilla, Safari and IE7) got it so wrong that it would probably work only in itself, adding proprietary css properties all over the place, removing others etc!!
Safari also changed it a bit, but its ok, nothing extreme there.
Is there a way I can easily overcome this with firefox, or the only way is to manipulate the string in my php code after grabbing it?
Thanks in advance..
Last edited by Lucrezia; Sep 17th, 2007 at 9:22 pm.
You mean like all the moz-example: blabla; crap that mozilla adds to it?
I'd just have a String.replace() anything that starts with moz- so you don't save it.
Is there any common property to what safari adds that can be used to remove it with a regular expression?
Could you post some examples from your tests?
I'd just have a String.replace() anything that starts with moz- so you don't save it.
Is there any common property to what safari adds that can be used to remove it with a regular expression?
Could you post some examples from your tests?
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
•
•
Join Date: Jul 2007
Posts: 18
Reputation:
Solved Threads: 0
Yes, I meant the -moz- stuff but not only them, they are the least nagging things about it.
Mozilla changes the separate definitions of for example background-color, background-image, bakground-repeat etc making them into one (background) which in my case is undesirable, as there will be problems when my script tries to edit the saved css again (same goes with border afaik but luckily not with font). Safari does the opposite, breaking border styles into border-left-style,border-right-style etc.
I can think of a workaround for these, but I've noticed that firefox removes some css properties, and that's what scares me the most. It converted this class:
to this:
and ok, this particular class is not important, it will be in a different stylesheet in the future anyways. But it kinda scares me to see ff removing css rules...
The good thing is that this (.transparent) is the only class in the stylesheet which contains browser-specific css rules, so hopefully it won't do it to the other classes as well...
Mozilla changes the separate definitions of for example background-color, background-image, bakground-repeat etc making them into one (background) which in my case is undesirable, as there will be problems when my script tries to edit the saved css again (same goes with border afaik but luckily not with font). Safari does the opposite, breaking border styles into border-left-style,border-right-style etc.
I can think of a workaround for these, but I've noticed that firefox removes some css properties, and that's what scares me the most. It converted this class:
.transparent
{
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
to this:
.transparent
{
opacity: 0.6;
}and ok, this particular class is not important, it will be in a different stylesheet in the future anyways. But it kinda scares me to see ff removing css rules...
The good thing is that this (.transparent) is the only class in the stylesheet which contains browser-specific css rules, so hopefully it won't do it to the other classes as well...
•
•
Join Date: Jul 2007
Posts: 18
Reputation:
Solved Threads: 0
I wrote down all those browser pecularities that I noticed regarding the css.
I'm posting them here, in case they help somebody and in case somebody can help me.
Mozilla firefox for Windows
-Adds proprietary css properties (-moz-something)
-Converts background-image:, background-repeat: etc into background:
-Converts hex color values into RGB ones
-Removes CSS comments
-Removes the properties filter: and -moz-opacity:
Safari for Windows
-Converts hex color values into RGB ones
-Breaks background-position into background-position-x/y (which firefox does not support!!)
-Adds proprietary css properties (-webkit-something)
-Adds background-image/repeat/attachment/position-x/position-y even if they are not defined
-Breaks padding and margin into margin/padding-top/left/right/bottom
-Removes quotes from fonts with blanks in their names (in property font-family).
-Removes CSS comments
-Breaks overflow into overflow-x/y
-Breaks border-something into border-top/left/bottom/right-something
-Removes the properties filter: and -moz-opacity:
Opera for Windows
-Adds background-image/repeat/attachment/position-x/position-y even if they are not defined
-Breaks padding and margin into margin/padding-top/left/right/bottom
-Converts single quotes to double quotes from fonts with blanks in their names (in property font-family)
-Breaks border-something into border-top/left/bottom/right-something
-Removes CSS comments
-Converts relative to absolute URLs
-Removes the properties filter: and -moz-opacity:
-Removes the ; characters from the last css rule
IE for Windows
-Capitalizes the css property names
-Breaks padding into padding-top/left/right/bottom
-Removes the ; characters from the last css rule
-Converts border-width, border-style, border-color to border-left/top/bottom/right
The pecularities I have marked in red are a problem for my script
I'm posting them here, in case they help somebody and in case somebody can help me.
Mozilla firefox for Windows
-Adds proprietary css properties (-moz-something)
-Converts background-image:, background-repeat: etc into background:
-Converts hex color values into RGB ones
-Removes CSS comments
-Removes the properties filter: and -moz-opacity:
Safari for Windows
-Converts hex color values into RGB ones
-Breaks background-position into background-position-x/y (which firefox does not support!!)
-Adds proprietary css properties (-webkit-something)
-Adds background-image/repeat/attachment/position-x/position-y even if they are not defined
-Breaks padding and margin into margin/padding-top/left/right/bottom
-Removes quotes from fonts with blanks in their names (in property font-family).
-Removes CSS comments
-Breaks overflow into overflow-x/y
-Breaks border-something into border-top/left/bottom/right-something
-Removes the properties filter: and -moz-opacity:
Opera for Windows
-Adds background-image/repeat/attachment/position-x/position-y even if they are not defined
-Breaks padding and margin into margin/padding-top/left/right/bottom
-Converts single quotes to double quotes from fonts with blanks in their names (in property font-family)
-Breaks border-something into border-top/left/bottom/right-something
-Removes CSS comments
-Converts relative to absolute URLs
-Removes the properties filter: and -moz-opacity:
-Removes the ; characters from the last css rule
IE for Windows
-Capitalizes the css property names
-Breaks padding into padding-top/left/right/bottom
-Removes the ; characters from the last css rule
-Converts border-width, border-style, border-color to border-left/top/bottom/right
The pecularities I have marked in red are a problem for my script
Last edited by Lucrezia; Sep 22nd, 2007 at 8:30 pm.
![]() |
Similar Threads
- Changing a default value on the fly (MS Access and FileMaker Pro)
- PHP/HTML to PowerPoint PPT (PHP)
- Please If You Can See Where My Mistake Is! (PHP)
- Test (DaniWeb Community Feedback)
- Booting problem (Storage)
- page layout help!!!! (PHP)
- My PC will not reboot (Windows NT / 2000 / XP)
- Error comparing strings from arrays (PHP)
- HD Failing Cloning Issues (Storage)
- PHP & File Extensions (PHP)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: email, zipcode, and password confirm problem
- Next Thread: delete and backspace
| Thread Tools | Search this Thread |
ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically browser bug calendar captchaformproblem checkbox child class close codes cookies createrange() cursor date debugger dependent disablefirebug dom dropdown editor element embed engine events explorer ext file firefox form forms getselection google gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump libcurl maps masterpage math media microsoft object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post programming progressbar redirect regex runtime safari scriptlets scroll search security session shopping size software sql text textarea toggle unicode variables web website windowsxp wysiwyg \n






