ON/OFF Navigation Panel (Inter-Page Cache) - javascript

I have written a small sample page below to show you what I mean.
Is there a was to keep the .panelNav Open when navigating to another page and Function just as an ON/OFF switch only when the user allows the change?
http://glustik.com/glustik2/page1.html

I would use the jQuery cookie plugin - https://github.com/carhartl/jquery-cookie - and set the cookie to menuOpen or menuClose & write/rewrite it when the user changes the state of the menu.

Yes, here are some suggestions:
use AJAX to load another page directly into the content
placeholder
store a cookie value, and opening the menu when you get to another page if it is set.

Alternatively, append a parameter (e.g. "?navopen=1") or a fragment identifier ("#navopen") to the linked URL and check for that in your $(document).ready function. This might be nicer than a cookie because it will follow the user's clicks around, but will not affect pages opened from other sources.

Related

Jquery window.location to new page but also open a div originally set to display none

I have a form when on submit it will run two on-click events the first to redirect the window location to the new page and then the second to open the hidden div as below.
The issue is that it will load the new div in the source code and change it's status to display block but when it refreshes for the window location the function showDiv() is then hidden again. I'm sure there is a way to merge them both into one but I'm struggling.
function SetUpRedirect(destination)
{
setTimeout("window.location=\'/?page=4\'",1000);
return true;
}
function showDiv() {
document.getElementById('thanks').style.display = "block";
}
If I understand you right, the problem here is that you refresh the page. Once you refresh the browser loads a new DOM and forgets all about the old one and all the modifications you made to it. Changes you do to the DOM with JavaScript are not persistent over page loads.
So, how can you get around this? I can think of three options:
Alt 1. Use some kind of server side scripting, i.e. PHP, and pass the state of the div in the URL:
window.location = "/?page=4&display=block";
Then in the PHP (or whatever language you use), you need to read the value of display and handle it appropriately.
Alt 2. Set a cookie with JavaScript to signal that the div should be displayed, and when the page loads check if the cookie is present and adjust the display property of the div appropriately. You can read more about cookies in JavaScript here.
Alt 3. Design your page in such a way that a page load is not needed (for instance submitting the form with AJAX). This could require a major redesign, though.
This might help you with your problem. Since window.location will just reload the page and reset all the styles to the original form: How can I make a redirect page using jquery

pushstate - back button not working

If I use ajax to change specific portions of the page, like a content section, which warrants a new URL (and requires one specifically for favoriting, or refreshing), is there some magic that I am not aware of that allows the user to click the back button and reload the content that was just there?
Or do you have to re-retrieve the data based on stored variables using popstate
Thanks!

Create cookie if link clicked, redirects to clicked link on next visit

Site has two sections; 'Everywhere' and 'LA'.
Default is 'Everywhere' section.
How would I go about creating a cookie if the visitor clicks the 'LA' section link and when they return to the main site on another visit, they are redirected to that 'LA' section?
I've tried altering this script; http://www.javascriptsource.com/cookies/cookie-redirect.html
Instead of checkboxes, its a link and only one. But doesn't seem to work.
What I do usually is create a conditional, and create an embed with the cookie inside. I also tend to use this add-on: http://devot-ee.com/add-ons/cookies
Tad,
For setting the cookie you are going to want to use javascript, using a click handler on the LA section link. If you need some help with setting the cookie in javascript there is a good introductory article at http://www.quirksmode.org/js/cookies.html which isn't bang up to date but is still in full working order.
Once the cookie is set then you will switch to using one of the plugins for EE so that you can check for the existence of it in a template (probably in the an embeded or snippeted template) on page load. If you find the cookie then you can use the standard EE redirect syntax to send the visitor to the relevant section.

Problem while reloading a page using JavaScript

I have 2 divs, containing three different textboxes.
By default on page load I have enabled div1.
If I click button2 it will enable the 2nd div and disable div1.
Now I refresh the page. By default it will show the div as visible like page load.
Is there any way to show div2 and its textbox as visible using a script?
If I understand you correctly, you want to be able to remember states.
There are several options which one can use to achieve desired effect.
Cookies
On page load you can check whether a cookie has been set. If not, you will show div1 by default. If a cookie has been set, you will hide all divs except for the one that is specified by the cookie.
In order to help yourself and save some time, you can try to find some functions for manipulating cookies with Javascript online, like this ones.
Sessions
This approach is more or less the same as with cookies, the only difference is that instead of checking whether cookies have been set, you make AJAX call for PHP script which will check whether session has been set and send a corresponding response to the Javascript using whatever format you like (ie. JSON).
Local storage
Difference between this option and the previous two is that local storage is not supported by all browsers, so you will have to check for browser support first. If user's browser does not support local storage, you will have to use either option 1 or option 2, unless you find some more solutions to you problem.
To check for local storage support, you can use following code:
return ('localstorage' in window) && window['localstorage'] !== null
In order to get yourself familiarized with localstorage, you can watch this short video on net.tutsplus.
Please refer to the following thread to learn more how toggle element’s visibility via the javascript:
Toggle Visibility - Show/Hide Anything
See Also:
.toggle() - jQuery API

Javascript menu remembering position

I am currently working on a JS menu for a web app. It consists of two bars, the fixed main one and the submenu which is activated (display:block from display:none) by Javascript function. The selected options of the main menu as well as the submenu are also highlighted by adding a class="main_on" and class="sub_on" by onclick event. Is there way of remembering which submenu was displayed and which options were currently classed as active when the user hits F5 or the page reloads itself? I am looking for a non-cookie and non-database approach if possible.
Thanks,
Mike
You can make the link/element that is clicked (for the onclick event) set the URL hash in the address bar. (i.e. http://server.name/page#URLhash) If it's a link you just have to adjust the HREF property, otherwise you may have to manipulate with window.location.
This sets the current state. When the page (re)loads, check the value of the URL hash. See http://developer.mozilla.org/en/DOM/window.location for details on how to access it. Provided the URL hash is still in the address bar, you'll be able to get the value.
Then use the value to determine which menu to make active. Thus you can restore the state this way.
There are some differences between browsers. Do a search on "Ajax History", in which some people have used the URL hash to preserve the state after Ajax actions. Not the exact same problem you are trying to solve but similar. Check out RSH:
http://code.google.com/p/reallysimplehistory/
The same ideas will be used.

Categories

Resources