wood burning stoves 2.0*
The moose likes Struts and the fly likes Cannot create MENU using Tiles Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Frameworks » Struts
Bookmark "Cannot create MENU using Tiles" Watch "Cannot create MENU using Tiles" New topic
Author

Cannot create MENU using Tiles

piyush sah
Greenhorn

Joined: Apr 11, 2011
Posts: 12
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
 
wood burning stoves
 
subject: Cannot create MENU using Tiles
 
Similar Threads
problem in running a servlet
JSP Page to know what it does
Page displaying in IE6 and older versions but not in Higher versions, chrome and firefox also.
How many people share your name?
Problem with struts-menu for second level submenu