?
Solved

Coolmenus - Seperate content from presentation

Posted on 2006-05-29
3
Medium Priority
?
348 Views
Last Modified: 2012-06-27
Good day,
I am continuing my experiment with coolmenus, I want further seperate the js from the html. The javascript can be viewed at http://www.dhtmlcentral.com/projects/coolmenus/examples/menu1.html, by viewing the source and checking in the body tag and ending with oCMenu.construct(). I want to put that code in a js file and call it in the html. I thought I could easily find a good example on the internet but I cannot. I would appreciate soom guidance. Thank you,

diek
0
Comment
Question by:diek_nf
  • 2
3 Comments
 
LVL 17

Accepted Solution

by:
gops1 earned 500 total points
ID: 16787003
You can do it.
From the above link, I moved the entire Javascript into a new file but with few minor changes and it worked. Here is it below. Take this and paste it into a new .js file and remove the entire script tag from your file.

And do not forget to include the new JS into your html (Include after your coolmenus.js file).

/******************* MENU NUMBER 1 **********************************/

/***
This is the menu creation code - place it right after you body tag
Feel free to add this to a stand-alone js file and link it to your page.
**/

//Menu object creation
oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname

//Menu properties  
oCMenu.pxBetween=0
oCMenu.fromLeft=20
oCMenu.fromTop=0  
oCMenu.rows=1
oCMenu.menuPlacement="rows"

oCMenu.offlineRoot="file:///C|/Inetpub/wwwroot/dhtmlcentral/projects/coolmenus/examples/"
oCMenu.onlineRoot="/coolmenus/"
oCMenu.resizeCheck=1
oCMenu.wait=1000
oCMenu.fillImg="cm_fill.gif"
oCMenu.zIndex=0

//Background bar properties
oCMenu.useBar=0
oCMenu.barWidth="100%"
oCMenu.barHeight="menu"
oCMenu.barClass="clBar"
oCMenu.barX=0
oCMenu.barY=0
oCMenu.barBorderX=0
oCMenu.barBorderY=0
oCMenu.barBorderClass=""

//Level properties - ALL properties have to be spesified in level 0
oCMenu.level[0]=new cm_makeLevel() //Add this for each new level
oCMenu.level[0].width=103
oCMenu.level[0].height=25
oCMenu.level[0].regClass="clLevel0"
oCMenu.level[0].overClass="clLevel0over"
oCMenu.level[0].borderX=0
oCMenu.level[0].borderY=0
oCMenu.level[0].borderClass=0
oCMenu.level[0].offsetX=0
oCMenu.level[0].offsetY=0
oCMenu.level[0].rows=0
oCMenu.level[0].align="bottom"


//EXAMPLE SUB LEVEL[1] PROPERTIES - You have to spesify the properties you want different from LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[1]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[1].width=oCMenu.level[0].width-2
oCMenu.level[1].height=22
oCMenu.level[1].regClass="clLevel1"
oCMenu.level[1].overClass="clLevel1over"
oCMenu.level[1].borderX=1
oCMenu.level[1].borderY=1
oCMenu.level[1].align="right"
oCMenu.level[1].offsetX=-(oCMenu.level[0].width-2)/2+20
oCMenu.level[1].offsetY=0
oCMenu.level[1].borderClass="clLevel1border"

/******************************************
Menu item creation:
myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)
*************************************/
oCMenu.makeMenu('top0','',' News','example2.html','')
  oCMenu.makeMenu('sub00','top0','Newest news','/news/index.asp')
    oCMenu.makeMenu('sub001','sub00','- New DHTML API released','','',160,0)
            oCMenu.makeMenu('sub002','sub00','- Explorer 7 is out','','',160,0)
            oCMenu.makeMenu('sub003','sub00','- Opera 6 supports innerHTML','','',160,0)
      oCMenu.makeMenu('sub01','top0','News archive','/news/archive.asp')
      
oCMenu.makeMenu('top1','',' Scripts','/scripts/index.asp')
      oCMenu.makeMenu('sub10','top1','New scripts','/scripts/index.asp?show=new')
      oCMenu.makeMenu('sub11','top1','All scripts','/scripts/index.asp?show=all')
      oCMenu.makeMenu('sub12','top1','Popular scripts','/scripts/index.asp?show=pop')
      
oCMenu.makeMenu('top2','',' Articles','/articles/index.asp')
      oCMenu.makeMenu('sub21','top2','Tutorials','/tutorials/index.asp')
            oCMenu.makeMenu('sub210','sub21','New tutorials','/tutorials/index.asp')
            oCMenu.makeMenu('sub211','sub21','Tutorials archive','/tutorials/archive.asp')
      oCMenu.makeMenu('sub22','top2','Other articles','/articles/index.asp')
            oCMenu.makeMenu('sub220','sub22','New articles','/articles/index.asp?show=new')
            oCMenu.makeMenu('sub221','sub22','Article archive','/articles/archive.asp')

oCMenu.makeMenu('top3','',' Forums','http://www.sdf.sdf.sdf/')
      oCMenu.makeMenu('sub30','top3','General','/forums/forum.asp?FORUM_ID=6&CAT_ID=1&Forum_Title=General+DHTML+issues')
      oCMenu.makeMenu('sub31','top3','Scripts','/forums/forum.asp?FORUM_ID=4&CAT_ID=1&Forum_Title=DHTML+Scripts')
      oCMenu.makeMenu('sub32','top3','Crossbrowser','/forums/forum.asp?FORUM_ID=3&CAT_ID=1&Forum_Title=Crossbrowser+DHTML')
      oCMenu.makeMenu('sub33','top3','CoolMenus','/forums/forum.asp?FORUM_ID=2&CAT_ID=1&Forum_Title=CoolMenus')
      oCMenu.makeMenu('sub34','top3','dhtmlcentral.com','/forums/forum.asp?FORUM_ID=5&CAT_ID=1&Forum_Title=dhtmlcentral%2Ecom')
      oCMenu.makeMenu('sub35','top3','Cool sites','/forums/forum.asp?FORUM_ID=1&CAT_ID=1&Forum_Title=Cool+sites')

oCMenu.makeMenu('top5','',' CoolMenus','mailto:test.html')
      oCMenu.makeMenu('sub50','top5','Examples','/coolmenus/examples.asp')
            oCMenu.makeMenu('sub500','sub50','With frames','/coolmenus/examples.asp?show=with')
            oCMenu.makeMenu('sub501','sub50','Without frames','/coolmenus/examples.asp?show=without')
      oCMenu.makeMenu('sub51','top5','Download','/coolmenus/download.asp')
            oCMenu.makeMenu('sub510','sub51','Download the source code to this menu','/coolmenus/download.asp','',150,40)
      oCMenu.makeMenu('sub52','top5','Tutorial','/coolmenus/tutorial.asp')
            oCMenu.makeMenu('sub520','sub52','Learn how to set up the menu','/coolmenus/tutorial.asp','',150,40)
      oCMenu.makeMenu('sub53','top5','MenuMaker','','',0,0,'','','','','','','','window.open("/coolmenus/maker/","","width=800,height=600")')
            oCMenu.makeMenu('sub530','sub53','Use the menuMaker to make the menu code for you','','',150,40,'','','','','','','','window.open("/coolmenus/maker/","","width=800,height=600")')
      oCMenu.makeMenu('sub54','top5','FAQ','/coolmenus/faq.asp')
            oCMenu.makeMenu('sub540','sub54','Frequently asked questions','coolmenus/faq.asp','',150,40)
      oCMenu.makeMenu('sub55','top5','Help forum','/forums/forum.asp?FORUM_ID=2&CAT_ID=1&Forum_Title=CoolMenus')
            oCMenu.makeMenu('sub550','sub55','Go to this forum and post you problems or suggestions regarding the CoolMenus','/forum/forum.asp?forum_id=2','',150,40)

//Leave this line - it constructs the menu
oCMenu.construct()
0
 

Author Comment

by:diek_nf
ID: 16794538
Hey,
So again you come through. I want to test a couple of things and I have a couple of other things on my agenda tonight. My initial go:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Test JS</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<link href="test_files/cool.css" type=text/css rel=stylesheet>

<script language=JavaScript1.2 src="test_files/coolmenus4.js">
</script>

<meta content="MSHTML 6.00.2800.1543" name=GENERATOR></head>
<body>
<script language=JavaScript1.2 src="test_files/CreateMenu.js">
</script>
</body></html>
--------------------------
Tested with the coolmenus site. I have to try it with one of the live pages. I will be back. I really appreciate your help.

d
0
 

Author Comment

by:diek_nf
ID: 16820662
g,
I was a bit sidetracked this week with another project. I apologize for not getting back to you sooner.

Again perfect, I really appreciate your help,

diek
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

755 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question