MikeatW3S Posted December 12, 2014 Share Posted December 12, 2014 My website has a number of webpages that each have an audio file that can be played for that page. When someone starts the audio, I want to save the volume and play settings so that the same settings will be used on the next page with the next audio file. If they start the audio on one page, I want to automatically start the audio for the next page with the same volume settings. Is there any ready code available to do this. I'm not really sure how to get started. Do I want to use cookies or session variables? Does that mean I need to go back and forth between php variables and javascript variables? Do both javascript and php use the same convention when accessing HTML DOM objects? Any help would be appreciated. Thanks. Link to comment Share on other sites More sharing options...
justsomeguy Posted December 12, 2014 Share Posted December 12, 2014 PHP doesn't run in the browser, it can't access the DOM of the current page. You could have a Javascript-only solution and store and read those settings in cookies, that won't require any PHP code or server communication. Link to comment Share on other sites More sharing options...
MikeatW3S Posted December 12, 2014 Author Share Posted December 12, 2014 (edited) Can cookies store numerical data? Or do they only store information as text strings inside quotes? If I want to store the level of volume that has been set by the user, will I have to do a number to string conversion to store that info in the cookie, and then do a string to number conversion to set the volume property of the audio controls? What would be the javascript statements to do that conversion? As you can see I'm new to javascript. So I would appreciate any help. Thanks. Edited December 12, 2014 by MikeatW3S Link to comment Share on other sites More sharing options...
Ingolme Posted December 12, 2014 Share Posted December 12, 2014 Cookies are in the Javascript tutorial: http://www.w3schools.com/js/js_cookies.asp Cookies only contain strings, but casting from number to string or string to number is easy. Usually it occurs automatically. If you pass a string to a property that expects a number it will be interpreted as a number. Link to comment Share on other sites More sharing options...
MikeatW3S Posted December 13, 2014 Author Share Posted December 13, 2014 (edited) So how do you change a cookiename's value? Do you simply write over it? What if it is a string of a different length? Does document.cookie=cookieName + "=" + cookieValue simply replace the previous cookieValue string with a different string even if it has a different length? If there are multiple cookies, does document.cookie go out and find the cookie of interest and change it if it already exists? When you create a function to find the value of a cookie you have to parse every character in the string and then find its value. I'm wondering if you have to do something similar when changing the value of a cookie or if that's handled by the document.cookie function. Edited December 13, 2014 by MikeatW3S Link to comment Share on other sites More sharing options...
Ingolme Posted December 13, 2014 Share Posted December 13, 2014 The tutorial page explains it clear enough: With JavaScript, you can change a cookie the same way as you create it: document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/"; The old cookie is overwritten. The length doesn't matter. The cookie tutorial also explains multiple cookies: If you set a new cookie, older cookies are not overwritten. The new cookie is added to document.cookie, so if you read document.cookie again you will get something like: cookie1=value; cookie2=value; Setting a cookie, or changing its value, won't interfere with any of the other cookies. Link to comment Share on other sites More sharing options...
MikeatW3S Posted December 13, 2014 Author Share Posted December 13, 2014 (edited) Is this a valid cookie setting function? (I found it on the internet and modified it a bit) function setCookie(cookieName, cookieValue, expdays) { var expdate = new Date(); expdate.setDate(expdate.getDate() + expdays) ; document.cookie = cookieName + "=" + cookieValue + "; expire=" + expdate.toGMTString() + "; path=/"; } Do I have the order of exprie and path correct? Do I need to take out any spaces? And if I call the function with the same cookieName but different cookieValue, this will simply overwrite the previous cookieName with a different cookieValue and expiration date, right? Thanks. Edited December 13, 2014 by MikeatW3S Link to comment Share on other sites More sharing options...
Ingolme Posted December 13, 2014 Share Posted December 13, 2014 It should be "expires", with an S. The function toGMTString() is deprecated, use toUTCString(). Aside from that, yes, your script is right. Using the same cookie name but changing other parameters will overwrite the value of that particular cookie. 1 Link to comment Share on other sites More sharing options...
MikeatW3S Posted December 13, 2014 Author Share Posted December 13, 2014 Thank you, Foxy Mod. You've been a fine help. One more easy question (for you). How to call functions... Do I have to set a variable equal to a function as shown in the tutorial here? Or can I simply have a line of code that states, for example: setCookie(CookieName, CookieValue, expdays); It's not clear from the tutorial here if this is a legal function call procedure. Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted December 13, 2014 Share Posted December 13, 2014 Read up on how functions work: http://www.w3schools.com/js/js_functions.asp You only need to assign the function to a variable if the function gives you a value that you want to use later. getCookie, for example, will give you the value of the cookie, so that's why you assign it to a variable. Link to comment Share on other sites More sharing options...
MikeatW3S Posted December 13, 2014 Author Share Posted December 13, 2014 (edited) Read up on how functions work: http://www.w3schools.com/js/js_functions.asp Yes, that is the tutorial I am refering to. I understand from it that if your function returns a value, you can use a variable assignment to a function to call that function. But I see a potential problem of calling a function by assigning it to a variable if the function returns nothing at all, like the setCookie() function. Won't that give you an error to assign a variable to nothing? I've seen elsewhere where I can simply have a line of code that state: setCookie(A,B,C); It works, but then I'm told that makes it a global function, which I think means it can be called by any webpage in any tab in the browser. Is there a work-around so that the function can only be called by the webpage in which you want to use it? Thanks. P.S. I did find this: http://www.w3schools.com/js/js_function_invocation.asp It talks more about what object owns the function. Correct me if I'm wrong, but I think my best approach would be something like this: var myCookieSetObject = { setCookie: function (cookieName, cookieValue, expdays) { var expdate = new Date(); expdate.setDate(expdate.getDate() + expdays) ; document.cookie = cookieName + "=" + cookieValue + "; expire=" + expdate.toGMTString() + "; path=/"; } } and then call it using: myCookieSetObject.setCookie(cookieName, cookieValue, expdays); Then the owner of the function is myCookieSetObject on the current page so there is no conflict with that function being run on different tabs in the web browser. Does this all seem right? Thanks again. Edited December 13, 2014 by MikeatW3S Link to comment Share on other sites More sharing options...
Ingolme Posted December 13, 2014 Share Posted December 13, 2014 If a function does not return anything and you assign it to a variable, the variable will have undefined as its value. No errors or warnings. function doNothing() { // Nothing}var x = doNothing();console.log(x); // Shows "undefined" Your Javascript functions are only available on the page they were created, other browser tabs can't access any of your code and there is no interference of any kind. Each tab or window is in its own closed environment. Just leave the setCookie() function global. Leave your function global, there is no problem with it. You would only need to worry about having things in the global scope if you're making a large application including scripts created by other people, then your global function may overwrite or be overwritten by a function or variable that somebody else created. 1 Link to comment Share on other sites More sharing options...
MikeatW3S Posted December 14, 2014 Author Share Posted December 14, 2014 (edited) Here is the code I'm working with. I think there is something wrong with the getCookieValue() function. If I comment out (/*) the definition of the getCookieValue() function and comment out (//) the assignment statement that calls it in the cookieValue() function, then I can at least get the alert statement to display. If I deliberates put a typo in the setCookie() function then I don't get to the alert statement. And when I correct the typo in setCookie(), then I do get to the alert message. This is how I know that the getCookieValue() function must be the culprit. Is there something wrong with the return"" statement in getCookieValue()? Or do I need to be more careful with spaces when searching through the cookie string? Or could it be the fact that I am working on a localhost server. Does that prevent cookies from operating correctly. I'm sorry to make you look through the code. But I'm hoping this is easy for you. Thanks again. <!DOCTYPE html><html><body> <button onclick = "cookieValues()" type="button">Set and get cookie value:</button> <script> function cookieValues() { var IsPlayOnValue = 13; setCookie("IsPlayOn", 5, 33); IsPlayOnValue = getCookieValue("IsPlayOn"); alert("IsPlayOn is set to: " + IsPlayOnValue); } function setCookie(cookieName, cookieValue, expdays) { var expdate = new Date(); expdate.setDate(expdate.getDate() + expdays) ; document.cookie = cookieName + "=" + cookieValue + "; expires=" + expdate.toUTCString() + "; path=/"; } function getCookieValue(cookieName) { var thisCookie = document.cookie.split("; "); for (var 1=0;i<thisCookie.length;i++) { if (cookieName == thisCookie.split("=")[0]) { return thisCookie.split("=")[1]; } } return ""; } </script> </body></html> Edited December 14, 2014 by MikeatW3S Link to comment Share on other sites More sharing options...
Ingolme Posted December 14, 2014 Share Posted December 14, 2014 Read about data types: http://www.w3schools.com/js/js_datatypes.asp Things wrapped in quotation marks are strings, if you want that particular text to be used then wrap it in quotation marks. If you intend to use variables, functions, arrays or objects then you shouldn't wrap it in quotation marks. Link to comment Share on other sites More sharing options...
MikeatW3S Posted December 15, 2014 Author Share Posted December 15, 2014 (edited) Yea, it should have been, for (var i=0; instead of for (var 1=0; ... Which brings up a question. I'm using Microsoft Expression Web 4. Is there a better programming environment software that will catch errors? For example, is Dreamweaver better at catching javascript errors? Thanks. Edited December 15, 2014 by MikeatW3S Link to comment Share on other sites More sharing options...
MikeatW3S Posted December 15, 2014 Author Share Posted December 15, 2014 Thanks for the help. You've been very generous. I got the play and volume settings to survive page transistions using cookies. Link to comment Share on other sites More sharing options...
Ingolme Posted December 15, 2014 Share Posted December 15, 2014 Don't rely on your developer software to catch errors. Create your code, run it in a browser and check for errors on the browser. Browsers are constantly changing, no developer environments will be able to keep up with these changes. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now