PDA

View Full Version : include external css based on condition



jigarshah
10-09-2006, 08:05 PM
is there any way that i can include external css based on some conditions ?
something like this
if(1)
<link...css1>
else if(2)
<link...css1>

Twey
10-09-2006, 08:18 PM
Yes, you can definitely do it, but there may well be a better way. What's the condition?

codeexploiter
10-10-2006, 04:23 AM
Using JavaScript this can be done



HTML Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
var input = parseInt(prompt('Enter a value',''));

if(input)
document.write("<link type='text/css' rel='stylesheet' href='1.css'>");
else
document.write("<link type='text/css' rel='stylesheet' href='2.css'>");
</script>
</head>
<body>
<span class="body">This is a test</span>
</body>
</html>




1.css

.body
{
background-color:#CCFFFF;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}





2.css

.body
{
background-color:#FFFF00;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
}


The Javascript code will include the external CSS files based on the value we store in variable input. If it contains a non-zero value it will include 1.css otherwise it will include 2.css.

Hope this is what you were looking

djr33
10-10-2006, 04:26 AM
stupid question, but relevant.
Does document.write go where the script is, or does it output at another location?
For example... if you wanted to just output a body paragraph, would you need to place a script in the <body> section? that's certainly not standard, and might give some errors.... so...?

I notice the script is conveniently in place css would normally be located, but might just be a coincidence as both script and css tags go in the head.

jigarshah
10-10-2006, 05:07 AM
its like i want to change skin of my webpage which is based on codeexploiter suggested...actually i tried something similar

codeexploiter
10-10-2006, 05:13 AM
You'll find the following items interesting:

http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

http://www.gr0w.com/articles/code/css_stylesheet_switcher_using_php_javascript_free/

http://www.mikezilla.com/exp0020/exp0020.html

jigarshah
10-10-2006, 07:12 AM
Using JavaScript this can be done



HTML Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
var input = parseInt(prompt('Enter a value',''));

if(input)
document.write("<link type='text/css' rel='stylesheet' href='1.css'>");
else
document.write("<link type='text/css' rel='stylesheet' href='2.css'>");
</script>
</head>
<body>
<span class="body">This is a test</span>
</body>
</html>




1.css

.body
{
background-color:#CCFFFF;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}





2.css

.body
{
background-color:#FFFF00;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
}


The Javascript code will include the external CSS files based on the value we store in variable input. If it contains a non-zero value it will include 1.css otherwise it will include 2.css.

Hope this is what you were looking


i did somrthing like this but it gives error


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="script.js" language="Javascript" type="text/javascript"></script>
</head>
<body onload="onload(1);">
<h1>Just hi</h1>
</body>
</html>



script.js

function onload(input) {

if(input == 1)
document.write("<link type='text/css' rel='stylesheet' href='1.css'>");
else
document.write("<link type='text/css' rel='stylesheet' href='2.css'>");
}


It fails
In FF javascript Console it shows
What i did wrong ?
Error: too much recursion
Source file: file:///home/jigar/Desktop/My%20Document/4.Web%20Design/my%20nvu%20web/select%20script/base.html
Line: 1

jigarshah
10-10-2006, 07:21 AM
Cool...!! thanks....i searched on dynamic drive but couldn't get one...Thanks again

codeexploiter
10-10-2006, 07:37 AM
Two things:

1. change the name of your function defined in script.js file from onload to something else.

2. call the function defined in the .js file from within your head section itself. That is the place to insert the <link> tags.



<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" src="script.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
onlooad(1); //assuming that the function name defined in script is this no onload
</script>
</head>

mwinter
10-10-2006, 11:09 AM
Does document.write go where the script is, or does it output at another location?

Directly after the script element, as though it were a sibling.



For example... if you wanted to just output a body paragraph, would you need to place a script in the <body> section?

Yes.



that's certainly not standard, and might give some errors.... so...?

Hmm? Placing a script element in the body element, and many of its descendants, is certainly allowable.

Mike

djr33
10-10-2006, 11:48 AM
So... the entire script would go in the body, not head, section of the page? Or would you just use a marker/part of the script there and place the majority at the top?

Sorry... not trying to drag this off topic. But it's interesting.

jigarshah
10-10-2006, 09:35 PM
You'll find the following items interesting:

http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

http://www.gr0w.com/articles/code/css_stylesheet_switcher_using_php_javascript_free/

http://www.mikezilla.com/exp0020/exp0020.html

its regarding this
http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm
Thanks for the link....
Now insted of radio buttions i have images to select theme
something like this


<div id="colormenu">
<li><a href="#" type="link" name="color_image" id="blue" onClick="chooseStyle(this.id, 60)"><img src="images/colors_blue.jpg " alt="blue" /></a></li>
<li><a href="#" type="link" name="color_image" id="orange" onClick="chooseStyle(this.id, 60)"><img src="images/colors_orange.jpg" alt="blue" /></a></li>


To enable selected image i do something like this



<li><a href="#" type="link" class="current" name="color_image" id="orange" onClick="chooseStyle(this.id, 60)"><img src="images/colors_orange.jpg" alt="blue" /></a></li>


But then there is a problem here ...


<script type="text/javascript">
window.onload=function(){
var formref=document.getElementById("colormenu")
indicateSelected(formref.choice)
}
</script>


any solution ??