So I’m new to JavaScript (I’m teaching my self JavaScript ) and I’m trying to add a splash page to a mobile web page I’m making for fun / testing. One of my problems is that I’m not sure how to impalement the JavaScript / jquary code into my the site.
do you just do:
<script>
or
<script type=“text/javascrpit”; src=“”>
</header>
My first goal in this project is the add a splash screen that fades, 5 to 10 seconds when you just load the page so I found this code on stackoverflow I added the for loop hoping that would act as a counter to allow the splash screen to fade.
<div id="content">here is some content</div>
<div id="splash"></div>
#splash {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #ffffff;
}
$(document).ready(function () {
$('#splash').css('opacity', '0.5'); // doing this with jQuery for ease
// Stopping a loop
for ( var i = 0; i < 5000; i++ ) {
if ( i==5000 ) {
// here are the basics, just like your existing code
$("#splash").click(function () {
$("#splash").fadeOut("slow"); // you could also use $(this).fadeOut('slow');
}
}
});
});
JavaScript goes just before the </body> tag. The better alternative is a separate file for the script that you just attach into the HTML.
Hi,
Do you want an overlay with a bit of content to appear on page load, then fade out after 5 seconds?
Something like this, maybe?
<div id="overlay">
<div id="overlay-content">This will all vanish in 5 seconds ...</div>
</div>
<h1>My Awesome Page!</h1>
<p>My Awesome content</p>
#overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.8;
z-index:1001;
}
#overlay-content{
position: absolute;
display: none;
width: 360px;
height: 90px;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
}
$.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (
($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px"
);
this.css("left", Math.max(0, (
($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px"
);
return this;
}
$("#overlay").show();
$("#overlay-content").show().center();
setTimeout(function(){
$("#overlay").fadeOut();
}, 5000);
Demo with code Demo without code
Also, consider using some kind of client-side storage, so that when your visitors have seen your splash screen once, they are not shown it again.one way to do that .
James_Hibbard:
Hi,
Do you want an overlay with a bit of content to appear on page load, then fade out after 5 seconds?
Something like this, maybe?
<div id="overlay">
<div id="overlay-content">This will all vanish in 5 seconds ...</div>
</div>
<h1>My Awesome Page!</h1>
<p>My Awesome content</p>
#overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.8;
z-index:1001;
}
#overlay-content{
position: absolute;
display: none;
width: 360px;
height: 90px;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
}
$.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (
($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px"
);
this.css("left", Math.max(0, (
($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px"
);
return this;
}
$("#overlay").show();
$("#overlay-content").show().center();
setTimeout(function(){
$("#overlay").fadeOut();
}, 5000);
Demo with code Demo without code
Your demo was prefect this is exactly what I was looking for. But it dosn’t work for me when I past it into my site here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/overlay.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type='text/css'>
#overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.8;
z-index:1001;
}
#overlay-content{
position: absolute;
display: none;
width: 360px;
height: 90px;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (
($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px"
);
this.css("left", Math.max(0, (
($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px"
);
return this;
}
$("#overlay").show();
$("#overlay-content").show().center();
setTimeout(function(){
$("#overlay").fadeOut();
}, 5000);
});//]]>
</script>
</head>
<body>
<div id="overlay">
<div id="overlay-content">
<img src="http://bharstore.com/image/data/Logos/bhar_6.png" class="img-responsive" alt="Responsive image" >
</div>
</div>
<div class="container">
<div class="container-fluid" style="margin-left: 7%; margin-right: 7%;" >
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<!-- <span class="icon-bar"></span>
<span class="icon-bar"></span>
-->
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav nav-pills" >
<li><a href="#">Home</a></li>
<li><a href="#">New</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!--row #1-->
<div class="row">
<div class="col-md-1">
</div>
<!--1.1-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
<br/>
<a href="#"><img src="http://www.thesurgeryship.com/wp-content/uploads/2014/02/paypal-button-image-e1362468738704.png" class="img-responsive" alt="Responsive image" ></a>
<br/>
</div>
<!--1.2-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.3-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.4-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.5-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<div class="col-md-1">
</div>
</div>
<br/>
<br/>
<br/>
<!--row #1-->
<div class="row">
<div class="col-md-1">
</div>
<!--1.1-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.2-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.3-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.4-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.5-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<div class="col-md-1">
</div>
</div>
<br/>
<br/>
<br/>
<!--row #1-->
<div class="row">
<div class="col-md-1">
</div>
<!--1.1-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.2-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.3-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.4-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.5-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<div class="col-md-1">
</div>
</div>
<br/>
<br/>
<br/>
<!--row #1-->
<div class="row">
<div class="col-md-1">
</div>
<!--1.1-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.2-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.3-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.4-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.5-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<div class="col-md-1">
</div>
</div>
<br/>
<br/>
<br/>
<!--row #1-->
<div class="row">
<div class="col-md-1">
</div>
<!--1.1-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.2-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.3-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.4-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.5-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<div class="col-md-1">
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
James_Hibbard:
Also, consider using some kind of client-side storage, so that when your visitors have seen your splash screen once, they are not shown it again.one way to do that .
I will read into this after I get the splash screen working and good looking out. I dont want to jump all over the place thats kinda my problem I jump from one thing to another. actually I should make a check list for this project.
Hi,
Your replies got auto-modded. Sorry about that. I just approved them.
If you can’t get it working, let me know and I’ll make a demo for you to copy and paste.
James_Hibbard:
Hi,
Your replies got auto-modded. Sorry about that. I just approved them.
If you can’t get it working, let me know and I’ll make a demo for you to copy and paste.
Thank you guys I got it to work now i’m going to look at the code like 100 times to see how it was done.
No problem
In the grand scheme of things it’s not very complicated, so let us know if there is anything you don’t understand.
PaulOB
August 28, 2014, 9:20pm
11
Just for fun and because I was bored here’s a CSS only version for modern browsers
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body{
height:100%;
margin:0;
padding:0;
}
.overlay {
opacity:0;
position:fixed;
top:-999em;
left:-999em;
width:100%;
height:100%;
display:table;
background:rgba(0,0,0,0.8);
-webkit-animation: splash 10s forwards;
animation: splash 10s forwards;
}
.overlay-inner {
display:table-cell;
vertical-align:middle;
text-align:center;
}
.message {
border:10px solid red;
border-radius:10px;
background:#fff;
display:inline-block;
vertical-align:middle;
width:50%;
text-align:left;
padding:10px;
}
@-webkit-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@-moz-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@-ms-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
</style>
</head>
<body>
<div class="overlay">
<div class="overlay-inner">
<div class="message">
<p>Lorem ipsum dolor sit amet consecetueur adispicing elit amet. Lorem ipsum dolor sit amet consecetueur <a href="#">adispicing elit</a> amet.Lorem ipsum dolor sit amet consecetueur adispicing elit amet.Lorem ipsum dolor sit amet consecetueur adispicing elit amet. </p>
</div>
</div>
</div>
<h1>This is the page</h1>
<p>Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : Page content goes here : </p>
</body>
</html>
I guess I still dont know how to implement JS into a website I am trying to add a sidebar to the site I am using http://www.berriart.com/sidr/#getstarted
here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/overlay.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Include Sidr bundled CSS theme -->
<link rel="stylesheet" href="css/sidr/jquery.sidr.light.css">
<!--menu-->
<!--menu-->
<style type='text/css'>
#overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: white;
opacity: 1.8;
z-index:1001;
}
#overlay-content{
position: absolute;
display: none;
width: 360px;
height: 90px;
padding: 16px;
border: 16px solid white;
background-color: white;
z-index:1002;
}
</style>
</head>
<body>
<!----------------------------Splash------------------------------------------>
<div id="overlay">
<div id="overlay-content">
<img src="http://bharstore.com/image/data/Logos/bhar_6.png" class="img-responsive" alt="Responsive image">
</div>
</div>
<!-------------------------Splash end------------------------------------>
<!-------------------------Mobile side menu------------------------------->
<a id="simple-menu" href="#sidr">Toggle menu</a>
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
<!------------------------end Mobile side menu----------------------------->
<div class="container">
<div class="container-fluid" style="margin-left: 7%; margin-right: 7%;" >
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<!-- <span class="icon-bar"></span>
<span class="icon-bar"></span>
-->
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav nav-pills" >
<li><a href="#">Home</a></li>
<li><a href="#">New</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!--row #1-->
<div class="row">
<div class="col-md-1">
</div>
<!--1.1-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
<br/>
<a href="#"><img src="http://www.thesurgeryship.com/wp-content/uploads/2014/02/paypal-button-image-e1362468738704.png" class="img-responsive" alt="Responsive image" ></a>
<br/>
</div>
<!--1.2-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.3-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.4-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.5-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<div class="col-md-1">
</div>
</div>
<br/>
<br/>
<br/>
<!--row #1-->
<div class="row">
<div class="col-md-1">
</div>
<!--1.1-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.2-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.3-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.4-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.5-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<div class="col-md-1">
</div>
</div>
<br/>
<br/>
<br/>
<!--row #1-->
<div class="row">
<div class="col-md-1">
</div>
<!--1.1-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.2-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.3-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.4-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.5-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<div class="col-md-1">
</div>
</div>
<br/>
<br/>
<br/>
<!--row #1-->
<div class="row">
<div class="col-md-1">
</div>
<!--1.1-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.2-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.3-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.4-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.5-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<div class="col-md-1">
</div>
</div>
<br/>
<br/>
<br/>
<!--row #1-->
<div class="row">
<div class="col-md-1">
</div>
<!--1.1-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.2-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.3-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.4-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<!--1.5-->
<div class="col-md-2">
<a href="#"><img src="http://g02.s.alicdn.com/kf/HTB10gIjFVXXXXaFXXXXq6xXFXXXn/220463291/HTB10gIjFVXXXXaFXXXXq6xXFXXXn.jpg" class="img-responsive" alt="Responsive image" align="center" height=" 275px;" ></a>
</div>
<div class="col-md-1">
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--menu-->
<!-- Include jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="js/sidr/jquery.sidr.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (
($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px"
);
this.css("left", Math.max(0, (
($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px"
);
return this;
}
$("#overlay").show();
$("#overlay-content").show().center();
setTimeout(function(){
$("#overlay").fadeOut();
}, 5000);
});//]]>
</script>
</body>
</html>
what am I doing wrong here and yes I added the files.
Hi Paul,
That’s pretty darn cool!
Could you give me a brief explanation as to how it works?
I guess the timing is controlled by this:
animation: splash 10s forwards;
And you are animating the opacity of the overlay defining steps of 0%, 20%, 40%, 60%, 80%, 100%.
Didi I get that right?
And what’s with the top:0;left:0 for each step?
Are you getting any error messages in the console?
PaulOB
August 29, 2014, 2:27pm
15
James_Hibbard:
Hi Paul,
That’s pretty darn cool!
Could you give me a brief explanation as to how it works?
I guess the timing is controlled by this:
animation: splash 10s forwards;
Yes the animation name is ‘splash’ which refers to the same named keyframe and the ‘10s’ simply means animate for 10 seconds, while ‘forwards’ makes the animation complete at the last position and not return to the start or loop.
And you are animating the opacity of the overlay defining steps of 0%, 20%, 40%, 60%, 80%, 100%.
That’s basically it. (You only need 0% and 100% (or from and to in shorthand) if you have no intermediate stages and the animation completes over the whole duration.)
The keyframes will take 10 seconds to go from 0 100% (because I defined 10s in the animation rule). We start at 0% opacity and at the same time I bring the fixed overlay into the viewport immediately with no animation.
opacity: 0;top:0;left:0
In the main css I originally set the overlay to top:-999em and left:-999em which means that older browsers that don’t understand keyframes will just never see the splash page so we have a graceful fallback (assuming the splash page isn’t important content).
After 2 seconds (20%) I fade the splash div in to full opacity.
20% {opacity:1;top:0;left:0}
I didn’t really need the top:0 and left:0 in that rule as I am not changing the position (although we could do that at the same time if we wanted). (The next time top:0 and left:0 is needed is at 99% as mentioned below.)
After another 4 seconds (60%) we restate the opacity:1.0 and then fade it out to zero at 100% which means a 4 second fade. At 99% I ensure the top and left positions haven’t changed and then move them off screen at 100%. If I didn’t restate the top and left at zero at 99% then they would animate from the last time they were mentioned in that rule so you would see the overlay slowly moving off screen.
Does that make sense
ReferenceError: $ is not defined
$(document).ready(function() {
<script>#simple-menu ’).sidr();
Thats it
Could I just make a simple overlay that does the same thing ?
This normally means you failed to include jQuery (at the right place), or it is running in compatibility mode.
@Paul_O_B ; Thanks! I’ll have a read through that later
PaulOB
August 30, 2014, 1:44pm
18
There’s a codepen demo here just for posterity
Thanks for a clear explanation, Paul. I read it through and that makes sense.
Is there any way that you can add click functionality to this, without using JavaScript (for example, if the user clicks on the overlay, that the fadeout occurs immediately)?
Nice way to center an element. I’m so used to using JS for stuff, I should take a minute to remember things like this.
And BTW, did you do this or did you fork it from somewhere?
I notice that you can click on the lever to start the animation, yet the pen contains no JS that I can see.
PaulOB
August 30, 2014, 9:09pm
20
James_Hibbard:
Thanks for a clear explanation, Paul. I read it through and that makes sense.
Is there any way that you can add click functionality to this, without using JavaScript (for example, if the user clicks on the overlay, that the fadeout occurs immediately)?
Yes there is a trick you can use and its the same one used in the demo you mention below. You can use a checkbox as a toggle by using its checked state to trigger an action.
e.g. input:checked + div{display:none}
This demo uses it to show and hide a menu.
And BTW, did you do this or did you fork it from somewhere?
No that was mostly mine but I created it after I created this one as most of the work had been done. The original rotation routine was mostly borrowed from [URL=“http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html”]a demo I saw here but ending up being quite a bit different.
I notice that you can click on the lever to start the animation, yet the pen contains no JS that I can see.
Yes I use a series of checkboxes stacked on top of each other to generate a new routine and when clicked the z-index goes to -1 and lets the next checkbox rise to the top and be clicked and trigger a new spin.
