Programming Help

Web Development



What's Here?

  • Members: 149,523
  • Replies: 506,638
  • Topics: 79,834
  • Snippets: 2,666
  • Tutorials: 706
  • Total Online: 1,426
  • Members: 67
  • Guests: 1,359

Welcome to Dream.In.Code
Become an Expert!

Join 149,523 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,426 people online right now. Registration is fast and FREE... Join Now!




Need help with a combobox

 
 Reply to this topicStart new topic

Need help with a combobox
dean.h
15 Jun, 2007 - 02:06 AM
Post #1

New D.I.C Head
*

Joined: 4 Mar, 2007
Posts: 12


My Contributions
I've recently been working on a new site, and want to add the option for the user to switch between style sheets. To do this I have coded a combo box and put several style sheet options into it, but I am unsure about how to switch the style sheets. Would it be possible to do with Javascript, or do I need some kind of server-side behaviour?

Here is my HTML and CSS

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>::My Website::</title>
<link rel="stylesheet" href="CSS/default.css"  type="text/css" >
</head>

<body>

<div id="container">
<div id="wrapper">
<div id="logo_container">
I Need A Masthead!!!!
</div>

<div id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="" target="_blank">Blog</a></li>
<li><a href="index.html">Forum</a></li>
</ul>
</div>

<div id="style_form">
<form>
<form name="">
<select name="">
<option value="Your link here">Default Style</option>
<option value="Your link here">High Contrast Style</option>
<option value="Your link here">Text Only Style</option>
<option value="Your link here">Large Text Style</option>
</select>
</form>
</div>

<div id="content">
</div>

<div id="footer">
<div id="cssvalidation">
<ul>
<li class="validation_list"><img src="Images/valid-html401-blue.png" alt="valid html 4.01" width="88" height="31" /></li>
<li class="validation_list"><img src="Images/valid-css-blue.png" alt="valid css" width="88" height="31" href="CSS/1024_768.css" rel="stylesheet" type="text/css" /></li>
</ul>
</div>

<ul>
<li class="footerlist">Site coded and designed by <a href="mailto:dean.hollstrom@ntlworld.com">Dean Hollstrom</a> &copy; 2007.</li>
<li class="footerlist">Site coded in valid <a href="default.css">CSS</a> and HTML 4.01</li>
</ul>

</div>
</div>
</div>
</body>
</html>


CODE

/* CSS Document */
/* Main font and color for page*/

p
    {
    font-family: calibri;
    padding-left: 3px;
    padding-right: 3px;
    }

body
    {
    margin: 0;
    }

/* list styles for the navigation menu and links */

a:link
    {
    text-decoration: none;
    color: #000000;
    font-family: calibri;
    }

a:visited
    {
    text-decoration: none;
    font-family: calibri;
    }
    
a:hover
    {
    text-decoration: underline;
    font-family: calibri;
    }

a:active
    {
    font-family: calibri;
    }
    
ul
    {
    list-style-type: none;
    width: auto;
    height: inherit;
    margin: 0px;
    padding: 0px;
    }

li
    {
    text-align: center;
    font-family: calibri;
    font-size: 15px;
    width: auto;
    margin: 0px;
    padding: 3px;
    display: inline;
    }

.footerlist
    {
    display:block;
    font-family: calibri;
    line-height: 0.8em;
    text-align: right;
    padding: 2px;
    margin: 2px;
    }
    
.validation_list
    {
    display:inline;
    font-family: calibri;
    line-height: 0.8em;
    padding: 2px;
    margin: 2px;
    }
    
.current
    {
    text-decoration: underline;
    }
    
.email
    {
    text-decoration:underline;
    }
    
/* Main div element and class styles */
    
#container
    {
    max-width: 768px;
    max-height: 1024px;
    padding: 0px;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background: #FFFFFF;
    margin: 0px auto;
    }    
    
#logo_container
    {
    clear: both;
    text-align: center;
    width: auto;
    height: auto;
    }
    
#nav
    {
    float: left;
    text-align: center;
    width: 170px;
    }
    
#style_form
    {
    float:right;
    margin-right: 4px;
    }
    

#content
    {
    float:left;
    text-align: justify;
    overflow: auto;
    height: inherit;
    width: auto;
    padding: 5px;
    }
    
#cssvalidation
    {
    float: left;
    clear: right;
    padding: 3px;
    }
    
#footer
    {
    clear: both;
    text-align: center;
    width: auto;
    height: auto;
    border-top: 1px solid #000000;
    }


Many Thanks in advance
User is offlineProfile CardPM
+Quote Post

girasquid
RE: Need Help With A Combobox
15 Jun, 2007 - 09:21 AM
Post #2

Barbarbar
Group Icon

Joined: 3 Oct, 2006
Posts: 1,294



Thanked: 18 times
Dream Kudos: 725
My Contributions
It's doable with Javascript, here's a function that will attach a stylesheet for you:
CODE

function attachCSS(href) {
    var dHead = document.getElementsByTagName('head')[0];
    var newStyle = document.createElement('link');
        newStyle.setAttribute('rel','stylesheet');
        newStyle.setAttribute('type','text/css');
        newStyle.setAttribute('media','screen,projection');
        newStyle.setAttribute('href',href + '?' + cachePrevent);
    dHead.appendChild(newStyle);
}

And then if you want to attach another stylesheet, you'd just do this:
CODE

attachCSS('path/to/stylesheet.css');

One way that you could make this work with your combobox is to have it call a Javascript function inside its onchange attribute, which would retrieve the stylesheet information and then call attachCSS.
User is offlineProfile CardPM
+Quote Post

dean.h
RE: Need Help With A Combobox
18 Jun, 2007 - 07:22 AM
Post #3

New D.I.C Head
*

Joined: 4 Mar, 2007
Posts: 12


My Contributions
OK, forgive me for this, but when it comes to javascript I'm a complete noob, so what I've done is probably completely wrong. And before anyone posts saying 'go and learn javascript', I just want to let you know I am currently trying to learn it, but have not had much time recently.

I have added the script, and added <link rel> for the styles I want to use, but I'm still not sure about the way the combobox is coded. If anyone could help it would be greatly appreciated.......

Apologies and Thanks

Dean


CODE


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>::My Website::</title>

<link rel="stylesheet" href="CSS/firefox.css" type="text/css" >
<link rel="alternate stylesheet" type="text/css" href="CSS/largetext.css" title="Large Text">
<link rel="alternate stylesheet" type="text/css" href="CSS/hicontrast.css" title="High Contrast">
<link rel="alternate stylesheet" type="text/css" href="CSS/textonly.css" title="Text Only">

<script type="text/javascript">

function attachCSS(href) {
    var dHead = document.getElementsByTagName('head')[0];
    var newStyle = document.createElement('link');
        newStyle.setAttribute('rel','stylesheet');
        newStyle.setAttribute('type','text/css');
        newStyle.setAttribute('media','screen,projection');
        newStyle.setAttribute('href',href + '?' + cachePrevent);
    dHead.appendChild(newStyle);
}

</script>



</head>

<body>

<div id="container">
<div id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="index.html">Forum</a></li>
</ul>
</div>


<div id="style_form">
<select name="Change Style" size="1">
  <option value="Choose Style">Choose Page Style</option>
  <option value="Default" onclick="setActiveStyleSheet('firefox');return false;">Default Style</option>
  <option value="Large Text" onclick="setActiveStyleSheet('largetext'); return false;">Large Text</option>
  <option value="High Contrast" onclick="setActiveStyleSheet('hicontrast'); return false;">High Contrast</option>
  <option value="Text Only" onclick="setActiveStyleSheet('textonly'); return false;">Text Only</option>
</select>
</div>

<div id="content">
</div>

<div id="site_links">
</div>

<div id="footer">

<div id="cssvalidation">
<ul>
<li class="validation_list"><img src="Images/valid-html401-blue.png" alt="valid html 4.01" width="88" height="31"></li>
<li class="validation_list"><img src="Images/valid-css-blue.png" alt="valid css" width="88" height="31"></li>
</ul>
</div>

<ul>
<li class="footerlist">Site coded and designed by Dean Hollstrom &copy; 2007.</li>
<li class="footerlist">Site coded in valid <a href="CSS/default.css">CSS</a> and HTML 4.01</li>
</ul>

</div>
</div>
</body>
</html>
User is offlineProfile CardPM
+Quote Post

girasquid
RE: Need Help With A Combobox
18 Jun, 2007 - 10:54 AM
Post #4

Barbarbar
Group Icon

Joined: 3 Oct, 2006
Posts: 1,294



Thanked: 18 times
Dream Kudos: 725
My Contributions
Create this Javascript function:
CODE

function setActiveStyleSheet(ssName) {
attachCSS(ssName + .'css');
}

If your firefox.css stylesheet was in the same directory as your HTML file, that should do the trick.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 08:40PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month