I want to add an image carousel to my website which i am building using polymer(https://www.polymer-project.org/). But i am unable to find any core element/paper element with that functionality.
However i found a library that does that (https://github.com/addyosmani/polymer-ui-carousel) but not able to implement it. Please help me to implement image carousel in my polymer website.
The code that i am using is :-
<html class="polymer-ui-full-bleed">
<head>
<title>Just a new app</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../bower_components/font-roboto/roboto.html">
<link rel="import"
href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="post-card.html">
<link rel="import" href="post-list.html">
<link rel="import" href="../bower_components/polymer-ui-carousel/polymer-ui-carousel.html">
<link rel="stylesheet" href="../bower_components/polymer-ui-base-css/base.css">
<link rel="stylesheet" href="../bower_components/polymer-ui-carousel/smoke.css">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
.container {
width: 80%;
margin: 50px auto;
}
#media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
</style>
</head>
<body class="polymer-ui-body-text polymer-ui-full-bleed polymer-ui-light-bg" unresolved>
<core-header-panel>
<core-toolbar>
<paper-tabs id="tabs" selected="all" self-end>
<paper-tab name="all">All</paper-tab>
<paper-tab name="favorites">Favorites</paper-tab>
</paper-tabs>
</core-toolbar>
<div class="container" layout vertical center>
<post-list show="all"></post-list>
<h1><polymer-ui-carousel></h1>
<h2>With bullet controls</h2>
<polymer-ui-carousel>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</polymer-ui-carousel>
</div>
<!-- main page content will go here -->
</core-header-panel>
<script>
var tabs = document.querySelector('paper-tabs');
var list = document.querySelector('post-list');
tabs.addEventListener('core-select', function() {
list.show = tabs.selected;
});
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
</body>
</html>
After installing Polymer-ui-carousel(https://github.com/addyosmani/polymer-ui-carousel) i am getting this error.
Exception caught during observer callback: TypeError: Cannot read property 'children' of null
at polymer-ui-carousel.items (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:220:28)
at polymer-ui-carousel.Polymer.valueToSelection (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:278:30)
at polymer-ui-carousel.Polymer.updateSelected (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:255:16)
at polymer-ui-carousel.Polymer.selectedChanged (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:245:14)
at polymer-ui-carousel.g.invokeMethod (http://localhost:9000/bower_components/polymer/polymer.js:13:25932)
at polymer-ui-carousel.g.notifyPropertyChanges (http://localhost:9000/bower_components/polymer/polymer.js:13:24037)
at Object.x.report_ (http://localhost:9000/bower_components/polymer/polymer.js:12:18266)
at Object.S.check_ (http://localhost:9000/bower_components/polymer/polymer.js:12:22604)
at c (http://localhost:9000/bower_components/polymer/polymer.js:12:12173) polymer.concat.js:4861x.report_ polymer.concat.js:4861S.check_ polymer.concat.js:5264c polymer.concat.js:4757
Import Web Components' polyfill:
<script src="platform.js"></script>
Import Custom Element:
<link rel="import" href="polymer-ui-carousel.html">
Start using it! Simple include your code instaed of
With bullet controls:
<polymer-ui-carousel>
<div>here your code</div>
<div>here your code</div>
<div>here your code</div>
<div>and so on</div>
</polymer-ui-carousel>
With text label controls:
<polymer-ui-carousel labels="true">
<div title="Alpha">here your code</div>
<div title="Beta">here your code</div>
<div title="Gamma">here your code</div>
<div title="Delta">and so on</div>
</polymer-ui-carousel>
Your install will contain a bower folder with a child folder of /bower_components. You will want to type the bower install --save polymer-ui-carousel command while in that directory. You can get around this by adding bower to your Environment Path (depending on your operating system).
Once you type the command in you should see a new child folder in /bower_components that will contain the polymer-ui-carousel.html file.
Related
I can't figure out how I can save some text in a div which has 'ContentEditable="true"'set?
Basically, I am very naive at coding HTML and CSS and JS is way out of my league. However, I have managed to make some sort of a day planner for myself using HTML and CSS.
The problem is that, I don't know how to make the text that I put into a div in HTML (with contenteditable set to true) to remain and appear the next time I turn on the html file on a browser.
I am going to use my application only in localhost and don't want to use any sort of database.
Looking forward to you guys' expertise and kind help.
Required information is given below--
.quote
{
width: 92%;
height: 48vh;
margin: 2% auto auto auto;
background-color: beige;
border-style: solid;
border-width: 12px;
border-color: aqua;
display: grid;
grid-template-rows: 12% auto;
}
.quote .p
{
height: 100%;
margin:0 auto auto 12px;
font-family: 'Montserrat', sans-serif;
font-size: 12vh;
background-image: linear-gradient(180deg, rgba(26,18,189,1) 51%, rgba(43,181,131,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.quote .p p
{
height: 100%;
width: 100%;
margin:0;
}
.quote .writetext
{
min-height: 8vmax;
max-height: 19vmax;
width: 25.6vmax;
margin: 12px auto 12px auto;
border-style: solid;
border-width: 2px;
border-color: white;
font-family: 'Patrick Hand', cursive;
font-size: 4vh;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DayMaker- Welcome</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#-1,600&display=swap" rel="stylesheet">
</head>
<body>
<div class="quote">
<div class="p"><p>"</p></div>
<div class="writetext" contenteditable="true">
</div>
</div>
</body>
</html>
NOTE: The given code snippets are part of a larger project. So, please ignore the graphical discrepancies.
This is a pic of the project I'm working on:-WE need to fix that box at bottom right
I tried to search for solution a lot on the web but couldn't find any.
Sincerely looking forward to your help.
You need a database there is no way I know of to do it without the data base if you are having trouble with SQL you can use excel otherwise I do not have a solution except use a database
Will this work? It uses a textarea element instead of div with conteneditable=true. Since you don't have a database it stores the text in localstorage and retrieves from it on page reload.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DayMaker- Welcome</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#-1,600&display=swap" rel="stylesheet">
<style>
#writetext {
resize: none;
background-color: inherit;
}
</style>
</head>
<body>
<div class="quote">
<div class="p">
<p>"</p>
</div>
<textarea id="writetext" class="writetext"></textarea>
</div>
<script>
const textarea = document.querySelector('#writetext');
textarea.value = localStorage.getItem('writetext');
textarea.addEventListener('change', () => {
localStorage.setItem('writetext', textarea.value);
})
</script>
</body>
</html>
Since there is no submit button you will have to lose focus from the textarea to save the text.
I'm having trouble showing the ripple effect and the raised shadow on a polymer paper-button (v1.0 of Polymer).
It is showing when I run the demonstration (..bower_components/paper-button/demo/index.html) so all the code must be downloaded. Must be missing either an import or some CSS but cannot spot what is different between the demo page and my site page, or if it is some typo.
My Elements document is
<script src='http://www.polymer-project.org/components/platform/platform.js'></script>
<!-- Iron -->
<link rel="import" href="../bower_components/iron-icons/iron-icons.html"/>
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"/>
<!-- Paper Elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html"/>
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html"/>
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"/>
<link rel="import" href="../bower_components/paper-input/paper-input.html"/>
<link rel="import" href="../bower_components/paper-styles/paper-styles.html"/>
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html"/>
<link rel="import" href="../bower_components/paper-material/paper-material.html" />
<link rel="import" href="../bower_components/paper-behaviors/paper-button-behavior.html" />
<link rel="import" href="../bower_components/paper-behaviors/paper-inky-focus-behavior.html" />
<link rel="import" href="../bower_components/paper-button/paper-button" />
<link rel="import" href="../bower_components/paper-fab/paper-fab.html" />
<link rel="import" href="../bower_components/polymer/polymer.html"/>
My Page HTML is as follows
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GP and Practice search</title> <!-- Scripts -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/elements.html" />
<link rel="stylesheet" type="text/css" href="Styles/styles.css" />
<link rel="stylesheet" type="text/css" href="Styles/home.css"/>
<!-- google fonts definitions -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
</head>
<body unresolved class="fullbleed layout vertical">
<dom-module id="page-scafolding">
<template>
<paper-drawer-panel elevation="1">
<paper-header-panel main mode="waterfall-tall">
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="search" on-tap="srchandler" id="srchandler"></paper-icon-button>
<input type="text" id="searchText" hidden$="{{hideSearch}}" onkeypress="handleKeyPress(event);" />
<div class="middle paper-font-display2 app-name ident">Practice List</div>
</paper-toolbar>
<paper-material elevation="1">
<div id="Content" >
<span>
<paper-input class="searchBox" label="Search for:" />
</span>
<div style="text-align:center; padding:10px;">
<paper-button tabindex="0" raised="true" class="colorful" on-click="searchPractice">Search for GP Practice</paper-button>
</div>
</div>
</paper-material>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "page-scafolding",
ready: function () {
this.hideSearch = true;
this.$.searchText.keyup(function (e) {
alert('off to search for something!');
});
},
srchandler: function () {
// search for contents of search box is showing, otherwise show it.
if (!this.hideSearch)
{
alert('off to search for something!');
}
else {
this.hideSearch = !this.hideSearch;
if (!this.hideSearch) {
this.$.searchText.focus();
}
}
},
searchPractice: function () {
alert('clicking practice search');
}
});
</script>
</dom-module>
<page-scafolding />
</body>
</html>
There are two CSS files used by that page
Home.css
#searchText {
width:200px;
border: none;
line-height: 30px;
border-radius: 5px;
background: #3F59B5;
color: #fff;
outline: 0;
}
paper-material {
border-radius: 2px;
height: 100%;
padding: 16px 0px 16px 0px;
width: calc(98.66% - 16px);
margin: 16px;
background: white;
}
#Content
{
padding:16px;
}
paper-button {
display: block;
margin-bottom: 24px;
color: #fff;
background:#4285F4;
padding:5px;
width:175px;
}
paper-button paper-ripple {
color: var(--paper-pink-a200);
}
and
Styles.css
body {
margin:0px;
background:#e0e0e0;
font-family:Roboto;
}
Can anyone please see where I am going wrong.
Knew I'd missed something - the include for the paper-button was missing it's extension - it should read.
<link rel="import" href="../bower_components/paper-button/paper-button.html" />
in addition the css class for the paper-material was also mucking up the display of the ripple - so that has been changed to a class name.
Removed much of the paper-button class as well meaning I now get a nice blue paper-button
.contentContainer {
border-radius: 2px;
height: 100%;
padding: 16px 0px 16px 0px;
width: calc(98.66% - 16px);
margin: 16px;
background: white;
}
#Content
{
padding:16px;
}
paper-button {
color: #fff;
background:#4285F4;
}
I am trying to create nested paper-tabs and core-pages. My problem is that after Tab 2 is selected, Page Content 11 or Page Content 12 is left over. How do I hide the unselected "page content", enclosed by div in my case?
index.html:
<!doctype html>
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="page.css">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="my-page.html">
<style>
html,body {
height: 100%;
margin: 0;
font-size:62.5%;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
font-size:3em;
}
</style>
</head>
<body unresolved>
<core-header-panel>
<my-page id="p"></my-page>
</core-header-panel>
<script>
data=[
{
TabCaption:"Tab 1"
,children:[
{
TabCaption:"Tab 11"
,PageContent:"Page Content 11"
,children:null
}
,{
TabCaption:"Tab 12"
,PageContent:"Page Content 12"
,children:null
}
]
}
,{
TabCaption:"Tab 2"
,PageContent:"Page Content 2"
,children:null
}
];
document.querySelector("#p").pages=data;
</script>
</body>
</html>
my-page.html:
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/core-pages/core-pages.html">
<polymer-element name="my-page" attributes="pages">
<template repeat if="{{pages}}">
<style>
paper-tabs {
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
color: #F00;
background-color: #00BCD4;
}
core-selected {
background-color: #00FF00;
}
paper-tab {
font-size:1.6em;
}
</style>
<paper-tabs selected="{{selected}}" flex self-end layout>
<template repeat="{{p in pages}}">
<paper-tab>{{p.TabCaption}}</paper-tab>
</template>
</paper-tabs>
<core-pages selected="{{selected}}">
<template repeat="{{p in pages}}">
<div one flex vertical layout>
<template if="{{p.PageContent}}">
{{p.PageContent}}
</template>
<template if="{{p.children}}">
<my-page pages="{{p.children}}"></my-page>
</template>
</div>
</template>
</core-pages>
</template>
<script>
Polymer({
selected:0
});
</script>
</polymer-element>
Thank you in advance for the enlightenment!
Edit:
#JoppeSchwartz:
Thank you for your kind help! I learn a lot from it.
Iceweasel v.35 behaves the same as those screen shots in my original post. Chromium v.40 renders incorrect effects.
After inspecting the elements in the browser debugger, I find that the div enclosing the PageContent is being rendered with zero height. To resolve this, I used the following steps:
In index.html:
Add the fullbleed attribute to the <body> element, per the Polymer layout docs. This tells the body to take up all available space in the viewport.
<body unresolved fullbleed>
Add the vertical layout and flex attributes to the code in the body so that they take up available vertical space:
<core-header-panel vertical layout>
<my-page flex id="p"></my-page>
</core-header-panel>
In my-page.html:
Add the vertical layout attributes to the <my page> component and the flex attribute to the ` element so that it takes up :
<polymer-element name="my-page" attributes="pages" vertical layout>
. . .
<core-pages selected="{{selected}}" flex>
At this point, the <paper-tabs> will be pushed to the right side of the page. This is not what you want, I gather, so remove the self-end attribute:
<paper-tabs selected="{{selected}}" layout>
Finally, although this is not strictly necessary, I noticed that the core-selected selector in your style section should read .core-selected if you want to select the CSS class of that name.
For completeness, here are the edited versions of your code:
index.html
<!doctype html>
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="page.css">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="my-page.html">
<style>
html,body {
height: 100%;
margin: 0;
font-size:62.5%;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
font-size:3em;
}
</style>
</head>
<body unresolved fullbleed>
<core-header-panel vertical layout>
<my-page flex id="p"></my-page>
</core-header-panel>
<script>
data=[
{
TabCaption:"Tab 1"
,children:[
{
TabCaption:"Tab 11"
,PageContent:"Page Content 11"
,children:null
}
,{
TabCaption:"Tab 12"
,PageContent:"Page Content 12"
,children:null
}
]
}
,{
TabCaption:"Tab 2"
,PageContent:"Page Content 2"
,children:null
}
];
document.querySelector("#p").pages=data;
</script>
</body>
</html>
my-page.html
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/core-pages/core-pages.html">
<polymer-element name="my-page" attributes="pages" vertical layout>
<template repeat if="{{pages}}">
<style>
paper-tabs {
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
color: #F00;
background-color: #00BCD4;
}
.core-selected {
background-color: #00FF00;
}
paper-tab {
font-size:1.6em;
}
</style>
<paper-tabs selected="{{selected}}" layout>
<template repeat="{{p in pages}}">
<paper-tab>{{p.TabCaption}}</paper-tab>
</template>
</paper-tabs>
<core-pages selected="{{selected}}" flex>
<template repeat="{{p in pages}}">
<div one flex vertical layout>
<template if="{{p.PageContent}}">
{{p.PageContent}}
</template>
<template if="{{p.children}}">
<my-page pages="{{p.children}}"></my-page>
</template>
</div>
</template>
</core-pages>
</template>
<script>
Polymer({
selected:0
});
</script>
</polymer-element>
Here's the JSfiddle: http://jsfiddle.net/mostthingsweb/cRayJ/1/
I'll include my code and then explain what's wrong
Here's my HTML header to show that everything should be linked:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
Here's the CSS:
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
Here's the JS:
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
So the grid will launch and the paragraph will be there, however if I try to drag it, it won't work. When I inspect the page it gives me an error saying: "Uncaught TypeError: undefined is not a function" that points to line 2 of my JS code. What am I doing wrong?
Here's the whole HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
</body>
</html>
I pasted the code you've submitted into a local HTML file and it works fine for me (I did not add the test.js but pasted the code in script tags just before the closing body tag.
Here's the entire file (tested in Chrome only)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<style type="text/css">
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
</style>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
</script>
</body>
I think the problem might be that you're loading jquery and your js files in the head of your code. When it reads your js, it's looking for $(#draggable5), but draggable5 hasn't loaded yet, so it's an empty selector. Try moving your scripts to just before the close of your body element.
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>