Reload and remember the scroll position after coming back from popup - javascript

I have a page with products and each product has a link: "Buy". After clicking the link, a popup will show up which will have inside another .aspx file embedded. (the popup is generated by Colorbox plugin)
After the user is making the purchase (clicking on the button that sends to the DB information and so on):
1. the popup has to close itself
2. the parent page has to be reloaded
3. the scroll position has to be maintained
The problem is that the scroll position is not maintained (especially in IE browser).
What I tried:
1.
MaintainScrollPositionOnPostback="true" -- had no effect
And:
Popup page:
<script>window.parent.callbackfromchild('" + ID + "');</script>
Parent page:
function callbackfromchild(arg) {
__doPostBack("callbackbtn", "");
window.onload = function () {
document.getElementById('#div' + arg).scrollIntoView(true);
};
What am I doing wrong?

You need this script in parent aspx page
<script>
function callbackfromchild(id) {
//maintain hash on post back
var form = document.getElementById("<%=Page.Form.ClientID%>");
// Change form action & post back
form.action += '#'+ id;
__doPostBack("<%=callbackbtn.ClientID%>", "");
}
</script>
And you need this anchor -with ID to be used a function parameter from popup- placed next to each product with different ids. So when URL of parent page reload with a hash added to it " page.aspx#x1" it will make the browser scrolls to that element.
<a id="x1"></a>
And I guess you already have this Linkbutton on parent page, will be target of postback
<asp:LinkButton ID="callbackbtn" runat="server" />
On colorbox popup you need to pass the anchor Id back to parent
window.parent.callbackfromchild('x1')
Or it that was a popup window , you would call it like this
window.opener.callbackfromchild('x1')

You can put current scroll position into cookie before opening popup and reapply it on window.onload, I use jQuery.scrollTo plugin for such tasks, it works perfect

Related

JQuery click() does not load page properly if page has not been loaded via navbar first

I am working with this Template from templatemo.
I wanted to include some references to other parts of the website in the body text (e.g. Please "contact me" for further information). If you click "contact me" the page should navigate to "Contact" in the same manner as if the user clicked on the navigation bar to navigate to the page (with the same animation).
In order to so, i added the following code to trigger a click event:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:loadPage(5);">contact form</a></p>
And the function to trigger the click:
function loadPage(pageNo) {
$(document).ready(function() {
$('.nav-item').get(pageNo).click();});
}
So this code is working, if I click on the reference the page changes as if I clicked the navigation bar. BUT:
If I reload the page and click on the reference, the page navigates to the contact page, which then however is not diplayed properly (the contact form and the google maps view are missing).
If I reload the page, first open the contact page via the menu, then switch to the page with the reference and click on it, the contact page is loaded properly.
This behaviour is also shown if I reference another page (e.g. the Gallery). The gallery elements are displayed (the page is not completely empty), but the spacing between the elements is not correct.
It seems like every page has to be loaded at least once via the navigation bar. If this has happened, all pages are displayed properly when opened via a reference in the text.
Thanks for your support.
Your template use Hero slider + some customs JavaScript functions to move between "pages", so you need to use the same functions to get the same behaviour.
Doing that will work:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:goToPage('Contact');">contact form</a></p>
You need to add this JS function:
function goToPage(page_name) {
// Retrieve the <a> tag with the page_name
// page_name is the string of the page in the navbar
page_link_a = $('.navbar-nav .nav-link').filter(function(index) { return $(this).text() === page_name; });
page_link_li = page_link_a.parent();
// Trigger js code from hero slider
page_link_li.click();
// Trigger js code from templatemo
page_link_a.click();
}
The function goToPage() take one parameter, the string name of the section so if you have a section named My Gallery you need to put that, not my-gallery nor an index.

Know which button pressed led to this page

I have a menu with ~6 buttons, each that lead to the same page.
In that page, there is a drop down menu.
The purpose of the 6 buttons is that when one of those buttons is clicked, the page is redirected, and then the drop down menu opens to the correct tab.
However, all scripts are killed when a page is redirected, so I cant do something like this:
<body>
<a id="buttonID" onclick="GoToPage('buttonID')">All</a>
</body>
<script>
function GoToPage(buttonID){
redirect to page.html;
open menu to tab related to buttonID
}
</script>
Instead I would probably have to create a function that executes when the page loads, and then attempts to find from which button did it get there from, and opens the menu to the correct configuration based on that.
Should I use something like:
window.onload = ....
And how would I be able to pass which button redirected the page to this?
Opening the dropdown menu should be the responsibility of the destination page, not the source page. Since the server doesn't care about the dropdown menu state, send that information in the fragment identifier:
<a id="buttonID" href="page.html#all">All</a>
On the receiving end, you can retrieve the identifier with
document.addEventListener('DOMContentLoaded', (event) => {
let target = window.location.hash; // target = "#all"
// modify your menu as appropriate
});
The load event doesn't fire until the page has completely finished loading: images, stylesheets, everything. Modifying the dropdown menu doesn't require any of that, so use the DOMContentLoaded event instead. It fires when the HTML page has been loaded and parsed and is ready for DOM manipulation.

Is it possible to make a link to a one page webpage to open and position itself at a specific article?

Is there a way to open a specific artical via an external link and focus on it when the links open on a one page wepage?
I have a webpage that shows content as you click on links by hiding and showing the divs. What i want is to make an external link to my webpage in the form of mywebpage/(div's name) and have the link open my page but showing the content of that div right away, instead of its usual opening content you would get when clicking on just the ordinary mywebpage link.
Is it possible? And how?
Short answer: yes.
Long answer: You will have to examine the URL's hash on page load and manually translate that into hidden or shown divs (or other positioning).
While you're at it, you could include browser history support when your divs are opened and closed.
Pulling apart what I did for http://www.tipmedia.com (Segment starts on line 322 of the page source)
//on page ready
$(document).ready(function() {
//examine hash
if(window.location.hash == "#thanks") {
//scroll to an anchor tag, slight delay to insure correct page height
setTimeout(function() {
$('html,body').animate({scrollTop:$("#contact").offset().top}, 0);
},500);
//hide and show necessary divs
$("#contactThanks").css({"display":"block"});
$("#contactIndex").css({"display":"none"});
$("#contactGeneral").css({"display":"none"});
$("#contactMeeting").css({"display":"none"});
$("#contactCareers").css({"display":"none"});
//clear the hash (not necessary for your use)
window.location.hash = "";
}
}
The history stuff is easy too, I used Modernizer.js for the best cross browser support, but it looks like this (non-Modernizer use is very similar)
//during the hide/show of new content...
//if history is available
if(Modernizr.history) {
//this data is whatever it is you wish to save
lastPageState = { div:divName, pos:amount, page:lastLoadedPage };
history.pushState(lastPageState, divName.substring(1,divName.length-6), "index.html");
}
//...
//then later, the popsate event handler
window.onpopstate = function(event) {
//examine event.state and do whatever you need to
//example segment starts line 989
//Whatever data you saved would be read here and you would do the appropriate action,
//hiding or showing divs, reloading AJAX content, etc.
}
Yes, you can use an anchor link.
So in your target page name the div with an id,say div id="target".
Then in the referring page use a link in this form
Referring Page:
GO to Target Info...
Target Page:
<div id="target">
...content...
</div>
FYI-"target" is just an example name, it could be anything...

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)

How to redirect to a specific page from a JS displayed page in asp.net

I have an asp.net application with master page. In one of the pages I have a button click event which opens another page using javascript as shown below.
string urlVerify = "VerifyEnrollmentEntries.aspx";
string fullURLVerify = "var newVerifyDataWindow = window.open('" + urlVerify + "','_blank','height=600,width=950,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,titlebar=no' );
ClientScript.RegisterStartupScript(this.Page.GetType(), "OpenWindow", fullURLVerify, true);
This popup page doesn't have a master page. This is just a stand alone page, but part of the project. When the user clicks the close button on this popup page, I want to close this page and redirect to a specific page in the asp.net. Right now when the close button is clicked, the page closes and the parent page which caused the popup is shown.
Before closing your popup, execute JS code:
opener.location.href = "YourRedirectUrl.aspx"
It will redirect parent to that URL

Categories