Locate the <marquee> in the body section
I want to put there, a for loop cycle to call the queryTable javascript function and then put inside the marquee tab, the image column.
I don't know how to do that.
At this point, the app works great showing me 6 pictures in a vertical scrolling animation using <marquee>
But I want to replace the <img src="kendo/styles/images/Climb.png" style="width:100%" /> for something like this
<marquee direction="up">
for loop
function queryTable
end loop
</marquee>
Any help?
Abdel
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script>
function DBTest()
{
var db;
if (window.sqlitePlugin !== undefined) {
db = window.sqlitePlugin.openDatabase("images");
alert("plugin uponDB Finish");
} else {
db = window.openDatabase("images", "1.0.0", "Image", 1000000);
alert("CreateDatabase Finish");
}
db.transaction(createTable);
function createTable(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS PICTURES (id INTEGER PRIMARY KEY AUTOINCREMENT, description TEXT, recordedDate DATE)');
alert("Table Created Finish");
}
db.transaction(insertRecord);
function insertRecord(tx) {
var cDate = new Date();
var t = "Record #1";
tx.executeSql("INSERT INTO PICTURES(description, recordedDate) VALUES (?, ?)",
[t, cDate],
OnSuccess,
OnError);
alert("Record Inserted Finish");
}
db.transaction(queryTable);
function queryTable(tx) {
tx.executeSql('SELECT * FROM PICTURES', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
alert("id: " + results.rows.item(i).id + " description: " + results.rows.item(i).description + " recorded on: " + results.rows.item(i).recordedDate.toString());
}
});
}
function OnSuccess(tx, r) {
alert("Your SQLite execution was successful!");
}
function OnError(tx, e) {
alert("SQLite Error: " + e.message);
}
}
</script>
</head>
<body>
<div data-role="view" id="tabstrip-home" data-title="Animation">
<h1>Welcome!</h1>
<p>
Icenium™ enables you to build cross-platform device applications regardless of your
development platform by combining the convenience of a local development toolset with the
power and flexibility of the cloud.
</p>
</div>
<div data-role="view" id="tabstrip-animation" data-title="Image Animation">
<h1>Animation</h1>
<table width="100%" height="100%">
<tr height="5%" align="center" valign="middle">
<td>
<div class="NewsButton" onclick="DBTest();">Noticias</div>
</td>
<td>
<div class="OffersButton" onclick="DBTest();">Calendario</div>
</td>
</tr>
<tr height="95%">
<td align="center" valign="middle" width="45%">
<marquee height="367" behavior="scroll" scrollamount="2" direction="up">
<img src="kendo/styles/images/Climb.png" style="width:100%" />
<img src="kendo/styles/images/Climb.png" style="width:100%" />
<img src="kendo/styles/images/Climb.png" style="width:100%" />
<img src="kendo/styles/images/Climb.png" style="width:100%" />
<img src="kendo/styles/images/Climb.png" style="width:100%" />
<img src="kendo/styles/images/Climb.png" style="width:100%" />
</marquee>
</td>
<td align="center" valign="middle" width="55%">
<marquee height="367" behavior="scroll" scrollamount="1.5" direction="up">
<img src="kendo/styles/images/Sunset.png" style="width:100%" />
<img src="kendo/styles/images/Sunset.png" style="width:100%" />
<img src="kendo/styles/images/Sunset.png" style="width:100%" />
<img src="kendo/styles/images/Sunset.png" style="width:100%" />
<img src="kendo/styles/images/Sunset.png" style="width:100%" />
<img src="kendo/styles/images/Sunset.png" style="width:100%" />
</marquee>
</td>
</tr>
</table>
</div>
<div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">
<h1>Say Hello!</h1>
<div id='helloWorldInput'>
<label for="txtName" style="display: inline-block;">Enter your name:</label>
<input type="text" id="txtName" value="" />
</div>
<div id='helloWorldText' style="display:block;"></div>
<div class="buttonArea">
<a id="resetButton" data-role="button" data-click="sayHelloReset" data-icon="refresh">Reset</a>
<a id="submitButton" data-role="button" data-click="sayHello" data-icon="compose">Submit</a>
</div>
</div>
<div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">
<h1>My Location</h1>
<div id="geoLocationContainer">
<div id="myLocation">Unable to get location information. Please check your network connection and try again.</div>
<a id="refreshMap" data-role="button" data-click="getLocation" data-icon="refresh">Refresh Location</a>
<div id="map_canvas"></div>
</div>
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip" id="tabStrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
<a href="#tabstrip-animation" data-icon="featured">Animation</a>
<a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
<a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
</div>
</div>
</div>
<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</script>
</body>
</html>
1 Answer, 1 is accepted
The marquee tag has been made obsolete in HTML5 (in fact it has never been part of the official W3C specification). The good news is that a counterpart functionality has been introduced in CSS 3 that you might consider using instead (see http://www.w3.org/TR/css3-marquee/).
In other words, you can use Kendo UI ListView and "animate" it via the newly exposed marquee css.
Regards,
Steve
Telerik
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.