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
Related
I am new to HTML, CSS and JS/jQuery. I'm creating a test website just to get familiar with jQuery and can't seem to figure an issue out.
I have a navigation bar at the top of the page which contains a logo on the left and links on the right. I've set up the below jQuery code to fade the links in and out upon mouse enter/leave:
$(document).ready(main);
function main() {
$('.marquee').marquee({
/* pauseOnHover: true */
})
$('.nameorlogo, .navitems').mouseenter(function() {
$('.nameorlogo').fadeTo('fast', 1);
$('.navitems').fadeTo('fast', 1);
})
$('.nameorlogo, .navitems').mouseleave(function() {
$('.nameorlogo').fadeTo('fast', 0.5);
$('.navitems').fadeTo('fast', 0.5);
})
};
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>JSTest1</title>
<link href="../css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='../js/jquery-3.2.0.js'></script>
<script type="text/javascript" src='../js/main.js'></script>
<script type="text/javascript" src='../js/marquee.js'></script>
</head>
<body>
<header class=topheader>
<nav class=navtop>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</nav>
</header>
<main>
<div class=marquee>This is a test for JavaScript</div>
</main>
</body>
</html>
The problem I have is when I hover over a link, either nav links or the logo, everything fades in and out, I want them all to be independant.
I know you can do this in CSS, this is purely to help me learn and understand.
Thanks for your help.
Jim
Use the the this keyword like $(this) to refer to the currently hovered item
$(this).fadeTo('fast', 1);
Also, notice that .navitems is the whole UL element, while you need to target the LI elements. Therefore
$('.nameorlogo, .navitems li').mouseenter(function()
Additionally here's other similar ways to achieve what you desire:
using .on() method
$('.nameorlogo, .navitems li').on({
mouseenter : function() {
$(this).stop().fadeTo(250, 1);
},
mouseleave : function() {
$(this).stop().fadeTo(250, 0.5);
},
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
Using .hover() method
$('.nameorlogo, .navitems li').hover(function(evt) {
var isMouEnt = evt.type === "mouseenter";
$(this).stop().fadeTo(250, isMouEnt ? 1 : 0.5);
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
I am trying to change the src= image of a parent in a nested ul li when I click on a link. Below is my code. I know how to change the src= with javascript, but I don't know how many tiers I need to navigate up to change the src= image. Example: I want to change src="test.png" when I click on Question1.Answer1.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
/*background-image: url(/images/page.png);*/
background-position: 0 1px;
background-repeat: no-repeat;
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display:none;
}
</style>
<script src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function addLine(what) {
$("#" + what).append('<li>URL to uploaded document</li>');
};
function myToggle(what){
$("#" + what).toggleClass('hidden');
};
function deleteLine(what) {
$(what).parent().children().remove();
}
</script>
</head>
<body>
<ul>
<li class="folder">
Test
<ul class="hidden" id="Test1">
<li class="folder"><img src="test.png">
Test1-2
<ul class="hidden" id="Test1-2">
<li>
This is Question 1
<ul id="Question1"><li onClick="deleteLine(this)"> Questoin1.Answer1</li></ul>
</li>
<li>
This is Question 2
<ul id="Question2"></ul>
</li>
<li>
This is Question 1
<ul id="Question3"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
object with style property display or visibility: if hidden so no user-action-events possible.
Remove an object == remove from HTML DOM, so no user-action-events possible.
Add an object to HTML DOM so document must be new render. Same if object.style.display was changed.
display changes HTML DOM.
$("#" + what).append('URL to uploaded document'); this changes HTML DOM.
NOT same if object.style.visibility was changed: Visibility must have an exist object in HTML DOM.
please use
so, var imgPointer=document.getElementById("imgID");
put this pointer in an event handler to change imgPointer.src .
imgPointer (value if ID) is a pointer (value) relative to document an not to .
inside of addLine() change imgPointer.src .
I'm new to html/css stuff so please bear with me.
I have specific images that I want to use as a navigation menu.
My html,css basically look something like this:
HTML
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
CSS
a#main:
{
background-image:url(main-normal.png);
margin-right:0px;
}
a#main:hover:
{
background-image:url(main-highlight.png);
}
a#tips:
{
background-image:url(tips-normal.png);
margin-right:0px;
}
a#tips:hover:
{
background-image:url(tips-highlight.png);
}
a#news:
{
background-image:url(news-normal.png);
margin-right:0px;
}
a#news:hover:
{
background-image:url(news-highlight.png);
}
#main,#news,#tips
{
background-repeat:no-repeat;
display:block;
text-decoration:none;
text-indent:-30000px;
}
When I hover over the image it does get change to highlighted image but when I click on the link the tab goes back to normal image. I want it to stay highlighted when the user is currently on that page. Can anyone help me with this?
I tried "visited" but it doesn't seem to work and everything I found on Google search was a little bit different than what I'm trying to do.
Thanks in advance.
To answer the specific question, when a user clicks a link, they are taken to a new page. The links have no concept in and of themselves as to what page they exist on.
So you have a few options. The common solution is to use server-side code to send HTML with some indicator that that is the current link. You could add a class like 'current' for example. Furthermore, if that is the page you are on, there's no need for the link either, so one should not have that text linked.
But if you don't have access to the server, then you need to add this manually. You could either create a new style for .current and then on that page, apply that class to your active link.
However, perhaps you are including this menu as an include...meaning the code is the same for every single page. In that case, you will want to target the active link with your CSS. So on each page you'd have a custom bit of CSS on the page.
On the tips page, for example, you'd do this:
#tips {put your style here for active links}
To get a bit fancier/more automated, you could write some javascript that would:
parse the URL
figure out the file name of the page
match that filename up to something in your list of links
apply the class for you dynamically
PS. there is no real need to use the syntax of a#tips in your CSS. The reason is that if you are using an id, there can only be one id on the page, so the a is somewhat redundant.
There are many ways to do this. With PHP, JavaScript or pure CSS with some extra markup.
Since you said you are new to HTML/CSS I think the CSS way would be best for you?
So you have 3 pages with exact the same menu code? Just put this on each site:
For your main page:
<div id="navigation">
<a id="main" class="active" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
Your tips page:
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" class="active" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
Your news page:
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" class="active" href="domain.com/news">news</a>
</div>
Add CSS:
#main.active {background-image:url(main-highlight.png);}
#tips.active {background-image:url(tips-highlight.png);}
#news.active {background-image:url(news-highlight.png);}
This example works fine for me...
Home Page
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
</head>
<body id="home">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
</ul>
</nav>
</body>
Second Page
<html>
<head>
<title>Second</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
<body id="second">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
</ul>
</nav>
</body>
A way to highlight the navigation tab on the current page with CSS is to create an active class to append to the class of the tag you are currently on. Your active css class would detail how you want it to look when it's considered active. Then, depending on what tab you are on, you insert the active as class for that tab as seen below.
`
<html>
<head>
<title>Highlight Nav Tab of Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
.navbar {
background-color: purple;
font-size: 12px !important;
line-height: 1.42857143 !important;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: purple !important;
background-color: #fff !important;
}
</style>
<body id="about.html" data-spy="scroll" data-target=".navbar" data-offset="60">
<!--navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li >Home</li>
<li class = "active">About</li>
<li >More</li>
<li >Contact Us</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
`
Image shows what nav highlight looks like
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');
});
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'
});
});