Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:38

Possible to change menuskin in HTML?


Poster: solbjerg
Dated: Saturday July 16 2005 - 13:04:53 BST

I have succeeded in changing menu skins and images in my forum http://setiboinc.dk/forum/ when one select a new skin for the forum.

I have recently tried to create the same feature for the site's html-pages, but until now I haven't been able to change menu skins and images.

FYI I'm an absolute beginner in JavaScripting.

The main menu for the ASP forum looks like this:

Code:
%>
<script>
with(milonic=new menuname("mainmenu")){
style=header_menu_style;
top=240;
left=0;
itemwidth=125;
position="relative";
alwaysvisible=1;
orientation="horizontal";
alignment="center";
screenposition="center";
aI("text=&nbsp;SETI __at__ boinc.dk;image=images/skin/<%= +skin+ "/"%>icon_home.gif;showmenu=home;")
aI("text=&nbsp;Statistik;image=images/skin/<%= +skin+ "/"%>icon_stats.gif;showmenu=statistik;")
aI("text=&nbsp;BOINC;image=images/skin/<%= +skin+ "/"%>icon_boinc.gif;showmenu=boinc;")
aI("text=&nbsp;Links;image=images/skin/<%= +skin+ "/"%>icon_links.gif;showmenu=links;")
aI("text=&nbsp;Download;image=images/skin/<%= +skin+ "/"%>icon_downloads.gif;showmenu=download;")
aI("text=&nbsp;Hjælp;image=images/skin/<%= +skin+ "/"%>icon_help.gif;showmenu=tips;")
aI("text=&nbsp;Forum;image=images/skin/<%= +skin+ "/"%>icon_forums.gif;showmenu=forum;")
}
drawMenus();
</script>
<%


As you can see it's just a JavaScript with an ASP statement added for getting the right skin:

Code:
[b]<%= +skin+ "/"%>[/b]

The script I use for the HTML pages is almost identical - except for the path of course:

Code:
<script>
with(milonic=new menuname("mainmenu")){
style=header_menu_style;
top=240;
left=0;
itemwidth=125;
position="relative";
alwaysvisible=1;
orientation="horizontal";
alignment="center";
screenposition="center";
aI("text=&nbsp;SETI __at__ boinc.dk;image=forum/images/skin/default/icon_home.gif;showmenu=home;")
aI("text=&nbsp;Statistik;image=forum/images/skin/default/icon_stats.gif;showmenu=statistik;")
aI("text=&nbsp;BOINC;image=forum/images/skin/default/icon_boinc.gif;showmenu=boinc;")
aI("text=&nbsp;Links;image=forum/images/skin/default/icon_links.gif;showmenu=links;")
aI("text=&nbsp;Download;image=forum/images/skin/default/icon_downloads.gif;showmenu=download;")
aI("text=&nbsp;Hjælp;image=forum/images/skin/default/icon_help.gif;showmenu=tips;")
aI("text=&nbsp;Forum;image=forum/images/skin/default/icon_forums.gif;showmenu=forum;")
}
drawMenus();
Is it possible to add som sort of statement in the above main menu to get the 'right' image, when one change skins?


Poster: Ruth
Dated: Saturday July 16 2005 - 13:51:50 BST

There is a topic with someone attempting to do that, change the style, which is what I'm assuming 'changing the skin' means. It is pretty much above my head, but perhaps you'd be able to decipher what's being done.

http://milonic.com/forum/viewtopic.php?t=5879

In that topic is a link to something that is being worked on to change the menu style http://www.milonic.com/mm_changestyle.php

Hope that gives you some direction.

Ruth


Poster: solbjerg
Dated: Saturday July 16 2005 - 18:12:24 BST

Well, I'm afraid the discussion on the mentioned subject is way beyond me.

I just change style sheets for html-pages and ASP's with a ready made script, where the essential function is

Code:
function doSkin(skin) {
   document.getElementById("skin").href='css/' + skin + '.css';
}


Later - in the body of the document - I call the style sheet selector and at the end the main menu of the Milonic menu. (I have split the Milonic menu in several parts so I can handle some parts in the head as required and one part - the main menu - in the document's body.)

It works in the ASP forum. The menu changes styles and images (in two separate operations) at the same time as the style sheets are changed. (I'm NOT using classes for the menu in my style sheets. This method doesn't live up to my intentions).

In short: I'm asking for help to put some code referring to the doSkin function mentioned above to the main menu.

In ASP code the images change with this code:

Code:
aI("text=&nbsp;SETI __at__ boinc.dk;image=images/skin/<%= +skin+ "/"%>icon_home.gif;showmenu=home;")


I wonder if there is a corresponding code in the Milonic menu scripts somewhere.

Kind regards
Kirsten, Denmark


Poster: Ruth
Dated: Saturday July 16 2005 - 18:20:35 BST

Hi Kirsten,


The person who actually knows functions and code is out this week. We're volunteers here. If you have a professional license you might contact Milonic directly using the support form on the main site. I'm sorry I can't help more, but code or functions is not something I do.

Ruth


Poster: solbjerg
Dated: Saturday July 16 2005 - 18:39:14 BST

I do not have a pro license. Earlier I was very happy with the 3.0 version, but this (5.??) version of Milonic DHTML menu came along with an extended version of the Snitz forum. I hope everything is okay - license-wise?

I will of course wait. I've been trying to find a solution for some time now, so a day less or more is of no importance.

Thank you for your prompt answers and have a nice weekend.

Regards from Kirsten


Poster: kevin3442
Dated: Thursday July 28 2005 - 1:03:42 BST

Hi Kirsten,

solbjerg wrote:
In short: I'm asking for help to put some code referring to the doSkin function mentioned above to the main menu.


I'm afraid it wouldn't be nearly that simple. :(

If I understand the goal correctly, you want to be able to have the same skin applied to html pages as is used when the user is on your forums, correct? Looking at the main menu code you posted from the forum pages, it seems that the only "skinned" property in the forum's main menu is the image property for each menu item. The main menu in the html pahes uses the images from the "default" skin.

Following the same methods as those used on the forum pages, you could do what you want much more easily if your non-forum pages were .asp instead of .html. The .asp pages are run through the asp parser on the web server, when being served to the browser. So the html and javascript code that hits the browser (the client), already contains the correct image paths to the skin images; i.e., someone viewing the source on their browser would see something like image=images/skin/skinName/icon_home.gif instead of image=images/skin/<%= +skin+ "/"%>icon_home.gif. In other words, the variability (skins in this case) is taken care of on the server side, before the page hits the browser. Plain old .html pages can't do that. (I don't know how much you know about asp ... probably more than me, so excuse the basic explanation!)

So, here's the thing... without using .asp on your non-forum pages, you won't be able to take advantage of the forum's skinning functions the same way. For example, you could call the doSkin() function from a menu item (or anywhere else on the page), but doing so would not have the desired effect. First, the doSkin() function requires a parameter to be passed: the selected skin. To let the user select a skin, you'd have to have some sort of equivalent to the drawSkinSelector() function that creates the Skin Selector control on your forum pages. This could set a javascript variable to the preferred skin ('brown', 'darkblue', etc.), and then pass that variable to the doSkin() function. But then you run into another trap: even if you set the preferred skin on the client side (in a js variable), the doSkin() function calls reload() at the end, to reload the page; this makes perfect sense for an asp page, because the server would re-serve the page with the new skin, using the asp statements. But it's a huge problem for a plain .html page, because a js variable set in a page only exists as long as the page remains in the browser; reloading the page would lose any locally set javascript variables, and you'd just be loading the default settings as they are coded in the .html page.

Then there's the persistence issue to deal with. Your forums remember the skin the user had on the last visit. At a glance, it looks to me like the doSkin() function (the one in your skin.js file, which is much more extensive than the one you posted) sets a cookie to remember the user's selected skin. OK... you could read that cookie using javascript in your .html pages, and then use that to build the menu.

Sorry for the rambling... just typing as I go, without too much organizing. I guess it boils down to these points: (1) the skinning capability of the forum is based partly on javascript and partly on asp, working together. If you were to simply rename your .html pages to .asp, then you could apply the skinning functions that the forum uses to your other, non-forumk pages. But... (2) If you have to use .html instead of .asp for your non-forum pages, then you lose the asp side of the skinning capability, so (3) you'd have to make up for that loss on the client side, with javascript, which means that (4) the existing javascript functions (like doSkin() ) won't work as they are, so (5) those functions will have to be replaced or extensively re-written.

The extent of the re-write would depend on how far you want to carry the skin idea. For example, do you want the user to be able to select a skin on any page; forum page as well as non-forum page. Or do you just want the skin selected on a forum page to persist to non-forum pages, with no opportunity to select a skin on non-forum pages? If a user can select a skin on a non-forum page, do you want that selection to persist across pages? If you want persistence, then should that selection persist across all pages, including from a forum page to a non-forum page, and vice versa? On a non-forum page, when a user selects a new skin (affecting images only), do you want the page to reload like it does on the forum pages, or do you just want the menu to change without reloading?

I can see ways to do these various things without asp, but it would require a bit of custom javascripting. For example, if a skin has been set on a previous visit, or by using the control on a forum page, you could have a js function that reads the cookie, and applies the skin to the html page using the onLoad event. You could make your own skin selector control (maybe even build it into a menu) for html pages. That control would call your own doSkin()-like function to (a) set the skin, (b) write the selection to the cookie, and (c) reset the menu by either (i) reloading the page or (ii) modifying the menu's internal data (either one is do-able).

Are you ready for a javascript challenge? If so, I can help.

Cheers,

Kevin

P.S. Sorry for the really long post. It's been a while since I waxed long winded.


Poster: solbjerg
Dated: Thursday July 28 2005 - 7:11:02 BST

It is a long post, indeed, but also a very thorough one. Thank you for your efforts that really uncover the difficulties concerning my little design problem. I've saved your post for later scrutiny.

My spontaneous thoughts are, though, that I must convert the .html pages into .asp. It's a lot of work so I wanted to know if there existed an easy work around. Obviously there isn't.

Thank you again. Your post made me think and rethink and I was wiser afterwards. That's always a good thing, especially in my age. :-D

FYI I used this ready made script for cookies and skin change skin in the html pages. This worked in a way that if one changed skin in either the forum or in the html part then the chosen skin would remain in both the .asp and .html pages.

Kind regards
Kirsten

Code:
var allCookies = document.cookie.split("; "); //in case you have more than one cookie on your site
var skin = ""
for (i=0; i < allCookies.length; i++) {
   crumb = allCookies[i].split("=");
   if (crumb[0] == "skin") { // find the cookie called skin
     skin = crumb[1]; // assign it's value to a variable
   }
   if (skin == "") {
     skin = "default"
   }
}
// call the correct CSS document
document.write ("<link rel=\"stylesheet\" type=\"text/css\" href=\"forum/css/" + skin + ".css\" id=\"skin\" />")


Poster: kevin3442
Dated: Thursday July 28 2005 - 18:26:23 BST

Hi Kirsten,

Probably converting the non-forum pages to asp is the best way to go (that's what I'd do). Of course, you know about changing the filename extensions from .html to .asp. But before you go editing each html page, inserting asp statements where your menu items are defined, you might consider not defining the menu in inline <script> tags, but putting the menu definition in an external file instead. That way, if you have to make changes to the menu, you only need to edit one file, rather than editing each page separately. In fact, with your implementation, I'd recommend removing all of the inline menu code, and placing all of it (menu styles and menus) in an external file. If the main menu is the same on forum pages and non-forum pages alike, then you only need one main menu definition (e.g., one menu_data file). You can source an external javascript file into the asp page just as you normally would any .js file. If the javascript file contains asp statements (as yours would in this case), then name it with .asp instead of .js (e.g., menu_data.asp instead of menu_data.js). That way, the javascript file will go through the asp parser and the asp statements will work.

On another topic, I noticed that you mentioned something about including parts of the menu code in the head, "as required." That made me think that you had an old implementation, as the current recommendation is normally to load all menu code in the body. I checked, and you are using Version 5, Release Candidate 18, from October of 2003. That's a beta release that is seriously behind where the menu code is now. You might consider upgrading (save your current menu source files in case you need to go back). Note that only the current release is "officially" supported. The support for css is much better in the current release, and you might find that it enhances the "skinability" of the menu.

Cheers,

Kevin


Poster: solbjerg
Dated: Thursday July 28 2005 - 22:35:17 BST

Thank you for your advice and comments on implementing the Milonic Menu in .asp as well as .html pages.

I have already put quite many Java Scripts in external files. Actually I have split the original menu_data.js in three scripts: menu_style.js, menu_icons.js, and a new menu_data.js and refer to them via the <script> tag.

Both .asp and .html pages share the data file, so I just have to make my menu changes in ONE file.

Thank you for the advice on renaming a .js file with .asp statements in it to .asp. I suppose I just have to put the <script></script> tag in the .asp file then?

I have thought of upgrading the Milonic Menu and I already noticed the shortcomings of my present version, but as I am a grandmother of few means I have to put first things first and for the time being there is no money left for upgrading the excellent Milonic Menu. :(


Poster: kevin3442
Dated: Friday July 29 2005 - 0:57:14 BST

solbjerg wrote:
...Thank you for the advice on renaming a .js file with .asp statements in it to .asp. I suppose I just have to put the <script></script> tag in the .asp file then?

To use asp statements inside a javascript file, change the file name extension from .js to .asp. Now you can load that file into a .html file or a .asp file using a <script> block, just as you would a plain ol' .js file. Like so:
Code:
<script type="text/javascript" src="menu_data.asp"></script>


solbjerg wrote:
I have thought of upgrading the Milonic Menu and I already noticed the shortcomings of my present version, but as I am a grandmother of few means I have to put first things first and for the time being there is no money left for upgrading the excellent Milonic Menu. :(

The current release of the menu can be used for free on non-profit sites. See this page on the main site for details. Note also that, strictly speaking, your version is subject to the same restrictions, even though it isn't current.

Cheers,

Kevin


Poster: solbjerg
Dated: Friday July 29 2005 - 9:42:34 BST

Thank you!!!

I really appreciate your many good advices. I've now downloaded the latest version of the Milonic Menu and have put a small reference to the excellent menu in the bottom of all pages.

I wish you a nice weekend. Kind regards from
Kirsten in Copenhagen


Poster: kevin3442
Dated: Saturday July 30 2005 - 1:17:48 BST

Hi again Kirsten,

As an after thought, I don't know if I stressed this enough: If your javascript contains asp statements, then you load it as a .asp file (e.g., menu_data.asp), as we discussed. But, you can load that file into a plain .html file, and the asp code used to generate the menu will still work. The point is this: If your main page file does not contain asp statements, then you do not have to rename it to .asp for the javascript asp file to work (i.e., you could leave the main page into which you're loading the menu_data.asp file named as .html). Leaving such a file named with a .html extension should speed up the serving of the page, because that file would not have to be processed through the asp parser.

Cheers,

Kevin


Poster: solbjerg
Dated: Saturday July 30 2005 - 8:27:29 BST

Hi Kevin.

I haven't yet succeeded in enabling asp statements in an html file, but I will try again later following your detailed advices.

(Later is when the inside of my mouth stops feeling like the bottom of a birdcage :-). I had a ‘wet’ evening out yesterday with some tough lady journalist friends. I used to be one myself, but am retired now, thanks to a higher might.).

Greetings from
Kirsten