I have the following javascript function; it works fine when I use the reload alone and works fine when I use the scroll alone; but it will not scroll when I combine the two together; I tried to change the sequence, but did not help;
function myFunction() {
window.open("http://www.example.com");
location.reload(true);
window.scrollBy(0,1000);
}
Thanks in advance for the help.
You can set hash to somehash and then reload the page. After that, in your body onload, check the hash and if hash is somehash, scroll the page.
function myFunction() {
window.open("http://www.example.com");
location.hash = 'somehash';
location.reload(true);
}
Add the following function to your page onload event handler.
function scrollOnload() {
if (location.hash == 'somehash') {
window.scrollBy(0,1000);
}
}
If you want to make browser do something after reload, you need to keep the flag somewhere. Here is an example using sessionStorage:
function myFunction() {
window.open("http://www.example.com");
sessionStorage.setItem('scroll', true);
location.reload(true);
}
document.body.addEventListener('load', function () {
if (sessionStorage.getItem('scroll')) {
window.scrollBy(0, 1000);
sessionStorage.removeItem('scroll');
}
});
Related
I am doing mobile html page via phonegap
I want to redirect user to first page. So I cannot give direct link such as a href to index.html
When User click logo I want to calculate page length that he visited and use history.go.
function goBack() {
var backLength=window.history.length;
javascript:history.go(-backLength);
}
but this does not work, no error but don't redirect
Remove javascript: and wrap in script tag:
<script>
function goBack() {
var backLength=window.history.length;
history.go(-backLength);
}
</script>
Clean up code. To avoid submit, use (javascript: void 0) in href. Use proper callback
function goBack() {
console.log("Test")
var backLength= window.history.length;
history.go(-backLength);
}
I fixed it by using:
window.history.length-1
I am using the fullPage.js plugin to scroll page by page. The plugin is using hash urls to do so. On page refresh, the document is always loading on the last hash url it was on. How to make the document load at the top after every refresh? I tried adding the following code but it did not work out:
$(document).ready(function(){
$(document).scrollTop(0);
});
This is the link to the webpage - https://rimildeyjsr.github.io/St.Anthony-Website
jQuery :
$('#fullpage #section1').hide();
$(document).ready(function(){
$('#fullpage #section1').show();
$('#fullpage').fullpage({
anchors:['Page1','Page2','lastpage'],
afterLoad : function(anchorLink,index) {
if (index == 2 || anchorLink == 'Page2'){
$('.school-name').addClass('animated slideInUp').css('visibility','visible');
}
}
});
Link to github repository : https://github.com/rimildeyjsr/St.Anthony-Website
It looks like this on your page causes it to go back to the top.
window.location.hash = '#Page1';
So you could try doing that
$(window).on('load', function() {
window.location.hash = '#Page1';
});
which should happen any time you load the page, including refreshing.
Try This
if(location.href.split('#').length > 0){
location.href = location.href.split('#')[0]
}
Let me know if you face any issue
The proper way would be by using the fullPage.js function moveTo:
$(window).on('load', function() {
$.fn.fullpage.moveTo(1);
});
But the suggested solution by changing the location hash will also do it.
if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}
I did a function where I checked if the window has been resized and an element is visible in order to change some classes and add a little bit of css .The problem is if I refresh the page the changes are reverted . Here is a snippet of my code :
$(document).ready(function() {
$(window).resize(function() {
if(isMenuVisible() == true){
$('#my-nav').removeClass('navbar-fixed-bottom');
$('#my-nav').addClass('navbar-fixed-top');
$('body').css('padding-top', '50px');
} else{
$('#my-nav').removeClass('navbar-fixed-top');
$('#my-nav').addClass('navbar-fixed-bottom');
$('body').css('padding-top', '0');
}
}) ;
});
$(document).ready(function() {
function resizeChanges(){
if(isMenuVisible() == true){
$('#my-nav').removeClass('navbar-fixed-bottom');
$('#my-nav').addClass('navbar-fixed-top');
$('body').css('padding-top', '50px');
}else{
$('#my-nav').removeClass('navbar-fixed-top');
$('#my-nav').addClass('navbar-fixed-bottom');
$('body').css('padding-top', '0');
}
}
$(window).resize(resizeChanges);
resizeChanges();
});
This way you define a separate function to make your changes, you add the event listener to trigger it but also you call that function itself after the load/refresh.
Try trigger the resize event on window after load.
$(window).trigger('resize');
If the user refreshes the page, all changes in the client side will be lost. However, you can detect when the user refreshes the page and save the values in the server side. And then, when the page is loaded again, restore those values.
$(window).on('beforeunload', function(){
// save the values to server side
});
$(window).on('load', function(){
// restore values
});
I'm trying to simulate a click in a tabbed div when the page loads.
To do this I use:
$(document).ready(function() {
$("#tab_inbox").click();
});
However, this doesn't seem to work, but when I enter this in the dev console on Google chrome, it does work..
$("#tab_inbox").click();
To show the tabs, I use this code:
$("#tab_inbox").click(function() {
$("#othertab").hide();
$("#tab_inbox").show();
});
Anybody knows what's wrong?
Try this:
$(document).ready(function() {
setTimeout(function () {
$("#tab_inbox").trigger('click'); //do work here
}, 2500);
});
I read in your comment that you're using show/hide techniques and I assume you need the click for an initial display option? If so, hide (or show) your element(s) specifically in the code rather than saying click to hide/show. So
$(document).ready(function() {
$("#tab_inbox").hide();
}
Or try core JavaScript and use
window.onload = function() {
// code here
}
window.onload waits until everything is loaded on your page, while jQuery's .ready() may fire before images and other media are loaded.
you can try making your own function with pure JS:
document.getElementById('triggerElement').addEventListener('click', funtction(e) {
document.getElementById('hideElement').style.display = 'none';
document.getElementById('showElement').style.display = 'block';
}, false);
For a project I need to print a document using PHP code.
Currently I have a self closing pop up to start the print.
The only problem I have is that a user could spam the button creating a lot of print requests and a huge queue.
The code I have right now:
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=10,width=100,left=10,top=10,resizable=no,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=no'); // Verstop op achtergrond
popupWindow.blur();
}
Print
I have found some code to stop links but I have problems implementing these since I already call it as a pop up.
You can use a flag:
var flag=true;
function newPopup(url) {
if(flag) {
window.open(...).blur();
flag=false;
window.setTimeout(function(){flag=true;},5*1000);
}
}
Not a "good" solution (uses a global variable), but it should work.
You may disable the link before you open the popup and then re-enable it after five seconds. The problem is that to enable/disable a link can't be done in a very portable way. To workaround this you have to save the actual link, replace it with a fake one and then re-enable it later (when interval elapsed). Like this:
function newPopup(url) {
// Save current link and replace it with a fake one
var oldLink = $("#linkid").attr("href");
$("#linkid").attr("href", "#");
setinterval(function() {
// Restore true link
$("#linkid").attr("href", oldLink);
}, 5000);
// ...
}
You can extract this code to a separate function temporaryDisableLink(id, timeout) to reuse it for many different links (without polluting all other code).
Now let's explore other solutions.
Your HTML code must be updated to (in case you want to reuse the same function for many links otherwise you do not need to pass the link id parameter) to:
<a id="link-print"
href="JavaScript:newPopup('#link-print', 'print.php');">
Print
</a>
The pointer-events CSS property isn't supported by IE (and Opera) so I can't suggest to use it in real world. Anyway it's:
function newPopup(id, url) {
$(id).css("pointer-events", "none");
setinterval(function() {
$(id).css("pointer-events", "auto");
}, 5000);
// ...
}
Because you're using JavaScript to open the pop-up you may consider to change a little bit the function to use a custom disabled attribute (or to check for pointer-events if you plan to use them together):
function newPopup(id, url) {
if ($(id).attr("disabled") == "disabled") {
return false;
}
$(id).attr("disabled", "disabled");
setinterval(function() {
$(id).removeAttr("disabled");
}, 5000);
// ...
}
<script>
function newPopup(url) {
setTimeout(function () {
popupWindow = window.open(
url, 'popUpWindow', 'height=10,width=100,left=10,top=10,resizable=no,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=no'); // Verstop op achtergrond
popupWindow.blur();
},5000
);
}
</script>
Print