while i tried to validate my php file (write in xhtml and php), I got 2 errors that I can't solve :S the error is:
1 - end tag for "body" omitted, but OMITTAG NO was specified
2 - end tag for "html" omitted, but OMITTAG NO was specified
Here I paste the code of my file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<?php
require 'include/config.php';
connection();
if(isset($_COOKIE['COOKIE_CHECK']) === FALSE) {
setcookie('COOKIE_CHECK', 'ENABLED', time() + 31536000);
header('Location: index.php');
}
?>
<title>Nome da definire - Homepage</title>
<link rel="shortcut icon" href="themes/<?php echo $home_theme; ?>/images/homepage/favicon/favicon.ico" />
<!-- CSS DELLA PAGINA E PLUGIN -->
<link rel="stylesheet" type="text/css" href="themes/<?php echo $home_theme; ?>/css/index.css" title="index" />
<link rel="stylesheet" type="text/css" href="themes/<?php echo $home_theme; ?>/css/news.css" title="index" />
<!-- PLUGIN JQUERY -->
<script src="include/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<!--SCRIPT BROWSER AGGIORNATO
<script type='text/javascript'>
var ba = document.createElement('script');
ba.type = 'text/javascript';
ba.async = true;
ba.src = 'http://www.browseraggiornato.it/browser-updated.js?t=a&p=tl';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ba, s);
</script>-->
<!-- SCRIPT PULSANTI -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
jQuery("ul#menu span").css("opacity","0");
jQuery("ul#menu span").hover(function () {
jQuery(this).stop().animate({
opacity: 1
}, 'slow');
},
function () {
jQuery(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>
<!-- SCRIPT NEWS -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var ticker = function() {
setTimeout(function() {
jQuery('#ticker li:first').animate({
marginTop: '-100px'
}, 800, function() {
jQuery(this).detach().appendTo('ul#ticker').removeAttr('style');
});
ticker();
}, 4000);
};
ticker();
});
</script>
<?php
$login_error = '';
if(isset($_GET['login_error']) === TRUE && $_GET['login_error'] != '') {
if($_GET['login_error'] == 'usrpss') {
$login_error .= ' alert(\'Devi inserire username e password per poter effettuare il login!\');';
} else if($_GET['login_error'] == 'wrong') {
$login_error .= ' alert(\'Hai inserito dei dati errati oppure il tuo account non è ancora stato attivato!\');';
}
}
?>
</head>
<body<?php if($login_error != '') { echo ' onload="' . $login_error . '"'; } ?>>
<?php
if(isset($home_theme) === TRUE && $home_theme != '') {
if(check_directory('themes/' . $home_theme . '') === TRUE) {
if(check_file($path . '/index.php') === TRUE) {
require $path . '/index.php';
} else {
echo 'Il file dell\'index per questo tema non esiste';
}
} else {
echo 'La cartella del tema selezionato non esiste';
}
}
connection_close();
?>
</body>
</html>
please help me :( thank you
Related
Morning !
I have my google maps setup to open an info window on the map however i want the info window to open in the article 'infowin' , does anyone know how i can get the information with is popping up fine on the map to populate in the side bar , can find a working version here
http://www.connectteesvalley.com/busdeparturessidetesting.asp
thank you
<!DOCTYPE html>
<html>
<head>
<!--Force IE standards mode-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
<!--HTML5 IE enabling script-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="styles/desktopcore.css" />
<link rel="stylesheet" type="text/css" href="styles/desktopbus.css" />
<![endif]-->
<!--<link rel="stylesheet" type="text/css" media="(min-width: 551px) and (max-width: 870px)" href="styles/tabletbus.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<!--http://www.google.com/webfonts#ChoosePlace:select Example of Web Font Link-->
<!--<link rel="stylesheet" type="text/css" href="styles/mobilecore.css" media="(min-device-width: 0px) and (max-device-width: 764px)"/>
<link rel="stylesheet" type="text/css" href="styles/mobilebus.css" media="(min-device-width: 0px) and (max-device-width: 764px)"/> -->
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="styles/desktopcore.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="styles/desktopbus.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="styles/mobilecore.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="styles/mobilebus.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<!--Jquery core-->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="gmap_funcs.js"></script>
<script type="text/javascript" src="gmap_funcsv3.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false®ion=GB"></script>
<script type="text/javascript" src="gmap_jscoord-1.1.1.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
<!--//
var userQry = '<%=Request("stopname")%>';
var rtSearchType = ""
function initPg(){
<%if LCase(Request("auto")) = "1" then%>
if (userQry.length <= 3){
getStopsGoByRoute(userQry);
} else {
getStopsGoByTxt(userQry);
document.getElementById('stoptxtquery').value = '<%=Request("stopname")%>';
}
<%end if%>
showMap();
}
var mapOpened = false;
var map;
var currMarker;
var geoCoder;
var startPt;
function showMap() {
var mapObj = document.getElementById('map-canvas');
mapObj.style.display = 'block';
document.getElementById('rt-results').style.display = 'none';
geoCoder = new google.maps.Geocoder();
startPt = new google.maps.LatLng(54.57019583004256,-1.3190460205078125);
var myOptions = {
zoom: 10,
center: startPt,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
map = new google.maps.Map(mapObj, myOptions);
google.maps.event.addListener(map, 'click', function(res){
en = LatLonWGS842OS_func(res.latLng.lat(), res.latLng.lng());
getStopsGoByCoord(parseInt(en.easting), parseInt(en.northing));
/*infowindow = new google.maps.InfoWindow({
content:"<div class='infowin'><div class='inner'><h3>aaaa</h3></div></div>",
position:startPt,
pixelOffset:new google.maps.Size(0,33)
});
infowindow.open(map)
infowindow.setContent("OOOO<br />aaaddad")*/
});
}
function resetMap(){
map.setCenter(startPt);
map.setZoom(10);
gmapDeleteOverlays();
deleteMarkers();
if (infowindow != undefined){
infowindow.close();
}
document.getElementById('foundstops').style.display="none";
}
function getStopsGoByTxt(qry){
document.getElementById('rt-results').style.display = 'none';
document.getElementById('fbloader').style.display="inline";
sendXmlHttpRequestGet("datanew/nextbuses/findstops.asp?stype=bytxt&qry="+qry,function(res){
//alert(res)
eval("stopsJson="+res);
rtSearchType = "text";
foundStops();
},"");
}
function getStopsGoByCoord(e,n){
document.getElementById('rt-results').style.display = 'none';
var ll = OS2LatLonWGS84_func(e, n);
ll = new google.maps.LatLng(ll.lat, ll.lng);
currMarker = gmapAddMarker({position: ll,title:'',map:map, icon:'images/arrow.png'});
document.getElementById('fbloader').style.display="inline";
sendXmlHttpRequestGet("datanew/nextbuses/findstops.asp?stype=bycoords&e="+e+"&n="+n,function(res){
//alert(res)
eval("stopsJson="+res);
rtSearchType = "map";
foundStops();
},"");
}
function gmapGeoCode(qry) {
geoCodeAddr(geoCoder,{'address':qry+", UK", 'region':"UK"}, gmapGeoCodeResults)
}
function gmapGeoCodeResults(res) {
en = LatLonWGS842OS_func(res.lat(), res.lng());
getStopsGoByCoord(en.easting,en.northing);
}
function selectAddress(addr,e,n){
getStopsGoByCoord(e,n);
document.getElementById('stoptxtquery').value = addr;
}
var stopsJson;
var stopMarkers = [];
function foundStops(){
document.getElementById('rt-results').innerHTML = "";
document.getElementById('rt-results').style.display = 'block';
document.getElementById('fbloader').style.display="none";
var selObj = document.getElementById('foundstops');
var ll;
selObj.style.display="block";
selObj.length = 0;
appendToSelectObj(selObj, " --- Select a stop --- ", "");
gmapDeleteOverlays();
deleteMarkers();
stopMarkers = [];
stopsTotal = 0;
if (stopsJson.stops.length < 1){
gmapGeoCode(document.getElementById("stoptxtquery").value);
}
var bounds = new google.maps.LatLngBounds();
for (i=0;i<stopsJson.stops.length;i++){
if (stopsJson.stops[i].town != ""){
stopsJson.stops[i].town = ", "+stopsJson.stops[i].town;
}
//stopsJson.stops[i].name = stopsJson.stops[i].name+", "+stopsJson.stops[i].dir+stopsJson.stops[i].town+" ("+stopsJson.stops[i].sms+")";
appendToSelectObj(selObj,stopsJson.stops[i].name , i);
ll = OS2LatLonWGS84_func(stopsJson.stops[i].e, stopsJson.stops[i].n);
ll = new google.maps.LatLng(ll.lat, ll.lng);
bounds.extend(ll);
map.fitBounds(bounds);
if (browserIE) {
marker = gmapAddMarker({position: ll, map:map, title:stopsJson.stops[i].name});
} else {
marker = gmapAddMarker({position: ll, map:map, title:stopsJson.stops[i].name, icon:'images/new/marker-bus.png'});
}
marker.atco = stopsJson.stops[i].atco;
marker.i = i;
stopMarkers.push(marker);
google.maps.event.addListener(marker, 'click', function(res){
selectStop(this.i, this.title)
});
stopsTotal++;
}
if (selObj.length > 1){
jqueryOrderSelectOpts("foundstops");
selObj[0].text = "--- Select a stop ("+stopsTotal+" stops found) ---"
if (stopsTotal <= 2){
selObj.selectedIndex = 1;
selectStop(stopMarkers[0].i, stopMarkers[0].title)
}
}
if (stopsTotal <= 0){
selObj.style.display="none";
document.getElementById('rt-results').innerHTML = '<div class="warning">No stop was found please select refine your search or select a point on the map</div>';
}
if (map.getZoom() > 15){
map.setZoom(15);
}
}
function deleteMarkers(){
for (i=0;i<stopMarkers.length;i++){
stopMarkers[i].setMap(null);
}
stopMarkers = [];
}
var infowindow;
var selectedI;
function selectStop(indexI, stopName){
selectedI = indexI
//alert(indexI+" ----- "+stopName+"\n"+stopsJson.stops[indexI].name)
var stopName = stopsJson.stops[indexI].name;
var smsCode = stopsJson.stops[indexI].sms;
$('#foundstops').val(indexI);
var mkr = null;
for (i=0;i<stopMarkers.length;i++){
if (stopMarkers[i].i == indexI){
mkr = stopMarkers[i]
}
}
if (infowindow != undefined){
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: "<div class='infowin'><div class='inner'><h3>"+stopName+" </h3><div id='infowin-rtloader' class='realtimeresults'><img src='images/ajax-loader-facebook.gif' /> loading...</div></div></div>",
pixelOffset:new google.maps.Size(0,33)
});
if (mkr != null){
infowindow.open(map,mkr);
getNextBuses(stopsJson.stops[indexI].name, stopsJson.stops[indexI].atco, "", "", "infowin-rtresults", "infowin-rtloader", true);
}
}
var nextbusesNum = 5;
function searchKeyPress(e, func, params){
// look for window.event in case event isn't passed in
if (window.event) { e = window.event; }
if (e.keyCode == 13){
func(params);
return false; // disables submitting form, must have "return searchKeyPress" on the keypress event in textbox
}
}
//-->
</script>
<script type="text/javascript">
<!--//
// Hover navigation images for page:
var navImgHoverArr = ['images/button__myjourney.jpg','images/button__bus.jpg','images/button__rail.jpg','images/button__walk.jpg','images/button__cycle.jpg','images/button__air.jpg','images/button__drive.jpg','images/button__taxi.jpg'];
//-->
</script>
<title>Connect Tees Valley - Live Bus Information</title>
<!--Google Analytics Tracking Snippet - 15 November 2012-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11278574-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body onload="initNav();initPg()" class="realtime">
<section id="allContent">
<header id="topHeader">
<div id="headerContent">
<div id="connectLogo"></div>
<h1>Tees Valley Live Bus Information</h1>
<div id="connectModeLogo"></div>
</div>
</header>
<div id="modeBand"></div>
<section id="mainSection">
<h2>To get departure information from any bus stop in the Tees Valley area<br />please either search for a stop by text search or select a point on the map.</h2>
<article id="busLive">
<input type="text" name="stoptxtquery" id="stoptxtquery" style="width:auto" class="txtgray" onkeyup="searchKeyPress(event, getStopsGoByTxt, document.getElementById('stoptxtquery').value)" value="Stop name, street name, postcode or SMS code" onclick="javascript:if (this.value == 'Stop name, street name, postcode or SMS code'){this.value=''}" />
<input type="submit" id="realSearch" aclass="but" value="Search" align="absmiddle" onclick="getStopsGoByTxt(document.getElementById('stoptxtquery').value)" />
reset
<!--//<label> or </label>
<input type="button" class="but" value="Show map" onclick="showMap()" />//-->
<img src="images/ajax-loader-facebook.gif" id="fbloader" style="display:none" />
<select name="foundstops" id="foundstops" style="display:none" onchange="selectStop(this.value, $('#foundstops option:selected').text())"></select>
<div id="map-canvas" ></div>
<div id="rt-results"></div>
</article>
<article id="infowin">
</article>
</section>
<!--Close Main Section-->
<!--Document Footer-->
<div id="modeBand"></div>
<section id="journeyPlanner">
<form id="jpform" method="post" action="http://www.connectteesvalley.com/jplanner1.asp">
<h2>Connect Journey Planner</h2>
<input type="text" id="jpFrom" name="addrfrom" placeholder="I'm leaving from..." tabindex="1"/>
<input type="text" id="jpTo" name="addrto" placeholder="I'm travelling to..." tabindex="2"/>
<input type="submit" id="jpGo" value="Go" tabindex="3"/>
<br class="clearboth" />
</form>
</section>
<section id="homeSection">
<nav id="mainNavigation">
<ul>
<li id="busButton">Bus</li>
<li id="trainButton">Train</li>
<li id="walkButton">Walk</li>
<li id="cycleButton">Cycle</li>
<li id="driveButton">Drive</li>
<li id="flyButton">Fly</li>
<li id="taxiButton">Taxi</li>
</ul>
</nav>
</section>
<section id="socialSection">
<div id="youtubeLogo"></div>
<div id="twitterLogo"></div>
<div id="facebookLogo"></div>
<h3>Let's journey together</h3>
</section>
<div class="homeBand"></div>
</section>
</body>
</html>
You cannot open an infowindow inside an <article>-element, but you can easily copy the content from the infoWindow to that element.
var article = document.getElementById('infowin'); // <-- get <article id="infowin">
article.innerHTML=infoWindow.getContent();
Sorry to say, I gave up to find the logic in the 347 lines of code in the question. So I dont know exactly where in the code you want it to happend.
You may could take advantage of the content_changed event to track when the content for the infoWindow is changed.
google.maps.event.addListener(infoWindow, 'content_changed', function() {
var article = document.getElementById('infowin');
article.innerHTML=infoWindow.getContent();
});
So whenever the content of the infowindow changes, <article> is updated.
I am using MVC 4 Hot towel template, i have solved it MVC way right now, where i have _viewStart.cshtml:
#{
if (User.Identity.IsAuthenticated)
{
Layout = "~/Views/Shared/_Layout.cshtml";
Page.Title = "Home1";
}
else
{
Layout = "~/Views/Shared/_loginLayout.cshtml";
Page.Title = "Home2";
}}
and in the index.cshtml:
#using System.Web
#using System.Web.Optimization
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
var mq = "##-ms-viewport{width:auto!important}";
msViewportStyle.appendChild(document.createTextNode(mq));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>
#if (#User.Identity.IsAuthenticated)
{
<div id="applicationHost">
#Html.Partial("_splash")
</div>
#Scripts.Render("~/scripts/vendor");
if(HttpContext.Current.IsDebuggingEnabled) {
#Html.AntiForgeryToken()
<script>
window.userId = "#User.Identity.Name";
console.log(window.userId);
</script>
<script type="text/javascript" src="~/App/durandal/amd/require.js" data-main="#Url.Content("~/App/main")"></script>
} else {
<!-- Remember to run the Durandal optimizer.exe to create the main-built.js -->
<script type="text/javascript" src="~/App/main-built.js"></script>
}
}
else
{
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<div id="login">
<p>hello world</p>
</div>
}
Ive created a separate viewmodel user for login:
define(['services/logger'], function (logger) {
var vm = {
activate: activate(),
userName: ko.observable(),
password: ko.observable()
};
return vm;
//#region Internal Methods
function activate() {
logger.log('login View Activated', null, 'login', true);
return true;
}
//#endregion
});
and created login view:
<section>
<h2>My login model without content yet</h2>
</section>
(i know i am not using viewmodel in this view, but its only for test)
How do i do same functionality in Durandal? and is it even possible?
No hate, i am new to Single page application and durandal + breeze.js + knockout.
I would suggest using the built in ASP.net authentication / login mechanisms - ie <authentication> in web.config.
I found https://github.com/jamesc88/Durandal_Serverside_Authentication useful.
is there a way to make Pin It button work with OG
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
<script type="text/javascript">
(function (w, d, load) {
var script,
first = d.getElementsByTagName('SCRIPT')[0],
n = load.length,
i = 0,
go = function () {
for (i = 0; i < n; i = i + 1) {
script = d.createElement('SCRIPT');
script.type = 'text/javascript';
script.async = true;
script.src = load[i];
first.parentNode.insertBefore(script, first);
}
}
if (w.attachEvent) {
w.attachEvent('onload', go);
} else {
w.addEventListener('load', go, false);
}
}(window, document,
['//assets.pinterest.com/js/pinit.js']
));
</script>
Just wonder if this is something that someone has already figured out or not? Would be nice if this could work that way, will make life simple.
Thanks in advance for any help you can offer!
Here is what I have done to make it work, but not sure if this would be the best way of doing it since it requires to use php echo to echo content of the open graph meta content.
<meta property="og:title" content="Family Budget Spreadsheet for Excel">
<meta property="og:type" content="product">
<meta property="og:url" content="<?php $og_url = $_SERVER['HTTP_HOST'].$_SERVER['SCRIPT_NAME']; echo $og_url ?>">
<meta property="og:image" content="<?php $og_image = 'http://www.mysite.com/images/imageIneed.jpg' ; echo $og_image ?>">
<meta property="og:site_name" content="My Sites Name">
<meta property="og:description" content="<?php $og_description = 'My page description'; echo $og_description ?>">
then added following code taken from Pinterest
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
<script type="text/javascript">
(function (w, d, load) {
var script,
first = d.getElementsByTagName('SCRIPT')[0],
n = load.length,
i = 0,
go = function () {
for (i = 0; i < n; i = i + 1) {
script = d.createElement('SCRIPT');
script.type = 'text/javascript';
script.async = true;
script.src = load[i];
first.parentNode.insertBefore(script, first);
}
}
if (w.attachEvent) {
w.attachEvent('onload', go);
} else {
w.addEventListener('load', go, false);
}
}(window, document,
['//assets.pinterest.com/js/pinit.js']
));
</script>
It is working just fine, but I am sure there is much better way of doing this, so if you have one, please share it here.
Am playing with Google Maps V3 API and StyledMarkers. The data is derived from a PHP/MySQL query returning several hundred points.
The code below returns everything I need and works fine EXCEPT for getting it to zoom to an approriate level (which in this case I know is 10).
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title><?php echo returnval("event_name","events",$_GET['eid']); ?> Map - No Refresh</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="StyledMarker.js"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(<?php echo $evlat; ?>, <?php echo $evlng; ?>);
var bounds = new google.maps.LatLngBounds();
var myOptions = {
zoom: 9,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("show_map"), myOptions);
<?php
$iconcntr = 0;
while ($row = mysql_fetch_array($result)) {
$iconcntr ++;
$rfa_no = $row['rfa_no'];
$longitude = $row['longitude'];
$latitude = $row['latitude'];
if ($row['rfa_priority'] == 1) {
$iconclr = "FF0000";
} elseif ($row['rfa_priority'] == 2) {
$iconclr = "FFFF00";
} else {
$iconclr = "FFFFFF";
}
?>
var varLatLng = new google.maps.LatLng(<?php echo $latitude; ?>,<?php echo $longitude; ?>);
bounds.extend(varLatLng);
var styleMaker<?php echo $iconcntr; ?> = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"<?php echo $iconclr; ?>",text:"<?php echo $rfa_no; ?>"}),position:new google.maps.LatLng('<?php echo $latitude; ?>', '<?php echo $longitude; ?>'),flat:true,zIndex:<?php echo ($iconcntr+1000); ?>,map:map});
<?php
}
?>
map.fitbounds(bounds);
}
</script>
</head />
<body style="margin:0px; padding:0px;" onload="initialize()" />
<div id="show_map" style="width:100%; height:100%;"></div>
</body>
</html>
Anyone have any idea what I'm doing wrong? Not very strong in the programming department.
JavaScript is case-sensitive.
Use map.fitBounds(bounds) instead of map.fitbounds(bounds). Documentation
You should have seen an error in the Javascript Console about fitbounds not being a valid method or something similar.
Contents of menucontents.jsp
<%# taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%# taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%# taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:subview id="menucontents">
<f:loadBundle basename="com.cpc.resources.menu" var="menu"/>
<t:div id="hNav_outer">
<t:panelNavigation2 id="nav1" layout="list" itemClass="off" activeItemClass="on" openItemClass="on"
renderAll="true">
<t:commandNavigation2 value="#{menu['menu_Home']}" style="padding-left: 0px;">
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_Home']}"/>
</t:commandNavigation2>
</t:commandNavigation2>
<t:commandNavigation2 value="#{menu['menu_admin']}" style="padding-left: 150px;">
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_admin_change_password']}"/>
</t:commandNavigation2>
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_admin_forgot_password']}"/>
</t:commandNavigation2>
</t:commandNavigation2>
</t:panelNavigation2>
</t:div>
</f:subview>
Contents of menu.jsp
<%# taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%# taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%# taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8" />
<title>MyFaces - the free JSF Implementation</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/pages/css/basic.css" />
</head>
<body>
<f:view>
<jsp:include page="menucontents.jsp" />
</f:view>
</body>
</html>
view source from broswer
<html>
<head>
<script type="text/javascript" src="/cpcnew/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/12973772/navmenu.htmlnavmenu.HtmlPanelNavigationMenu/HMenuIEHover.js"><!--
//--></script>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8" />
<title>MyFaces - the free JSF Implementation</title>
<link rel="stylesheet" type="text/css" href="/cpcnew/pages/css/basic.css" />
</head>
<body>
<div id="menucontents:hNav_outer">
<ul id="menucontents:nav1">
<li class="off"><script type="text/javascript"><!--
function oamSetHiddenInput(formname, name, value)
{
var form = document.forms[formname];
if(typeof form.elements[name]=='undefined')
{
var newInput = document.createElement('input');
newInput.setAttribute('type','hidden');
newInput.setAttribute('id',name);
newInput.setAttribute('name',name);
newInput.setAttribute('value',value);
form.appendChild(newInput);
}
else
{
form.elements[name].value=value;
}
}
function oamClearHiddenInput(formname, name, value)
{
var form = document.forms[formname];
if(typeof form.elements[name]!='undefined')
{
form.elements[name].value=null;
}
}
function oamSubmitForm(formName, linkId, target, params)
{
var clearFn = 'clearFormHiddenParams_'+formName.replace(/-/g, '\$:').replace(/:/g,'_');
if(typeof eval('window.'+clearFn)!='undefined')
{
eval('window.'+clearFn+'(formName)');
}
if(typeof window.getScrolling!='undefined')
{
oamSetHiddenInput(formName,'autoScroll',getScrolling());
}
var oldTarget = '';
if((typeof target!='undefined') && target != null)
{
oldTarget=document.forms[formName].target;
document.forms[formName].target=target;
}
if((typeof params!='undefined') && params != null)
{
for(var i=0; i<params.length; i++)
{
oamSetHiddenInput(formName,params[i][0], params[i][1]);
}
}
oamSetHiddenInput(formName,formName +':'+'_idcl',linkId);
if(document.forms[formName].onsubmit)
{
var result=document.forms[formName].onsubmit();
if((typeof result=='undefined')||result)
{
document.forms[formName].submit();
}
}
else
{
document.forms[formName].submit();
}
if(oldTarget==null) oldTarget='';
document.forms[formName].target=oldTarget;
if((typeof params!='undefined') && params != null)
{
for(var i=0; i<params.length; i++)
{
oamClearHiddenInput(formName,params[i][0], params[i][1]);
}
}
oamClearHiddenInput(formName,formName +':'+'_idcl',linkId);return false;
}
//--></script>Home<ul style="padding-left: 0px;">
<li class="off">› Home</li></ul></li>
<li class="off">Administrator<ul style="padding-left: 150px;">
<li class="off">› Change Password</li>
<li class="off">› Forgot Password</li></ul></li>
</ul></div>
<script type="text/javascript"><!--
function getScrolling()
{
var x = 0; var y = 0;if (self.pageXOffset || self.pageYOffset)
{
x = self.pageXOffset;
y = self.pageYOffset;
}
else if ((document.documentElement && document.documentElement.scrollLeft)||(document.documentElement && document.documentElement.scrollTop))
{
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
else if (document.body)
{
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
return x + "," + y;
}
//--></script>
</body>
</html>
It look much like that the CSS is relying on specific HTML element ID's in the HTML source. Before splitting the content to a <f:subview id="menucontents">, the following elements
<div id="menucontents:hNav_outer">
<ul id="menucontents:nav1">
were generated as follows
<div id="hNav_outer">
<ul id="nav1">
The Tomahawk CSS example stylesheet is apparently relying on those IDs
#hNav_outer {
...
}
#nav1 {
...
}
However, with the split to a <f:subview id="menucontents">, JSF will prepend the generated HTML element ID's with the ID of the <f:subview>. So you need to alter the CSS as well.
#menucontents\3A hNav_outer {
...
}
#menucontents\3A nav1 {
...
}
There's a special story behind \3A: the colon : is an illegal character in CSS identifiers. This was an oversight in the early JSF 1.x versions. In JSF 2.x this was fixed by making the JSF client ID separator : configureable (you could specify it to be for example _ which is in turn valid in CSS).
You could escape the colon as follows as well
#menucontents\:hNav_outer {
...
}
#menucontents\:nav1 {
...
}
But that doesn't work in IE6/7, hence the recommendation to use \3A (with the trailing space!) instead of the colon in CSS selectors.