I'm developing a Webpage at the Moment (one single index.html). I got a navbar at the top which contains links to hash refrences (IDs of DIVs). If the user allows JavaScript the links in the navbar are used to execute a Javascript function with the onclick Attribute. Links are suppresed then. The Javascript function disables following the link to the hash reference and hides all divs except the selected one.
What to do to store the state of the page (which divs are hidden and which are visible) in the bookmark when user adds a bookmark to his browser? How to add browser history with the same meaning?
You can use search params to keep track of the page state. Then in your javascript on page load read the search params and reconstruct the page structure to match the params in the url.
Related
So in short, I have this page I created on a wordpress site. The issue, the content on the page, divided in different rows, is quite large and I wanted to enable on the beguinning of the page a jump to section link (and jump back to top link) for each section (in this case, row).
I'm in doubt, though, on what is the best way to do this on wordpress and wether I shoudl add an even type like scroll to or jump to. Also, I want to create a function that does this to multiple sections... in order to have a neat and simple code, is there any function(s) options you could recomment me to search and try to use?
thank you =)
The easiest way you can create a link to "jump to" a section of the page is with anchor links. This page has an example:
https://www.rapidtables.com/web/html/link/html-anchor-link.html
Notice that the browser URL gets updated when you click the anchor link, this is how you can share links to specific sections of your page.
How to create anchor links in Wordpress (Visual Edit Mode):
Begin by adding the anchor tag. This will go on the section header that you want to jump to (ie, the destination of the link). In Wordpress Visual Edit mode, on the right-hand side of the screen you should see an Advanced section. In the "HTML Anchor" field, add your tag. Use dashes (-) instead of spaces. Here's an example: my-section
Now create the link to the tag. Highlight the text that will link to the anchor tag. Click the "link" button in the toolbar and add the anchor tag with a pound symbol (#) in front of it. Example: #my-section
Save and publish. Now when you click the link you created in step 2, it should jump you to the section you tagged in Step 1.
For more detailed instructions, please see the Wordpress.com guide:
https://wordpress.com/support/splitting-content/page-jumps/
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!
I have 2 Polymer pages sharing one navigation menu structure. Only one menu item links to page two, the others are linking to id's on page one. How would I write the menu links from page two to id's on page one with JavaScript?
(Hashtags in a links are not relative to URLs in custom Polymer elements, and neither same page anchor links like p1 nor url changing links like work therefore.)
This seems to be a general problem with custom elements, and there is not much documentation on how to fix this in the Polymer-project page, therefore.
I have got help with same page id linking, but unfortunately am still really struggling with JavaScript, and have no idea how I would go about referencing a target element on a previous page by DOM methods, and attaching the necessary event-listeners and scroll functions.
This JS Bin from Frankie Fu is showing how to do this with same page links, but I would need to do it with url changing links.
My pages are therapie-jetzt.de/index.html and therapie-jetzt.de/Aktuelles.html (page two). The menu items are all linking to id's on page one, except for "Aktuelles", which points to page two. So what I need to do is point all other menu items in the menu on Aktuelles.html to the corresponding paragraph id's in the first page, index.html.
I guess I would have to start with getting and storing the previous page, say with document.referrer, put it in a variable, and query my id's, and then go on from that? But that wouldn't work, as I can only query nodes in the current dom/window object, right?
The easiest way would probably be to not load a second page at all and just hide the other content away when the menu item Aktuelles is tapped...
Lex
I have a javascript portfolio filter on a page that sorts logos by category, it assigns a category anchor link to the URL.
I'd like to use this anchor link URL to trigger an insertion of text. I can trigger the insertion of text via onclick with no problem using:
document.getElementById("insert-text").innerHTML
This works fine, but when you click on category logo & go to new page, I want to be able to hit "back" and still see the same results. The text insert disappears.
I was thinking something along these lines:
Get URL (with anchor)
if URL = certain category anchor
insert text
if URL = other category
insert other text
etc...
I think my logic is correct, but not sure of the syntax? Any suggestions would be greatly appreciated!
What you are asking to do is to save the state of a page so that when you go back to the page your browser returns to where you left off. This is what browsers use cookies for. Cookies are a set of key/value pairs that your browser stores and you can retrieve the values on. You could put a boolean in the cookie that signals whether your function has been triggered, on page load you can read the cookie and if it is set to true retrigger your function.
W3schools.com has a nice writeup on cookies to get you started.
This jsfiddle shows how you can expire the cookie logically.
document.cookie = 'ExpirationCookieTest=1; expires='+exp.toUTCString();
The application has a Home item in the navigation bar (the item is in all the pages). I would like that when the home item is clicked, based upon the page number a warning box is shown to the user warning them, that all unsaved work will be lost. If the user presses yes, he or she will be taken to the application home page and nothing will be saved. If they press no, he or she will stay in the page.
Currently this dialog box shows up in every page. In Oracle Application Express, shared components > navigation bar > target area, these are my settings:
Target type = url
URL target =
javascript:if(confirm('All unsaved work will be lost?'))
{window.location.href ='f?p=&APP_ID.:1:&SESSION.:&APP_PAGE_ID.';}
I would like this behavior to only occur in a select number of pages. When a user clicks on the pages not included in this list, the warning box should not be shown and the user is taken to the application home page.
What you'd want is a dynamic action which targets the navigation bar entries. However, there is simply no easy way to selectively enable or disable this action on select items save for testing the text of the anchor tag. That would mean you'd be hardcoding values in your dynamic action to test the links, which i will not recommend.
There are no classes that can be assigned, and no onclick events.
You could use the code you posted, and have a javascript function which takes a page id as input parameter and then checks the page id against a list of pages which allow the action, but again complicated. It could be made dynamic with some ajax, but since you're unfamiliar with javascript it's better to first get accustomed with it before tackling that.
So, instead of inventing something like this, take a look at this save before exit plugin. It will check for unsaved changes, and you can add this just to the pages you want it on.