[opencms-dev] OpenCMS 5.0 & Javascript
visser arthur (02VOEMDIAHTKAND)
arthur.visser at student.groept.be
Fri Feb 11 17:11:28 CET 2005
I am a new user of OpenCMS. Evertything is installed and seems to be working fine.
I tried to create a template based on an existing template (from a website) - see attached text file) - which includes Javascript for the menustructure and some other functionality. I also included a css file (see code below):
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- This links the XMLTemplate mechanism with the JSP templates.
So far it is required because the WYSIWYG editor (OpenCMS version 5.0) still is
completly based on the XMLTemplates. -->
<xmltemplate>
<!-- Define the stylesheet for the WYSIWYG editor -->
<stylesheet>/system/modules/nl.bodyplan.site/resources/bodyplan.css</stylesheet>
<!-- Template description - main template for the Body Plan Sport website -->
<template>
<element name="mybodyplan"/>
</template>
<!-- This describes the "mybodyplan" element used above.
Important: The element must NOT be called "frametempate",
because in that case the stylesheet does not work. -->
<elementdef name="mybodyplan">
<!-- Always use this class tag when inserting a JSP element in your page: -->
<class>com.opencms.flex.CmsJspTemplate</class>
<!-- Just add the path to your JSP here: -->
<template>../jsptemplates/main_template_bodyplan.jsp</template>
</elementdef>
</xmltemplate>
I have create a page index.html using the template. However, when I go to 'Edit page' and click on 'preview' the page is displayed with the temlate and content but the menustructure is not interpreted correctly (a pulldown menu is already 'rolled out'). It looks like the Javascript is not porperly interpreted. Anybody any idea?
What can I do to correct this?
OpenCMS 5.0.1
XP Home SP2
Java SDK 1.4.2
Tomcat 5.0.18 (started via Eclipse,not as service)
Thanks for your help!
Arthur
-------------- next part --------------
<%@ page session="false" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<cms:template element="head">
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><cms:property name="title" escapeHtml="true"/></title>
<meta HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; CHARSET=<cms:property name="content-encoding" default="ISO-8859-1" />">
<!--<link type="text/css" rel="stylesheet" href="<cms:link>../resources/bps.css</cms:link>">-->
<script language ="JavaScript" type="text/JavaScript">
/* Drop Down Menu */
<!--
var currentMenu = null;
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
actuator.onmouseover = function() {
if (currentMenu) {
currentMenu.style.visibility = "hidden";
this.showMenu();
}
}
actuator.onclick = function() {
if (currentMenu == null) {
this.showMenu();
}
else {
currentMenu.style.visibility = "hidden";
currentMenu = null;
}
return false;
}
actuator.showMenu = function() {
menu.style.left = ((this.offsetLeft)-20) + "px";
menu.style.top = this.offsetTop + this.offsetHeight + "px";
menu.style.visibility = "visible";
menu.style.background = "#FF0000";
currentMenu = menu;
}
}
window.onload = function() {
initializeMenu("ProgramMenu", "ProgramActuator");
initializeMenu("FaciliteitMenu", "FaciliteitActuator");
initializeMenu("LidmaatMenu", "LidmaatActuator");
initializeMenu("JeugdMenu", "JeugdActuator");
initializeMenu("AgendaMenu", "AgendaActuator");
initializeMenu("AanvraagMenu", "AanvraagActuator");
}
/* Actie lidmaatschap */
function forward(){
parent.document.location="contact.htm";
}
function check() {
if(document.leden.member[0].checked==true)
{
forward();}
if(document.leden.member[1].checked==true)
{
parent.document.location="lidwijzigen.htm";}
if(document.leden.member[2].checked==true)
{
alert('Stoppen');}
}
/* Disable MouseClick */
function disableRightClick(e)
{
var message = "Right Mouse Click disabled!";
if(!document.rightClickDisabled) // initialize
{
if(document.layers)
{
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = disableRightClick;
}
else document.oncontextmenu = disableRightClick;
return document.rightClickDisabled = true;
}
if(document.layers || (document.getElementById && !document.all))
{
if (e.which==2||e.which==3)
{
alert(message);
return false;
}
}
else
{
alert(message);
return false;
}
}
disableRightClick();
//-->
</script>
<!-- TemplateParam name="onload" type="text" value="initializeMenu('ProgramMenu', 'ProgramActuator');initializeMenu('FaciliteitMenu', 'FaciliteitActuator');
initializeMenu('LidmaatMenu', 'LidmaatActuator');initializeMenu('JeugdMenu', 'JeugdActuator');
initializeMenu('AgendaMenu', 'AgendaActuator');initializeMenu('AanvraagMenu', 'AanvraagActuator');" -->
</head>
<body>
<h2>My first template head</h2>
<div id="kop">
<div id="bps">BODY PLAN SPORT</div>
<div id="slogan">"Gezonde sportbeoefening voor iedereen"</div>
</div>
<div id="nav-org" style="z-index:7">
<table id="menu-bar">
<tr>
<td width="10%" id="home"><a href="../main.htm">Home</a></td>
<td width="10%" id="mijnbody"><a href="../mijnbody.htm">Mijn Body</a></td>
<td width="10%" id="programma"> <div id="mainMenu">
<ul id="menuList">
<li class="menubar"> <a href="../program.htm"
id="ProgramActuator"
class="actuator"
accesskey="p">Programma</a>
<ul id="ProgramMenu" class="menu" style="z-index: 6">
<li><a href="../program.htm">Overzicht</a></li>
<li><a href="../Programma/bbb.htm">BBB</a></li>
<li><a href="../Programma/bodybalance.htm">Body Balance</a></li>
<li><a href="../Programma/bodycombat.htm">Body Combat</a></li>
<li><a href="../Programma/cardio.htm">Cardio</a></li>
<li><a href="../Programma/circuit.htm">Circuit</a></li>
<li><a href="../Programma/fitness.htm">Fitness</a></li>
<li><a href="../Programma/jiujitsu.htm">Jiu Jitsu</a></li>
<li><a href="../Programma/judo.htm">Judo</a></li>
<li><a href="../Programma/karate.htm">Karate</a></li>
<li><a href="../Programma/kickboksen.htm">Kickboksen</a></li>
<li><a href="../Programma/powerplate.htm">Powerplate</a></li>
<li><a href="../Programma/spinning.htm">Spinning</a></li>
<li><a href="../Programma/sportklimmen.htm">Sportklimmen</a></li>
<li><a href="../Programma/steps.htm">Steps</a></li>
<li><a href="../Programma/streetdance.htm">Streetdance</a></li>
<li><a href="../Programma/totaltraining.htm">Total Training</a></li>
<li><a href="../Programma/zwanger.htm">Zwanger&Fit</a></li>
</ul>
</li>
</ul>
</div></td>
<td width="10%" id="jeugd"> <div id="mainMenu">
<ul id="menuList">
<li class="menubar"> <a href="../jeugd.htm"
id="JeugdActuator"
class="actuator"
accesskey="j">Jeugd</a>
<ul id="JeugdMenu" class="menu" style="z-index: 6">
<li><a href="../jeugd.htm">Overzicht</a></li>
<li><a href="../Jeugd/fundance.htm">Fundance</a></li>
<li><a href="../Programma/karate.htm">Karate</a></li>
<li><a href="../Programma/sportklimmen.htm">Kinder Klim Club</a></li>
<li><a href="../Programma/jiujitsu.htm">Jiu Jitsu</a></li>
<li><a href="../Jeugd/sportinstuif.htm">SportInstuif</a></li>
<li><a href="../Jeugd/stoeien.htm">Stoeien&Groeien</a></li>
<li><a href="../Programma/streetdance.htm">Streetdance</a></li>
<li><a href="../Jeugd/zelfverdediging.htm">Zelfverdediging</a></li>
</ul>
</li>
</ul>
</div></td>
<td width="10%" id="agenda"> <div id="mainMenu">
<ul id="menuList">
<li class="menubar"> <a href="../agenda.htm"
id="AgendaActuator"
class="actuator"
accesskey="a">Agenda</a>
<ul id="AgendaMenu" class="menu" style="z-index: 6">
<li><a href="../agenda.htm">Lesroosters</a></li>
<li><a href="http://bodyplansport.blogspot.com/">Evenementenkalender</a></li>
</ul>
</li>
</ul>
</div></td>
<td width="10%" id="accommodatie"> <div id="mainMenu">
<ul id="menuList">
<li class="menubar"> <a href="../faciliteiten.htm"
id="FaciliteitActuator"
class="actuator"
accesskey="f">Faciliteiten</a>
<ul id="FaciliteitMenu" class="menu" style="z-index: 6">
<li><a href="../faciliteiten.htm">Sauna/Zonnebank</a></li>
<li><a href="../faciliteiten.htm">Kinderoppas</a></li>
<li><a href="../faciliteiten.htm">Accommodatie</a></li>
</ul>
</li>
</ul>
</div></td>
<td width="10%" id="lid"> <div id="mainMenu">
<ul id="menuList">
<li class="menubar"> <a href="../lidmaatschap.htm"
id="LidmaatActuator"
class="actuator"
accesskey="l">Lidmaatschap</a>
<ul id="LidmaatMenu" class="menu" style="z-index: 6">
<li><a href="../tarieven.htm">Tarieven</a></li>
<li><a href="../lidmaatschap.htm">Lidmaatschap</a></li>
</ul>
</li>
</ul>
</div></td>
<td width="10%" id="aanvraag"> <div id="mainMenu">
<ul id="menuList">
<li class="menubar"> <a href="../aanvraag.htm"
id="AanvraagActuator"
class="actuator"
accesskey="v">Aanvragen</a>
<ul id="AanvraagMenu" class="menu" style="z-index: 6">
<li><a href="../aanvraag.htm">Klim cursus</a></li>
<li><a href="../aanvraag.htm">Skate cursus</a></li>
<li><a href="../aanvraag.htm">Bedrijfsfitness</a></li>
<li><a href="../aanvraag.htm">Cursus Zelfverdediging</a></li>
<li><a href="../aanvraag.htm">Klimcafé Bedrijven</a></li>
<li><a href="../aanvraag.htm">Bedrijfsuitjes</a></li>
<li><a href="../aanvraag.htm">Zaalverhuur</a></li>
<li><a href="../aanvraag.htm">Teambuilding</a></li>
<li><a href="../aanvraag.htm">Sportdagen</a></li>
<li><a href="../aanvraag.htm">Judo Feestjes</a></li>
<li><a href="../aanvraag.htm">Sport&Spel Feestjes</a></li>
<li><a href="../aanvraag.htm">Klimfeestjes</a></li>
</ul>
</li>
</ul>
</div></td>
<td width="10%" id="faq"><a href="../FAQ/faq.htm">FAQ</a></td>
<td width="10%" id="contact"><a href="../contact.htm">Contact</a></td>
</tr>
</table>
</div>
<style type="text/css" media="screen">
ul#ProgramMenu a:visited ,ul#ProgramMenu a:link,
ul#AgendaMenu a:visited ,ul#AgendaMenu a:link
ul#JeugdMenu a:visited ,ul#JeugdMenu a:link,
ul#AanvraagMenu a:visited ,ul#AanvraagMenu a:link,
ul#LidmaatMenu a:visited ,ul#LidmaatMenu a:link,
ul#FaciliteitMenu a:visited ,ul#FaciliteitMenu a:link
{
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #FFFFFF;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
background : #FF0000;}
ul#ProgramMenu a:hover, ul#AgendaMenu a:hover
,ul#JeugdMenu a:hover, ul#AanvraagMenu a:hover,
ul#LidmaatMenu a:hover, ul#FaciliteitMenu a:hover{
font : 10px Verdana, Lucida, Arial, Helvetica, sans-serif;
color : #0000FF;
text-decoration: none;
font-style: normal;
margin: 2px;
vertical-align: middle;
text-align: center;
background : #FFFFFF; }
</style>
<!-- Main page body starts here -->
</cms:template>
<cms:template element="body">
<div id="main">
<div id="inhoud" ><cms:include element="body" /></div>
</div>
<div id="news"><p id="hotnews" align="center"><a href="http://bodyplansport.blogspot.com/" target="_blank">Laatste
Nieuws Hier!</a></p><cms:include element="news" /></div>
</cms:template>
<cms:template element="foot">
<div id="voet" style="z-index: 0" >
<div id="motto" style="z-index: 0" >Wat we doen, doen we goed!</div>
<div id="adres"style="z-index: 0" >Body Plan Sport - Corridor 84 - 3893 BE Zeewolde
- Tel. 036-522.2418</div>
</div>
<!-- Main page body ends here -->
<h2>My first template foot</h2>
</body>
</html>
</cms:template>
More information about the opencms-dev
mailing list