JavaScript scroll to y position - javascript

does anybody know why scrolling of scrollbar to y position does not work? Very simple code below. In JSFiddle it works fine. I don't see any reason why it should not work. Scroll bar appears but still at the top :-(
<script>
window.scrollTo(50,100);
</script>
<body>
<div style="width:200px; height:1500px;background-color:blue;">
hello
</div>
</body>

You need to put the script block below the div and attach the scrollTo to the windows onload event for this to scroll down on page load.
Try this:
<body>
<div id="div1" style="width:200px; height:1500px;background-color:blue;">
hello
</div>
<script>
window.onload = function() { window.scrollTo(50,100); };
</script>
</body>

Script must be executed after all DOM elements are created so use window.onload method for javascript and $(document).ready() for jQuery
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
window.scrollTo(50, 100);
}
</script>
</head>
<body>
<div style="width:200px; height:1500px;background-color:blue;">
hello
</div>
</body>
</html>

Related

Why does onload fire with a remote image but not with a local one?

In my (rough, condensed) HTML + JS I have this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
</head>
<body>
<div id="frame">
<div id="passepartout">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Kandinsky_-_Mit_Reiter%2C_1912.jpg/420px-Kandinsky_-_Mit_Reiter%2C_1912.jpg"
>
<img id="local" style="width:420px;height:auto;margin:20px;margin-top:20px;position:relative;margin-bottom:0"
src="./420px-Kandinsky_-_Mit_Reiter%2C_1912.jpg">
<div style="width:420px;margin:20px;margin-top:0px;position:relative">This is the title</div>
</div>
</div>
<script>
$(function(){
document.querySelector('#local').onload = function(){
console.log('inside onload')
}
document.querySelector('#local').onerror = function(e) { console.log(e) }
})
</script>
</body>
</html>
in which the onload event fires if attached to the image wit a remote source, and not when attached to the one with the localhost source.
In other words this
document.querySelector('#remote').onload
fires and this
document.querySelector('#local').onload
does not.
Why is that?
It is all about timing:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<img src="Lenna.jpg" id="lenna">
<script>
document.getElementById('lenna').addEventListener('load', () => console.log('lenna'))
window.addEventListener('load', () => console.log('window'))
</script>
</body>
$() from jQuery means to run on window.onload, but your image can be loaded before you whole document is ready. It will never happen again if it is already triggered, before the listener is attached.
Simply moving your code outside $() would solve the problem. It is totally ok to do so because your <script> is at the end of your document.
And I would suggest give up jQuery and use the native DOM APIs instead. It is realy really good.
P.S.:
And yeah, it is ok to have a html 5 document omitting the html tags, as long as it is html 5 instead of xhtml.

Javascript buttons and alerts not functioning properly. Alerts appear when page is refreshed but my buttons are not appearing

I am currently working on the beginning stages of js and trying to create buttons and alerts with it. when i write my code, the alerts work but my buttons are not appearing. when i inspect my webpage, the buttons dont even appear in the code. any suggestions on what i can do to fix this?
alertmessage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<script type="text/javascript" src="js/code.js">
</script>
</body>
</html>
code.js
window.alert("Welcome to Javascript");
buttons.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button 2">Click me.</button>
<script>
document.getElementbyId("button 2").onclick=function(){
alert("You have just clicked me!");
}
</script>
</body>
</html>
well at first try not to use spaces when you create your buttons ids e.g (id="button 2")
instead use id="button2"
I modified your code adding the event listener on document ready find the below code hope that is what you are looking for, it should get your started.
Note: for posting here when you write your message paste your code under your message text and select the code then Press ctrl+K that should identify your code area then post it and all should work fine...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button2">Click me.</button>
<script>
$(document).ready(()=>{
document.getElementById("button2").addEventListener("click", function(){
alert("You have just clicked me!");
});
})
</script>
</body>
</html>

Changing a div with javascript

I already fail at a seemingly basic task in javascript - changing a div's content by a script. Please help me understand where I am going wrong. Here is a minimal example that's not working for me:
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('id').innerHTML = "test";
</script>
</head>
<body>
<div id="id" >blub</div>
</body>
</html>
The Problem with you code it that the JavaScript code is executed before the div part is loaded fully. To fix this change you code to:
<!DOCTYPE html>
<html>
<head>
<script>
function changeDiv()
{
document.getElementById('id').innerHTML = "test";
}
</script>
</head>
<body onload="changeDiv();">
<div id="id" >blub</div>
</body>
</html>
The onload event will only fire when the html is fully loaded.
HTML files load starting at the top to the bottom of the html.
In your example, the javascript executes before the <body> tag exists in the DOM.
Moving the javascript to below the relevant html makes it work as you would expect.
Another option would be to keep the script inside the <head> but delay it from executing until the DOM is loaded
window.onload = function() {
document.getElementById('id').innerHTML = "test";
};
https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="id" >blub</div>
<script>
document.getElementById('id').innerHTML = "test";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="id" >blub</div>
<script>
document.getElementById('id').innerHTML = "test";
</script>
</body>
</html>
put your script after the div.
You need to use window.onload to call your code when html is fully loaded:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
document.getElementById('id').innerHTML = "test";
};
</script>
</head>
<body>
<div id="id" >blub</div>
</body>
</html>
Your Dom is no not loaded.. Place your script tag at the end before
Just add the script tag before closing the body. It'll work.
You have to write the Javascript after the div-Tag. First the DOM needs to be loaded and after you can change the content inside the DIV.
Place your Javascript before the closing-body Tag

Make image appears when user scroll

I have a very long html page, with a lot of things.
I want that an image in a div appears when user scroll down the page and reach the div.
The appartition will be managed whith the css property transition:opacity
But I don't understand how to trigger the effect.
exemple
CSS
.imageToAppear{display:none;opacity:0}
HTML
<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="/01.png"></div>
JQUERY
$( "#wantedonscroll" ).scroll(function() {
$("#imageToAppear").fadeIn();
});
you can costumize the fade in event here is documentation Jquery Fadein
thank your for your answer :)
But it just don't work in my html page...
this is my file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
#imageToAppear{display:none;opacity:0}
</style>
</head>
<body>
<div>
<p>Lorem ispum .... and a lot of things in order to have something to scroll</p>
</div>
<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="test.png"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#wantedonscroll").scroll(function() {
$("#imageToAppear").fadeIn();
});
</script>
</body>
</html>
what is wrong with it?

jQuery slideDown script not working in simple code example

<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
</style>
<script type="text/javascript">
$(document).ready(function {
$('img').slideDown('slow');
});
</script>
</head>
<body>
<img src="images\sjmak-music-logo.jpeg"/>
</body>
</html>
The simple code example above is not working; I am attempting to simply make the image slide down from the top of the screen but it stays static. I also attempted to use 'display: none' on the image, but the image remains hidden instead of sliding down from the top.
You need to include jQuery library file to use jQuery methods.
In the below sample a jquery cdn version is added. Also to slide down an image it has to be hidden first
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').slideDown('slow');
});
</script>
</head>
<body>
<img src="images\sjmak-music-logo.jpeg" style="display: none"/>
</body>
</html>
Demo: Fiddle

Categories