JavaScript page jump when updating element using ajax - javascript

I have a page which FITS vertically into the windo. When user clicks on the link, I get another page via ajax and plug it into the required element.
Everything works, But when user clicks on another link, page jumps up and it is annoying me.
I have tried using
<a href="#" onClick="showRoom('five');return false;" class="highlight">
//and
<a href="javascript:void(0);" onClick="showRoom('five');return false;" class="highlight">
and it did not work in both IE and Firefox - it continues to jump.
Is there any good working trick that could help?
I THINK that it has to do something with the renew. When I click the link - first, the LOADING ICON is showing. Only then, when reports table is available, it loads into the instead of icon. Therefore browser adds vscrolling bars when information is shown, but goes away in between reports switches and being replaced by small LOADING icon.
I think that I need to capture the scrollbar location when I click on the update link, then, after ajax updates the page, I need to call in another function that would scroll back to previous scrollbar location
This is how I "fixed" the problem, until real solution is discovered:
document.getElementById(showCoursesArea).innerHTML= '<center><img src=\"images/working.gif\"><h1><br><h1><br><h1><br><h1><br><h1><br><h1><br></center>';
pretty much it kepps my page LONG; therefore ajax updates are fitting right in.

'#' will take the user back to the top of the page, so I usually go with void(0). or if as you are saying second option is also not working than remove href and try out
or just try out
Link Text
or
<a onclick="javascript:myJsFunc()">Link Text</a>
or
Link Text
as id "0" will never be present on a page so that nothing happen.

When you click on a link with href="#" it is actually linking to the top of the document. You can actually just remove the href attribute completely.

Related

Refresh scroll location to current anchor name attribute

Heyo,
so I've got a main_menu with some sub_menu's. The main_menu li a[href]'s link to the different pages and the sub_menu li a[href]'s link to specific locations inside each page with the <a name="..."> attribute (f.e. from http://example.com/page to http://example.com/page#1). Now sinse this is a Website with a custom CMS, I can't change every single <a href="..."> attribute of all the li a's or else i will make the menu unable to eddit for people with less knowlage. So I redirect every of the sub_menu li a's to the correct anchor name attribute link.
Now once I clicked on one of the sub_menu li a's I will get redirected to the correct page and the correct anchor name attribute link. But I don't get exaktly to the point were the <a name="..."> is located. The Viewport is allways above or below the element.
For some reason this doesn't happen in Chrome thoe. In Firefox, Edge and Internet Explorer I get this weird bug.
So I tried to refresh (not reload) the page and after that it works. So I decided to create a little script with jQuery that makes the page refresh after every .load() and this is what I came up with:
$(window).load(function () {
$('html').load();
});
Now I'm not sure if this is the right approach to my Issue or if my Script is just not correct. But it doesn't work for me. What have I done wrong?
So you are causing li a with no href to change page with the anchor and having to reload to get the anchor positioning right? Have I understood that correctly?
Firstly I'd suggest that they should be href as they aren't the anchor, they're the link..?
With that aside, from what you've given (which probably should be more info generally), I'd guess that the position the viewport is at is where the element was before the page changed during loading and moved the element higher/lower. Chrome is probably timing the anchor positioning later than the other browsers (i.e. after more things are loaded/rendered).
I'd check this by temporarily disabling anything loading on the page that's causing DOM changes and moving the elements around during load. If that's the issue then you'll need to decide how best to handle that based on what is loading.
Hope this helps.

remove hash location from history and browsers back button

i have a project in which i have to scroll to a particular image out of a list of them. those images are lazy loaded (since they are all high resolution).
my current approach is to have an internal link to each one of them:
<a name="photo1"><img ... /></a>
when i click on a thumbnail to see the original photo i get a click by doing:
location.hash = "#photo1"
the problem is when i click browser back and forward, the page does not go back to the prev page, instead goes back to whatever photo link has been clicked previously
how can i remove all hash from history?
Your best bet here, I think, is to manually scroll to a target element with JavaScript.
Use the native scrollIntoView to jump to your element:
document.getElementById('[id]').scrollIntoView(true);
You can actually execute this in the <a> href attribute.
<a href="javascript:document.getElementById('[id]').scrollIntoView(true);">
Then, if you desire, you can manually add in the hash without adding a new history entry.
window.location.replace("#[id]");
Sources:
Making browsers ignore the URL hash when the back button is clicked
Scroll with anchor without # in URL
How to call JavaScript function instead of href in HTML

Javascript back button not working properly -scrolling to the bottom of the page, instead of previous scroll location

I'm using the following code on a wordpress website and it is only present on the post pages:
<button onclick="history.back()">Back</button>
What I would like the code to do is bring the user directly back to the spot where they left off on the previous page and for the most part the code is working fine.
Problem: After clicking forward and then clicking back a few times - the back button will continue to bring you back button, however not to the same scroll spot - it actually brings you back to the bottom of the webpage and will keep doing this every time until you leave the website and then return.
Any help with this problem will be greatly appreciated.
Here is my website address - if that helps >> http://rumpleskilton.com/djs-bands-singers/
(to see the problem - select one of the listings and then click the back button, which is just above the page header. It could take several times to see the problem. Just click a few of the listings.)
have you try this way ?
<button onclick="window.history.back()">Back</button>
i hope it's help you.
I believe you are using Chrome. Chrome is known to demonstrate such behaviour. Try with Firefox and MS Edge and see if you get the same result (I trust you won't).
In any case, the safest method is to use the page URL to navigate to, instead of back(). Alternatively, you could save the last page name in the url (?lastpage=index or whatever) and change your back() function to grab that page name and navigate there.
Trusting the browser behaviour is not your friend in this situation.

odd behavior with document.referrer and multiple URL's

I have a series of html pages that include a link to an informational page. In the menu for that page, I have a link back to the referring page that uses this code:
<a class="nav_link" onclick="location.href = document.referrer;" onmouseover="this.style.cursor='pointer'">Return to Text</a>
It works as expected on the first use, but if someone moves to another page and then clicks on the link to return back, it will sometimes take them to the old referring page. So, for example, if someone went to from page 1 to my referring page, returned via the link this anchor tag generates, and then went to page 3 and clicked on the link to the informational page, upon clicking on "Return to Text" for a second time they might go back to page 1 rather than page 3, as expected.
I'm assuming that the issue is that document.referrer is being stored in memory and is not being overwritten when the user clicked on the link to go to the informational page a second time. Why is this, and is there a way for me to either make sure the memory is always cleared when they click on the link to return or create a more robust version of the location.href = document.referrer; onclick?
If you want a "back link," you're better off with history.go(-1):
onclick="history.go(-1);"
That actually emulates the back button, rather than adding a new entry to the history with a repeat of the previous URL.

iframe back button problem (don't want back button to affect iframe)

I have a pretty simple problem which I have not been able to fix myself (I am having trouble manipulating iframes).
Basically, go to say this page....
http://andrew.koallo.ca/new/393NelsonSt-JordanFisher
click on "Click here to Map"...and a map should load up for you....now if you his back once...it will only take back the iframe....so basically you have to hit the back button twice to return to your original page.
Is it possible to avoid this?...Upon clicking the "Click here to Map" button I set the src of the iframe equal to the respective source....
I was reading that perhaps location.replace can help? have no been able to get it working.
Thanks for any help,
Andrew
the page you mentioned is offline atm, but you need to set the url for the iframe like this:
$('#myIframe').get(0).contentWindow.location.replace('http://...');
so the url won't make it into the browsers history.
Either put a "back" button in the page with an onclick event to the referrer or change the iframe's code to only use Ajax calls.

Categories