Scroll reveal not working - javascript

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

Related

how to load header from external file with Jquery Mobile

I have a very simple html index page and a very simple html header page.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- page -->
<div data-role="page" id='page'>
<!-- header -->
<div data-role="header" id="header">
</div>
<script>
$('#header').load('header.html');
</script>
</div>
</body>
</html>
header.html
<h1>test</h1>
I am trying to load the header file into the index files header but I am having issues applying the JQM classes to the header.
I have tried various methods including:
$('#header').load('header.html').trigger('create'); <!-- depreciated -->
$('#header').load('header.html').trigger('pagecreate'); <!-- depreciated -->
$('#header').load('header.html');
$('#page').trigger('pagecreate'); <!-- depreciated -->
$('#header').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
I am having no luck getting this to work properly. Could somebody point me in the right direction, preferably not using .trigger()
Am I loading the script in the right spot? would it be better to load it in the head, inside the header div or at the end of the page?
thank you
With regards to <h1>test</h1>, I believe that has to be more like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'test.css';
</style>
</head>
<body>
<h1 id='test'>test</h1>
</body>
</html>
To prevent any script from being executed on that page above, although I'm not using any in my example, you do this also:
$('#header').load('test.html #test');
I am not sure if you are still looking for an answer but this worked for me.
$.get('header.html').success(function(html){
$(html).appendTo($('#header')).enhanceWithin();
});

name conflict between popbox.css and bootstrap.css

I noticed that there is a problem if both popbox.css and bootstrap.css are used. Does anybody know a solution for that?
Here is a fiddle from somebody to show how popbox works.
http://jsfiddle.net/kbwood/sV4bY/
If you load the bootstrap library additional to the popbox libraries
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
it will not work anymore.
Here is a not working example. Remove the bootstrap.min.css file to make it work
<!DOCTYPE html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>PopBox</title>
<link href="../static/css/popbox.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<h1>PopBox</h1>
<div class='popbox'>
<a class='open' href='#'>
<img src='' style='width:14px;position:relative;'> Click Here!
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
Content from first popup
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/popbox.js" type="text/javascript" charset="utf-8"></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
The problem is due to the collapse class you have applied to the div. In Bootstrap, these are hidden by default as it's part of the accordion feature. Either remove the class from that div or use a different name for it.
Example: http://jsfiddle.net/tpjjsqg6/

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">

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 mobile - DOM Exception 18

I am trying to experiment with jQuery mobile, but can't seem to get started.
I have the following HMTL file hosted on a local server:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
</body>
</html>
Which is causing
Javascript error: undefined SECUIRTY_ERR: DOM Exception 18
when accessed from my iPhone from http://192.168.1.1:8000/mobile.html
Did you link the CSS stylesheet file as well before the jquery script include tags?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Also, in order for the page to show, you must contain content into containers like this:
<body>
<div data-role='page'>
<div data-role='header'>
Header goes here
</div>
<div data-role='content'>
Content goes here
</div>
</div>
</body>

Categories