I need a solution which makes element visible after history.back triggered.
Initially, the div is hidden on a page. After a user clicks the button, the div becomes visible. Then then user visits another link and load page2. When user clicks Back button on browser from page2, I want to make the div is still visible on page1.
Page1 - HTML:
<html>
...
<body>
<div class="the-div hidden">
<h4>You see me now!</h4>
</div>
<button onclick="foo()">Click me!<button>
</body>
</html>
Page1 - JS:
foo = function(){
$(".the-div").removeClass("hidden");
// Expects the code here with history.pushState or something ..
}
Try to explore localStorage.
localStorage.setItem('buttonClicked', false);
on click of button, change the value of localStorage
Related
I'm working on designing a website, which I have two pages the first page contains a button when it's clicked the hidden class belongs to some element from the second page must be removed. I searched a lot but nothing works for me, Hope you can help me.
The first page contains something like this:
<button class="btn btn-primary add" >Click me!</button>
The second page contains something like this:
<div class="hidden" id="someDivId">Some content!</div>
jQuery code in the first page:
$('.add').click(function (){
//Access the second page
//Remove hidden class from #someDivId
});
You can use localStorage for storing data through the pages. After user opens website page with hidden element you just call javascript which checks the localStorage.
$(".add").click(function() {
//sets hidden on false
localStorage.setItem("hidden", false);
})
//on another website page load check localstorage value
let isHidden = localStorage.getItem("hidden") ? localStorage.getItem("hidden") : false;
if(isHidden) {
$(".hidden").removeClass("hidden");
}
This is what I want to implement:
On page a, click the link, go to page b,showing everything on page b from the beginning. Click browser back button, it goes back to page a and showing contents from the link position.
This is what I got now:
It happens between two aspx pages,
1、On the first page, http://xxxx/default.aspx#project/page/home, there is a link < a href="#page/test" >TEST< / a >
2、So When I click this link, it will jump to http://xxxx/default.aspx#project/page/test. But it seems like the browser remembers the link position on page/home and directly jump to the same position on page/test,instead of showing all the contents from the very beginning.
3、When I click browser back button, to the previous page, it also cannot go back to that link position.
Additional information:
I changed the < a href="#page/test" >TEST< / a> to < a href="https://stackoverflow.com/questions/1215449/browser-does-not-remember-position-of-page-last-viewed" >TEST< / a >, it worked just fine. So I think it is because of the aspx pages and the hashtag.
I have tried this, it will cause showing two pages at the same time(one on the left and one on the right)
Take User Back to Where They Scrolled to on previous page when clicking Browser Back Button
Please help, thank you.
To use an <a> tag to re-position the page, you need to have an element with an id attribute that matches the text following # in the link:
<!DOCTYPE html>
<html>
<body>
<h2 id="thetop">Top of page!</h2>
<p>Text here</p>
Go to top
</body>
</html>
Before HTML5, this was done with another <a> that included a name attribute:
<!DOCTYPE html>
<html>
<body>
<a name="thetop">Top of page!</a>
<p>Text here</p>
Go to top
</body>
</html>
On my page I have a button object declared as below.
<a class="button class" href="www.sometargeturl.com" onclick="makevisibile()">
The javascript makevisible() function just makes a <div> tag visible which acts then like a modal popup.
When the user hits the button, the the popup is displayed but after one second the user is navigated to sometargeturl.com. What I want is the popup to stop the navigation process until the user closes it, or clicks outside of it, only then do I want the navigation to resume.
Is this possible with plain html/css and javascript or do I have to use some fancy framework?
Cheers,
Bob
You need to prevent the default action by using return false;:
<a class="button class" href="www.sometargeturl.com" onclick="makevisibile();return false;">
Or put return false as the last line of your makevisible() function:
<a class="button class" href="www.sometargeturl.com" onclick="return makevisibile();">
function makevisibile(){
// ....
return false;
}
You want to prevent the default behaviour of the link (which is to navigate away).
You can either use another element instead of href for example a button or a code snippet similar to the one #Set Sail Media have suggested.
Keep in mind that in both cases you will manually need to change the url to the right location when the user closes the "pop-up".
EDIT 1
Bob, like you pointed out in your comments, if you disable the default behaviour of the href the page will not change when the user closes the pop-up window.
Let's assume you have a close function for the modal window which is called, close_modal() and it is called then the user closes the "pop-up"
function close_modal()
{
document.location='http://www.example.com';
}
You do NOT need to make a separate function for this, it all depends on how your page is currently looking.
For a better more complex answer please post a jsfiddle.
I got 2 pages: index.html and contact.html and each of them have a button (a tag for index page). When I click a button on the contact page, it should redirect to the index page and auto click on the index page. Is this possible?
Here my index page:
<div id = "wrapper">
<a id="btn-show-content" href="#"></a>
</div>
Here's my contact page:
<div id = "contact-wrapper">
<button id="btn-back"></button>
</div>
you can add query to button in contact page
<div id = "contact-wrapper">
</div>
Then, when the index page loads, it triggers triggerMe() function in the index page, you do the check of url hash
<body onload="triggerMe()"></body>
<script>
function triggerMe() {
var check = location.hash;
if (check == "triggerbtn") {
//button trigger even though you do not click on it
$('#btn-show-content').trigger('click');
}
}
</script>
I assume that you only need to trigger the function when click button in contact page. If you need the action happen all time you go to index page, you can use
$(document).ready(function() {
$('#btn-show-content').trigger('click');
});
You can use the JQuery .trigger() function. For your problem you wish to click a button on the contact page and it'll redirect you to the index page. When you go onto the index page and the document loads, this function will be performed.
Documentation here
(document).ready(function(){
$('#id').trigger('click');
});
In order to take away the issue of not being able to use Index.html everytime without it autoclicking. You can pass over a value to trigger the function on contact.html and then parse it in index.html, check out the solution to this question for that:
How to pass values from one page to another in jQuery
i am trying to show a hidden div after a login button click event..but the div is not staying..it is vanishing after the login click..but i want to stay the div after login button click and it will stay in the page untill i click anything in the page..
my button
<asp:Button ID="loginbutton" runat="server" Text="Login" OnClientClick=" return someFunction();"/>
my javascript function
<script type="text/javascript">
function someFunction() {
$("#logdiv").show();
}
</script>
Here the div is not stay visible after the click of your button because you make at the same time post back, after the reload of the page the div is hidden again.
I am not suggest you to hold the post back because probably is not what you want. You can try either render the div again with visible on, either register some other script after the post back to make it visible.