|
JavaScript - Is This How To Store Local Storage? Can Gc & Ff Extensions Change Elements On Page?
is "localStorage" a native variable to javascript?
On lin 36 & 37 is there anything else involved in getting that local storage to store? Those lines are local storage right? Is it really that easy? I was just reading this HUGE post and immediately stressed me out. I'm used to working off small examples and diving in bit by bit. It was the first article on google so I trusted it to be the most appropriate for introductions. (which means not reading more than 500 words before I get some sample code) In addition, can Google Chrome & FireFox extensions change page elements? The reason I think it can do this is because google chrome says this Which (to me) implies that the extension has access to page data. If that is the case. How are localStorage variables not mixing? How can I access that page data? I don't care about browser history, I just want to change page elements. Is this possible? If this is the case. Is there a way I can have the extension close itself or not open at all? Sometimes I just want the "extension" to provide a simple function. That's all. Thanks! I had Silverbird and the tutorialzine example extension. They were both different size. Odd thing is that I never saw a size specification in the style.css in the tutorialzine example. How can I specify the size of the popup extension? Similar TutorialsI am working on a web app for the iPad and I am storing all my content in cookies. I am wondering how easy it is to transfer it to Local Storage. I'll post all the scripts that set cookies below: Code: jQuery.cookie = function (a, b, c) {
if (typeof b !== "undefined") {
c = c || {};
if (b === null) {
b = "";
c.expires = -1;
}
var d = "";
if (c.expires && (typeof c.expires === "number" || c.expires.toGMTString)) {
var e;
if (typeof c.expires === "number") {
e = new Date();
e.setTime(e.getTime() + c.expires * 24 * 60 * 60 * 100000);
} else {
e = c.expires;
}
d = "; expires=" + e.toUTCString();
}
var f = c.path ? "; path=" + c.path : "";
var g = c.domain ? "; domain=" + c.domain : "";
var h = c.secure ? "; secure" : "";
document.cookie = [a, "=", encodeURIComponent(b), d, f, g, h].join("");
} else {
var i = null;
if (document.cookie && document.cookie !== "") {
var j = document.cookie.split(";");
for (var k = 0; k < j.length; k++) {
var l = jQuery.trim(j[k]);
if (l.substring(0, a.length + 1) === a + "=") {
i = decodeURIComponent(l.substring(a.length + 1));
break;
}
}
}
return i;
}
};
$(window).unload(function () {
$(".remember").each(function () {
$.cookie(this.id, this.value, {
expires: 365
});
});
$(".draggable").each(function () {
var a = $(this);
$.cookie(this.id, a.css("top") + "_" + a.css("left"), {
expires: 365
});
$.cookie("disp" + this.id, a.css("display"), {
expires: 365
});
});
});
$(function () {
var a, b, c;
setInterval(checkOrientAndLocation, 1000);
$(".remember").each(function () {
var a = $.cookie(this.id);
if (a) {
this.value = a;
}
});
$(".draggable").each(function () {
var a = $.cookie(this.id);
if (a) {
a = a.split("_");
$(this).css({
position: "absolute",
top: a[0],
left: a[1]
});
}
var b = $.cookie("disp" + this.id);
if (b) {
this.style.display = b;
}
}).touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: false,
scale: false
});
});
function toggle_visibility(a) {
var item = $("#" + a);
item.fadeToggle();
$.cookie("disp" + a, item.css("display"));
}
var _target = null,
_dragx = null,
_dragy = null,
_rotate = null,
_resort = null;
var _dragging = false,
_sizing = false,
_animate = false;
var _rotating = 0,
_width = 0,
_height = 0,
_left = 0,
_top = 0,
_xspeed = 0,
_yspeed = 0;
var _zindex = 1000;
jQuery.fn.touch = function (a) {
a = jQuery.extend({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: false,
scale: false
}, a);
var b = [];
b = $.extend({}, $.fn.touch.defaults, a);
this.each(function () {
this.opts = b;
this.ontouchstart = touchstart;
this.ontouchend = touchend;
this.ontouchmove = touchmove;
this.ongesturestart = gesturestart;
this.ongesturechange = gesturechange;
this.ongestureend = gestureend;
});
};
var currentRotation = null;
function setOrientation() {
switch (window.orientation) {
case 0:
orient = "portrait";
break;
case 90:
orient = "landscape";
break;
case -90:
orient = "landscape";
break;
}
currentRotation = window.orientation;
document.body.setAttribute("orient", orient);
setTimeout(scrollTo, 0, 0, 1);
}
function checkOrientAndLocation() {
if (currentRotation !== window.orientation) {
setOrientation();
}
}
function gestureend(a) {
_sizing = false;
_rotating = (_rotating + a.rotation) % 360;
}
function gesturechange(a) {
if (_sizing) {
_width = this.opts.scale ? Math.min(parseInt(_sizing[0], 8) * a.scale, 300) : _sizing[0];
_height = this.opts.scale ? Math.min(parseInt(_sizing[1], 10) * a.scale, 300) : _sizing[1];
_rotate = this.opts.rotate ? "rotate(" + (_rotating + a.rotation) % 360 + "deg)" : "0deg";
$("#" + this.id).css({
width: _width + "px",
height: _height + "px",
webkitTransform: _rotate
});
$("#" + this.id + " b").text("");
$("#" + this.id).css({
backgroundColor: ""
});
}
}
function gesturestart(a) {
_sizing = [$("#" + this.id).css("width"), $("#" + this.id).css("height")];
}
function touchend(a) {
$(a.changedTouches).each(function () {
if (!a.targetTouches.length) {
_dragging = false;
if (_animate) {
_left = $("#" + _target).css("left") === "auto" ? this.pageX : parseInt($("#" + _target).css("left"), 10);
_top = $("#" + _target).css("top") === "auto" ? this.pageY : parseInt($("#" + _target).css("top"), 10);
var b = _dragx ? _left + _xspeed + "px" : _left + "px";
var c = _dragy ? _top + _yspeed + "px" : _top + "px";
if (_dragx || _dragy) {
$("#" + _target).animate({
left: b,
top: c
}, "fast");
}
}
}
});
$("#" + _target + " b").text("");
$("#" + _target).css({
backgroundColor: ""
});
}
function touchmove(a) {
if (_dragging && !_sizing && _animate) {
var b = isNaN(parseInt($("#" + _target).css("left"), 10)) ? 0 : parseInt($("#" + _target).css("left"), 10);
var c = isNaN(parseInt($("#" + _target).css("top"), 10)) ? 0 : parseInt($("#" + _target).css("top"), 10);
}
$(a.changedTouches).each(function () {
a.preventDefault();
_left = this.pageX - parseInt($("#" + _target).css("width"), 10) / 2;
_top = this.pageY - parseInt($("#" + _target).css("height"), 10) / 2;
if (_dragging && !_sizing) {
if (_animate) {
_xspeed = Math.round((_xspeed + Math.round(_left - b)) / 1.5);
_yspeed = Math.round((_yspeed + Math.round(_top - c)) / 1.5);
}
if (_dragx || _dragy) {
$("#" + _target).css({
position: "absolute"
});
}
if (_dragx) {
$("#" + _target).css({
left: _left + "px"
});
}
if (_dragy) {
$("#" + _target).css({
top: _top + "px"
});
}
if (_dragx || _dragy) {
$.cookie(_target, ($("#" + _target).css("top") || "") + "_" + ($("#" + _target).css("left") || ""));
}
$("#" + _target).css({
backgroundColor: ""
});
$("#" + _target + " b").text("");
}
});
}
function touchstart(a) {
_target = this.id;
_dragx = this.opts.dragx;
_dragy = this.opts.dragy;
_resort = this.opts.resort;
_animate = this.opts.animate;
_xspeed = 0;
_yspeed = 0;
$(a.changedTouches).each(function () {
var b = $("#" + _target).css("left") === "auto" ? this.pageX : parseInt($("#" + _target).css("left"), 10);
var c = $("#" + _target).css("top") === "auto" ? this.pageY : parseInt($("#" + _target).css("top"), 10);
if (!_dragging && !_sizing) {
_left = a.pageX - b;
_top = a.pageY - c;
_dragging = [_left, _top];
if (_resort) {
_zindex = $("#" + _target).css("z-index") === _zindex ? _zindex : _zindex + 1;
$("#" + _target).css({
zIndex: _zindex
});
}
}
});
}
function killAllCookies() {
$(window).unbind("unload");
var a = document.cookie.split(";"),
b = a.length - 1;
for (b; b > -1; --b) {
$.cookie(a[b].split("=")[0], "", {
expires: -1
});
setTimeout("location.reload(true);", 1);
}
}
I realize this is a big thing to ask, so if anyone has some free time and possibly wants to help me, I would be extremely thankful. I 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? Hi all, I have some code that attempts to save a user's preference settings. It first tries to use "localStorage", and if that fails (only old versions of MSIE), then a cookie is used instead. I tried several different tests, such as: Code: if (localStorage) {
alert('True');
} else {
alert('False');
}
and....... if (typeof localStorage).... and....... if (typeof localStorage == 'object').... but none of these are reliable. For example, if I intentionally misspell "localStorage" by instead using "localStor" (simulating a browser that doesn't understand the object name), the code simply does not run. What I ultimately want is this: Code: if (user_wants_to_save_settings && localStorage) {
save_to_local_storage;
} else
if (user_wants_to_save_settings) {
save_to_cookie;
}
...unfortunately, that doesn't work. Anyone have ideas? I've been staring at this too long and am probably missing the obvious.... Thanks! -- Roger 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. I have set's of radio buttons that have on click functions, and when i restore the form data i would like the onclick functions to re-calculate. Is there a simply way such as if this.checked = true run onclick function that i can apply to every radio with onload???
Reply With Quote 01-10-2015, 01:51 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts You cannot auto-click for security reasons. But you can use local storage to keep the status of the radio buttonds and reinstate them on page reload. You can then run a script to do whatever is required. Hello, I am creating extension for Google Chrome and I want to add options page. http://hotfile.com/dl/79987277/f5faf...ion_2.rar.html Here is extension and I want to connect options page to content.js and when someone makes changes in options it should change code too (Sorry for bad English) function test() { var DIV = document.createElement('DIV'); } If I never insert DIV to any node its parentNode is null and being a local variuable it's reference is lost. Is it destroyed? or do I have to add it to a node then use removeChild? Hello to all ... I am very basic on this of javascript, so someone could help me how to resolve this issue. I have a javascript (HTML internal), which fetches and executes a file in another web address... but I do not want it to do that, i want this script to execute is function directly from my local disk (file location). Here is the script; Code: <html>
<head></head>
<body>
<div style="WIDTH: 984px; HEIGHT: 443px" >
<script type="text/javascript">
var previewConfigs = [{
type: 'flash',
preview_url: "http://myflashtest.com/files/9083/preview.swf",
base: "http://myflashtest/files/9083/"
}];
</script>
<span id="large_item_preview">
<object style="visibility: visible; Z-INDEX: 0; WIDTH: 590px; HEIGHT: 300px; TOP: -51px; LEFT: -27px; " id="large_item_preview_container" data="srcs-ff/preview.swf"></object> </span>
<script type="text/javascript" src="srcs-ff/jquery.js">
</script>
<script type="text/javascript" src="srcs-ff/preview.js">
</script>
<script type="text/javascript">
if (typeof(previewConfigs) !== 'undefined') {
for (var i = 0; i < previewConfigs.length; i += 1) {
var preview = new ItemPreview(previewConfigs[i]);
preview.display();
};
};
</script>
<script type="text/javascript">
$(document).ready(function() {
$("tr[data-accessor=source]").click();
});
</script>
</div>
</body>
</html>
<b>What I want is to change this part;</b>; preview_url: "http://myflashtest.com/files/9083/preview.swf", base: "http://myflashtest/files/9083/" Hi, I'm a javascript idiot, and I need a script to change two styles in two different elements based on the status of 2 radio buttons. Basically, I have 2 forms...#formTest and #formTest2. When radio button "search" value "1" is selected I need the display style for #formTest to be "block" and the display style for #formTest2 to be "none". When radio buton "search" value "2" is selected, I need the opposite to occur. (#formTest display style ="none" and #formTest2 display style="block") I have very buggy code which produces similar changes, but does other bad things, so won't work. Basically, the first selection change displays both forms, which after the first selection change works fine, unless you click anywhere else, in which case both forms are not displayed. I know I should use a function in the head and call it with an onselect or onclick event. I just don't know how. I appreciate any help anyone can offer me! My ugly (nonfunctional code is below) Search by Make: <input name="search" type="radio" value="1" onclick="document.getElementById('testForm').style.display='block';" onchange="document.getElementById('testForm').style.display='none';" checked="checked" /> <br /> Search by Category: <input name="search" type="radio" value="2" onclick="document.getElementById('testForm2').style.display='block';" onchange="document.getElementById('testForm2').style.display='none';" /> Thanks Again hey, is there any way i can change an elements properties in window open? i click a link and it opens a window with window.open, and i want to take something from the current page and place it inside a textarea within the opened window.. is it possible? Hi, I am stumped. I have been trying unsuccesfully for three days to figure something out, and it has brought me here. I am a noob javascripter, so please bear with me. I have created a page with an input button that refers to a function: Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Thu, 26 May 2011 03:39:57 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Meltmedia Web Intern Test</title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<LINK REL=StyleSheet HREF="what.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">
//function ChangeBackground()
<!--{
// document.getElementById("column2").style.backgroundColor="#ffbdaa";
// document.getElementById("row1").style.backgroundColor="#ffbdaa";
// document.getElementById("row3").style.backgroundColor="#ffbdaa";
// document.getElementById("row4").style.backgroundColor="#ffbdaa";
// document.getElementById("mainbody").style.backgroundColor="#f7d7cd";
// } -->
function ChangeBackground() {
var colors = document.getElementsByClassName("changeme");
//alert(colors.length);
for (var i = 0; i < colors.length; i++) {
if (colors[i].className="changeme") {
colors[i].style.backgroundColor="ffbdaa";
}
}
}
//if (document.getElementsByClassName('changeme')[5].style.backgroundColor="#e8e8e00") {
// document.getElementsByClassName('changeme')[5].style.backgroundColor="#ffbdaa";
// }
//div1 original color is #e8e8e8
//div2 original color is #e2ebe4
//tablerows original color is #ccddd0
</script>
</head>
<body>
<div id="mainbody" class="changeme">
<img id="header" src="osx_header.jpg">
<div id="inset">
<div id="column1" class="column1">
<p class="text0">Lorem Ipsum Dolor Sit Amet</p>
<p class="text1">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Aenean sed est et mi varius
euismod sed nec neque. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas ultricies pulvinar lacinia.
<a href="http://www.google.com/" rel="nofollow" target="_blank" style="color:blue">This is a link.</a>
</p>
<p class="text1" style="font-size:16px;">Lorem Ipsum Dolor Sit Amet</p>
<p class="text1">Sed a felis et eros gravida dignissim.
Quisque lobortis magna non purus vulputate
pellentesque. Mauris sit amet felis felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam molestie lacinia arcu vitae pretium.<sup>2.3</sup>
</p>
<div id="unordered_list">
<ul id="blue_bullets">
<li>Vestibulum ante erat, laoreet quis pellentesque quis,
tincidunt fermentum turpis.
<li>Maecenas in mollis massa.
<ul>
<li>Ut tempus tincidunt molestie. Phasellus eget nulla
id erat scelerisque porttitor vel pharetra nibh.
<li>Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos.
</ul>
<li>Aenean ligula massa, tempor sed pulvinar sit amet, imperdiet a nisi.
</ul>
</div><!--end of ordered list-->
<div id="button">
<!-- <img src="btn-click-here.gif"> -->
<input type="button" onClick="ChangeBackground()" value=" ">
</div><!--end of button-->
<table id="table1">
<tr id="firstrow">
<th id="row1" class="changeme"></th>
<th id="row2" class="changeme"><strong>header1</strong></th>
<th id="row3" class="changeme"><strong>header2</strong></th>
<th id="row4" class="changeme"><strong>header3</strong></th>
</tr>
<tr>
<td>one</td>
<td>1234</td>
<td>bears</td>
<td>abcd</td>
</tr>
<tr>
<td>two</td>
<td>5678</td>
<td>beets</td>
<td>efgh</td>
</tr>
<tr>
<td>three</td>
<td>9101</td>
<td>battlestar</td>
<td>ijkl</td>
</tr>
<tr>
<td>four</td>
<td>1121</td>
<td>galactica</td>
<td>mnop</td>
</tr>
</table>
<!--end of table-->
<ol class="ordered">
<li>Integer molestie sodales risus eu commodo. <i>Duis eget est
dapibus neque congue</i> accumsan id eu nibh.
</li>
<li>Proin malesuada hendrerit lobortis. Integer et erat leo.
Praesent nec justo nulla. <i>Sed in dolor id neque faucibus
consequat.</i>
</li>
<li>Vestibulum sit amet justo id <strong>risus tempus ornare.</strong> Etiam
faucibus urna volutpat lorem dictum imperdiet.
</li>
</ol>
</div> <!--end of column1-->
<div id="column2" class="changeme">
<p class="text00"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></p>
<p class="text2">Aenean sed est et mi varius euismod sed nec neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
ultricies pulvinar lacinia. Sed a felis et eros gravida dignissim.
Quisque lobortis magna non purus vulputate pellentesque.</p>
<p class="text2">Mauris sit amet felis felis. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nullam molestie lacinia arcu
vitae pretium. Vestibulum ante erat, laoreet quis pellentesque quis,
tincidunt fermentum turpis. Maecenas in mollis massa. Ut tempus
tincidunt molestie.</p>
<p class="text2">Phasellus eget nulla id erat scelerisque porttitor
vel pharetra nibh. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Aenean ligula massa, tempor
sed pulvinar sit amet, imperdiet a nisi. Nulla ullamcorper posuere dolor,
ac rutrum velit sollicitudin ac. Ut felis leo, ultricies a bibendum ac,
luctus semper massa.</p>
</div> <!--end of column2-->
</div> <!--end of inset-->
</div>
</body>
</html>
i would like to change certain style elements of the array each time the button is clicked. I have 5 color sets i would like use for the page, so i would like the button to trigger the color change in a loop, ie when the last color group is reached, the next click returns to the original color set and it continues again. This is a demo page, not for actually publication. I am trying to teach myself javascript and this is an idea that came to me. The things i want to change are the background color of two div's and the top row of a table. My style sheet is seperate, and I will also do the same for the javascript once I can get it to work properly. Thank you in advance for any help. Hello, I wanted to know how can I go through all the text on a page and store a unique ocurrence of every word in a array. Just point me on the right direction if you may. Got lost in translation... Lg Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! I have a page with a lot of textual elements, textbox/radiobutton/checkbox prompts and a couple of buttons. I used the tabIndex property of the prompts to set a tabbing order, but unfortunately further tabbing also cycles through the static textual elements present on the page. How do I prevent that? How can I make tabbing cycle through my prompts and the cancel/finish buttons only? I am using (and targeting) IE8 if it matters. Thanks! I have a page that is generated using php. Below, the pdf newsletter for each month is embedded directly into the page. What I want to do is have some javascript that when the link for a month is clicked, the embedded pdf expands below and when the user clicks on another month, that newsletter is hidden then the one they clicked on gets displayed; so only one newsletter is displayed at a time. I have searched all over the internet and I havn't found anything that will solve my problem. PHP Code: $listmonth=array("January","February","March","April","May","June","August","September","October","November","December"); foreach ($listmonth as $month) { if (file_exists($year2.'-'.$month.'.pdf')) { echo '<embed src="'.$year2 .'-'.$month.'.pdf#toolbar=0&navpanes=0" width="500" height="375">' ;} else {echo $month;} echo '<br />'; } 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. Hi, Not sure how difficult this will be but im working on a javascript/HTML5 game, and thought it would be interesting to allow for people to add their score to a google map at their location. I can get the google map and allow people to add their own markers but i dont no how i would store them, and then reload them when someone plays the game. any ideas? Thanks, Luke Hi, this is my first post on the forum. I was just wondering whether there is a way to hide an element on another page after clicking on a button? Basically, I have a login page, and for testing purposes, I want it so when you click a button, it runs some javascript in a file called ajax.util.js, and I have a jQuery file attached to the HTML file as well (http://ajax.googleapis.com/ajax/libs.../jquery.min.js), and I am using Google App Engine, which im not sure whether thats relevant. I tried using the show and hide functions provided by the jQuery file, but no luck, i want to hide an element which is a link with ID admintools. I have also tried getting the element by ID and changing the display style to none and hidden but still no luck. Im not sure whether its only possible to hide elements in the login.html page. What I want it to do basically is click on the submit button in the login page, it will then run a javascript function which redirects you to index.html (which i am doing using window.location), and then hides an element in the index.html page (id=admintools). Any help would be great, Thanks in advance I've been avoiding php and asp trying to do as much client-side as possible, as lightweight as possible, but don't know enough to know if I should go that route. I want to have several js/jquery games, really simple stuff like flash cards, memory games, matching, etc Currently when you do something correctly it adds 5 points like: points+=5; and if you get it wrong lose 3 points: points-=3; At the end of the game it flashes a play again button which resets points and all the cards, and that's it. So I was trying to think of ways to add a global variable that adds the latest score to it, and maybe gives you a random "prize" which would be another variable randomly selected from an array of "prizes", or better yet, "achievements"....between games....on the same domain. I'd like to eventually make something similar to a "crafting" system, where if you have 3 particular achievements you can convert them into some new achievement...I imagine just a function that checks if you have the 3 objects, then if so it adds some 4th object and removes the first 3. I was avoiding server side databases because I was avoiding authentication/user accounts for the time being...I would probably eventually like to let people play games, and if they want to save their scores long term, register an account....but if they don't want to register an account, I'd like them to have the same functionality for that session, where they can play a few games from around the site while accumulating a global score and list of achievement variables. I was messing around with jstorage, but am not sure if it will work for what I'm thinking....it only accepts strings, and I couldn't figure out how to write the variableName.toString() into the jstorage "value" of the key:value pair...it gives me the impression it's more for storing form data as a convenience to the user. So is there a client side variable storage that's simple, lightweight, and works with mobile? Or a way to write .toString() value of objects into jstorage? Or should I just break down and start investigating my server side options? Is there some middle ground where stuff can be done client side, then give the option to register to save that information long term? edit::I'm thinking of my 3 year old nieces ipad games, they're simple drag drop, highlight shapes, pattern association, etc but I want it so each time you play it remembers where you left off...basically a cookie would have been cool if it were bigger and not sent every packet....so kinda a "save-state" and "load-state" functionality.. edit2::sqlite seems like a legitimate option but then reading through it, it gets convoluted how to implement on my bluehost account... Is it possible to change the URL when a page refreshes? E.G Someone clicks a link on index.php to page1.php. When you refresh page1.php it actually loads page2.php The reason i ask my site uses AJAX to change pages (therefore doesnt refresh and stays on the index.php page). So if someone has followed 3-4 links and refreshes the page it will go back to the homepage, i want it so it reloads the currently page (i can use query strings to get the relevant page) |
|||||||