This question already has answers here:
How to scroll to top of page with JavaScript/jQuery?
(28 answers)
Closed 8 years ago.
SOLVED
add this to the html:
<body onload="location.href='#menu'">
Its the only solution and not a duplicate of the scroll question....pff.
I have edited this question in hopes that the SO community would revisit it. None of the solutions in the supposed duplicate question work or I am using them incorrectly. I posted my code with two of the solutions to show that I am trying. Please help!
Super basic javaScript question I can't find.....I'm learning from trial, mostly error, and StackOverflow.
When I refresh I want to return to the top of the page (F5 or browser reload or any other way the page can be reset). I believe this was the 'old' way browsers worked but when I refresh I stay in the same place on the page. I'm testing in Chrome. Of course I would like this behavior in all browsers.
In this case I am building a single page app. Most mobile users will never use the refresh/reload as it is buried in the hamburger, but I would like to handle this event by going back to the home state. In this case the <div data-role="page" id="menu">.
I am using jquery but I want to make sure and learn javascript.
I thank you all.
code:
document.ready = init;
function init(){
var button = $('#facultyButton')
,facList = $('#facultyList')
,search = $('#facSearch')
,monikerBox = $('.monikerBox')
,events = $('#events')
,ajaxString = "http://stage.webscope.com/veith/dev/ajax.pl?"
,html = "";
//executed on init
console.log('page init');
$('html').scrollTop(0);
//events
$(window).on('load',function(){
$('html, body').scrollTop(0);
});
button.click(function(){
var value = "a";
The window's load event only runs once right after the page is done loading. So this way you can be sure that after the page loads no matter what reason (first view or refresh) it will run.
$(window).on('load', function(){
$('html, body').scrollTop(0);
});
Related
This question already has answers here:
Link to a page then execute a Javascript request
(2 answers)
Closed 6 years ago.
Why not Duplicate: Question wasn't answered in previous post.
I have a delete link, which when get clicked triggers a popup which contains a button. When I click that button, then the page (inside the popup) gets redirected to a new internal page. What I want to achieve is that the pop-up should close after 1 second after the redirection has happened. I applied the function when the button is clicked which is only available before the "Popup Redirection".
$('.page-user-cancel .btn').click(function(e) {
window.onunload = refreshParent;
setTimeout( function(){
function refreshParent() {
window.opener.location.reload();
window.close();
}
} , 1000 );
});
If I am not clear, please comment. English is not my native language.
EDIT
If that is not feasible, is it possible to trigger the function when the div on the new page (after redirection) gets loaded?
UPDATE
This isn't working:
var dival = $('.inside .alert').length;
if (dival > 0){
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
window.close();
}
}
else{}
It works, only after refreshing.
Got it Worked: Had to remove the function call of refreshParent. might not be the best practice, but it is working that way.
The first part is not possible since, reloading the page doesn't keep JavaScript of the previous page running.
Second part is better. Yes, you can handle page load:
$( document ).ready(function() {
// Check your div here
});
This question already has answers here:
Display A Popup Only Once Per User
(7 answers)
Closed 7 years ago.
I found some ways to make javascript/jquery popup windows. But, there were some problems, first of all, I am not very good with these two languages, just beginner.
If there is any ready code, for opening POPUP window on website load, but only once per browser session. It would be very nice, if someone could help me with this.
I need simple popup, with just some text in it, but design for popup box something good looking, not like original browser popup (like in image), of course, with closing button.
http://i.stack.imgur.com/xNWxf.png
Thanks a lot
I know I shouldn't really do this and provide you with the answer without you trying to attempt it first because you won't be learning that way.
But I'm feeling nice today, so I'm providing you of a way of doing a pop up on first load and not loading the pop again until the session been destroyed.
You need to set the session, when you load the page by doing the following:
sessionStorage.setItem('firstVisit', '1');
Then you just need to check for the session like this:
If there is no session called firstVisit then show message box
if (!sessionStorage.getItem('firstVisit') === "1")
{
$(".message").show();
}
EXAMPLE
HTML
<div class="message">
<div class="message_pad">
<div id="message"></div>
<div class="message_leave">
</div>
</div>
</div>
JavaScript/JQuery
// Save data to sessionStorage
sessionStorage.setItem('firstVisit', '1');
/* Fix size on document ready.*/
$(function()
{
if (!sessionStorage.getItem('firstVisit') === "1")
{
$(".message").show();
}
//Close element.
$(".message").click(function()
{
$(this).hide();
});
$(".message").css({
'height': $(document).height()+'px'
});
$(".message_pad").css({
'left': ($(document).width()/2 - 500/2)+'px'
});
});
/*
* Fix size on resize.
*/
$(window).resize(function(){
$(".message").css({
'height': $(document).height()+'px'
});
$(".message_pad").css({
'left': ($(document).width()/2 - 500/2)+'px'
});
});
JSFIDDLE
Take a look at jQuery modals - by following their example, you will create a hidden HTML element in your page (styled however you wish).
Then, within your $(document).ready() event, .show() the modal. The ready event only fires once after the webpage has finished loading.
There are many other ways to show custom modal popups within many other libraries; do some research since this is generally a trivial matter.
This question already has an answer here:
jquery mobile autocomplete different behavior at loading page
(1 answer)
Closed 8 years ago.
My actually problem is below.I would be happy if this is solved.
I Want to know why jquery Preloaded url stops working.Below are steps to replicate my problem.
visit http://www.andymatthews.net/code/autocomplete/ .
Type "m"
You get list of names.Click any one.
For example i clicked http://www.andymatthews.net/code/autocomplete/target.html?term=Maryland.
Now why Select tool is not working after page preload.
If i reload http://www.andymatthews.net/code/autocomplete/target.html?term=Maryland It works fine
7. But if its preloaded whats the reason it stops working.
If that cannot be resolved , Tell me if any function available to stop the preload for single page.
i think this works, but you could use the data-ajax="false" attr on links and form actions
You have placed selectmenu change event inside .ready(), which shouldn't be used in jQuery mobile. The equivalent event is pageinit.
Also, instead of using window.location.href, use $.mobile.chagnePage() to activate Ajax navigation that jQuery Mobile uses.
$(document).on("pageinit", "#mainPage", function () {
$("#examples").on("change", function () {
var page = $(this).val();
setTimeout(function () {
$.mobile.changePage(page);
}, 100);
});
});
Just update your code.js on event handler to:
$('body').on('change', '#examples', function(e, ui) {
It'll work! Tested here.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Handle URL anchor change event in js
How to do awesome refreshless page changes like GitHub
In my app I'm using this very simple code to add a hashtag:
<a href='#test'> <input type='submit'></input>
I would like the page to refresh when I press the back button. For now, it only goes from www.mysite.com/#test to www.mysite.com.
I saw different questions on this topic, but I didn't find how to accomplish that.
Thank you for your help.
A simple way would be to wait for the hash change event to occur and then react to it. Whenever the # changes, the function will be called and if the hash is empty, the page is going to be reloaded.
window.addEventListener('hashchange', function() {
console.log(window.location.hash);
if('' === window.location.hash) {
console.log('reload');
//window.location.reload();
}
});
http://jsfiddle.net/kcKLE/1/
I'd suggest using a library like jQuery for the event-binding stuff, since addEventListener doesn't work in any browser. (Hello IE)
https://developer.mozilla.org/en/docs/DOM/element.addEventListener
If you need something fancier, there is also a history api around.
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
I just found how to accomplish that. I'm using the onhashchange functionality. Here is my code:
document.body.setAttribute("onhashchange", "update()");
function update() {
if('' === window.location.hash) {
window.location.reload();
}
};
So when I press the back button the hash disappears and the page reloads.
Thank you for the hints everybody.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Best way to detect when user leaves a web page
How can I call a javascript or jQuery function when back button of browser is clicked?
I have seen some solutions but none of them worked for me.
Can anybody show me some example code?
In jQuery try this :
$(window).unload( function ()
{
// put your code here
});
In javascript :
window.onbeforeunload = function () {
// put your code here
}
<body onUnload="yourFunction();>
<!-- ... -->
</body>
You can use history.replaceState() (see browser support) to modify the previous URL you visited to the current page with an added parameter of your choosing like for instance redirect=<URL of previous actual previous page> (you can maybe get this URL from the referer?), then detect the parameter in document ready and perform the required actions.
This is just an untested theory, I might elaborate later on when I get to test it.