Javascript menu remembering position - javascript

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.

Related

Adobe DTM - Accordion link click tracking

I have a accordion link with plus symbol. When the user clicks on the plus symbol, then the accordion will expand .
Can anyone help me out how to get the text of the accordion using the Event based rule in adobe DTM.
Note: On click of Accordion symbol, the page will not load. It stays on the same page only accordion exapands.
This is done via an event-based load rule.
Depending on how your element is embedded in the code, you need to address it.
For instance, if it is a class, you need to address it via .class_name.
As you are using DTM, I assume that you are using Adobe Analytics. Therefore, you need to create an eVar to which the value of the Accordion click is passed.
Furthermore, you need to set a custom code, which tells Adobe to write this value into the eVar.
This could be an example:
var label = $(this).attr("id");
_satellite.setVar("Label",label);
return true;
This code tells Adobe to get the attribute id and pass its value into the variable label.
As the last step, you need to map the evar to %Label% that the name of the part of the Accordion is passed to AA.
Good luck :)

How to trigger an event only when the user changes the URL?

I am working on a Chrome extension, I want to detect when the user has typed a URL. I know about:
chrome.tabs.onUpdated.addListener(eventLisenerObj.onUpdated);
But, it gets called whenever the URL is changed (e.g. when the page is auto reloads, or user clicks on a link, etc.)
I desire to be able to determine that the URL was changed only by the user typing a URL.
You can get this information using the webNavigation.onCommitted(MDN) event. The event listener receives a property transitionType(MDN), which will be different values(MDN) based on the cause of the navigation. Which values you trigger on will depend on exactly what you are desiring. For what you describe, you will probably want 'typed'(MDN), but potentially also 'generated'(MDN), 'keyword'(MDN) and/or 'keyword_generated'(MDN).
The list of possible values is explained on Chrome's History API page (they are listed on the Chrome webNavigation page, but not explained there) (On MDN: TransitionType) (text from the Chrome History API page):
"link"
The user got to this page by clicking a link on another page.
"typed"
The user got this page by typing the URL in the address bar. Also used for other explicit navigation actions. See also generated(MDN), which is used for cases where the user selected a choice that didn't look at all like a URL.
"auto_bookmark"
The user got to this page through a suggestion in the UI — for example, through a menu item.
"auto_subframe"
Subframe navigation. This is any content that is automatically loaded in a non-top-level frame. For example, if a page consists of several frames containing ads, those ad URLs have this transition type. The user may not even realize the content in these pages is a separate frame, and so may not care about the URL (see also manual_subframe(MDN)).
"manual_subframe"
For subframe navigations that are explicitly requested by the user and generate new navigation entries in the back/forward list. An explicitly requested frame is probably more important than an automatically loaded frame because the user probably cares about the fact that the requested frame was loaded.
"generated"
The user got to this page by typing in the address bar and selecting an entry that did not look like a URL. For example, a match might have the URL of a Google search result page, but it might appear to the user as "Search Google for ...". These are not quite the same as typed(MDN) navigations because the user didn't type or see the destination URL. See also keyword(MDN).
"auto_toplevel"
The page was specified in the command line or is the start page.
"form_submit"
The user filled out values in a form and submitted it. Note that in some situations — such as when a form uses script to submit contents — submitting a form does not result in this transition type.
"reload"
The user reloaded the page, either by clicking the reload button or by pressing Enter in the address bar. Session restore and Reopen closed tab use this transition type, too.
"keyword"
The URL was generated from a replaceable keyword other than the default search provider. See also keyword_generated(MDN).
"keyword_generated"
Corresponds to a visit generated for a keyword. See also keyword(MDN).
To differentiate some types of transitions, in addition to the transitionType values, you will also want to look at the TransitionQualifier(MDN). The possible values are (from the Chrome documentation, which are described somewhat differently on MDN):
"client_redirect"
One or more redirects caused by JavaScript or meta refresh tags on the page happened during the navigation.
"server_redirect"
One or more redirects caused by HTTP headers sent from the server happened during the navigation.
"forward_back"
The user used the Forward or Back button to initiate the navigation.
"from_address_bar"
The user initiated the navigation from the address bar (aka Omnibox).
You can have a look at $locationChangeSuccess.
You can get the path like this:
var loc = $location.path();
Then on change of loc you can attach your function.

I want to get an event for an HTML onContextMenu *after* the final selection, not at initial click

If I do
<a href ... oncontextmenu="myFunction(event)">
It gets called when the user right clicks on a link, before the context menu appears. But I want to get an event after a context menu item has been selected. Ideally, only when they have selected "Open link in ...", so having access to what they actually clicked is desirable.
Would prefer a non-JQuery answer, but if needed, JQuery is o.k.
Added: Explanation what I'm trying to do:
When the user directly clicks a link to another (commercial hotel finder) site, I bring up a little alert "If you book a room, please enter XXXX as the Gift Code"). Would also like to put up this alert if they right click and open the link in a new tab etc.,.,
Added#2: Thanks for the prompt and direct answers. See my "answer" below for what I ended up doing. I'll leave this question open in case there are other options.
This is not possible to do in Javascript, but you might be able to achieve what you are looking for by replacing the default context menu with a custom one.
You can't. The primary purpose of the contextmenu event is to allow a page to replace the browser's context menu with a menu of its own rendered as HTML. The contents of the browser's context menu are not specified by any HTML standard, and will vary from browser to browser. Most of the options in the context menu refer to actions outside the scope of the page (e.g, "copy", "view page source", "open link in new window", "save as", etc.), and there is no event fired on the page when they are selected unless the action being performed would normally fire an event. (For instance, selecting "Print" might fire onbeforeprint and onafterprint events.)
The WHATWG HTML5 specification specifies a menu element which can be used to add items to the browser's context menu, but it's currently only supported under Firefox. So that's probably not really an option either.
Just an idea, and I'm not sure exactly what you are trying to do, but I would try calling the function on a set delay, like this:
Right-Click Me, then wait for 3 seconds.
The only downside is that once the alert() is called, the context menu is hidden.
Hope this helps!
What I ended up doing is inserting an intermediate page on my site.
Instead of directly going to the external site, the route (I'm using node & Express) brings up a intermediate page with the explanatory text, a checkbox "Got it, don't show this page again", (in my case, the answer gets stored in localStorage, others might store on the server) and a big green OK button that takes you to the external site.
If the route includes the query "?directXXX=true", (read from localStorage) you skip over the intermediate page and are immediately redirected to the external page.
This way I get a much nicer explanatory page, with an image, etc... (dialogs, even if you use something like alertify, look klunky) and I get to "intercept" all calls to the external site.

How to uniquely identify a webpage in javascript not using the URL

I have a bit of an interesting situation.
I have an application that uses an MVC framework to deliver the view to the user.
This is great for the overall design perspective.
There is a wrinkle though.
At certain times a user could be doing something on a page and they would be required to go to another page to perform a look-up service. I need to be able to uniquely identify each page that they go to and I am not able to use the URL, because all the subsequent pages that I visit from the parent page have the same URL.
Just an fyi, I care about this because I'm attempting to store the last known scrolling position on each page in cookies.
Example -
They are working on Page A.
They click a link from A and they are taken to page B.
On Page B they enter some values and click Search which will query a DB
A list of results is returned.
They can then select to "Return Value" of one of those search results.
The value is then returned to Page A.
When I run the following on each page (A and B) -
alert("${channelUrl}");
They are an exact match!
What else can I do to determine what page I am on within my javascript without resorting doing any sort of server side AJAX calls etc...?
Is what I am asking even possible?
Currently I am attempting to solve this problem by counting up the number of text fields on the page and appending that to my cookie name. This is not ideal, especially if a user visits a page that happens to have the same number of text fields.
Thanks.
One common way to handle this sort of thing is to open the second page in a new window. With this approach the parent and child windows know which is which (the child refers to parent as window.opener, and the parent refers to the child via the return value of the open call) so there's no need to manage URLs or anything to keep track.
People often use the part of the url after # to keep track of where you are under the a single URL. This is built-in supported with My Section which takes you to the element with id "my-section", but you can use libraries that take control of this section of the URL in other ways.

ON/OFF Navigation Panel (Inter-Page Cache)

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.

Categories

Resources