How to reverse display=none on browser history back click? - javascript

On my page I have a javascript function that changes the current URL via pushState and hides a specific div when a user clicks on the text "close". The simplified page looks like this:
<div id='book'>
<a onclick='close();'>close book information</a>
Book Information
</div>
<div id='booklist'>List of all books</div>
<script>
function close() {
/* ... */
document.getElementById("book").style.display = "none";
window.history.pushState({path:newurl},'',newurl);
}
</script>
So the URL is "book.php?id=1" and shows information about one book on top of the books' list. If the user clicks on the close button, the URL changes to "book.php" and the book is hidden.
However, if the user opens other books and then clicks the back button of their browser, the URL will change back to "book.php?id=1" but display=none is still active. How can I reverse the javascript that was done before? Refreshing the page would also be fine. I found this answer but since I cannot change the body tag, it doesn't work for me.
I hope that you might have an idea how to solve this.

Use this:
document.getElementById("book").style.display = location.search ? "block" : "none";

Related

Href link that redirects to another page has a specific action

On my site I created several href buttons, I want these different buttons to lead to the same page but with an additional js action.
As when I click on the first link, this brings me to the page so and the second leads to the same page but with a javascript action activated.
I hope I have been clear enough and that this is possible, thank you for your response.
adding a class/id to it would help I think. I'm new here so let me know if that's what you are looking for
<a class="script" href="...">Link</a>
then in your javascript, you can manipulate it
var link = document.querySelector(".script");
link.addEventListener("click", function(){
// your function here
});
You can make this happen by sending url parameters with each href button: /page.html?action=1 . See parsing url parameters in javascript
Next on page.html use the following javascript:
window.onload = function() {
let url = new URL(window.location.href);
let action = url.searchParams.get("action");
if (action == "1") {
//perform an action
action1();
} else if (action == "2") {
action2();
}
};
Basically, I have a page where there are buttons that lead to another page or there are buttons that make things happen in js, and I want that when we click the button on the first page, we arrives on the second page when js is activated.
Basically I explain my site I have a button "visual identity" which should lead to another page (easy), on this second page there is
sub-buttons like "fish" which display a menu with js commands, its sub-buttons are also on the first page and I want when you click on the sub-button on the first page it will take you to the second page with menu opening.
I don't know if that's what you understood just above?
but thanks for your reply.

Manually add Browser History Entry (Cross Browser)

I don't know if it's possible in any way to achieve, what I want to do.
I got single page website with some sections. Something like this:
<div class="page pageOne"></div>
<div class="page pageTwo"></div>
<div class="page pageThree"></div>
<div class="page pageFour"></div>
When you open up the site, pages 2, 3 and 4 got display:none and the first one display:block. When I click a link in my navigation, the current "page" fades out and whatever link you've clicked on, the belonging section fades in. The links look like this:
<a class="pageChange" href=".pageFour">Four</a>
And here's the jQuery code:
$(".pageChange").click(function(e){
e.preventDefault();
var href = $(this).attr("href");
$(".page").fadeOut(200);
setTimeout(function(){
$(href).fadeIn();
}, 200);
});
What's pretty obvious is when I click the browsers back button, it won't fade the previous section in. It will just return to the previous site I've opened.So my question is: Is there a way to add a history entry in the browser, when clicking on a link? So I can press the back button and it fades the previous section in?
To get the visible section before clicking a link, I've done this:
var currentPage = $(".page:visible").attr('class').split(' ')[1];
But unfortunately that's no use to what I want to achieve.
I'd be incredibly happy if someone could provide me some help of how I could approach this (or if it's even possible)
You have to use the browser History API to update the URL. Then you can detect the back and forth movement with onpopstate and call your fadeIn and fadeOut methods accordingly.
I had the super similar situation! The best solution my friend would be to use https://alvarotrigo.com/fullPage/ You can read the code how he's doing on github. Basically you have to record the scrolling and later handle using a function for back and forth browsing.

Select the second tab in a section of a page

index.html#section navigates you to a certain section of a page. But I want to select the second tab in a section of a page. I don't know if it can be done without javascript but using Tab Content Script (v 2.2) with the method instance.expandit(tabid_or_position) would seem to work. However, I'm having a hard time figuring out how to select the second tab in a section of a page.
Hope you could help me with this. Thanks!
As mentioned in the comment, you want to navigate to the tab when a button is clicked.
Though not a clean way, but you may simulate a click action on tab once the is button clicked.
var element = document.getElementById('coupon-navigator');
element.addEventListener("click", function(e) {
document.getElementById('tab2').click();
}, false);

javascript: history.go(-1) doesnt work for the whole window

i have an unusual problem. I have a page which contains an iframe, which is controlled by the dropdown. So selection of the dropdown loads different iframes. Anyway - on the bottom I have a button to return to the previous page (I mean the whole page, not previously loaded iframe on that page).
<a href="javascript: history.go(-1)">
Unfortunately it also includes the history of these iframes, so when I click on that button, it loads up the previous iframe instead of taking me back.
Here is how to explain it well:
go to this page: Click here
go to the hyperlink on that page
make couple of selections from the drop down (play with it)
click the return button on the very bottom of the page.
I want it to take me back to the first page (here.html), not go back to the previously loaded iframe on 1.html.
I have to use javascript history.go or similar script. I can't use direct link to here.html, as this page is a part of many other pages, so when the user clicks return, he is forwarded to his specific landing page.
I greatly appreciate any help.
It's a life-saving question
Use document.referer
var referrer = document.referrer;
window.location = referrer;
Check if it works !
<a href="javascript: window.location = document.referrer;">
You need to remove the newly iframe before sending browser back to the actual page.
Add click event on the return link
HTML:
<a id="return_link" href="#">
Javascript:
$(document).ready(function() {
$('#return_link').on('click', function(e) {
e.preventDefault();
$('#iframeId').remove();
window.location = document.referrer;
});
});
try this , Just remove extra spaces from statements.
href="javascript:history.go(-1)

jQuery toggle not working when back button is hit

I have the following jQuery code:
$(function() {
var linkSet = $('#link1').add('#link2');
linkSet.click(function() {
linkSet.toggle();
if ($(this).attr('id')=='link1'){
$('#frame').attr('src', 'www.google.com');
} else if ($(this).attr('id')=='link2'){
$('#frame').attr('src', 'www.yahoo.com');
}
});
});
On pageload, the link with id link1 is shown while link2 is hidden. When the user click the link1, it will the link1 then show the link2 then vice versa. While toggle takes place, it also changes the source of an iframe which is named frame.
My problem here is when I hit back button, the content of the frame will go back to its previous content BUT the link are not changing. What did I missed here? Thanks in advance!
Note: The links are on a webpage, then inside that webpage is an iframe.
EDIT:
<div id="header">
<ul>
<li><a id="link1" href=#">Link1</a>
<li><a id="link2" href=#">Link2</a>
</ul>
</div>
<div id="iframe">
<iframe id="frame" src="www.google.com"></iframe>
</div>
You mean when pressing the browser's back button right.
If so:
The issue is you need to have an event to trigger when the history changes, as that is the only easy way to respond to changes in history (such as when clicking the back button). Since the iframe url is indeed changing, it is therefore also affected by the back button naturally.
To get other non history based logic to work when pressing the back button and such...
There are two ways to do this. The new one is by using the history API, while the other more supported, and simpler way is by adding a hash to the url.
WHAT DOES THIS MEAN?
When you click the button you change the url with a hash. Like the url can become
'http://domain.com/blah/#myHash'
Then instead of doing your logic in the click, you do it when the hash changes. So this way as the user clicks back and/or forward the logic always runs fully.
I wrote an entire article about this technique a few months ago at http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/

Categories