Font size unusually changes - javascript

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/

Related

tooltip popup not working in IE

What I am trying to do is that when the user points to one of the five button pictures on the website it should give them a tooltip with its definition.
It is working fine in Chrome Ver 46.0 but not in IE11.
When I ran the IE Developer tools. It gives error SCRIPT5009: 'tooltip' is undefined. Line: 26, Column: 26.
HTML :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<title>Build Menu with Tooltip</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="themes/3/tooltip.js" type="text/javascript"></script>
<link href="themes/3/tooltip.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {padding:0;margin:0; font:normal 12px Arial; background:none no-repeat center 93px;}
.main {margin: 0 auto; width: 4000px; color:#AAA;}
.main a {color:#000000;}
#vWrapper {margin-top:0px; padding:6px; width:200px; opacity:1.0; filter:alpha(opacity=50); background:#fff;}
#vWrapper a {color:#ABCDEF; text-decoration:none; display:block; padding:6px 20px; background:#ffffff;}
#vWrapper a:hover {color:#000; text-decoration:underline; background:#fff;}
.column { float:right; padding:0 20px;}
</style>
</head>
<body>
<div class="main">
<div id="vWrapper">
<img src="src/1.png" style="width:200px;height:100px;" alt="">
<img src="src/2.png" style="width:200px;height:100px;" alt="">
<img src="src/3.png" style="width:200px;height:100px;" alt="">
<img src="src/4.png" style="width:200px;height:100px;" alt="">
<img src="src/5.png" style="width:200px;height:100px;" alt="">
</div>
</div>
<!--Menu Data-->
<div style="display:none;">
<div id="sub1">
<div class="column">
<p align="justify">Conduct proactive, routine quality management functions to mitigate risk exposure and liability in the Services solution design, account operations & project delivery, through quality reviews, early warning triggers, metrics, account/project compliance & performance reporting.</p>
<p align="justify">Drive continuous improvement and corrective actions for systemic root causes.</p>
</div>
</div>
<div id="sub2">
<div class="column">
<p align="justify">Provide account operations, PMO and project delivery consulting services via senior-level leveraged subject matter experts, with extensive Services experience across multiple industries and lines of business (LOBs).
</p><br />
</div>
</div>
<div id="sub3">
<div class="column">
<p align="justify">Establish, (optimize/streamline/simplify) and drive delivery governance, proactive early warning intervention, and remediation on challenged accounts and PCC3 projects, promoting accountability and consistency across all Services delivery teams.
</p><br />
</div>
</div>
<div id="sub4">
<div class="column">
<p align="justify">Collaboratively develop, implement, drive compliance & adoption of the Dell Services Account Lifecycle Mgmt. (ALM) frameworks –Account Start-Up, Account Mgmt., Acct Shutdown (ASUM, AMM, ASDM) and Patented PM3 standard frameworks, best practices & supporting policies, including Contract Compliance Policy, throughout the account lifecycle.
</p><br />
</div>
</div>
<div id="sub5">
<div class="column">
<p align="justify">Establish Integrated Early Warning Reporting, enabling delivery governance for account operations and project delivery Performance & Compliance. Provide business “ownership” / requirements & collaborate on strategy for standardized, Services-wide systems/tools that enable account management, project delivery and governance functions. </p>
<p align="justify">Expand the engagement of the Services delivery community with passion & optimism through broad-based, global communications, CoPs and Knowledge Mgmt. solutions, which foster a sense of ownership, enthusiasm and a collaborative culture across Services.</p>
</div>
</div>
</div>
</body>
</html>
CSS:
/*For tooltip target element that has set class="tooltip" */
.tooltip {text-decoration: none; border-bottom:1px dotted #36c;color: #36c; outline: none; }
/*For tooltip box*/
div#mcTooltip
{
line-height:20px;
border-width: 2px;
color:#000000;
border-color:#000000;
padding:10px;
font-size: 14px;
font-family: Museo for Dell, Museo Sans for Dell ;
border-radius:9px;
background-color:#000000;
background-image:url(bg_ptn.png);
}
div#mcTooltip, div#mcttCo b {
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* For hyperlink within tooltip */
div#mcTooltip a { color:#fff; }
/*Close button. Available when sticky or overlay has been set to true, or is on touch-enabled devices. */
div#mcttCloseButton
{
width:18px;
height:18px;
margin-right:4px;
margin-top:4px;
/*background:black;*/
}
/*Close button X symbol*/
div#mcttCloseButton:after {
font:normal 38px/18px Museo for Dell, Museo Sans for Dell;
color:#999;
top:0;left:-2px;
}
/*Give the close button a bigger size on smaller devices*/
#media only screen and (max-width: 736px) {
div#mcttCloseButton {
width:28px;
height:28px;
}
div#mcttCloseButton:after {
font-size:48px;
line-height:28px;
}
}
/* Useful when overlay has been set to true or 1 in JS */
div#mcOverlay
{
background-color: rgba(0,0,0,0.5);
display:none;top:0;left:0;width:100%;height: 100%;overflow:visible;z-index:4;
}
/*The settings below should remain unchanged*/
div#mcTooltipWrapper {position:absolute;visibility:hidden;overflow:visible;z-index:9999999999;top:-2000px;}
div#mcTooltip {float:left;border-style:solid;position:absolute;overflow:hidden;}
div.mcTooltipInner {float:left;position:relative;width:auto;height:auto;}
div#mcttCo, div#mcttCo b{position:absolute;overflow:hidden;}
/*compatible with bootstrap*/
div#mcTooltip, div#mcTooltip div {box-sizing:content-box;}

How to implement Packery library with Tumblr

I followed the 'Getting started' tutorials on the Packery website, but I still can't get my tumblr photo posts to work at all with the library. I'm not sure what I need to change or add since the Packery tutorials are pretty vague.
<!DOCTYPE html>
<html>
<head>
<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<script>
var postsContainer = document.querySelector('#posts');
var pckry = new Packery( postsContainer, {
//options
itemSelector: '.container',
gutter:5
});
pckry.bindResize(postsContainer);
</script>
<link href='http://fonts.googleapis.com/css?family=Monofett|Varela|Londrina+Shadow' rel='stylesheet' type='text/css'>
<!-- fonts
font-family: 'Monofett', cursive;
font-family: 'Varela', sans-serif;
font-family: 'Londrina Shadow', cursive;
-->
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#eee"/>
<meta name="color:Content Background" content="#fff"/>
<meta name="color:Text" content="#000"/>
<style type="text/css">
*{margin:0px;
padding:0px;}
html{height:100%;}
body{
background-color:{color:Background};
margin:0px;
height:100%;
}
#sideBar{
background-color:{color:Content Background};
width:150px;
height:100%; ;
margin:auto 0;
margin-right:20px;
padding-left:10px;
float:left;
}
h1{font-family: 'Monofett', cursive;;
font-size:43px;
margin-bottom:25px;
color:black;}
h2{ font-family: 'Varela', sans-serif;
font-size:12px;
margin-bottom:10px;}
p{margin-bottom:10px;}
a:link, a:visited{font-family: 'Varela', sans-serif;
font-size:.95em;
text-decoration:none;
color:black;
-webkit-transition:margin-left 1s, margin-right 1s, color .5s;
-webkit-timing-function:ease;}
#arrow{color:black;
font-family: 'Varela', sans-serif;
fonr-size:.95em;
-webkit-transition:color.5s;
-wekit-timing-function:ease;}
a:hover{color:white;
margin-left:10px;
margin-right:40px;}
nav{margin-left:0px}
#posts{
float:left;
list-style:none;
}
.postPhoto{
float:left;
margin:5px;
}
#wrapper{
height:100%;
width:700px;
}
.pagination{display:none;}
</style>
</head>
<body>
<div id="wrapper">
<div id="sideBar">
<h1>{Title}</h1>
<nav>
<p> Music <span id="arrow"> >> </span> </p>
<p> Code <span id="arrow"> >> </span> </p>
<p> Shop <span id="arrow"> >> </span> </p>
<p> About <span id="arrow"> >> </span> </p>
</nav>
</div>
<div id="posts"> <!--content -->
{block:Posts}
<div class="container">
{block:Photo}
<div class="postPhoto">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="200px"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Video}
<li class="post video">
{Video-250}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
</div><!--end container -->
{/block:Posts}
</div>
</div>
</body>
</html>
A couple things.
1) Your #posts container is floated and therefore is only as wide as the content within it. Even if Packery was working it would just line them all up in a single column. You'll need to apply it a width. If you're not concerned with IE8, you can do something like this:
#posts {
width: -webkit-calc(100% - 180px);
width: -moz-calc(100% - 180px);
width: calc(100% - 180px);
}
2) The Packery error is odd, I'm not entirely sure what's causing it. But by butting this simple bit of JS through the Console, I was able to get it running:
var container = document.querySelector('#posts');
var pckry = new Packery( container, {
// options
itemSelector: '.container',
gutter: 10
});
Make sure this code comes at the end of your document, right before the closing </body>.
3) Since your posts are images, you'll need to make sure you're providing them a width and height so that Packery knows how big each post is. Unfortunately, since you're not using a standard Tumblr width, you'll need to include the imagesLoaded plugin and place your code inside its callback.
Easy way using jQuery:
var container = document.querySelector('#posts');
container.imagesLoaded( function() {
var pckry = new Packery( container, {
// options
itemSelector: '.container',
gutter: 10
});
});
If you were using a standard Tumblr size (like 250px) you'd be able to simply add a width and height attribute to each image and not need to worry about using imagesLoaded, like this:
<img alt="" src="{PhotoURL-250)" height="{PhotoHeight-250}" width="{PhotoWidth-250}" />

jQuery not working with my HTML at all?

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>

working on a project, want to add following menu-bar with minimum slide down

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?

javascript not working after jquery ajax call

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'
});
});

Categories

Resources