PDA

Click to See Complete Forum and Search --> : Is a *script* (not style) switcher possible?

deebat
06-22-2004, 03:37 PM
Hello -- Here's a first post from a relative JS newbie. I've overpromised on some JavaScript that I thought I could cobble together on my own, and now I'm wondering whether anyone can give me a hand.

I'd like to use some JavaScript that chooses between two external JavaScript files. The two js files each represent a different menu appearance. Optimally, the user would be presented with a preferences page where they would have the choice between menu type 1 and menu type 2 (either with a select list or two radio buttons). After they submitted their selection (and set the cookie), every other page on the site would refer to the cookie and insert the reference to the appropriate script.

The solution for this problem seems like it could be solved with something like the "style switcher" script that I've seen floating around here, but there seems to be a different level of complexity because I want to switch between js files instead of CSS files. I'd be glad if I was wrong about that, though :-)

Here's a basic version of the code I need to make "switchable." Note the second <script> line in the body; that line needs to end up being either menu1.js or menu2.js, based upon the user's selection. The rest of the stuff should remain the same.


<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="help02.css" type="text/css">
</head>

<body>

<script language="JavaScript1.2">dqm__codebase = ""</script>
<script language="JavaScript1.2" src="menu1.js"></script>
<script language="JavaScript1.2" src="tdqm_loader.js"></script>
<script language="JavaScript1.2">generate_mainitems()</script>


<p>Text</p>

...

</body>
</html>

Anyone have any ideas about how I should make this happen? I'm trying to finagle the style switcher, but I'm not optimistic enough to believe in myself here...

TIA!
-Dan
Phil Karras
06-22-2004, 04:10 PM
I think I understand the question and the answer is no.

However, there is almost always a way around limitations like that.

One way I've done it is call the functions something a little different, put them both in the same JS library (or different, it really doesn't matter) and then use something to select which you're going to use in the generic name.

var MyMenu = -1;

if(this) {
MyMenu = Menu01;
}
else {
MyMenu = Menu02;
}

Where Menu01 & 02 are in the lib & now you use MyMenu as you would either menu01 or 02.

If menus 01 & 02 are funcitons then you call MyMenu like: MyMenu(); any other function.

Hope that helps.
David Harrison
06-22-2004, 04:44 PM
With the DOM, the answer is yes. I'm going to assume you can handle all of the cookie code and stuff and that you can get the source of the required .js file into a variable called "file".</head>

<body>

<script type="text/javascript"><!--

var the_script=document.createElement("script");
the_script.type="text/javascript";
the_script.src=file;
document.getElementsByTagName("head")[0].appendChild(the_script);

//--></script>the rest I leave to you since you promised someone that you would make it.
deebat
06-22-2004, 05:48 PM
Thanks for the replies, Phil and lavalamp. After reading your responses, I fear this stuff isn't in my league. Nevertheless, I'll soldier on for another humiliating post or two before I crumple in defeat into a dank corner of my basement.:(

OK, let's try this. Assuming I have the appropriate cookie code (getCookie, setCookie and delCookie are stored in a linked cookies.js file) and I've set the cookie properly, could I use the following in the HEAD of the pages that will retrieve the cookie contents?


function myMenu() {
if (getCookie(cookieName) == null ||
getCookie(cookieName) == "one") {
document.write('<script type="javascript"');
document.write('src="menu1.js">');
document.write('</script>');
}
else {
getCookie(cookieName) == "two") {
document.write('<script type="javascript"');
document.write('src="menu2.js">');
document.write('</script>');
}
}


And with that in mind, could I then use the following in the BODY to choose the appropriate menu js file:


<script language="JavaScript1.2">myMenu();</script>


Or would it just be easier for me at this point to switch off this machine forever and return to my crayons?

Thanks loads for any additional help you have in the hopper...Dan
David Harrison
06-22-2004, 06:07 PM
I thought that you wanted to switch between the menus, which is why I posted a DOM solution. That DOM solution can be modified to change the scripts at any time, should you give the user a chance to do so.
If you want to use document.write though I won't stop you, and this is what the code should look like, the "script" has to be separated because otherwise it will cause erros.function myMenu() {
if (getCookie(cookieName) == null ||
getCookie(cookieName) == "one") {
document.write('<scr'+'ipt type="javascript" src="menu1.js"></scr'+'ipt>');
}
else {
getCookie(cookieName) == "two") {
document.write('<scr'+'ipt type="javascript" src="menu2.js"></scr'+'ipt>');
}
}
Phil Karras
06-23-2004, 01:00 PM
Perhaps lavalamp & I are assuming too much here.

You are aware of the fact that as soon as you use document.write() that you replace EVERYTHING that is currently in the window you're writing to? In the case you've shown you will replace everything in your current document. That means EVERYTHING ELSE IS NOW GONE!

Is this really what you wanted to do?

If so, a far better way would be to write the entire HTML page into a variable and THEN write it to your document.

I've done this but it always seems dumb to me, I think lavalamp's DOM solution was probably better or my suggestion about functions, tho' I've never tried it for your purpose.

I think a quick & dirty solution might get you out of the fix you're in, make all pages twice with the two menu options you wanted. Then when the coookie is read you go to the first page that matches the cookie selection and it goes to the correct menu set of other pages.

Not as nice as a way to change the menu appearance with and if statement but it should work & be rather easy to put together.
deebat
06-23-2004, 03:05 PM
Phil, I guess I wasn't aware of the wholesale destruction that document.write could do. No, I'm pretty sure I don't want a complete wipeout of my pages! ;)

Unfortunately, I also must rule out your quick-and-dirty alternative option (that is, duplicating the pages and doing a redirect) because the site I'm working on has 4000+ pages. It's quite nearly a maintenance nightmare to begin with; doubling the load would grind me into a pulp.

I'd like to take a stab at lavalamp's suggested DOM solution, but I'm way too much of a noob at this point to know what I'm doing. I'll keep hacking for awhile to see if I can educate myself...

Thanks for your help,
Dan
David Harrison
06-23-2004, 03:26 PM
Originally posted by Phil Karras
You are aware of the fact that as soon as you use document.write() that you replace EVERYTHING that is currently in the window you're writing to?Only if the page has finished loading.

I'll post a script later that allows for external .js file switching.
deebat
06-23-2004, 04:31 PM
--------------------------------------------------------------------
Originally posted by Phil Karras
You are aware of the fact that as soon as you use document.write() that you replace EVERYTHING that is currently in the window you're writing to?
--------------------------------------------------------------------



--------------------------------------------------------------------
Originally posted by lavalamp
Only if the page has finished loading.
--------------------------------------------------------------------


So putting document.write at the top of the body tag would be OK? That's what it seemed like when I tested it, but I figured I had broken something else along the way.

lavalamp, if you figure out any way to do this thing (with or without document.write), I will set up my webcam and openly weep for you. :p

Thanks,
Dan
Phil Karras
06-24-2004, 11:24 AM
Yes, putting it there would be AOK and also you can put it in the <head> section.

I now have a demo of pulling in different JavaScript Library files on my web site (listed below) it is help291.htm - Use Different JS Libraries (h291.js, h291a.js, h291b.js, & h291z.js)

When you go to my home page look on the right for: HTML form HELP Index which are two links, the HELP index will run my ReadFile program to load in a JavaScript database of a help file index.

You can then read the description for the help291.htm file and its JS libraries. You should also be able to download them by using their names in the URL line.

Or you can test the example on-line by using the test block, putting in:
help291.htm?a=0
or
help291.htm?a=1
or
help291.htm?a=9
or
help291.htm

and see what happens.
David Harrison
06-25-2004, 08:09 AM
Here's a cross browser version, it doesn't actually change the script, it just deletes the old script tag and replaces it with the new one.

The function which detects the cookie preference is the one that creates the script tag for the first time.
Phil Karras
06-25-2004, 08:35 AM
Looks good, thanks lavalamp!
deebat
08-26-2004, 04:52 PM
Hi lavalamp -- Any reason why your script wouldn't work on Safari or Mac IE? (It works on Mac Netscape, however.) I can accept that it won't work on Mac IE (nothing ever seems to work on that silly thing), but Safari surprises me. Thanks for any insight you might have...
David Harrison
08-26-2004, 05:19 PM
Well the script makes heavy use of the DOM, does that version of Safari properly support the DOM?

I can't test on a Mac at all so I can't really work on a fix, sorry. :(
deebat
08-26-2004, 05:41 PM
I assume there's a conflict with the DOM as well, but I can't see it just from a quick pass of the script. Guess I'll do more digging about Safari. I'll report back if I find out anything. Thanks for the response!