How to use window.scroll to automatically scroll on pageload? - javascript

function Scrolldown() {
window.scroll(0,300);
}
How can I use this function (or a similar one) to automatically scroll down when the page loads? (without clicking a link)
Regards,
taylor

Give this a try:
function Scrolldown() {
window.scroll(0,300);
}
window.onload = Scrolldown;

you could include all of your javascript in an event. This will scroll to an element with an id.
<body onload="window.location='#myID';">

You could use window.onload:
window.onload = Scrolldown;
I also want to point out that you could use an HTML anchor to indicate where to scroll to, so you don't have to hard-code the pixel value:
<div id="iWantToScrollHere" name="iWantToScrollHere">
...
</div>
...which would make your Scrolldown function:
function Scrolldown() {
window.location.hash = '#iWantToScrollHere';
}

you could include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
and then wrap your scrolling thing in a document ready function:
$(document).ready(function(){
window.scroll(0,300);
});
then after that you don't need to do anything.
:)

well, another super simple script is here,
<script type="text/javascript">
window.onload = function(e){
window.scrollBy(1,1);
}
it worked best for me.

Related

window.onload function doesn't work on Mozilla Firefox

I'm using a loading screen for a webpage and I use window.onload function.
Everything works great except in Mozilla Firefox browsers. When we first visit or refresh the page with ctrl+F5 combination, the loading screen never disappears. if we refresh the page only with F5, then it works.
I use the code below
$(window).load(function(e) {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
});
I have also tried the code below but nothing changed.
window.onload = function () {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
}
Why this is happening?
Please help.
Thanks in advance.
The problem is caused by another jquery background plugin which is placed inside $(document).ready()
I moved it inside $(window).load() function, now it works perfect.
I have also moved another function to resize images on the page load. When it was inside $(document).ready() block, sometimes it was malfunctioning if loading time took too long but now it also works great.
function resizeImages(){
//Some Code
}
$(window).load(function(){
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
$.vegas({
src: backURL , fade:0
});
resizeImages();
});
$(document).ready(function(){
//Some Other code
});
I got the same problem when mistyped the type attribute in the script tag:
<script type="text/javascript">
Try This:
$(document).ready(function(e) {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
});
Read for load and ready functions difference What is the difference between $(window).load and $(document).ready?
You must call function on initialization like :
window.onload = init();
in other word modify your code to:
window.onload = function () {
$("#body-mask").fadeOut(1000,function(){
$(this).remove();
});
}();// Added
Copy following code in file then open it with firefox
<script>
window.onload = function () {
alert('saeed')
}();
</script>

Jquery : Function to autoscroll the page on load

I need a jquery function that will scroll the page (from where the user currently is) by 100 pixels. Please note, this function does not scroll from the top, it scrolls from the current position.
so far i have :
<script type="text/javascript">
$(document).ready(function() {
$(window).scrollTop($(window).scrollTop()+100);
});
</script>
It doesn't do anything.
Thanks to #HirstoYankov for partly helping.
Below is the code that fixed it:
<script type="text/javascript">
$(window).load(function () {
$(window).scrollTop($(window).scrollTop()+1);
});
</script>
Its important to use $(window).load and not $(document).ready

Is there a way to use onclick without really onclick event?

I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
}​​​;
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>

Using jQuery mobile, want to disable navigation completely

We would like to use jquery mobile for all aspects of our site, but disable the page transitions completely, as we need to handle navigation on our own. So far, we have added the following to no avail:
$(document).on("mobileinit", function () {
$.mobile.ajaxLinksEnabled = false;
$.mobile.ajaxFormsEnabled = false;
});
Our main problem is, all the "href" attribute values are being replaced with a hash tag (just a single #) and are losing our original href values, causing our navigation to obviously fail.
How can I prevent jQuery mobile from replacing my href attributes entirely? Thanks.
<script src="jquery-1.7.1.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="jquery-mobile-1.1.0.js"></script>
I'm not sure where you got the ajaxLinksEnabled and the ajaxFormsEnabled options but they aren't listed on the "Configuring Default" documentation page: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html. Try using the above option, ajaxEnabled.
Thanks! It turned out that I needed to set linkBindingEnabled to be false. Here is my script:
<script type="text/javascript">
$(document).on("mobileinit", function () {
// Reference: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html
$.extend($.mobile, {
linkBindingEnabled: false,
ajaxEnabled: false
});
});
</script>

how do I add focus to a textarea after scrolling to it?

I am using the following script to scroll to the top of a scrolling DIV when a link is clicked:
<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('#disqus_thread').animate({scrollTop: $("#"+id).position().top},3000,'easeOutQuint');
}
</script>
Here's the html for the link:
<div id="commenttext"><img src="files/comment.png" class="imgHoverable"></div>
I would like the textarea that is underneath the DIV that is scrolled to to have the focus added to it after the scroll. I presume this would mean adding code something like this:
$("textarea.placeholder").focus();
But I am not sure how to include this in the above script. I tried adding it as a line at the end of the script, but it didn't work.
Could someone help me out with this?
Thanks,
Nick
function goToByScroll(id){
$('#disqus_thread')
.animate({scrollTop: $("#"+id).position().top},
3000,
'easeOutQuint',
function() { $("textarea.placeholder").focus(); }
);
}
The last argument when passed this way is the complete callback.
Documentation.

Categories

Resources