Change dropdown to clickable links

change drop-down menu to clickable links?

[gulliver]

Edit from a cross post in CSS...

Anyone know of a way to change a drop-down menu to a series of clickable links?

It relates to a style switcher - <snip>

The (the options have been slightly adapted by me) html is

<select class="select2" onchange="var v=this.options[this.selectedIndex].value; if (v!= '') selectStyle('style', v);">
<option value="">-- select text size --</option>
<option value="small">small</option>
<option value="normal">normal</option>
<option value="larger">larger</option>
</select>

and the js...

function makeCookie(Name,Value,Expiry,Path,Domain,Secure){
if (Expiry!= null) {
var datenow = new Date();
datenow.setTime(datenow.getTime() + Math.round(86400000*Expiry));
Expiry = datenow.toGMTString();
}

Expiry = (Expiry!= null)? '; expires='+Expiry : '';
Path = (Path!= null)?'; path='+Path:'';
Domain = (Domain!= null)? '; domain='+Domain : '';
Secure = (Secure!= null)? '; secure' : '';

document.cookie = Name + '=' + escape(Value) + Expiry + Path + Domain + Secure;
}

function readCookie(Name) {
var cookies = document.cookie;
if (cookies.indexOf(Name + '=') == -1) return null;
var start = cookies.indexOf(Name + '=') + (Name.length + 1);
var finish = cookies.substring(start,cookies.length);
finish = (finish.indexOf(';') == -1)? cookies.length : start + finish.indexOf(';');
return unescape(cookies.substring(start,finish));
}

function selectStyle (vCookieName, vSelection) {
//WRITE COOKIE
makeCookie(vCookieName, vSelection, 90, '/');
//RELOAD THE CURRENT PAGE
self.location = self.location;
}

if (document.cookie.indexOf('style=')!=-1) {
css = readCookie('style');
//IMPORT SELECTED STYLE SHEET
document.write('<style type="text/css" media="screen">@import "' + css + '.css";</' + 'style>\n');
}

[edited by: DrDoc at 3:41 pm (utc) on June 30, 2004]
[edit reason] No URLs, thanks. See TOS [webmasterworld.com] [/edit]

[DrDoc]

Are you talking about making the options in the dropdown links, or simply replacing the select box with regular text links?

[gulliver]

>Are you talking about making the options in the dropdown links, or simply replacing the select box with regular text links?

Err... not sure. The latter, I think.
Perhaps even as a list.

[DrDoc]

Since the switcher won't work without JavaScript, we might as well generate the links using JavaScript:

<script type="text/javascript">
document.write("<a href=\"javascript:selectStyle('style','small')\">small</a> ");
document.write("<a href=\"javascript:selectStyle('style','normal')\">normal</a> ");
document.write("<a href=\"javascript:selectStyle('style','larger')\">larger</a> ");
</script>

I used separate document.write statements to avoid side scrolling, but you can obviously use only one if you so desire. :)

[gulliver]

Thanks.

I'm a non-tech guy and struggle with this stuff - how do I combine your stuff with the original... what needs including/deleting?

[DrDoc]

Replace the select box itself with the JavaScript I posted...

[gulliver]

Thanks. Appreciated.

I'm beginning to understand (that I should stick to marketing and leave tech stuff to those who understand)...

So in the html code I now simply have

<script type="text/javascript">
document.write("<a href=\"javascript:selectStyle('style','small')\">small</a> ");
document.write("<a href=\"javascript:selectStyle('style','normal')\">normal</a> ");
document.write("<a href=\"javascript:selectStyle('style','larger')\">larger</a> ");
</script>

And this produce 3 inline clickable links. Is there any way to get them into a list - or space them apart or on individual lines?

My existing switcher (which calls a script in an external linked file) is

<p><a href="switch/error/" onClick="setActiveStyleSheet('default'); return false;">default</a>.<br>
<a href="switch/error/"onClick="setActiveStyleSheet('large'); return false;">larger</a>.</p>

I'm wondering if, with yours, the onclick can be the document write stuff?

I'm really grateful for your help so far - and feel bad asking for even more. If you can, thanks. And, if not, then you'vev already helped me.

[DrDoc]

List:

<script type="text/javascript">
document.write("<ul>");
document.write("<li><a href=\"javascript:selectStyle('style','small')\">small</a></li>");
document.write("<li><a href=\"javascript:selectStyle('style','normal')\">normal</a></li>");
document.write("<li><a href=\"javascript:selectStyle('style','larger')\">larger</a></li>");
document.write("</ul>");
</script>

---

Separate lines:

<script type="text/javascript">
document.write("<a href=\"javascript:selectStyle('style','small')\">small</a><br>");
document.write("<a href=\"javascript:selectStyle('style','normal')\">normal</a><br>");
document.write("<a href=\"javascript:selectStyle('style','larger')\">larger</a>");
</script>

---

Spaced:

<script type="text/javascript">
document.write("<a href=\"javascript:selectStyle('style','small')\">small</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
document.write("<a href=\"javascript:selectStyle('style','normal')\">normal</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
document.write("<a href=\"javascript:selectStyle('style','larger')\">larger</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
</script>

---

There is no need for the

onclick

attribute. The links will only show up if JavaScript is supported (which is desirable since JS is needed to switch the CSS in the first place). The links should work as-is.

[gulliver]

Hey - thanks.

This is really appreciated.

I understand that the whole thing will only appear on page if javscript is enabled - otherwise the space will simply be blank... and this can be covered with a simple advice line like 'this feature requires a javscript enabled browser - if there's no small/normal/large link below, the feature isn't available'.

And this is perhaps a better alternative to the situation with my existing switcher where the links appear and if the javascript doesn't work an error page explaining why it didn't work is delivered.

Purely to help my understanding, I'm thinking that if I ever wanted to do it that way, then something like this in the html will work...

<a href="errorpage.htm" onClick="selectStyle('style','small'); return false;">small</a><br>
<a href="errorpage.htm" onClick="selectStyle('style','normal'); return false;">normal</a>
<a href="errorpage.htm" onClick="selectStyle('style','larger'); return false;">larger</a>

And the js can be in the document or in a linked file. Presumably it'd be a simplified and slimmed variant of your script.

<script type="text/javascript">
document.write("<a href=\"javascript:selectStyle('style','small')\">small</a> ");
document.write("<a href=\"javascript:selectStyle('style','normal')\">normal</a> ");
document.write("<a href=\"javascript:selectStyle('style','larger')\">larger</a> ");
</script>

I've probably already asked too much, and your suggestions give me a better method that I had. This last 'alternative' is, as I say, more to help me feel satisfied that I at least understand a bit of it rather than an "but I want to do it this way' thing.

If you've the time/interest to clarify - thanks. And again, if not then thanks so much for the help to date.

;-)

[DrDoc]

You're absolutely correct in your assumptions :)

[gulliver]

Phew. All sorted. I can sleep easy now.

Seriously, thanks.

;-)