Response title
This is preview!
Can't get Ipod menu to work on sub directory pages (working on root pages)
in Using jQuery UI
•
12 years ago
Hi my first post here so be gentle please.
I've managed to get this Ipod menu (also found here) to work on my root directory webpages (http://domain/working) . (see index.jpg)
When I head over to a subdirectory (http://domain/sub/sadface) the menu appears (see products.jpg)
Although on click takes me through to http://domain/menuContent.html. (see failed.jpg)
I figure it's something to do with relative linking getting messed up when I call the header.php file from a sub directory. Im all out of ideas =( . I've posted the index page source codes, although I dont think the error lies there. See the PHP files at the bottom which are "included()" on all pages.
let me know if this is the wrong place for such a post,
Cheers.
*UPDATE*
- This problem still exists, although is currently not an issue as I have moved all pages to the root directory,
--source--
I've managed to get this Ipod menu (also found here) to work on my root directory webpages (http://domain/working) . (see index.jpg)
When I head over to a subdirectory (http://domain/sub/sadface) the menu appears (see products.jpg)
Although on click takes me through to http://domain/menuContent.html. (see failed.jpg)
I figure it's something to do with relative linking getting messed up when I call the header.php file from a sub directory. Im all out of ideas =( . I've posted the index page source codes, although I dont think the error lies there. See the PHP files at the bottom which are "included()" on all pages.
let me know if this is the wrong place for such a post,
Cheers.
*UPDATE*
- This problem still exists, although is currently not an issue as I have moved all pages to the root directory,
--source--
- Index page at root level (works)
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php include("include/head.php");?>
<body>
<div id="bg">
<div id="main">
<?php include("include/header.php");?>
<!-- content begins -->
<div id="content">
text n graphics removed because of TLDR factor
</div>
<!-- content ends -->
<?php include("include/footer.php"); ?>
</div>
</div>
</div>
</body>
</html>
Index page at /products/index.php (broken)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php include $_SERVER["DOCUMENT_ROOT"] . ("/include/head.php"); ?>
<body>
<div id="bg">
<div id="main">
<?php include $_SERVER["DOCUMENT_ROOT"] . ("/include/header.php"); ?>
<!-- content begins -->
<div id="content">
text n graphics removed because of TLDR factor
</div>
<div style="clear: both"></div>
<!-- content ends -->
<?php include $_SERVER["DOCUMENT_ROOT"] . "/include/footer.php"; ?>
</div>
</div>
</body>
</html>
Includes
HEAD.PHP
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Breid Creations - Home Page</title>
<meta name="keywords" content="Fibreglass Toilets, light, robust, cost effective, modifications, fittings, stainless steel, manufacturers, manufacturing, innovative, specialized, composite products, specialized composite products, repairs, distributors, toilets, disabled toilets, vandal resistant, fibreglass, custom, nightclub, councils, public toilets" />
<meta name="description" content=" Breid manufacture quality fibreglass toilets. Our toilets are used for a wide variety of applications where appearance is vital but so is toughness and strength. We make sure neither is compromised." />
<meta name="google-site-verification" content="MAiKohKQ8h9EzLf14v6u5Sfd5zItMpRBL7ZoUL_xCE0" />
<link type="text/css" href="/styles.css" rel="stylesheet" />
<link type="text/css" href="/fg.menu.css" media="screen" rel="stylesheet" />
<link type="text/css" href="/theme/ui.all.css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/fg.menu.js"></script>
<style type="text/css">
#menuLog { font-size:1.4em; margin:20px; }
.hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
a.fg-button { float:left; }
button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
.fg-button-icon-left { padding-left: 2.1em; }
.fg-button-icon-right { padding-right: 2.1em; }
.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; } /* solo icon buttons must have block properties for the text-indent to work */
.fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }
</style>
<!-- style exceptions for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
.fg-menu-ipod .fg-menu li { width: 95%; }
.fg-menu-ipod .ui-widget-content { border:0; }
</style>
<![endif]-->
<script type="text/javascript">
$(function(){
// BUTTONS
$('.fg-button').hover(
function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },
function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }
);
// MENUS
$('#flat').menu({
content: $('#flat').next().html(), // grab content from this page
showSpeed: 400
});
$('#hierarchy').menu({
content: $('#hierarchy').next().html(),
crumbDefaultText: ' '
});
$('#hierarchybreadcrumb').menu({
content: $('#hierarchybreadcrumb').next().html(),
backLink: false
});
// or from an external source
$.get('menuContent.html', function(data){ // grab content from another page
$('#flyout').menu({ content: data, flyOut: true });
});
});
</script>
<!-- theme switcher button -->
<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
<script type="text/javascript"> $(function(){ $('<div style="position: absolute; left: 5px; top: 5px;" />').appendTo('body').themeswitcher(); }); </script>
</head>
HEADER.PHP
<!-- header begins -->
<div id="header">
<div id="logo"><p>Welcome to Breid Creations, home of the SupaTuff Toilet<p></div>
<a tabindex="0" href="/menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><span class="ui-icon ui-icon-triangle-1-s"></span>Menu</a>
<div id="buttons">
<ul>
<li><a href="../index.html" title="">Contact Us</a></li>
<li><a href="../about.html" title="">Watch the Video!</a></li>
</ul>
</div>
</div>
<div style="clear: both"></div>
<!-- header ends -->
FOOTER.PHP (for larfs)
<!-- footer begins -->
<div id="footer"></div>
<!-- footer ends -->
1