|
JavaScript - Testing My Html5 (phonegap With Local Database)... Error , No Such Table
Please help,
I have built a HTML5 ap with local database using phonegap, I am now testing in xcode... my ap works fine in Web Kit browser but when I test on my iphone through xcode, I get the error message: There has been an error: no such table: **** here is my code: Code: <script type="text/javascript">
var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() {
var dbSize = 10 * 1024 * 1024; // 10MB
html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
}
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 TEXT, weight1 TEXT, bmires TEXT, added_on DATETIME)", []);
tx.executeSql("ALTER TABLE bmical ADD bmires INTEGER");
});
}
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var weight1 = document.getElementById("weight1").value;
var height2 = todoText / 100
var BMI = weight1 / (height2 * height2)
var BMI = BMI;
var bmires = BMI.toFixed(3);
var addedOn = new Date();
tx.executeSql("INSERT INTO bmical(height1, weight1, bmires, added_on) VALUES (?,?,?,?)",
[todoText, weight1, bmires, addedOn],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM bmical ORDER BY added_on ASC", [], renderFunc,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM bmical WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>On: <span>" + row.added_on + "</span> Height: <span>" + row.height1 + "cm</span> Weight: <span>" + row.weight1 + "lbs</span> BMI: <b>" + row.bmires + "</b><a class='delete' href='javascript:void(0);' onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a></li>";
}
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
function addTodo() {
var height1 = document.getElementById("height1");
html5rocks.webdb.addTodo(height1.value);
height1.value = "";
}
</script>
Similar TutorialsI run Windows 7 and IE9, and I believe IE9 supports HTML5 Local Storage. But when I run this offline (locally) in IE9 Code: <script type="text/javascript">
function testSupport() {
if (localStorage) {return "Local Storage: Supported"}
else {
return "Local Storage: NOT supported";
}
}
alert ( testSupport() );
</script>
I get "LocalStorage: NOT supported". Chrome returns "Local Storage: Supported" My DOCTYPE is <!DOCTYPE html> Other tests also fail in IE. Example: Code: localStorage.setItem("name", "Hello World!");
alert(localStorage.getItem("name"));
Above works in Chrome. Any advice, please? Have I not configured IE9 properly? Please help with some javascript for client side storage in html5 mobile safari. Here we wish to use local storage [persistent]. The page index.html has a list of links to question pages e.g. question1.html. When question1.html is answered correctly the page goes to answer1.html. From here, the page moves back to index.html by pressing a button. The button has 2 actions: goto index.html place a key/value pair in local storage - e.g. localStorage.setItem("name", "answer1"); On reloading, the index.html page then asks the local storage if the key/value pair ("name" "answer1") is stored. If yes, a new graphic appears next to the link. If no, the old graphic remains. Thank you for any help. Hi, So I'm testing my webpage in IE8. In firefox it looks and runs greag, but in IE 8, one issue I'm having is this: I have a button that opens a popup window. Works fine in Firefox, but I get 'invalid argument' error in IE8 and the window does not open. I've enabled at a whim some scripting things in the Internet Options hoping that would resolve the issue, but not so. Here's the code. The "invalid argument" occurs on the window.open call. Code: function open_report()
{
createURL();
var report_vars = created_URL;
report_vars = report_vars.substr(69);
report_array = report_vars.split('=');
var from_d = report_array[2].substr(0,10);
var to_d = report_array[3].substr(0,10);
window.open('detailedreport.shtml' + report_vars, 'My Site | Detailed Report - ' + from_d + ' to ' + to_d, 'title=yes, status=no, toolbar=no, location=no, menubar=no, scrollbars=yes, modal=yes, alwaysRaised=yes, width=' + window.outerWidth / 1.1 + ', height=' + window.outerHeight);
}
In addition, is there any way to have that tile I've given it, "my Site..." appear in the window header? Right now it's not appearing at all in either browser. Thanks for reading! I am having a problem sending info to a database. I have set up drag and drop with HTML5 and it is working, but I need to be able to get the values of the images uploaded to the database when each one is dropped into a dropzone. I don't need to upload the images to the database - just need the value of each image sent to it. Here is the HTML: Code: <ul id="images"> <li><a id="1" draggable="true"><img src="images/1.jpg" value = "flower"></a></li> <li><a id="2" draggable="true"><img src="images/2.jpg" value = "boy"></a></li> <li><a id="3" draggable="true"><img src="images/3.jpg" value = "girl"></a></li> </ul> <form name = "objects" id="form" action = "form.php" method = "post"> <div class="drop_zones"> <div class="drop_zone" id="drop_zone1" droppable="true" type = "text" name = "drop_zone1"> </div> <div class="drop_zone" id="drop_zone2" droppable="true" type = "text" name = "drop_zone2"> </div> <div class="drop_zone" id="drop_zone3" droppable="true" type = "text" type = "file" name = "drop_zone3"> </div> </div> and the javascript Code: var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
function updateDataTransfer() {
dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(dragItems[i], 'dragstart', function (event) {
event.dataTransfer.setData('obj_id', this.id);
return false;
});
}
}
addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault) event.preventDefault();
this.style.borderColor = "#000";
return false;
});
addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault) event.preventDefault();
this.style.borderColor = "#ccc";
return false;
});
addEvent(dropAreas, 'dragenter', cancel);
// drop event handler
addEvent(dropAreas, 'drop', function (event) {
if (event.preventDefault) event.preventDefault();
// get dropped object
var iObj = event.dataTransfer.getData('obj_id');
var oldObj = document.getElementById(iObj);
// get its image src
var oldSrc = oldObj.childNodes[0].src;
oldObj.className += 'hidden';
var oldThis = this;
setTimeout(function() {
oldObj.parentNode.removeChild(oldObj); // remove object from DOM
// add similar object in another place
oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /> </a>';
// and update event handlers
updateDataTransfer();
// little customization
oldThis.style.borderColor = "#ccc";
}, 500);
return false;
});
and the php PHP Code: <?php $sql="INSERT INTO table_answers (drop_zone1, drop_zone2, drop_zone3) VALUES ('$_POST[drop_zone1]','$_POST[drop_zone2]','$_POST[drop_zone3]')"; if (!mysql_query($sql,$db)) { die('Error: ' . mysql_error()); } echo $_POST["drop_zone1"]; echo $_POST["drop_zone2"]; echo $_POST["drop_zone3"]; ?> There is no error, it is not registering that there is something in the dropzone - nothing is being sent through the php. I have tried doing it with just text(instead of the image) and that won't work either. I am unsure of how to target the value of each image through javascript/php. Please help if you can, Thanks I have a simple mobile app designed using PhoneGap. I am some mp3 in it and I am using the Media plugin of PhoneGap. Everything is working fine, the audio is playing and so on. The issue, I noticed after playing 8-12 times, the audio stops playing. I do not get sound. Here are my codes: Code: <script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {}
// Audio player
var media = null;
var audioP = false;
// Play audio
function playAudio(src) {
if (audioP === false) {
media = new Media(src, onSuccess, onError);
media.play();
audioP = true;
} else {
media.release();
}
}
// onSuccess Callback
function onSuccess() {
console.log("playAudio():Audio Success");
audioP = false;
}
// onError Callback
function onError(error) {}
</script>
Help! Hi, so, I had a rethink about my problem discussed in this thread, where the function won't run properly a second time if the page hasn't been reloaded. That one appears not to have a solution, and I was thinking that a reasonable plan B is the following: a) test if the function has already been run since the page was loaded b) if not, run the function c) if it has, reload the page with the onClick, then run the function automatically on reloading. the problem I envisage is will the page "remember" to run the function once it has been reloaded? Of course, it would be simpler to do it running the function automatically once the page loads, then just reloading if the test comes back that the function has been run already, but that wouldn't work for the first time you visit the page - it would start running straight away, whereas I want it to wait for that first click. Is this possible? Here's the page I'm working on, if you want to have a look. thanks for any suggestions. I keep getting an error on the following bit of code: document type does not allow element "table" here. Can anyone help Code: return_by_id('quoteboxpre').innerHTML = '<table><tr><td colspan="2"><strong>'+cat.options[cat.selectedIndex].text+'</strong> '+p.options[p.selectedIndex].text+'</td></tr></table>';
Hello, JavaScript Obfuscation is always a topic which generates some controversy. Its use has many pros and cons depending on what one wishes to achieve. We have extensive knowledge about the subject and we would like to encourage a open discussion on the topic of JavaScript obfuscation: Techniques, application cases, ... Why are we interested in talking openly about this? Well, we are developing a new tool for javascript obfuscation which is still in beta and would like to improve it based on you feedback. If you wish you can check it out at: www.jscrambler.com. Thanks I have a script that I had written for me that works in IE (I guess its a ActiveX?) but I display it in the HTML page as the below HTML. I want to be able to tell in Javascript if this object is available in IE Code: <object id="IEPrinterChecker" classid="CLSID:506974F1-EA53-40C6-940A-4A1D47D5934B" width="0" height="0"></object> Listed below you can tell I can check if the plugin is available in Firefox without having to specify in the html the object. How can I do this in IE? Code: <script language="JavaScript">
var plugin;
if ( window.ActiveXObject ) {
// IE
alert("How do I check for the plugin here?");
} else {
var type = "application/printer-checker-component;version=1.0.0.1"; // your mimeType
if (navigator && navigator.mimeTypes){
var mt = navigator.mimeTypes;
for (var i = 0; i < mt.length; i++){
if (mt[i].type == type) {
plugin = mt[i].enabledPlugin;
if (plugin) break;
}
}
}
}
if(plugin) {
// insert object and/or test the plugin with script
alert("plugin is available");
} else {
alert("plugin not available or disabled");
}
</script>
Hi, The following code tests the 'numbers' field for numbers. It generates an alert if the field contains anything but numbers. Code: <script type='text/javascript'>
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
<form>
Numbers Only: <input type='text' id='numbers'/>
<input type='button'
onclick="isNumeric(document.getElementById('numbers'), 'Numbers Only Please')"
value='Check Field' />
</form>
However, if I want to change the above statement to read if the textfield does not equal to a number, return true, else, alert the user and return false. I change the branch statement and have it read "if(!(elem.value.match(numericExpression)))," to try to do this. But, the alert message does not generate if I enter "abc123" even though that value clearly contains numbers. Not sure what is going here. Please help me. Thank you. Please help, my mobile ap with local database HTML5 works fine in a web browser: see here Although when I tested on my iPhone through xcode using phonegap, I got an error: " no such table: bmical " I thought the JavaScript I have CREATES a table called bmical IF NOT EXIST Please help, my code is below: Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>bm-my</title>
<script type="text/javascript">
var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() {
var dbSize = 10 * 1024 * 1024; // 10MB
html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
}
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 TEXT, weight1 TEXT, bmires TEXT, added_on DATETIME)", []);
tx.executeSql("ALTER TABLE bmical ADD bmires INTEGER");
});
}
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var weight1 = document.getElementById("weight1").value;
var height2 = todoText / 100
var BMI = weight1 / (height2 * height2)
var BMI = BMI;
var bmires = BMI.toFixed(3);
var addedOn = new Date();
tx.executeSql("INSERT INTO bmical(height1, weight1, bmires, added_on) VALUES (?,?,?,?)",
[todoText, weight1, bmires, addedOn],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM bmical ORDER BY added_on ASC", [], renderFunc,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM bmical WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>On: <span>" + row.added_on + "</span> Height: <span>" + row.height1 + "cm</span> Weight: <span>" + row.weight1 + "lbs</span> BMI: <b>" + row.bmires + "</b><a class='delete' href='javascript:void(0);' onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a></li>";
}
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
function addTodo() {
var height1 = document.getElementById("height1");
html5rocks.webdb.addTodo(height1.value);
height1.value = "";
}
</script>
</head>
<body onload="init();">
<div id="jqt">
<div id="about" class="selectable">
<p><img src="jqtouch.png" alt="bm-my" /></p>
<p><strong>myBMI</strong><br />Version 1.0 beta<br />
<a href="http://www.jbiddulph.com">By John Biddulph</a></p>
<p><em>Mobile applications with<br /> just HTML, CSS, and jQuery.</em></p>
<p>
<a target="_blank" href="http://twitter.com/jmbiddulph">@jbiddulph on Twitter</a>
</p>
<p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
</div>
<div id="what">
<div class="toolbar">
<h1>What is BMI?</h1>
<a href="#" class="back">Back</a>
</div>
<p>The body mass index (BMI), or Quetelet index, is a heuristic proxy for human body fat based on an individual's weight and height. BMI does not actually measure the percentage of body fat. It was invented between 1830 and 1850 by the Belgian polymath Adolphe Quetelet during the course of developing "social physics".[1] Body mass index is defined as the individual's body weight divided by the square of his or her height. The formulae universally used in medicine produce a unit of measure of kg/m2. BMI can also be determined using a BMI chart,[2] which displays BMI as a function of weight (horizontal axis) and height (vertical axis) using contour lines for different values of BMI or colors for different BMI categories. </p><cite>Taken from Wikipedia, the free encyclopaedia</cite>
<div class="info">
<p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p>
</div>
</div>
<div id="forms">
<div class="toolbar">
<h1 id="greeting"></h1>
<a href="#" class="back">Back</a>
</div>
<p>Please enter daily your stats below</p>
<form method="post" onsubmit="addTodo(); return false;">
<h2>Height (cm) / Weight (lbs)</h2>
<ul class="individual">
<li><input type="text" class="submit" id="height1" name="height1" /></li>
<li><input type="text" class="submit" id="weight1" name="weight1" /></li>
</ul>
<input type="submit" value=" Add "/>
</form>
<ul class="plastic" id="todoItems">
</ul>
<div class="info">
<p>© 2011 jbiddulph.com</p>
</div>
</div>
<div id="home" class="current">
<div class="toolbar">
<h1>myBMI</h1>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#forms">Enter daily stats</a></li>
<li class="arrow"><a href="#what">What is BMI?</a></li>
</ul>
<div id="content">
</div>
<p>If it's your first time here then please enter your details below</p>
<form>
<ul class="edit rounded">
<li><div>Name:</div><input type="text" name="fname" placeholder="Name" id="fname" /></li>
<li><input type="text" name="date" id="date" /></li>
<li>
<select id="age">
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
</select>
</li>
<li>
<select id="gender">
<optgroup label="Gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</optgroup>
</select>
</li>
</ul>
<h2>Height (cm) / Weight (lbs)</h2>
<ul class="individual">
<li><input type="text" name="height" placeholder="height" id="height" /></li>
<li><input type="text" name="weight" placeholder="weight" id="weight" /></li>
</ul>
<input type="submit" class="submit" id="update" value=" Update Your Preferences " />
<a href="javascript:void(0)" id="clear">→ Clear Preferences ←</a>
</form>
</div>
</div>
</body>
</html>
Why is this happening? Code: var pattern = /^\s+|\s+$/g;
var string = " spaces";
while(pattern.test(string))
{ // -> true
alert(pattern.test(string)); // -> false
break;
}
alert(pattern.test(string)); // -> true
Hi, So firstly this is likely not in the right place at all, as it's a bit OT but I figured it's the best place to ask.. I have to document 4 different tests to my code; what structure should I take when doing this? I was thinking: * State the aim of the test * State the inputs, and what I believe the output should be. * State the actual output, and whether this positively or negatively affect my code. I have a form with several types of checkboxes, and I'm trying to check all but one of them to determine if any of those have been checked. I do not want to check 'all', but I want to see if any of the 'check_' or 'check2_' checkboxes have been checked. There are a variable number of checkboxes, so this is just an example with two of each. Set 1 and Set 2 will always have the same number of checkboxes as each other, though. I'm having trouble getting the function to do this - so any guidance would be appreciated. Code: <script language="JavaScript">
function checkForNone() {
checked=false;
for (i=0,n=selectForm2.elements.length;i<n;i++) {
if (document.selectForm2.getElementById("check_"+String(i)).checked || document.selectForm2.getElementById("check2_"+String(i)).checked ) {
checked=true;
}
}
if (checked==true) {
alert("OK!");
return true;
}
else {
alert("Please select at least one checkbox.");
return false;
}
}
</script>
PHP Code: echo " <form name='selectForm2' id='selectForm2'> Overall: <br> <input type='checkbox' name='all' value='' class='resultsAll' id='all'> Set 1: <br> <input type='checkbox' name='check_1' value='01' class='results1' id='check_1'><br> <input type='checkbox' name='check_2' value='02' class='results1' id='check_2'><br> <br> Set 2: <br> <input type='checkbox' name='check2_1' value='01' class='results2' id='check2_1' disabled='true'><br> <input type='checkbox' name='check2_2' value='02' class='results2' id='check2_2'> <br><br> Check for none selected <input type='button' onclick=\"checkForNone();\" /> </form> "; Hi All, I have a HTML table with combobox option in one of the column.when I select a value in dropdown the background color changes to red or green based on the selction.My Code looks like : Code: function OnHTMLTable1_ClickLink ( ) {
var irows = document.getElementById("HTMLTable1").getElementsByTagName('tr');
var iRowCount = irows.length;
for(i=0; i<=iRowCount; i++)
{
if(document.getElementById("list"+i).selectedIndex == 1)
{
document.getElementById("list"+i).options[1].style.backgroundColor = "green";
}
if(document.getElementById("list"+i).selectedIndex == 2)
{
document.getElementById("list"+i).options[2].style.backgroundColor = "Red";
}
}
}
When I select a value it is throwing me "Object Required error".Can anyone tell me where this code is misbehaving? Thanks, Anil I want to know how to move a character on the path when you click the left or right arrow, but also when the left arrow is clicked it will switch between 4 images, making it look as though the characters is actually walking left arrow = moves character to left on the path(walks to the left) right arrow = moves character to right on the path(walks to the right) up arrow = character jumps This is my original code, it draws a path something like this \____ ........................................................................................\ Code: function drawMap(){
// get the canvas element using the DOM
var canvas = document.getElementById('map');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Stroked Path
ctx.beginPath();
ctx.moveTo(0,70);
ctx.lineTo(45,115);
ctx.lineTo(250,115);
ctx.lineTo(300,135);
ctx.stroke();
ctx.closePath();
} else {
alert('Your broswer does not support Canvas, We recommend getting the latest version of google chrome for the best quality');
}
}
Can anyone point me in the right direction? I want to have an example on web storage. I have an index.html page. On this page, there is a button which will go to another page, that is page1.html. On this page now, there is another button which will go to page2.html if clicked. Index.html > page1.html > page2.html Suppose if a user has already visited page2.html on the first time, how to make him/her goes directly on page2.html after clicking the button on index.html? The user must not again go to page1.html to get page2.html because he/she has already done that. I want to know how to store page sessions with HTML5 so that the user gets on his/her last visited page when he/she clicks the button. Thank. I'm keen to know what you guys think of this. In order to have HTML5 semantics and support for older browsers without Javascript enable I've written a little script that changes classes into node. For example <div class="nav"> would become <nav class="nav"> Code: //Adapt page to HTML5
function changeNodeName(element, newNodeName) {
var oldNode = element,
newNode = document.createElement(newNodeName),
node,
nextNode;
node = oldNode.firstChild;
while (node) {
nextNode = node.nextSibling;
newNode.appendChild(node);
node = nextNode;
}
for (var i = 0; i < oldNode.attributes.length; i++) {
newNode.setAttribute(oldNode.attributes[i].name, oldNode.attributes[i].value);
}
oldNode.parentNode.replaceChild(newNode, oldNode);
}
try {
var theBody = document.getElementsByTagName("body")[0];
var classNames = ["article", "aside", "command", "details", "summary", "figure", "figcaption", "footer", "header", "mark", "meter", "nav", "progress", "ruby", "rt", "rp", "section", "time", "wbr"];
for (var i = 0; i < classNames.length; i++) {
htmlFourElements = document.getElementsByClassName(classNames[i], theBody);
for (var ii = 0; ii < htmlFourElements.length; ii++) {
changeNodeName(htmlFourElements[ii], classNames[i]);
}
}
} catch(e) {
console.error(e.message);
}
Let me know what you think Hi, I have the below function and I keep getting the error Lid is not defined. Code: <script type="text/javascript">
function loadTips(file,ID,File,id){
alert(file);
alert(ID);
alert(File);
alert(id);
loadXMLDoc(file,ID);
var l=setTimeout("loadXMLDocRefresh(File,id)",10000);
}
</script>
My trigger button is: <input type="button" class="button3" value="Tips" onclick="loadTips('getTees.php','txtHintTees','getLees.php','txtHintLees')" /> So my alert Lid comes up with txtHintLees, so it is working up until the alert. Which leads me to believe that maybe it doesn't like being wrapped in "", without "" though firebug halts the process. I tried wrapping it in {} e.g. {loadXMLDocRefresh(File,id)} but that wasn't liked either. I'll stop my list of things I tried that don't work now. But does anyone have any ideas? Hello, I am coding a slider for my portfolio which has divs that slide when you click either the arrow keys or the numbers below the slider's frame. I just can't figure out how to change the javascript/css file so that the current slide number, (the little numbers below the image), becomes a different color when you actively view it, so that it indicates to users number they're currently on. Thanks for help! Here's a draft of what it looks like so far in the front end with my grids still in place: HTML file: Code: <div id="slider" class="span-24 last">
<div id="slide2Left"> ←</div>
<div id="slideFrame">
<div id="slideBoard">
<!-- the slides -->
<div class="slidePoint">
Slide 1 Goes Here
</div>
<div class="slidePoint">
Slide 2 Goes Here
</div>
<div class="slidePoint">
Slide 3 Goes Here
</div>
<!-- end slideBoard -->
</div>
<div id="slideReference"></div>
<!-- end slideFrame -->
</div>
<div id="slide2Right" class="last"> →</div>
<!-- end slider section -->
</div>
Javascript code Code: // JavaScript Document
$(document).ready(function(){
var slideTime = 700;
var currentSlide = 1;
var totalSlides = $("#slideBoard > div").size();
var slideWidth = $('#slideFrame').css('width');
var slideAmount = parseInt(slideWidth);
function slideLeft(){
if(currentSlide > 1){
$("#slideBoard").animate({
left: ['+='+slideAmount, 'swing']
}, slideTime );
currentSlide += -1;
}
}
function slideRight(){
if(currentSlide < totalSlides){
$("#slideBoard").animate({
left: ['+=-'+slideAmount, 'swing']
}, slideTime );
currentSlide += 1;
}
}
function slideTo(slideNumber){
///*
slideNumber = parseInt(slideNumber);
slidePos = slideNumber -1;
var p1 = $('#slideBoard');
var position1 = p1.position();
var p2 = $('#slideBoard div:nth-child(' + slideNumber + ')');
//alert(p2.html());
var position2 = p2.position();
var slideFor = (-position1.left) - position2.left;
//alert('p1: '+ position1.left + ' p2: '+ position2.left + ' Sliding: '+slideFor);
$("#slideBoard").animate({
left: ['+='+slideFor, 'swing']
}, slideTime );
currentSlide = slideNumber;
//*/
}
$('#slide2Left').click(function(){
slideLeft();
});
$('#slide2Right').click(function(){
slideRight();
});
$(document).keydown(function(e){
if(e.keyCode == 37){
//alert( "left pressed" );
slideLeft();
return false;
}
if(e.keyCode == 39){
//alert( "rigt pressed" );
slideRight();
return false;
}
});
//# Slide Reference Tool
for(i = 1; i < (totalSlides+1); i++){
$('#slideReference').append('<div class="slideNumber">'+i+'</div>');
}
$('.slideNumber').click(function(){
slideTo($(this).html());
});
$(".slidePoint").touchwipe({
wipeLeft: function() { slideRight(); },
wipeRight: function() { slideLeft(); },
min_move_x: 20,
preventDefaultEvents: true
});
});
CSS Code Code: /* CSS Document */
#slider {
position: relative;
margin: 79px 0 50px 0;
height: 500px;
padding-bottom: 50px;
border-bottom: 1px solid #9B9B9B;
}
#slideFrame {
width:870px;
left: 40px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#test {
width:30px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#slideBoard {
position:absolute;
top:0px;
left:0px;
width:3000px;
min-height:400px;
margin:0px;
padding:0px;
background: #ccc;
opacity: .3;
}
.slidePoint {
width:870px;
min-height:400px;
height:410px;
display:inline-block;
margin:0px;
padding:0xp;
float:left;
}
.slidePoint p {
padding:5px;
}
#slide2Left, #slide2Right{
position:absolute;
top: 200px;
bottom: 5px;
cursor:pointer;
width:20px;
height:20px;
color:#9B9B9B;
border:#9B9B9B solid 1px;
border-radius: 5px;
padding:3px;
text-align:center;
display: inline-block;
}
#slide2Right{
left: 920px;
}
#slideReference {
position:absolute;
width: 770px;
min-height:10px;
bottom:5px;
left:50px;
text-align:center;
}
.slideNumber {
border-radius: 2px;
background:#929292;
color:#ffffff;
cursor:pointer;
display:inline-block;
padding:3px;
margin:3px;
text-align:center;
min-height:15px;
min-width:15px;
}
|
|||||||