With code below I'm fading some divs, but when I reload the page, the divs are visible again. I don't want that to happen; what I need is that if user clicks a back button or the home link, it should go back to the original format, otherwise the divs must be kept hidden when the page is reloaded.
$(document).ready(function () {
$("#prodoneid").click(function () {
$("#sliderid, .prodcls").fadeOut(250);
});
});
below is my html code
<div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>
<div id="prodtwoid" class="prodcls">
<img src="images/zara/thumbnails/2.png" alt="ZARA"/>
</div>
<div id="prodthreeid" class="prodcls">
<img src="images/puma/thumbnails/1.png" alt="PUMA"/>
</div>
<div id="prodfourid" class="prodcls">
<img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
</div>
</div>
You will have to save the fact that the divs are hidden either in a cookie or HTML5 local storage (newer browsers only) and process that saved information when the page loads in order to restore the page to the exact state you previously saved. The browser does not do that for you.
Web pages are normally stateless on the client. They are supposed to load from the server the same every time unless you design some client-side state into the page yourself. So, if you want to create some client-side state, you have to either store that state on the server (often with ajax) and put that state back into the page when it's loaded again by that particular viewer. Or, you have to save the state in the local browser (generally using cookies or HTML5 local storage), retrieve it from there when the page is loaded and act on it to put the page in the desired state.
Here's some pseudo code for using cookies for this:
$(document).ready(function () {
/* read the cookie "sliderHidden" and if it's is set to 1,
then: */
$("#sliderid, .prodcls").hide();
$("#prodoneid").click(function () {
$("#sliderid, .prodcls").fadeOut(250);
/* write a cookie called "sliderHidden" set to 1
that remembers that that these items are hidden */
});
});
For jQuery, there is a cookie plug-in that makes it easy to read/write cookies.
You should use fadeOut, but you should also use a technology such as cookies, or HTML5 localStorage if you want to be part of bleeding edge technology so you can persist the setting between page loads.
When you fadeOut the elements, you should write the state you choice of storage, and on page load you should check the storage to see if a previous state exists; and hide() the div if necessary.
You can read more on localStorage here, and cookies here. A jQuery plugin exists which abstracts the low level cookie interface, and you may find it of interest.
Infact, your best option may be to look at this plugin, which attempts to use localStorage, but falls back to cookies if they are not supported in the current browser.
You have to use some kind of cookie to save 'hidden' status of the element. Look for jQuery cookie plugin (http://archive.plugins.jquery.com/project/Cookie).
Hm- HTML is static!
I think you have got to handle this by a session (depends on the programm language) or cookie.
For the Cookie have a look at: this tutorial
You could consider using some kind of session state variable or cookie, that is a weak solution though. Your question is not very clear, better perhaps would be to reconsider the structure of your page and or the view model (assuming MVC here?)
Related
I've been trying to figure this out on my own, but I can't seem to get it sorted.
I'm building an accessibility section on a client site, and i've got two buttons, the buttons add a class to the body, one is font-size the other is greyscale.
I need these classes to stay on the body until clicked again to remove, as users don't want to have to keep clicking the buttons to be able to see the site.
I want to store these classes with a session or cookie, but having done some reading, sessions store cookies anyway, so whichever is the best option.
I'm using wordpress for the site, so if there's something I can use function wise, that'd be useful to know!
Can anyone help me out?
If you want to use localStorage you can use this code.
// Check if localStorage is supported
if ('localStorage' in window && typeof localStorage == 'object') {
$(document).ready(function() {
// Set the class if greyscale is set
// Note that localStorage saves everything as strings
if (localStorage["greyscale"] == "1") {
$('body').addClass('greyscale');
}
// Register click listener for the button
$('#button').click(function() {
// Toggle greyscale on and off
if (localStorage["greyscale"] != "1") {
$('body').addClass('greyscale');
localStorage["greyscale"] = "1";
}
else {
$('body').removeClass('greyscale');
localStorage["greyscale"] = "0";
}
}); // - button click
}); // - doc ready
}
JSFiddle
Session is usually using cookies but data is stored on server side and cookie is only used to identify it.
Assuming you have no reason to know if user is using gray scale on server side you can do this entirely in JS.
For example using some neat jQuery plugin for cookies https://github.com/carhartl/jquery-cookie
//set cookie and add class on button click
$('#button').click(function(){
$.cookie('greyscale', true);
$('body').addClass('greyscale');
});
//check for cookie on document load
$(function(){
if($.cookie("greyscale")){
$('body').addClass('greyscale');
}
});
Also please have in mind that this cookie will be sent to server and back over and over again so if you don't need this on server side you should use some more modern solution like HTML5 localStorage. There are few libraries that can be used to keep data on client side. They use modern features and fallback to old ones(like cookies) on older browsers. Please check http://pablotron.org/software/persist-js/ for example.
As mentioned in this answer:
The main difference being that session data is stored on the server, while cookie data is stored on the client. Therefore, a client can easily modify the cookie contents, but will have to work way harder to modify the session contents.
There are a couple ways to approach this
1) Keep the information in $_SESSION.
2) Keep the information in cookie.
Based on your case and on the data you want to store (which are not critical), I'd suggest you store it in a cookie and not bother the server to keep track for every user.
You could easily store information in a cookie via javascript.
Here is a javascript cookie reference for you:
http://www.w3schools.com/js/js_cookies.asp
After storing your info inside a cookie you could retrieve the info stored inside a cookie via javascript or php.
Keep in mind:
Javascript = client side (server wont be bothered) & after your dom is ready you will have to add the according class to your body.
PHP = server side, meaning that you wont have to add a class after the dom is ready and print your html with the appropriate class already set on the element.
PHP cookie references:
http://www.w3schools.com/php/php_cookies.asp
http://davidwalsh.name/php-cookies
Store it in a cookie.
Using cookies you can choose when will the cookie expire, when using sessions - when session is destroyed information is lost eg. when user logs off.
User will have to manually delete your cookie to delete the "body class information"
I have a html form which are paginated.I need javascipt that can save the history of value of input, user click next pages and when return to previous page can see what was wrote.
You have several options. You can for example use local storage.
But since that is not supported in older browsers, you can fall back to a cookie mechanism for example. Check out jstorage.info for a library that handles this fallback behaviour for you.
Use Cookies method in javascript to store text box value.
Keep a JavaScript variables value after a page refresh? this page gives more information about cookies.
Is there a way when Page change location to keep some HTML Element's.
Like a div that will not be re-rendered but keep it's state.
You can find and example like that at Facebook Chat ,you can see that the Chat window does not change it's location or InnerHtml when you navigate to another page.
PS : I have no clue where to start so any documentation would be appreciated.And it would be nice if solution would be XHTML not HTML5
I don't know exactly how facebook chat works, but I do know all chat messages are stored in a database, so you can access them later via messages.
My assumption would be that a Session variable is set letting facebook's UI know what chats you have open, or perhaps its stored in the database as well. In either case, you'd have to use some outside script in order to do this. For sake of ease lets say you'll use PHP, and you'll store the data in a SESSION variable.
/* Storing the variable */
$users = array('user123', 'user456', 'user789');
$_SESSION['chat_windows_open'] = $users;
/* Retrieving the values */
foreach($_SESSION['chat_windows_open'] as $chat) {
/* Use $chat to get the username, query the DB for
the message content, and echo it in whatever form you
wish. */
}
When window.location changes, the page is automaticaly, entirely re-rendered. So, from this point of view, the answer is no. However, this effect can be obtained by using AJAX. Use ajax to make requests to the server while the page does not reload or changes location(window.location is always the same). Here's a good link to start with AJAX:
http://www.w3schools.com/ajax/default.asp
If you still want the page to change it's location, after you've made your ajax request and updated the content on the page, you can use javascript's history.pushState function. However you will have to find a way to make it cross browser(aka. make it work in IE).
This is a bit long to explain, so I'll try to keep it short:
I'm submitting a form and returning a list of users, then emptying a and repopulating it with the returned users. This works as expected until after I add a user and then browse to another page, then go back to the previous page, it's loading the list of users that was there before adding the new user. If I refresh, the user list is correctly displaying the list of users again.
Some pseudo code:
... function to add a user, then return success ...
$("ul#userTab").empty();
for(user in data['users']){
$("ul#userTab").append("<li>"+user+"</li>");
}
It seems as though the browser is caching the first page load once I use the back button, but I don't really know. Any help is appreciated.
EDIT: To clarify, I'm sending data to the server, saving it in the database, then returning the users from the database. I'm not just adding an arbitrary value to the page then reloading and wondering why it's not there.
The browser is not going to maintain the DOM which you manipulate between page redirects. You have to use any history management plugin or using iframe to maintain the state of the page between page redirects.
Take a look at some of the links below, these might help you
http://www.asual.com/jquery/address/
http://benalman.com/projects/jquery-bbq-plugin/
http://plugins.jquery.com/project/history
http://benalman.com/projects/jquery-hashchange-plugin/
http://code.google.com/p/reallysimplehistory/
A page is loaded with what the server sends to the browser, any changes made by javascript are done in the client browser only, and not on the server, so when the page is reloaded from the server it is the same as it was, what the server sends.
to make the change permanent, you will need to either send the change to the server using AJAX, or store it client side in session or cookies.
the obvious answer is that you're dynamically adding elements to the dom and not rewriting the page. If you want to preserve the results you should consider adding the results to a cookie and checking if the cookies exists on load, then display accordingly.
document.cookie ='users=html_results here; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/';
I have three radio buttons and 4 check boxes.
I want to preserve the radio button and check box values after the browser refresh.
I do not want to use cookies (due to some other reason).
Could anyone please help me?
I don't think this is possible because HTTP is stateless, cookies or server side scripting provide 'state'.
You could use sessions instead.
EDIT: My bad, I read PHP and not Javascript. However I did find this link after a quick Google search. Session variables without cookies in JS
You might be able to use the hash url.
something like this (don't remember if you need to specify the name of the page as well, but I don't think so):
document.location.href = '#radio1=1&radio2=0'
The hash means it just directs things on the current page and not going to another page (and the browser updates it in the address field, so if the user reloads the page, it will still be there). Then you can read it from javascript as well and set it.
Not as good as using server side sessions, but it is an option :)
If you're using a form to trigger a new page loading you can make the onsubmit event call a javascript function to change the window location and append URL parameters that store the values of the radio buttons. When the page loads you would then read the parameter values from the URL. Something like this:
<script type="text/javascript">
function changeURL(){
var str = window.location+"?radio1=1";
window.open(str);
return false;
}
</script>
...
<FORM onsubmit="changeURL();">
<INPUT TYPE="submit" value="click me" >
</FORM>
A new facility is being developed to allow web sites to store persistent data on the client machine. Available in some browsers already this allows you to save the the radio and checkbox states and recover and restore them next time the user visits your site. For more info see here https://developer.mozilla.org/en/DOM/Storage and here http://dev.w3.org/html5/webstorage
Have some JS on the page submit all radiobutton/checkbox events to the server, and store their state in your database. When the page (re)loads, send this state as part of the HTML.