Make image appears when user scroll - javascript

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?

Related

How to include the CSS for a div you are loading from another page

I am attempting to load content from a div on one page of my site to another page on my site on page-load.
The following (example) code seems to achieve that effectively.
However... how would I also include all of the CSS associated with the content?
Any help would be greatly appreciated.
SOURCE PAGE
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="exampleStylesheet.css">
</head>
<body>
<div>SOURCE CONTENT HERE</div>
</body>
</html>
LANDING PAGE
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="loadedContent"></div>
<script>
$('#loadedContent').load("contentToLoad.html"); <!-- loads other page's content -->
</script>
</body>
</html>
EXAMPLE CSS
body {
margin: 0;
background-color: blue;
}

Scroll reveal not working

Im trying to use scrollReveal.js after reading THIS tutorial and using their code, i still cant get my divs to fade in when my viewport is on them.
Html
<head>
<script src="scrollreveal-master/dist/scrollreveal.min.js"></script>
</head>
<div data-sr>This is the first div</div>
<div data-sr>This is the second div</div>
<div data-sr>This is yet another div</div>
javascript
new scrollReveal();
When i view the console on my web page it says
"Uncaught ReferenceError: scrollReveal is not defined"
Try like this to add an animation on scroll using scrollReveal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<div data-sr> one </div>
<div data-sr> two </div>
<div data-sr> three </div>
</div>
<script src="https://unpkg.com/scrollreveal#3.3.2/dist/scrollreveal.min.js"></script>
<script>
// Changing the defaults
window.sr = ScrollReveal({ reset: true });
// Customizing a reveal set
sr.reveal('div', {opacity: 0.9,duration:3000});
</script>
</body>
</html>
Working example : https://plnkr.co/edit/qC33zle0fafyAL0RjkVl?p=preview

JQuery UI Tooltip - wrong placement of tooltip (on the left side of page instead around button)

I have this piece of code:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
And something is completely wrong with tooltip - it should appear with styles from jQuery UI but it doesn't, and is wrong placed - it appears, even for button with bigger margin, on the left side of screen (and as I said without any styling, it looks like plain text), even with ,,track" property set to ,,true" it doesn't follow cursor exactly, but still appears on the left side of page and move a little when I move cursor.
I think this is pretty simple example (that code is simplified problem that occurred at my work) and I can't see what am I doing wrong. I will be happy if anybody helps me - thank you in advance.
P.S. Snippet, this is exactly the same behavior as I got in my browser:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
You aren't linking to the css file correctly.
Replace:
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
With:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

JavaScript scroll to y position

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>

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