inherit
First Contributor
66253
0
Mar 18, 2024 11:09:20 GMT -8
aRMY83
2,925
December 2005
army83
|
Post by aRMY83 on Apr 6, 2016 9:39:44 GMT -8
I'm working on a plugin that has the following Javascript to .hide / .show when one clicks either of those buttons in the HTML below. Javascript: <script type="text/javascript"> $(document).ready(function(){ $('#mdivx1').hide(); $('#stop').click(function(){ $('#mymarquee').hide(); $('#mdivx1').show().html($('#mdivx').html()); }); $('#start').click(function(){ $('#mymarquee').show(); $('#mdivx1').hide().html(); }); }); </script> HTML: <span style="float: left"><input type="button" value="Stop (Hide) Marquee" id="stop"> <input type="button" value="Start (Show) Marquee" id="start"></span> I know nothing about setting up keys, if even needed, for localStorage for when a user clicks on a hide or show button, that it will remember those settings until they clear their cache. Did take a look at the Yootil API Documentation 1.0.0 storage: yootil.pixeldepth.net/#!/api/yootil.storage and my understanding of it is at a loss. Appreciate any and all advice / directions to how I can set this up.
|
|
inherit
2671
0
May 14, 2013 14:40:03 GMT -8
Peter
🐺
10,615
February 2002
peter3
|
Post by Peter on Apr 6, 2016 13:31:25 GMT -8
For something so small, I wouldn't recommend Yootil, even though it is installed on a lot of forums, it would be silly to get people to install it for such a small script, though it's your choice. If you do wish to use Yootil, then it's really simple, and the docs has examples: Setting:yootil.storage.set("mykey", "myvalue", false, true) - The 3rd parameter is if you want to store the value as a JSON string, for you, you can pass false, as you simple want to store a flag (i.e on or off). - The 4th parameter is to use localStorage (if true is passed) instead of sessionStorage, so it's persistent. Retrieving:yootil.storage.get("mykey", false, true) - The 2nd parameter is if the value stored is JSON or not. - The 3rd parameter (if true) will look in persistent storage only. Now, if you prefer not to use Yootil, then I will point you to the docs which contains all the info you will need. developer.mozilla.org/en/docs/Web/API/Window/localStoragedeveloper.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
|
|
inherit
First Contributor
66253
0
Mar 18, 2024 11:09:20 GMT -8
aRMY83
2,925
December 2005
army83
|
Post by aRMY83 on Apr 6, 2016 15:26:31 GMT -8
Thanks Peter for the rapid response and those links you provided above. I am one of those forums that has Yootil v1.1.1 (plugin) installed and if I go with Yootil, I must say that I'm still at a loss as to how/where to implement the Settings/Retrieving with the Javascript that I have presented and also, do I have to create a key for this? Sorry to be a noob at this Yootil / Storage understanding.
|
|
inherit
2671
0
May 14, 2013 14:40:03 GMT -8
Peter
🐺
10,615
February 2002
peter3
|
Post by Peter on Apr 7, 2016 0:43:08 GMT -8
aRMY83, No key needed, using the browsers storage will be fine. There are basically 3 things you need to do. You will be setting a simple flag in storage, either 1 or 0. 1. When they click to show, then you set the value to 1. 2. When they click to hide, then you set the value to 0. 3. When they load the page, your script should see what the value is, if it's 1 then it is shown, if it's 0, then it's hidden. So what you need to do is in each click handler, add in the line of code to store the value. Then outside those click handlers, you need to check the value of your storage item, so then you can either hide or show the item. If you are still unsure, let me know. I try to avoid posting code as an answer until that person is really stuck, that way they have a chance to learn and figure it out.
|
|
inherit
First Contributor
66253
0
Mar 18, 2024 11:09:20 GMT -8
aRMY83
2,925
December 2005
army83
|
Post by aRMY83 on Apr 7, 2016 7:10:14 GMT -8
Hello Peter That information is a great help in understanding what I have to do and totally agree on "that way they have a chance to learn and figure it out" and with what you have provided thus far is a good starting point. If I run into trouble or completely stuck, I'll post back here for more assistance.
|
|
inherit
216224
0
Aug 1, 2024 1:18:46 GMT -8
Quozzo
408
November 2014
quozzo
|
Post by Quozzo on Apr 7, 2016 17:27:57 GMT -8
If you're just hiding and showing the elements, you don't need to touch the html methods. The HTML is still there, trust me
|
|
inherit
First Contributor
66253
0
Mar 18, 2024 11:09:20 GMT -8
aRMY83
2,925
December 2005
army83
|
Post by aRMY83 on Apr 11, 2016 7:41:26 GMT -8
Hello PeterSince I could never figure out the yootil.storage.set("mykey", "myvalue", false, true) with yootil.storage.get("mykey", false, true) I then decided to give localStorage.setItem('myCat', 'Tom'); with localStorage.getItem('myCat'); a try and for the past few days reading the "how to" doc examples, I came up with absolutely nothing. As for the docs, most if not all pointed out that it was "simple, piece of cake, easy" and the list goes on. There is no doubt that either I'm reading into it to much or just can't grasp as to how to get it to work. This is what I came up with testing it and have five more, but no sense in showing those as they did not work either. Example: wrapped these around this element: There was no reason, at least I did not think so, to do the above with this element: as all it did when clicking on that button, was to show/start the marquee. Just to note, I also read this tutorial: toddmotto.com/storing-data-in-the-browser-with-the-html5-local-storage-api/
|
|
inherit
216224
0
Aug 1, 2024 1:18:46 GMT -8
Quozzo
408
November 2014
quozzo
|
Post by Quozzo on Apr 11, 2016 8:04:44 GMT -8
Think of local storage as a variable, just like any other, except it persists after the session/page load. To show/hide the spoiler you must first check the variable. If true hide it, if not show it (or vice versa) LocalStorage annoyingly has methods, but no-one uses them. Its easier to literally assign values to them like an object and retrieve values like an object. var hide = localStorage["hide"];
localStorage["hide"] = "hide";
You then need to use if statements in your code to check if you should run the line to hide or open the spoiler. As i've mentioned though. You are not using the html methods correctly. See the jQuery html method for more info. Hint: its only needed to retrieve or change the html.
|
|
inherit
First Contributor
66253
0
Mar 18, 2024 11:09:20 GMT -8
aRMY83
2,925
December 2005
army83
|
Post by aRMY83 on Apr 11, 2016 12:07:30 GMT -8
Hello Quozzo Appreciate your input and those html's have been removed. As for the if statements, I think I'm getting close, but sadly it's still not working: var hide = localStorage["hide"]; if ("show") { } else { localStorage["hide"] = "hide"; } $(document).ready(function(){ $('#mdivx1').hide(); $('#stop').click(function(){ $('#mymarquee').hide(); $('#mdivx1').show(); }); $('#start').click(function(){ $('#mymarquee').show(); $('#mdivx1').hide(); }); }); Anyways... I'm still at a loss, but once again, do appreciate your input and your valued coding knowledge. EDIT: no further assistance needed as i have decided not to use localStorage for this plugin.
|
|
inherit
201984
0
Sept 11, 2023 1:23:07 GMT -8
P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Using My Talents Elsewhere
3,314
November 2013
pastuleo23
|
Post by P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ on Apr 12, 2016 4:45:50 GMT -8
Hello Quozzo Appreciate your input and those html's have been removed. As for the if statements, I think I'm getting close, but sadly it's still not working:
Anyways... I'm still at a loss, but once again, do appreciate your input and your valued coding knowledge. EDIT: no further assistance needed as i have decided not to use localStorage for this plugin. Just want to mention if ("show") { } "show" is not a variable because it has quotes. That makes it a string. Any string is considered truthy. Truthy means that it's evaluated as 1, true, 1==1 or any other true statement. So your localStorage["hide"] = "hide"; was never run because it was in an ELSE statement
|
|
inherit
First Contributor
66253
0
Mar 18, 2024 11:09:20 GMT -8
aRMY83
2,925
December 2005
army83
|
Post by aRMY83 on Apr 12, 2016 6:33:48 GMT -8
Hello P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓Now you have me wanting to give it a go again... and thanks for the input and appreciated. Just did a mod on that code to read: and it still does not work.
|
|
inherit
201984
0
Sept 11, 2023 1:23:07 GMT -8
P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Using My Talents Elsewhere
3,314
November 2013
pastuleo23
|
Post by P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ on Apr 12, 2016 8:10:47 GMT -8
Hello P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ Now you have me wanting to give it a go again... and thanks for the input and appreciated. Just did a mod on that code to read: and it still does not work. I'm going to help you out. "show" is a string. Which means it will always evaluate true. Which means DON'T USE IT. You want to check the value of your hide variable (which is a bad global variable name to have because it's a common word) So more like: var armyHide = localStorage["hide"]; //default if doesn't exist
if(armyHide==undefined) armyHide = "hide" $(document).ready(function(){
//if set to hide, run your start function (which hides your div) if(armyHide=="hide") $('#start').click()
$('#stop').click(function(){
$('#mymarquee').hide();
$('#mdivx1').show(); //if click stop set div to show
localStorage["hide"] = "show" });
$('#start').click(function(){
$('#mymarquee').show();
$('#mdivx1').hide();
//if click start set div to hide again localStorage["hide"] = "hide"
});
}); Should keep your last view settings. (if you are trying to keep track of mymarquee and not mdiv I guess make it do the opposite lol)
|
|
inherit
First Contributor
66253
0
Mar 18, 2024 11:09:20 GMT -8
aRMY83
2,925
December 2005
army83
|
Post by aRMY83 on Apr 12, 2016 9:45:07 GMT -8
Hello P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓It's still not working when one clicks on the (Hide)" button and then does a refresh. When clicking on the (hide) button it hides the marquee, but the problem is that when one does a refresh, the marquee now shows without clicking on the (Show) button. What I'm trying to achieve, is when one clicks on the (Hide) button, the the marquee stays hidden until they clear their cache. You can give it a try here: (my test site) twkooler.proboards.com/Now click on the (Hide) button and then do a refresh and watch the marquee appear again. This is what I don't want to happen until they click on the (Show) button. Note: totally agree on the hide variable and I should have caught that one.
|
|
inherit
216224
0
Aug 1, 2024 1:18:46 GMT -8
Quozzo
408
November 2014
quozzo
|
Post by Quozzo on Apr 12, 2016 10:31:18 GMT -8
All of the code should really be contained within the anonymous function within the ready method. Then the variable names will be within their own scope and can't be overwritten. That's a much better practise than renaming variables to something obscure because they may become unreadible and it is still possible to overwrite them. Not so within their own scope.
|
|
inherit
First Contributor
66253
0
Mar 18, 2024 11:09:20 GMT -8
aRMY83
2,925
December 2005
army83
|
Post by aRMY83 on Apr 12, 2016 11:20:33 GMT -8
All of the code should really be contained within the anonymous function within the ready method. Then the variable names will be within their own scope and can't be overwritten. That's a much better practise than renaming variables to something obscure because they may become unreadible and it is still possible to overwrite them. Not so within their own scope. Thanks Quozzo for your input and this fellow is really confused now on the ways to incorporate the localStorage settings to get this to work. Having said, would it be to much to ask if you could take the code below and modify it the way you have suggested earlier in this thread so I can do a test on it at my test site? Code to modify: $(document).ready(function(){ $('#mdivx1').hide(); $('#stop').click(function(){ $('#mymarquee').hide(); $('#mdivx1').show(); }); $('#start').click(function(){ $('#mymarquee').show(); $('#mdivx1').hide(); }); }); As mentioned above, all I want is when one clicks on the (Hide) button that the marquee stays hidden until one refreshes.
|
|