Hopefully a simple change.. I currently have a drop-down style navigation menu; i would like to change to a two-tier navigation style setup. Similar to http://liptrot.org/journal/entries/two-tier-navigation-with-some-jquery/
Current HTML and jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<link type="text/css" href="css/main.css" rel="stylesheet">
<!-- New JavaScript functions to enable dropdown navigation -->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<!-- New JavaScript functions to enable refresh of page content DIV -->
<script type="text/javascript">
function getPageContent(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
$('#welcome').hide();
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
<style>
nav ul {
text-align:left;
}
nav ul li {
float:left;
display:inline;
border-right: 1px solid #083D72;
}
nav ul li:hover {
background:#2D8FF0;
}
nav ul li a {
display:block;
color:#444;
}
nav ul li ul {
position:absolute;
width:180px;
background:#09427C;
font-size: 12px;
}
nav ul li ul li {
width:180px;
}
nav ul li ul li a {
display:block;
color:#444;
}
nav ul li ul li:hover a {}
nav ul li ul.fallback {
display:none;
}
nav ul li:hover ul.fallback {
display:block;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="">
<hgroup>
<h1 class="logo"><img src="images/logo.png" width="163" height="59" alt="Tables and Chairs"></h1>
<h2 class="heading">Welcome to Tables and Chairs</h2>
</hgroup>
</tr>
</table>
<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<li class="data-sources">Date <span class="icon-caret-down"></span>
<li>
<a onClick="getPageContent('Information.html')">Information</a>
<ul class="fallback">
<li><a onClick="getPageContent('ovens.html')">Ovens</a></li>
<li><a onClick="getPageContent('fridges.html')">Fridges</a></li>
<li><a onClick="getPageContent('tables.html')">Tables</a></li>
<li><a onClick="getPageContent('costing.html')">Costing</a></li>
<li><a onClick="getPageContent('install.html')">Installation</a></li>
</ul>
</li>
<li>
<a onClick="getPageContent('legal.html')">Legal Info</a>
<ul class="fallback">
<li><a onClick="getPageContent('terms.html')">Terms & Conditions</a></li>
<li><a onClick="getPageContent('data.html')">Data Protection</a></li>
</ul>
</li>
<li>
<a onClick="getPageContent('contact.html')">Contact Us</a>
<ul class="fallback">
<li>Contact Details</li>
<li><a onClick="getPageContent('comments.html')">Your Comments</a></li>
<li><a onClick="getPageContent('addinfos.html')">Additional Info</a></li>
</ul>
</li>
<li>
<a onClick="getPageContent('cookies.html')">Cookies</a>
</li>
</li>
</ul>
</nav>
<!-- MENU END -->
<!-- SECOND TIER START-->
<div class="sub-menu">
<div>
<!-- SECOND TIER -->
<div id="PageContent">
</div>
<footer class="site-footer" role="contentinfo">
<div class="wrap">
<small class="fr">© 2013 T&C All rights reserved</small>
</div>
</footer> <!-- END footer.site-footer -->
</body>
</html>
Thanks
Related
the JavaScript is applying for all A LINK but it only has to work when i click this particular a link(#tornado,_bar -> ul -> li -> a links) , how do i have to mention this a link in js.
This js is not working,
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type="text/css">
.active{
background-color:#a00;
color:#fff;
}
</style>
</head>
<body>
<div id="viran">
<div id="mob" class="hide_yellow2">
<div id="tornado_bar">
visit
<ul>
<li><a title="index.html" href="#786">Home</a></li>
<li><a title="#about" href="#787">About</a></li>
<li><a title="#minnummannai" href="#788" >Minnum Mannai</a></li>
<li><a title="#inassembly" href="#789">In Assembly</a></li>
</ul>
</div>
</div>
<ul>
<li><a title="#minnummannai" href="#788" >Minnum Mannai</a></li>
<li><a title="#inassembly" href="#789">In Assembly</a></li>
</ul>
</div>
<script>
$('a').click(function (e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
</script>
</body>
</html>
The basic CSS selector you are looking for is a simple space: #tornado_bar a:
$('#tornado_bar a').click(function (e) {
e.preventDefault();
$('#tornado_bar a').removeClass('active');
$(this).addClass('active');
});
This question already has an answer here:
Is there a way to combine $(this) with :nth-child?
(1 answer)
Closed 8 years ago.
My html code is as follows: (info on bottom)
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link type='text/css' rel='stylesheet' href='style/style1.css'></link>
<script type='text/javascript' src='scripts/jquery-2.0.0.min.js'></script>
<script type='text/javascript' src='scripts/script1.js'></script>
</head>
<body>
<div id="title">
<h1>Welcome to My Site</h1>
</div>
<div id='menu_Bar'>
<div id='home' class='selector'>
<div class='back'>
<ul class='empty'>
<li>Home</li>
<div style='display: none'>
<li><a href=''>option 1</a></li>
<li><a href=''>option 2</a></li>
<li><a href=''>option 3</a></li>
<li><a href=''>option 4</a></li>
<li><a href=''>option 5</a></li>
</div>
</ul>
</div>
</div>
</div>
</body>
</html>
My jQuery is:
$(document).ready(function() {
$('.selector').mouseenter(function (){
$(this.'div ul div').slideToggle('slow');
});
Now I know the last part won't work (because I would be asking if it did). But I'm sure you see what I'm trying to do. I'm trying to make it so when the selector is hovered over it will open its set of links. I almost was going to use .options for the second part, but realized it would change (or effect) all in same class, which won't allow for similar buttons to be placed on the sides. So how would someone use the parent to affect the child of the parent?
The css:
div {
border: 1px solid black;
}
.empty {
list-style: none;
}
.options {
display: none;
background-color: lightblue;
}
.selector {
background-color: transparent;
}
It shoud be
$(document).ready(function() {
$('.selector').mouseenter(function (){
$(this).find('> div > ul > div').slideToggle('slow');
});
});
Demo: Fiddle
I've a problem with my very simple website. It seems that the font size unusually changes in some cases. For instance, when I click on a link in the homepage, the new page opened has a different font size. And it seems that this behavior happens only on Chrome. Please, see the pictures below. For each picture, on the left you can see the font size in the homepage and on the right you can see the font size in the page opened clicking on a link.
Internet Explorer (font size ok)
Firefox (font size ok)
Chrome (font size is DIFFERENT)
This is my CSS code used by the two web pages (before this there's a reset standard file):
#charset "utf-8";
/* CSS Document */
body
{
background-color:#FFF;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
}
.centered
{
margin:0 auto;
}
.centered-content
{
text-align:center;
}
div.article-header
{
background-image:url(../img/articleheaderback.png);
background-position:bottom;
background-repeat:repeat-x;
width:100%;
margin-bottom:10px;
}
div.article-title
{
width:69%;
display:inline-block;
padding-left:1%;
padding-bottom:10px;
}
div.article-more
{
text-align:right;
font-style:italic;
display:inline-block;
color:#690000;
width:29%;
padding-right:1%;
}
div.article-content
{
width:94%;
padding-right:3%;
padding-left:3%;
}
div.article
{
padding-top:10px;
padding-bottom:10px;
padding-left:3%;
padding-right:3%;
width:94%;
}
div.section
{
padding-top:10px;
padding-bottom:10px;
width:100%;
text-align:center;
}
div.section-title
{
text-transform:uppercase;
width:100%;
}
div.container
{
width:100%;
margin:10px 0;
padding-top:20px;
padding-bottom:10px;
background-color:#cbcb63;
}
div.content
{
width:90%;
background-color:#fff59b;
margin:15px auto;
padding-top:10px;
padding-bottom:10px;
}
div#contacts
{
width:90%;
background-color:#fff59b;
margin:0 auto;
}
.dark-background
{
background-color:#1b5e5e;
}
div.header
{
text-align:center;
width:100%;
}
div.footer
{
text-align:center;
}
h1
{
font-size:1.5em;
font-weight:bold;
color:#690000;
}
img#logo
{
max-width:100%;
}
li.basic
{
padding-top:5px;
padding-bottom:5px;
line-height:1.5;
}
li.nav
{
color:#5c7304;
padding-top:25px;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
li.contacts
{
display:inline-block;
width:25%;
}
p
{
line-height:1.5;
}
ul.nav
{
margin-top:10px;
padding:0;
list-style:none;
width:100%;
}
ul.basic
{
list-style-type:disc;
list-style-position:inside;
}
ul.contacts
{
width:100%;
margin-top:30px;
margin-bottom:10px;
}
This is the html homepage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<script src="js/jquery-1.9.1.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#section-list").hide();
$("#section-title").click(function(){
$("#section-list").toggle();
});
});
</script>
</head>
<body>
<!-- container contains HEADER + NAV + CONTENT-->
<div class="container">
<!-- header -->
<div class="header">
<img id="logo" alt="Logo: Matteo Puccinelli profile" src="img/logoridim.png">
</div>
<!-- sections -->
<div class="content">
<!-- Article: sections -->
<div class="section">
<div id="section-title" class="section-title">
<h1>
Sections
</h1>
</div>
<div id="section-list">
<ul class="nav">
<li class="nav">Home</li>
<li class="nav">Dati personali</li>
<li class="nav">Esperienze lavorative</li>
<li class="nav">Educazione</li>
<li class="nav">Passioni</li>
</ul>
</div>
</div>
</div>
<!-- content -->
<div class="content">
<!-- Article: personal data -->
<div id="personaldata" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Dati personali
</h1>
</div>
</div>
<div class="article-content">
<ul class="basic">
<li class="basic">Data di nascita: 18-01-1987</li>
<li class="basic">Luogo di nascita: Lucca</li>
<li class="basic">Nazionalità: italiana</li>
<li class="basic">Residenza: [privata]</li>
</ul>
</div>
</div>
<!-- Article: work experiences -->
<div id="work" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Esperienze lavorative
</h1>
</div><!--
--><div class="article-more">
+ more
</div>
</div>
<div class="article-content">
<ul class="basic">
<li class="basic">(dal 2011) Redattore per il portale Libro-Mania.</li>
<li class="basic">(dal 2007) Lavori occasionali.</li>
<li class="basic">(2011-2012) Tirocinio formativo presso l'azienda Intecs SpA.</li>
</ul>
</div>
</div>
<!-- Article: education -->
<div id="education" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Educazione
</h1>
</div><!--
--><div class="article-more">
+ more
</div>
</div>
<div class="article-content">
<ul class="basic">
<li class="basic">(dal 2012) Laurea di secondo livello in Scienze Informatiche, facoltà di Scienze matematiche, fisiche e naturali di Pisa.</li>
<li class="basic">(2012) Laurea in Scienze Informatiche, facoltà di Scienze matematiche, fisiche e naturali di Pisa. Votazione 106/110.</li>
<li class="basic">(2007) Diploma di perito industriale capotecnico all'istituto industriale E. Fermi di Lucca con specializzazione Informatica. Votazione 100/100.</li>
</ul>
</div>
</div>
<!-- Article: passions -->
<div id="passions" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Passioni e Hobby
</h1>
</div><!--
--><div class="article-more">
+ more
</div>
</div>
<div class="article-content">
<p>
prova
</p>
</div>
</div>
</div> <!--content end -->
</div> <!-- container end -->
<!-- footer -->
<div class="footer centered-content">
<ul class="contacts">
<li class="contacts"><img alt="facebook social icon" src="img/fbsmall.png"></li><!--
--><li class="contacts"><img alt="twitter social icon" src="img/twittersmall.png"></li><!--
--><li class="contacts"><img alt="feed RSS" src="img/rsssmall.png"></li><!--
--><li class="contacts"><img alt="feed RSS" src="img/mail.png"></li>
</ul>
<p title="copyright" style="margin-top:15px; margin-bottom:15px;">
Copyright 2013 Matteo Puccinelli
</p>
</div>
</body>
</html>
Thank you in advance!
Firstly, are you sure that the second page is at the same zoom level?
I would think that the problem is using % instead of em.
The first thing to do would be to determine if setting elements to em fixes the issue where the size changes on a new tab. After that, you can work out what em to set each element to.
*
{
font-size: 20em !important;
}
1- Font sizes in percentage are calculated based on a reference.
2- Font sizes are inherited.
In your case you have not defined a reference, so the browsers' default font sizes for the parent of those elements are the base for calculation.
Different browsers can have different default font sizes for the same element.
This is why you are seeing the difference.
You can set a font size on the body and then use percentages for anything else.
em and % are pretty much the same thing - 2em = 200%. Each browser has a default font-size for most things which are possible to overwrite. Using * with !important is a very crude way of doing things because you will have to use !important if you want to override anything subsequently.
What you ideally need to do is to use:
html, body, table {
font-size: 13px;
}
Additionally instead of using to blank out the space between you footer navigation you can do this:
.footer ul {
font-size: 1px;
}
.footer li {
font-size: 13px;
}
http://jsfiddle.net/hDLry/
So, my jQuery doesn't do anything, neither if I do it with apache nor when I open it normally. (Chrome)
I linked it in the HTML, which is connected to my CSS, but it just doesn't do anything. Not entirely sure if that is because I didn't link it correctly or something. Here's all my code: (Bonus question: Why isn't the list at Tournament Results Centered on the page?)
Thanks a lot guys!
Home.html:
<!DOCTYPE html>
<html>
<head>
<title>Niki Stoiber</title>
<script type='text/javascript' src='http://localhost/Niki/script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="navbar">
<ul>
<li class="pull-me">Home</li>
<li class="pull-me">About Me</li>
<li class="pull-me">Tournament Results</li>
<li class="pull-me">Social Networks</li>
</ul>
</div>
<br>
<br>
<div id="title">
<h1 align="center">Niki Stoiber</h1>
</div>
<p>Hey there, my name is Niki Stoiber, and this is my Webpage!</p>
<p>I am a 9 year old boy from Austria and I want to be a professional tennisplayer someday.</p>
</body>
</html>
AboutMe.html:
<!DOCTYPE html>
<html>
<head>
<title>Niki Stoiber</title>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="navbar">
<ul>
<li class="pull-me">Home</li>
<li class="pull-me">About Me</li>
<li class="pull-me">Tournament Results</li>
<li class="pull-me">Social Networks</li>
</ul>
</div>
<br>
<br>
<div id="title">
<h1 align="center">About Me</h1>
</div>
<div align="center">
<p>
Age: 9 <br>
Birthday: 14.4.2003 <br>
Tennis Club I play for: <a href="http://better-tennis.at"> Better Tennis <br>
<img src="http://bit.ly/WpoXB1"/></a>
</p>
</div>
</body>
</html>
Tournaments.html:
<!DOCTYPE html>
<html>
<head>
<title>Niki Stoiber</title>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="navbar">
<ul>
<li class="pull-me">Home</li>
<li class="pull-me">About Me</li>
<li class="pull-me">Tournament Results</li>
<li class="pull-me">Social Networks</li>
</ul>
</div>
<br>
<br>
<div id="title">
<h1 align="center">Tournament Results</h1>
</div>
<div id="navbar">
<ul>
<li>
Anif, Salzburg: 9. Platz
</li>
<li>
Goetzis, Vorarlberg: 1. Platz
</li>
<li>
Imst, Tirol: 2. Platz
</li>
</ul>
</div>
</body>
</html>
stylesheet.css:
* {
width:auto;
height:auto;
background-color:#D3D3D3;
font-family:"Lintel", sans-serif;
}
#font-face {
font-family: "Lintel";
src: url("./Lintel.ttf") format("truetype");
}
#navbar {
position:fixed;
left:50%;
margin-left:-254px;
}
ul {
vertical-align:auto;
list-style-type:none;
position:fixed;
margin:-5px;
text-align:center;
}
.AboutMe {
font-family:"Lintel", Sans-serif;
}
ul a li {
background-color:#2F4F4F;
color:#FFFFFF;
border-radius:5px 5px;
border:solid black;
font-family:"Lintel", Sans-serif;
display:inline;
padding:5px;
z-index:1;
opacity: 0.5;
}
#title {
z-index:2;
}
a:link {
text-decoration:none;
color:black;
}
a:visited {
text-decoration:none;
color:black;
}
a:focus {
text-decoration:none;
color:black;
}
a:hover {
text-decoration:none;
color:black;
}
a:activ {
text-decoration:none;
color:black;
}
h1 {
text-align:center;
position:relative;
}
p {
text-align:center;
position:relative;
}
script.js:
$(document).ready(function() {
$('a').mouseenter(function(){
$(this).fadeTo('slow', 1);
});
$('a').mouseleave(function() {
$(this).fadeTo('slow', 0.5)
})
});
you're using jQuery ( the $ part ) without first including the jQuery library. The recommended way to do so is via Google Libs
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
as for the other question, why did you expect the list to be centered? I don't see any code for that.
It seems you forgot to import the jQuery library. Add this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
inside your head tag
CHANGE
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
TO
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='script.js'></script>
i am developing my first mobile web app using jquery,
When i press a button to go to the next page it does but the javascript on the page doesnt work.
Here is my code , As before my header is a php doc so i dont have to recall all the time
header.php
<!--<!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">-->
<!DOCTYPE html>
<html manifest="cache.manifest">
<!--<html>-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Balti Tandoori</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="iphone.png" />
<link rel="apple-touch-startup-image" href="startup.png" />
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black" />-->
<link rel="stylesheet" href="js/jquery.mobile-1.1.0.min.css" />
<!-- App custom styles -->
<link rel="stylesheet" href="js/balti.min.css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
<style type="text/css" media="screen">
h2 {
margin: 0;
}
.drawers-wrapper {
position: relative;
width: 100%;
}
.drawer {
background-color:#ffffff;
color:#ffffff;
font-size:20px;
line-height:1.3em;
}
<!-- NO REQUIRED -->
.boxcap {
height:5px;
left:0pt;
position:absolute;
width:100%;
z-index:100;
background:transparent url(http://images.apple.com/downloads/images/sidenav_capbottom.png) no-repeat scroll 0%;
margin-top:-5px;
}
.captop {
background-image:url(http://images.apple.com/downloads/images/box_188captop.png );
bottom:auto;
top:0pt;
margin-top:0;
}
<!-- END JUST DOES CORNERS -->
.drawers {
margin-bottom:15px;
color:#76797C;
font-size:11px;
line-height: 18px;
}
.drawers A {
color:#666666;
text-decoration:none;
font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
.drawer li {
border-bottom:1px solid #E5E5E5;
line-height:16px;
padding:6px 0pt;
}
UL {
list-style: none;
padding: 0;
}
UL.drawers {
margin: 0;
}
.drawer-handle {
background-color:#000000;
color:#ffffff;
cursor:default;
font-size:20px;
font-weight:normal;
height:50px;
line-height:25px;
margin-bottom:0pt;
text-indent:15px;
width:100%;
border:1px solid #ffffff
}
.drawer-handle.open {
background:transparent url(css/body.gif) no-repeat;
}
.drawer UL {
padding: 0 12px;
padding-bottom:0pt;
}
.drawer-content UL {
padding-top: 7px;
}
.drawer-content LI A {
display:block;
overflow:hidden;
}
.alldownloads li {
border:0pt none;
line-height:18px;
padding:0pt;
}
</style>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.accordion.js" type="text/javascript"></script>
<!-- link to allow bookmark website -->
<link rel="stylesheet" href="bookmark/add2home.css">
<script type="text/javascript">
var addToHomeConfig = {
animationIn: 'bubble',
animationOut: 'drop',
lifespan:10000,
expire:2,
touchIcon:true,
message:'Add Our Mobile App To Your <strong>%device</strong> Home Page. Available Anytime `%icon`.'
};
</script>
<script type="application/javascript" src="bookmark/add2home.js"></script>
<!-- bookmark end -->
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script type="text/javascript">
$(function () {
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',
// our selected class
selectedClass: 'open',
// match the Apple slide out effect
event: 'mouseover'
});
});
</script>
</head>
this is my index.php
<?
require_once("header.php");
?>
<!-- do not touch above -->
<body>
<div data-role="page" id="page1" data-theme="f">
<div data-theme="f" data-role="header">
<img src="css/logo.gif"width="100%" style="border-bottom :1px solid white" alt="" />
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="b">
<a href="menu.php" data-transition="flip">
Menu
</a>
</li>
<li data-theme="b">
<a href="#page1" data-transition="flip">
Opening Times
</a>
</li>
<li data-theme="b">
<a href="#page1" data-transition="flip">
How To Find Us
</a>
</li>
</ul>
<a data-role="button" data-transition="pop" href="page1" data-theme="b" data-icon="tel" data-iconpos="left">
Call Us
</a>
<!-- </div>-->
</div>
<!-- do not touch below -->
<div data-theme="b" data-role="footer">
<h3>
© Balti Tandoori
</h3>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
</html>
this is the page the index calls where the javascript does not run, It will run if i disable the ajax call from the button like this But i want the ajax to work as well, How do i recall the javascript on load etc
<a href="javascript:window.location.href='menu.php'" data-ajax='false'
menu.php
<?
require_once("header.php");
?>
<!-- do not touch above -->
<body>
<div data-role="page" id="page1" data-theme="f">
<div data-theme="f" data-role="header">
<img src="css/logo.gif"width="100%" style="border-bottom :1px solid white" alt="" />
</div>
<div data-role="content">
Back
<a data-role="button" data-transition="pop" href="page1" data-theme="b" data-icon="tel" data-iconpos="left">
Call Us
</a>
<!-- </div>-->
<div class="drawers-wrapper">
<!--<div class="boxcap captop"></div>-->
<ul class="drawers">
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Starters</h2>
<!-- removes under border-->
<!-- <ul class="alldownloads">-->
<!--removed above -->
<ul>
<li id="sn-downloadsmacosx">All Categories <div style="text-align:right;">£2.50</div></li>
<li id="sn-aperture">Big dish<div style="text-align:right;">£2.50</div></li>
<li id="sn-apple">Apple</li>
<li id="sn-video">Video</li>
<li id="sn-dashboard">Widgets</li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Tandoori</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Traditional</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Originals</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Specials</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
</ul>
</li>
<li class="drawer last">
<h2 class="drawer-handle">Fish</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="Security Update 2007-009 1.1 (10.4.11 Universal)" href="/downloads/macosx/apple/security_updates/securityupdate20070091110411universal.html">13. Security Update 20</a></li>
<li class="last"><a title="Security Update 2007-009 1.1 (10.5.1)" href="/downloads/macosx/apple/security_updates/securityupdate2007009111051.html">14. Security Update 20</a></li>
</ul>
</li>
</ul>
<!--<div class="boxcap"></div>-->
</div>
</div>
<!-- do not touch below -->
<div data-theme="b" data-role="footer">
<h3>
© Balti Tandoori
</h3>
</div>
</body>
</html>
Many thanks for your help
added for clarity to header.php
<script type="text/javascript">
$(document).bind('pageinit', function(){ //new bit added in script
$(function () {
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',
// our selected class
selectedClass: 'open',
// match the Apple slide out effect
event: 'mouseover'
});
});
}); //new bit added in script
</script>
Which JavaScript isn't working? I'm having a hard time getting exactly what it is that you mean, but I'm willing to take a hunch that none of your event handlers are getting bound. You don't show what the contents of all those external script files contain, so I can't say that for sure, but just a quick breakdown:
All of your JavaScript tags are in the head of your document. That means that they get loaded up before the body tag has been processed. Additionally, jQuery Mobile creates a great deal of the DOM dynamically. Nowhere do I see a call to $(document).ready(), which is fine because this has been sort of "phased out" in jQuery Mobile, nor do I see a call to $(document).bind("pageinit", function()), which is the preferred way to bind event handlers to DOM elements after the page has loaded in jQuery Mobile.
I see you bind a callback to the document's mobileinit event, but per the jQuery Mobile documentation, this is called long before the DOM is built up.
Let's say that your accordion function is what isn't working. The pattern you're looking for is something like:
$(document).bind('pageinit', function(){
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',
// our selected class
selectedClass: 'open',
// match the Apple slide out effect
event: 'mouseover'
});
});