So I have a page with two ancor elements that link to the same page. I want to know which of the two ancors was clicked when the second page loads with javascript in order to initiate different actions. I know that document.referer exists and that it gives me the uri from where the user came, but i want to know what element he clicked.
thanks!
Related
I have a very long table. The first column of each one of the rows is an <a> tag. A click on an <a> tag does:
Update route and page reloads
Get data(list of objects) from server.
Display the data below the <a> tag
Hide data related to an another <a>tag.
The length of the data differs from each other. At a time, I only show data related to one of the <a> tags. For instance, a click on the first <a> displays data related to it just after of it. A click on the second <a> shows data related to it and hides data related to the first <a>.
How to scroll back to the <a> tag you clicked on when route changes and page reloads?
If you answer, please no jQuery.
Thanks in advance.
So what's inside your tables? Is it images?
And the "data from the server", is it data, like data from an api request? Or is it a new webpage?
If we're talking a dynamic web page here. I remember dealing with the same problem with an infinite scroll view where a user clicks an element, and then goes back and expects to return on the same position.
The problem with dynamic content is that it takes a while for the browser to render it. Depending on what it is it might take a few milliseconds to many seconds (poor 3G and a view with 1000 images for instance). And while this rendering is going on, you never really know where the scroll should end up. It is possible to solve by adding timeouts and adjusting the scroll until we're almost sure that the page is in the correct place. But it's usually a mess.
You say that the page reloads? Normally a page needs to "reload" if a user is changing route and similar. If the data you are loading is a new page, the I get why you have to reload. But if it's an api request for some other data; is it an option to not reload the page? If that's possible, then you could remove and add elements instead of reloading the entire page.
I have a web page (all done in client side code) where users can add certain page elements dynamically through different buttons.
For example, they can click a button called "Add Group" and input a group name. This will create a <div class="customGroup"> that displays the group as the "title" among some other buttons that let them add even more elements within that newly created <div>.
I want to be able to store what a user did and not have it lost if they do something like close & reopen the window or reload the page. So for example, if they add a group "Foo" and refresh the page, given that the page is all HTML/JavaScript, "Foo" is lost.
Is there some way I could record their actions and re-execute them using caching/cookies? Or do I need to do it some other way? Is this even possible?
I would suggest using localstorage to keep this data around, across windows opening and closing.
You can find out what the user clicks on by attaching an event listener to the elements you care about. The functions you pass in there can keep references to the clicked items by pushing them to an array. Then you can click them when you want to using .click().
As for text the users enter when the data is submitted, make sure its in localstorage as a string. On page load, you can put this data wherever you want to, so give it to an elements innerHTML and voila, you can reconstruct the page state.
Is there a way in Adobe Acrobat to detect if a user is on the last page? What I would like to do is set some document javascript to trigger once they are on the last page. I know how to setup the document javascript in Acrobat, just haven't found any way to detect what page its on. Ideally it would be nice to be able to get the current page and page count and compare, but even if there is a current page variable, I could just hard code the last page. My fallback will be to add a button or checkbox on the last page, but would like to avoid that. Any help would be appreciated. Thanks.
Pages have actions just like fields do, so in your case, you could use the last page's Open event to trigger your Javascript.
To set a page action, open the "Page Thumbnails" navigation pane on the left, right click the page, then add an action as you would to a field. Alternatively, a page action can be set via Javascript. In your case this would look something like this.setPageAction(this.numPages-1, "Open", action);
In my web page, users can click on inputs which are check boxes. Later in their browsing, the options they chose cause other html documents to be displayed in the page they are in. At least that's the idea.
So, User A clicks check boxes for "Doc1" and "Doc4".
An ajax call goes out to a web service and pulls these documents back. They are html.
The callback method should take this html and insert it into the page.
I tried using an iframe, however that seems to require the src attribute to be specified. The html that comes back is a full page including . This would be on an HTML5 compatible browser only.
Is this possible, or should I be looking at something other than iframe?
I solved this as follows:
User checks a couple check boxes and clicks 'next'.
AJAX call goes out to retrieve those documents associated with the checkboxes.
The page displaying retrieves this data, and creates iframes as needed.
SRC cannot be specified because there is NO url!
IE doesn't support ...'> because 2083 chars is the limit for IE.
Final solution is to write manually to the iframe:
var target = document.getElementById(someIframe).contentDocument;
target.open();
target.write(documentReceivedFromAJAXCall);
target.close();
So, I want to change the display style of one of my divs, here's the code in my javascript:
document.getElementById("header1").style.display='none';
Now the problem... header1 is a div id on a different page, but I want to affect that from selecting an option on the current page. How do I go about doing that so that the header1 will be hidden when I go onto the next page?
Thank you in advance!
You cannot change the properties of an element that has not been loaded into the browser yet. You would have to use a cookie or the querystring to tell you to hide the element when the page is loaded.
Edit
You can redirect to a new page using the following javascript. Note: everything following the ? is part of the querystring.
// Redirect without querystring
window.location = "http://www.mySite.com/default.html"
// Redirect with querystring
window.location = "http://www.mySite.com/default.html?hide=true"
// Redirect with multiple values in querystring
window.location = "http://www.mySite.com/default.html?hide=true&test=1"
Check out get-query-string-values-in-javascript to see how to retrieve querystring values through javascript.
You could pass the value to the next page in a hidden form field or possibly via the url then when that page loads use that value to set the desired value on the page.
how about carrying the value/selection to the other page using local/session storage, or even indexDB, if you have a lot of information to carry or you are carrying across multiple pages. saves having unneeded POSTS and removes the need for any server side code