I am currently working on an app. I have a navigation menu that I can open and close using a button, but whenever I load the app the menu is open. I have tried <div id="navigation" style="display:none;"> but that just stops it from opening. I would prefer that this be in HTML, JavaScript, and/or simple CSS, but no jQuery. Also I would like to change the text in the button (span TogNavTxt) to open or close depending on weather the button would open the menu or close the menu. I tried document.getElementById(TogNavTxt).innerHTML = Close; but it didn't work.
index.html:
<!DOCTYPE html>
<html>
<style>
.btn-group button {
background-color: #3333ff;
width: 100%;
border: 1px solid Black;
color: white;
padding: 2px 10px;
cursor: pointer;
float: left;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group button:hover {
background-color: #0000b3;
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="Home.css">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
<title>ZcoolUnity</title>
</head>
<body>
<button onclick="ToggleNav('navigation');">Open</button>
<div id="navigation">
<div class="btn-group">
<button><b>Home</b></button>
<button>ZU Games</button>
<button>Community Games</button>
<button>Announcments</button>
<button>Staff</button>
<button>Contact Me</button>
<button>Assets</button>
</div>
</div>
<script type="text/javascript" src="Home.js"></script>
</body>
</html>
Home.js:
function ToggleNav(navigation) {
var e = document.getElementById(navigation);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
Even though you've already accepted an answer, I'm posting this for completeness — it gets rid of the inline styles and inline event handlers, as I mentioned in my comment, and separates the html, css, and javascript (Separation of Concerns — "SoC")
Semantic markup uses classes that describe what something is and/or the state of something, so this describes the navigation block as being either open or closed. What is meant by open or closed is then left up to the style-sheet.
I also changed the <div id="navigation"> to <nav id="navigation"> ... if you're using HTML5 you ought to use the new semantic tags that are available.
I've commented out the <link rel="stylesheet" ...> and the <script src="Home.js"> because a "Stack-snippet" automatically includes them as part of the snippet. Also note that type="text/javascript" is no longer needed in HTML5.
(Stack Snippets! jsfiddles no longer needed!)
function ToggleNav(event) {
let nav = document.getElementById('navigation');
console.log('click triggered');
let navClasses = nav.classList;
if (nav.classList.contains('closed')) {
nav.classList.remove('closed');
nav.classList.add('open');
}
else {
nav.classList.remove('open');
nav.classList.add('closed');
}
}
document.getElementById('toggle-nav')
.addEventListener('click', ToggleNav);
#navigation, #navigation.open {
display: block;
}
#navigation.closed {
display: none;
}
.btn-group button {
background-color: #3333ff;
width: 100%;
border: 1px solid Black;
color: white;
padding: 2px 10px;
cursor: pointer;
float: left;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group button:hover {
background-color: #0000b3;
}
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="Home.css"> -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
<title>ZcoolUnity</title>
</head>
<body>
<button id="toggle-nav">Open</button>
<nav id="navigation" class="closed">
<div class="btn-group">
<button><b>Home</b></button>
<button>ZU Games</button>
<button>Community Games</button>
<button>Announcments</button>
<button>Staff</button>
<button>Contact Me</button>
<button>Assets</button>
</div>
</nav>
<!-- <script src="Home.js"></script> -->
</body>
</html>
Basically your JS misses some " around the "navigation".
To have it closed on start, add display:none and set the new Button text via innerHTML on a element. On an input-tag with type="button", set the value instead.
HTML:
<div id="navigation" style="display: none;">
<div class="btn-group">
<button><b>Home</b></button>
<button>ZU Games</button>
<button>Community Games</button>
<button>Announcments</button>
<button>Staff</button>
<button>Contact Me</button>
<button>Assets</button>
</div>
</div>
<button id="togglebtn" onclick="toggleNav();">Open</button>
<input id="toggleinput" onclick="toggleNav();" value="Open" type="button">
JS:
function toggleNav(){
var e = document.getElementById("navigation");
if(e.style.display == 'none'){
e.style.display = 'block';
document.getElementById("togglebtn").innerHTML = "Close";
document.getElementById("toggleinput").value = "Close";
} else{
e.style.display = 'none';
document.getElementById("togglebtn").innerHTML = "Open";
document.getElementById("toggleinput").value = "Open";
}
}
Watch in action here:
https://codepen.io/anon/pen/BVwVrg
Just add the following css:
#navigation {
display: none;
}
That hides the menu by default.
Here's a jsfiddle with some other changes (not a lot) that works:
https://jsfiddle.net/md8njv2y/8/
Related
Attempting a vanilla js solution to focus .btn-1 by default on page load.
Can't figure out why I keep getting this error : index.js:2 Uncaught TypeError: document.getElementsByClassName(...).focus is not a function at window.onload (index.js:2)
Anyone have thoughts on this please?
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<button class="btn btn-1">1</button>
<button class="btn btn-2">2</button>
<button class="btn btn-3">3</button>
<script src="index.js" async defer></script>
</body>
</html>
index.css :
.btn {
/* background-color: #4caf50; Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 1em;
}
.btn:hover {
background-color: grey;
}
.btn:focus {
background-color: blue;
}
index.js :
window.onload = function () {
document.getElementsByClassName('btn-1').focus();
};
The getElementsByClassName returns an array you can do this if you do like this
window.onload = function () {
document.getElementsByClassName('btn-1')[0].focus();
};
or you can use querySelector instead which targets the first element on the document
window.onload = function () {
document.querySelector('.btn-1').focus();
};
Have you tried the autofocus attribute you can give to the button elements.
Refer the link
<button type="button" autofocus>Click Me!</button>
My main.html displays the menu.htm and welcome.htm using frameset. Drop down menu buttons "Admin..." and "Scheduler..." suppose to show dropdown content on mouse hover. Since welcome.htm is on top of menu.htm therefore content of the dropdown button doesn't show up.
However, All menu button work as expected when open the menu.htm as standalone page(see attached pic)menu.htm But drop-down buttons content does not show up when open in main.html using frame tags.
main.html
<html>
<head>
<title>Main Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<meta http-equiv="cache-control" content="max-age=0" />
</head>
<frameset rows = "25,*" >
<frame frameborder="0" marginheight="0" marginwidth="0" scrolling="no" id="menu_frame1"
name="menu_frame" src="menu.htm" />
<frame frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"
id="content_frame1" name="content_frame" src="welcome.htm" />
</frameset>
</html>
Here is menu.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Main Menu</title>
<style type="text/css">
body
{
background-color: #333;
border: 0px;
margin: 0px;
padding: 0px;
FONT-SIZE: 15px;
FONT-FAMILY: sans-serif;
}
.topnav
{
overflow: hidden;
background-color: green;
}
.topnav a
{
float: left;
color: #fec10d;
font-size: 15px;
text-align: center;
text-decoration: none;
font-weight: none;
padding-left: 10px;
padding-right: 10px;
}
.topnav a:hover
{
background-color: #ddd;
text-decoration: underline;
color: black;
}
.topnav a.active
{
margin-top: 5px;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 15px;
border: none;
outline: none;
color: #fec10d;
padding: 5px 7px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #fec10d;
color: white;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 90px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
background-color: #582c83;
color: white;
padding: 5px 7px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #fec10d;
}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
<script type="text/javascript">
function open_in_content(url)
{
parent.document.getElementById("content_frame").src = url;
}
function open_in_new(url)
{
window.open(url);
}
</script>
</head>
<body>
<div class="topnav">
<a class="active" href="/mainmenu" target="_top">Home</a>
<a class="active" href="/acctlist" target="content_frame">Accounts</a>
<a class="active" href="/reports/main" target="content_frame">Customers</a>
<div class="dropdown">
<button class="dropbtn">Admin...<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Add Account
Files
Add Rule
Account Update
Ref Upload
Check stats
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Scheduler...<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
New Job
Remove Job
Add checkpoint
</div>
</div>
<a class="active" href="help/index.htm" target="content_frame">Help</a>
</div>
</body>
</html>
Here is welcome.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>
Main Menu Welcome Page
</TITLE>
</HEAD>
<BODY>
Use the links at the top of the menu to navigate.
</BODY>
</HTML>
first of all Why not use html5?
You should use iframe instead of frame
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
after, you add id to iframe and you add display option or you add "position:absolute;z-index" these iframes with css.
after, then was mouseover in iframe you change z-index option with javascript
I help you but first
Can you review jquery.load()
https://api.jquery.com/load/
I think it might be easier for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="divMenu"></div>
</body>
</html>
<script>
$(document).ready(function(){
$("#divMenu").load("./menu.html");//.txt or html or url
});
</script>
try this
Even if the scroll page, the menu will remain at the top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{background-color:#333}
*{margin:0;padding:0;border:0}
.menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:#111;}
.content{float: left;width:100%;margin-top:50px;height:100vh;}
</style>
</head>
<body>
<iframe class="menuBar" src="./menu.html" ></iframe>
<iframe class="content" src="./welcome.html" ></iframe>
</body>
</html>
try this
I made the "manubar "background transparent and when mouseover and manubar the height will automatically 300px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{background-color:#333}
*{margin:0;padding:0;border:0}
.menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:transparent;}
.content{float: left;width:100%;margin-top:50px;height:100vh;}
</style>
</head>
<body>
<iframe class="menuBar" src=".menu.html" ></iframe>
<iframe class="content" src="./welcome.html" ></iframe>
</body>
</html>
<script>
var menuBar = document.querySelector(".menuBar")
menuBar.onmouseover = function(){
menuBar.style.height="300px"
}
menuBar.onmouseout = function(){
menuBar.style.height="50px"
}
</script>
.nav > li > a:hover,
.nav > li > a:focus,
.navbar-header > a:hover,
.navbar-header > a:focus {
background-color: #7F613F;
}
.icon-color {
color: #282828;
}
.nav {
display: flex;
}
#media (max-width: 768px) {
.nav > li {
float: left;
}
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top" style="background-color: #b39369; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="navbar-header">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li><a class="icon-change" href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
What i want is that if element has class icon-change, that class can get effect something like my css effects.
In other words, What i want to know is how can i change that element's background color when mouse is on that element, or when mouse over that element.
For more example,
when mouse is in the class icon-change, i want icon-change's background color be 'red'.
when mouse is over the class icon-change, i want icon-change's color be 'blue'.
when i mouse click on the class icon-change, i want icon-change's color be 'pink', and it's last until i re-click the class icon-change. In this re-clicked moment, re-clicked class icon-change is returned to fist status like there's nothing happened yet.
How can i do this through jQuery?
You can use .on() see reference here to attach an event handler function
then use mouseenter - use when mouse enter the object
mouseeleave - use when mouse leave the object
click- use when click on the object
$('.icon-change').on('mouseenter',function(){
$('.icon-change').css("background-color","red");
});
$('.icon-change').on('mouseleave',function(){
$('.icon-change').css("background-color","blue");
})
$('.icon-change').on('click',function(){
$('.icon-change').css("background-color","pink");
});
.nav > li > a:hover,
.nav > li > a:focus,
.navbar-header > a:hover,
.navbar-header > a:focus {
background-color: #7F613F;
}
.icon-color {
color: #282828;
}
.nav {
display: flex;
}
#media (max-width: 768px) {
.nav > li {
float: left;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top" style="background-color: #b39369; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="navbar-header">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li><a class="icon-change" href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
keep using css, just add a class like 'selected' with background-color: pink and toggle it on click
$('.icon-change').click((e) => { e.target.toggleClass('selected'); }
you can handle mouse effect via jquery.
$(selector).on('mouseover mouseleave', function(e){
console.log(e.type)
})
check the console.
you use this methods to achieve
$(".icon-change").mouseover(function(){
$(this).css("background-color","red")
});
similarly you can use other methods.
Try this :
var flag = true;
$(".icon-change").mouseover(function(){
if(flag) {
$(".icon-color").css("color", "blue");
}
});
$(".icon-change").mouseleave(function(){
if(flag) {
$(".icon-color").css("color", "#282828");
}
});
$(".icon-change").click(function(){
if(flag) {
$(".icon-color").css("color", "pink");
flag = false;
} else {
$(".icon-color").css("color", "#282828");
flag = true;
}
});
I am creating a website on github pages using bootstrap, but the drop-down does not seem to be working on the nav bar (sometimes works, sometimes not). I am using $("#nav").load("url");
to load the nav bar so I can change it and have the changes apply to many pages. The drop-downs work on the page that I am loading if I go there directly. The web page is http://scratchos.github.io/index2.html
/resorces/navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--main.css, i do not know if it is used on the page, i think not-->
<link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
<!--meta-->
<meta charset="utf-8">
<!--get url parameters for adding classes to set items to make it applicable to all pages-->
<script>
function getParameter(theParameter) {
var params = window.location.search.substr(1).split('&');
for (var i = 0; i < params.length; i++) {
var p=params[i].split('=');
if (p[0] == theParameter) {
return decodeURIComponent(p[1]);
}
}
return false;
}
</script>
<!--bootstrap dropdown code-->
<script>
$(document).ready = function () {
$('.dropdown-toggle').dropdown();
};
</script>
</head>
<body>
<!--bootstrap nav bar-->
<div class="nav nav-tabs">
<li id="home">Home</li>
<li id="projects">My Projects</li>
<li id="hfb">
<!--JQuery-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Hungry-For-Blocks<span class="caret"></span></button>
<ul class="dropdown-menu">
<li id="hfb-home">Home</li>
<li id="hfb-about">About</li>
<li id="hfb-doc">Documentation</li>
<li id="hfb-ins">Instalation</li>
</ul>
</div>
</li>
<li id="tut">Tutorials</li>
</div>
<!--script to apply the classes based on url params once page has loaded; it is done in this way because github does not support php:(-->
<script>
window.onload = function () {
$("#" + getParameter("active")).addClass("active");
if (getParameter("dis") !== false) {
$("#" + getParameter("dis")).addClass("disabled");
};
};
</script>
</body>
</html>
/stylesheets/main2.css
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
color: #ff6600;
}
.jumbotron .container {
position: relative;
top: 100px;
}
.jumbotron h1 {
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotronm p {
font-size: 20px;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.forum {
padding: 20px;
}
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--rendering script in css and jquery for the site, not relevent i think?-->
<link rel="stylesheet" href="//scratchos.github.io/ScratchBlocks/scratchblocks2.css">
<script src="//scratchos.github.io/ScratchBlocks/scratchblocks2.js"></script>
<script>
$(document).ready(function() {
scratchblocks2.parse();
});
</script>
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--main.css custom page css i don't think it is needed in this, because everything it formats has been omitted from this code?-->
<link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
<!--set jubmotron background, probably an inefficient way of doing it?-->
<style>.jumbotron{background-image:url('https://scratchos.github.io/images/jumbotron.png');}</style>
<!--bootstrap metas-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--title-->
<title>-ScratchOs|Home</title>
<!--loading the nav bar-->
<script>
$(function(){
$("#nav").load("http://scratchos.github.io/resorces/navbar.html");
});
</script>
<!--bootstrap dropdown code-->
<script>
$('#hfb a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</head>
<body>
<!--nav bar-->
<div id="nav"></div>
<!--the rest of the page is not included-->
</body>
</html>
If you can fix the dropdowns it would be excellent. Thanks :)
I would consider using a script.js file instead of embedding it. If you go to http://scratchos.github.io/resorces/navbar.html it works just fine, the problem is that you're defaulting to your index.html (as you should), but it's not getting the code that you put straight into your navbar.html. Making a script file that both pages reference should fix your issue.
Just remove the plugins that are common in both the pages and that will fix it.
I am making a Tizen web app and want to use jQuery mobile's "taphold" listener.
I downloaded the latest .js from the jQuery mobile site, but when I try to include it, it doesn't work.
Am I meant to use it with jQuery or by itself? both product errors.
Without including jQuery I get the error:
js/jquery.mobile-1.4.2.min.js (26) :TypeError: 'undefined' is not an object (evaluating '$.mobile = {}')"
But if I do include jQuery when going to that page the screen is completely black and I can not do anything.
You should post your code. JQuery Mobile works with Tizen, you can even add it to project from IDE.
Below is index.html for TizenWeb version of JQuery tutorial on taphold event. All is working. You can use it as template for your solution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A single-page template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Tizen - jQuery Mobile - tapHold listener</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.2.0.css"/>
<script type="text/javascript" src="./js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<style>
<!--
based on http://api.jquerymobile.com/taphold/
-->
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 85px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 85px;
}
#nav {
font-size: 200%;
width:17.1875em;
margin:17px auto 0 auto;
}
#nav a {
color: #777;
border: 2px solid #777;
background-color: #ccc;
padding: 0.2em 0.6em;
text-decoration: none;
float: left;
margin-right: 0.3em;
}
#nav a:hover {
color: #999;
border-color: #999;
background: #eee;
}
#nav a.selected,
#nav a.selected:hover {
color: #0a0;
border-color: #0a0;
background: #afa;
}
div.box {
width: 3em;
height: 3em;
background-color: #108040;
}
div.box.taphold {
background-color: #7ACEF4;
}
</style>
</head>
<body>
<!--
based on http://api.jquerymobile.com/taphold/
-->
<div data-role="page" >
<div data-role="header" data-position="fixed" >
<h1>Single-Page Application </h1>
</div><!-- /header -->
<div data-role="content" >
<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page.</p>
<h3>Long press the square for 750 milliseconds to see the above code applied:</h3>
<div class="box"></div>
<script>
$(function(){
$( "div.box" ).bind( "taphold", tapholdHandler );
function tapholdHandler( event ) {
$( event.target ).addClass( "taphold" );
}
});
</script>
</div><!-- /page -->
</body>
</html>