jQuery toggle not working when back button is hit - javascript

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/

Related

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

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";

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.

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)

Jumping down in HTML when clicking onto a tab

on http://tinyurl.com/75tx5hn when i click onto "Über die App" or onto "Screenshots", the Website scrolls down. to the header, have u got an idea how to avoid that problem?
Strangely this only happens on Firefox and IE , not on Chrome?
ok found you problem
find that line in your page code
<div id="about" class="pane" style="display: block; "> <!-- Start About Page -->
id="about" in tag is causing this problem. this will be resolved if you change this id name
:)
use focus() function of javascript to show div with class="header"
eg document.myform.mytextfield.focus(); to set the focus on click of button
That is the expected behaviour, considering that the link is anchored to a div on the same page:
<li>Über die App</li>
...
<div id="about" class="pane">
You can kill that behaviour like this (you have jQuery included on your page):
$(".tabs.page a").click(function (e) {
e.preventDefault();
}):
...or just by removing the ID on the div.
The problem is that your link is linking to #about (id="about"), the browser will try to go to that section displaying it in the top of your browser.
Testing :
User your browser and zoom into the button, then click on the link. You will see it will display the ABOUT content section with ID = about.
Solution :
Change ID's of the content
OR change hrefs of links
OR set a jquery event to prevent default browser actions.

My website alway scroll up when i click link?

I have a link
Text
when i click this link my page alway scroll up to the top. How do i manage it that when i clik this link my page not scroll up to the top.
Javascript? or something
thank you
you can add some javascript to deny the default behavior.
function myClickHandler(e) {
// your code here
// ...
// new code
if(e.preventDefault){ //firefox,chrome
e.preventDefault();
}
else { // ie
return false;
}
}
if you provide some more detail/example code, we can give you a more specific answer.
Not sure what you are trying to do, but maybe you are thinking of:
<a href="JavaScript:void(0);" >Text</a>
that'll do nothing.
You might want to post an example of a link that does this. My guess is that it's because you don't have an href set for the link or you ended the link href with a "#someId"
It's not that it's scrolling to the top of the page, it's refreshing the page.
An example of a top link:
Some Link
Somewhere <!-- will refresh and you end up at the top -->
EDIT
Ah... Now that you've provided the link... it's the Hash # that's the problem.
To avoid that from happening ( I'm guessing you want to do some Javascript on the link and you're trying to get it to do something.. ) then you need return false; in your javascript. This will return false from the link and won't follow it.
It is because you have only the hash # as "URL". It makes the browser jump to the top of the page (normally it would jump to the element with the corresponding ID if you specify any).
But what is the purpose of such a link if you don't use it?
The [relative] URL # is treated by browsers as the top of the page. Either change the link's href attribute to refer to another resource, or add a click event handler that prevents the default action. Better yet, if you intend it to be a button that triggers a click event, replace the <a> tag with a <button> which is more semantically correct anyway.
<body>
<h1 id="top">First Headline</h1>
<!-- your document here-->
go to Top
</body>
With Javascript you could add some smoothness like slowly scroll up. HTML Links

Categories