Win a copy of Testing JavaScript Applications this week in the HTML Pages with CSS and JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Liutauras Vilda
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • fred rosenberger
  • salvin francis
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Carey Brown

Cannot create MENU using Tiles

 
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello everyone,
I am implementing tiles.(And its is working absolutely fine). But the problem is the "MENU".

1. Here is the BaseLayout.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles"; prefix="tiles" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">;

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
<tiles:insertAttribute name="title" ignore="true" />
</title>

</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" align="center">
<tr>
<td height="30" colspan="2">
<tiles:insertAttribute name="header" />
</td>
</tr>
<tr>
<td width="350"><tiles:insertAttribute name="menu" /></td>
</tr>
<tr>
<td width="350">
<tiles:insertAttribute name="body" />
</td>
</tr>
<tr>
<td height="30" colspan="2">
<tiles:insertAttribute name="footer" />
</td>
</tr>
</table>
</body>
</html>

2. All other jsp pages like header.jsp footer.jsp body.jsp etc are working fine,but I see no effect of menu.jsp while using tiles. ALTHOUGH menu.jsp works absolutely fine when ran alone.i.e (if i run only menu.jsp without using tiles it works absolutely fine)

3. Here's my menu.jsp

<html>
<head>

<style type="text/css">

body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin-top:0px;

}
.bodyText{
padding-left:10px;
padding-right:10px;
border-top:1px solid #000000;
}
.bodyText p{
margin-top:5px;
}
#mainContainer{
width:760px;
height:600px;
border:1px solid #000000;
margin:0 auto;
background-image:url('../../images/heading3.gif');
background-repeat:no-repeat;
padding-top:85px;
}
#mainMenu{
background-color: #FFF; /* Background color of main menu */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Fonts of main menu items */
font-size:0.9em; /* Font size of main menu items */
border-bottom:1px solid #000000; /* Bottom border of main menu */
height:30px; /* Height of main menu */

position:relative; /* Don't change this position attribute */

}
#mainMenu a{
padding-left:5px; /* Spaces at the left of main menu items */
padding-right:5px; /* Spaces at the right of main menu items */
font-weight:bold;
/* Don't change these two options */
position:absolute;
bottom:-1px; /* Change this value to -2px if you're not using a strict doctype */
}
#submenu{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font of sub menu items */
background-color:#E2EBED; /* Background color of sub menu items */

width:100%; /* Don't change this option */

}
#submenu div{
white-space:nowrap; /* Don't change this option */

}
/*
Style attributes of active menu item
*/
#mainMenu .activeMenuItem{
/* Border options */
border-left:1px solid #000000;
border-top:1px solid #000000;
border-right:1px solid #000000;
background-color: #E2EBED; /* Background color */

cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
}

#mainMenu .activeMenuItem img{
position:absolute;
bottom:0px;
right:0px;
}

/*
Style attributes of inactive menu items
*/
#mainMenu .inactiveMenuItem{
color: #000; /* Text color */
cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
}

#submenu a{
text-decoration:none; /* No underline on sub menu items - use text-decoration:underline; if you want the links to be underlined */
padding-left:5px; /* Space at the left of each sub menu item */
padding-right:5px; /* Space at the right of each sub menu item */
color: #000; /* Text color */
font-size:0.9em;
}

#submenu a:hover{
color: #FF0000; /* Red color when the user moves the mouse over sub menu items */
}

</style>
<script type="text/javascript">

var menuAlignment = 'left'; // Align menu to the left or right?
var topMenuSpacer = 0; // Horizontal space(pixels) between the main menu items
var activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseover
var leftAlignSubItems = false; // left align sub items t

var activeMenuItem = false; // Don't change this option. It should initially be false
var activeTabIndex = 0; // Index of initial active tab (0 = first tab) - If the value below is set to true, it will override this one.
var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie

var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1;


function Get_Cookie(name) {
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
// This function has been slightly modified
function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
document.cookie = cookieString;
}

function showHide()
{
if(activeMenuItem){
activeMenuItem.className = 'inactiveMenuItem';
var theId = activeMenuItem.id.replace(/[^0-9]/g,'');
document.getElementById('submenu_'+theId).style.display='none';
var img = activeMenuItem.getElementsByTagName('IMG');
if(img.length>0)img[0].style.display='none';
}

var img = this.getElementsByTagName('IMG');
if(img.length>0)img[0].style.display='inline';

activeMenuItem = this;
this.className = 'activeMenuItem';
var theId = this.id.replace(/[^0-9]/g,'');
document.getElementById('submenu_'+theId).style.display='block';



if(rememberActiveTabByCookie){
Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);
}
}

function initMenu()
{
var mainMenuObj = document.getElementById('mainMenu');
var menuItems = mainMenuObj.getElementsByTagName('A');
if(document.all){
mainMenuObj.style.visibility = 'hidden';
document.getElementById('submenu').style.visibility='hidden';
}
if(rememberActiveTabByCookie){
var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';
cookieValue = cookieValue.replace(/[^0-9]/g,'');
if(cookieValue.length>0 && cookieValue<menuItems.length){
activeTabIndex = cookieValue/1;
}
}

var currentLeftPos = 15;
for(var no=0;no<menuItems.length;no++){
if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;
menuItems[no].id = 'mainMenuItem' + (no+1);
if(menuAlignment=='left')
menuItems[no].style.left = currentLeftPos + 'px';
else
menuItems[no].style.right = currentLeftPos + 'px';
currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer;

var img = menuItems[no].getElementsByTagName('IMG');
if(img.length>0){
img[0].style.display='none';
if(MSIE && !Opera && navigatorVersion<7){
img[0].style.bottom = '-1px';
img[0].style.right = '-1px';
}
}

if(no==activeTabIndex){
menuItems[no].className='activeMenuItem';
activeMenuItem = menuItems[no];
var img = activeMenuItem.getElementsByTagName('IMG');
if(img.length>0)img[0].style.display='inline';

}else menuItems[no].className='inactiveMenuItem';
if(!document.all)menuItems[no].style.bottom = '-1px';
if(MSIE && navigatorVersion < 6)menuItems[no].style.bottom = '-2px';


}

var mainMenuLinks = mainMenuObj.getElementsByTagName('A');

var subCounter = 1;
var parentWidth = mainMenuObj.offsetWidth;
while(document.getElementById('submenu_' + subCounter)){
var subItem = document.getElementById('submenu_' + subCounter);

if(leftAlignSubItems){
// No action
}else{
var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px';
subItem.style.position ='absolute';
if(subItem.offsetWidth > parentWidth){
leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft = leftPos + 'px';
subItem.style.position ='static';


}
if(subCounter==(activeTabIndex+1)){
subItem.style.display='block';
}else{
subItem.style.display='none';
}

subCounter++;
}
if(document.all){
mainMenuObj.style.visibility = 'visible';
document.getElementById('submenu').style.visibility='visible';
}
document.getElementById('submenu').style.display='block';
}
window.onload = initMenu;
</script>


</head>
<body>
<!-- This is the start of the menu -->
<div id="mainMenu">
<a>Products</a>
<a>Support</a>
<a>About us</a>
<a>Download</a>
</div>
<div id="submenu">
<!-- The first sub menu -->
<div id="submenu_1">
<a href="">Product 1</a>
<a href="">Product 2</a>
<a href="">Product 3</a>
</div>
<!-- Second sub menu -->
<div id="submenu_2">
<a href="">Phone</a>
<a href="">Email</a>
<a href="">Knowledge base</a>
</div>
<!-- Third sub menu -->
<div id="submenu_3">
<a href="">History</a>
<a href="">The team</a>
<a href="">Contact us</a>
<a href="">Visions</a>
</div>
<!-- Fourth sub menu -->
<div id="submenu_4">
<a href="">Patches</a>
<a href="">Whitepapers</a>
<a href="">Tab menu</a>
<a href="">Color picker</a>
<a href="">Window scripts</a>
<a href="">Games</a>

</div>
</div>

</body>
</html>

Please let me know the solution its been a couple of days now.Thank You.

Regards,
Piyush
 
Space pants. Tiny ad:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
    Bookmark Topic Watch Topic
  • New Topic