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>
Related
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
Hi i am a newbie in javascript and jquery i am building a phonegap application .
In my application i am trying to implement the pull to refresh feature using the iscroll and iscrollview as demoed in the site http://www.x-services.nl/category/phonegap-cordova
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Event Info</title>
<style>
.ui-page {
-webkit-backface-visibility: hidden;
}
#navgroup {text-align:center;}
#navgroup div {display:inline-block;}
.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
#chat .ui-icon { background: url(images/icons/09-chat-2.png) 50% 50% no-repeat; background-size: 24px 22px; }
#email .ui-icon { background: url(images/icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; }
#login .ui-icon { background: url(images/icons/30-key.png) 50% 50% no-repeat; background-size: 12px 26px; }
#beer .ui-icon { background: url(images/icons/88-beermug.png) 50% 50% no-repeat; background-size: 22px 27px; }
#coffee .ui-icon { background: url(images/icons/100-coffee.png) 50% 50% no-repeat; background-size: 20px 24px; }
#skull .ui-icon { background: url(images/icons/21-skull.png) 50% 50% no-repeat; background-size: 22px 24px; }
</style>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" type="text/css" href="css/mobiscroll.custom-2.5.4.min.css">
<link rel="stylesheet" type="text/css" href="css/jqm-icon-pack-fa.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview-pull.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" > </script>
<script type="text/javascript" src="scripts/mobiscroll.custom-2.5.4.min.js" ></script>
<script type="text/javascript" src="scripts/iscroll.js" ></script>
<script type="text/javascript" src="scripts/jquery.mobile.iscrollview.js" ></script>
<script type="text/javascript" src="scripts/indexinfo.js"></script>
<!-- script type="text/javascript" src="scripts/date.js"></script> -->
<script src="phonegap.js"></script>
<script type="text/javascript">
</script>
</head>
<body id="body">
<div id="plistview" data-role="page" >
<script src="scripts/date.js"></script>
<div data-role="header" data-position="fixed" data-tap-toggle="false" id="header" data-theme="a">
<!-- <a id="calendarlink" href="calendarview.html" data-icon="" class="ui-btn-left" data-ajax="false">Calendar</a>
<a id="calendarlink" data-role="button" href="#" data-icon="calendar" class="ui-btn-right" data-transition="slideup" data-prefetch="true"></a>
<a id="filterlink" data-role="button" href="#pfilterview" data-icon="filter" class="ui-btn-right" data-transition="slideup" data-prefetch="true"></a>
-->
<div class="ui-btn-right">
<a id="calendarlink" href="calendarview.html" data-role="button" data-icon="calendar" data-iconpos="notext" data-theme="c" data-inline="true" data-transition="slide">Calendar</a>
list
filter
</div>
<h1>Event Info</h1>
</div>
<p id="paragraph"></p>
<div id="middlecontent" data-role="content" data-iscroll>
<div class="iscroll-pulldown">
<span class="iscroll-pull-icon"></span>
<span class="iscroll-pull-label"
data-iscroll-loading-text="News is being refreshed"
data-iscroll-pulled-text="Release to refresh the news">
Refresh the news
</span>
</div>
<div id="eventlist">
<!-- <a id="getpreviouseventsbutton" href="#" data-role="button" data-mini="true" >Get previous events</a> -->
<br>
<ul id="upcomingevents" data-role="listview" data-inset="true">
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
<br>
<!-- <a id="getmoreeventsbutton" href="#" data-role="button" data-mini="true" >Get next month events</a> -->
</div>
<br> <br> <br> <br>
</div>
<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<div id="navgroup" data-role="controlgroup" data-type="horizontal" data-mini="true">
<a id="listlink" href="#" data-role="button" data-icon="" class="ui-btn-active ui-state-persist" >List</a>
<a id="calendarlink" href="calendarview.html" data-role="button" data-icon="" data-transition="slide">Month</a>
</div>
<!-- <div data-role="controlgroup" data-type="horizontal">
<ul>
<li><a id="listlink" href="#" data-role="button" data-icon="" class="ui-btn-active ui-state-persist" >List</a></li>
<li><a id="calendarlink" href="calendarview.html" data-role="button" data-icon="" class="ui-btn-center" data-transition="slide">Calendar</a></li>
</ul>
-->
</div>
</div>
</div>
<div id="pfilterview" data-role="page" >
<script type="text/javascript">
$(document).one("pageshow",'#pfilterview',function(){
console.log("category list is loading");
$.ajax({
beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner
complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
url: 'http://linuxweb.symsoft.local/ycal/index.php/event/Categories?callback=test',
dataType: 'jsonp',
success: function( arr ) {
for(var i=0;i<arr.length;i++){
$('#categories').append( '<label><input class="selectedcategory" value="'+arr[i].category+'" name="'+arr[i].category+'" type="checkbox">'+arr[i].category+'</label>').trigger( "create" );
}// this logic assumes that the data is in ascending order by date
//code to fill the event list page ends
//$('#upcomingevents').listview('refresh');
},
error: function( data ) {
console.log( "error" );
alert( "ERROR: " + data );
}
});
});
$(document).on('click','#apply',function(e){
e.preventDefault();
filteredcategories=[];
$('#categorylist :checked').each(function() {
filteredcategories.push($(this).val());
});
console.log("filtered values -> "+filteredcategories);
updatelistview();
});
$(document).ready(function(){
$('#selectbutton').toggle(function(){
$('input:checkbox').prop('checked',true).checkboxradio("refresh");
$(this).val('Deselect all').button('refresh');
},function(){
$('input:checkbox').prop('checked',false).checkboxradio("refresh");
$(this).val('Select all').button('refresh');
})
});
</script>
<div data-role="header" data-position="fixed" data-tap-toggle="flase">
Cancel
Apply
<h1>Filter</h1>
</div>
<div data-role="content">
<div id="categorylist">
<form id="categories">
<input class="check" id="selectbutton" type='button' value="Select All">
</form>
<br><br>
Apply
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="flase">
</div>
</div>
</body>
</html>
I get ReferenceError: iScroll is not defined
jquery.mobile.iscrollview.js
Line 259 which points to iscrollview.js i am unable to figure out the reason for this reference error.
The line is _subclass(IScroll,iScroll) the iScroll is undefined . Here iScroll var is a superconstructor type var
I fail to understand the reason for this cause
I don't know why, but in the iscroll.js in line 1973 is as window.IScroll = IScroll;
I think this is wrong.
The right is window.iScroll = IScroll;
I change and worked for me.
I wouldn't call this a "Strange Error" it appears you have not included all of the JS files in your app that you are referencing in your <script> tags at the top.
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/
I want to add THE following menu bar but slide down is very big and I want to reduce the size of slide, tried lots of things but it didn't work, please help
animated-menu.css
body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}
ul{
margin:0;
padding:0;
}
li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
a{
color:#FFF;
text-decoration:none;
}
p{
padding:0px 5px;
}
.subtext{
padding-top:15px;
}
/*Menu Color Classes*/
.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;} `
animated-menu.js
$(document).ready(function(){
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing:
'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing:
'easeOutBounce'})
});
});
animated-menu.html
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smooth Animated jQuery Menu</title>
<link rel="stylesheet" href="animated-menu.css"/>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js"
type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="animated-menu.js" type="text/javascript"></script>
</head>
<body>
<p>Rollover a menu item to expand it.</p>
<ul>
<li class="green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p>About</p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p>Contact</p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p>Submit</p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p>Terms</p>
<p class="subtext">Legal things</p>
</li>
</ul> .</body>
</html>
I'm probably understanding wrong, but if you want to reduce the size of the dropdown, edit the 150px in the javascript code to something a bit smaller?
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'
});
});