I've created a gallery using just CSS that when a thumbnail is hovered on, the title slides into view. It sort of works on touch screens that if the button is touched and held, the title appears. I would like to make it so that a tap brings up the title and a second tap enters the gallery. I've tried all sorts of jQuery code but nothing seems to enable the second tap. I'd also wouldn't mind if it was one tap with a second or two delay to read the title before entering the gallery. I'm new to javascript and this site so I apologize if I don't ask this properly. Thanks for your help!
Here's my code:
<head>
<script src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$("target").click(function(){ $(this).toggleClass("titleBox"); });
</script>
</head>
<body ontouchstart="" class="no-touch">
<div class="wrap">
<!-- Define all of the tiles: -->
<div class="box">
<div class="boxInner">
<a href="buildings/colorclock.html">
<img src="images/buildings/thumbs/06.jpg" alt="Color Clock House">
<div class="titleBox">Color Clock House</div>
</a>
</div>
</div>
<div class="box">
<div class="boxInner">
<a href="buildings/treetriangle.html">
<img src="images/buildings/thumbs/07.jpg" alt="Tree Triangle House">
<div class="titleBox">Tree Triangle House</div>
</a>
</div>
</div>
</div>
</body>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.wrap {
overflow: hidden;
margin: auto;
padding: 0 10%;
margin-top: 40px;
}
.box {
float: left;
position: relative;
width: 20%;
padding-bottom: 20%;
}
.boxInner {
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
overflow: hidden;
}
.boxInner img {
width: 100%;
}
.boxInner .titleBox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: -50px;
font-size: .9em;
background: #fff;
background-size: 105%;
color: #A59E97;
padding: 5px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 0;
}
.boxInner:focus {
cursor: pointer;
}
I was finally able to solve the click once, activate hover, click twice to to open the link on touch screens. If anyone is interested in the code here it is.
jQuery(function($) {
$('.boxInner').on("touchstart", function (e) {
'use strict'; //satisfy code inspectors
var link = $(this); //preselect the link
if (link.hasClass('hover')) {
return true;
} else {
link.addClass('hover');
$('a.taphover').not(this).removeClass('hover');
e.preventDefault();
return false;
}
});
Related
i have to used many overlay so
when i close the overlay either right or left my page moves up and comes from start.
it can be easily checked by open the last two overlay.
this is the code.
i dont know where is mistake. or what should i add more in css.
as i selected the position fixed , may be this is the error but if changed it than more errors occur.
$(document).ready(function(){
left side overlay
$("#left-click1").click(function(){
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature1.jpg");
$("#para").text("1111ABCD");
});
$("#left-click2").click(function(){
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature2.jpg");
$("#para").text("2222ABCDEF");
});
right side overlay
$("#right-click1").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature3.jpg");
$("#para1").text("3333ABCDEF");
});
$("#right-click2").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature4.jpg");
$("#para1").text("4444ABCDEF");
});
$("#right-click3").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature5.jpg");
$("#para1").text("4444ABCDEF");
});
function openAnimeleft(){
document.getElementById("left").style.width = "60%";
}
function closeAnimeleft(){
document.getElementById("left").style.width = "0";
}
right side animation
function openAnimeright(){
document.getElementById("right").style.width = "60%";
}
function closeAnimeright(){
document.getElementById("right").style.width = "0";
}
<div id="left" class="left-styles">
×
<div>
<div>
<img id="image">
</div>
<div>
<p id="para"></p>
</div>
</div>
</div>
left side animation div
<div id="mains"><p>00000001</p>
<span id="left-click1" onclick="openAnimeleft()"> »» left-open1</span>
</div>
<div id="mains"><p>00000002</p>
<span id="left-click2" onclick="openAnimeleft()"> »» left-open2</span>
</div>
right side animation div
<div id="right" class="right-styles">
×
<div>
<div>
<img id="image1">
</div>
<div>
<p id="para1"></p>
</div>
</div>
</div>
<div id="mains"><p>00000003</p>
<span id="right-click1" onclick="openAnimeright()">«« right-open1</span>
</div>
<div id="mains"><p>00000004</p>
<span id="right-click2" onclick="openAnimeright()">«« right-open2</span>
</div>
<div id="mains">
<p>00000005</p>
<span id="right-click3" onclick="openAnimeright()">«« right-open3</span>
</div>
css code
.left-styles {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111000;
overflow: hidden;
transition: 0.5s;
padding-top: 60px;
}
.left-styles a ,.right-styles a{
text-decoration: none;
color: white;
transition: 1s;
}
#right-click1,#right-click2,#right-click3,#left-click1,#left-click2{
font-size: 30px;
cursor: pointer;
}
#media screen and (max-height: 450px)
{
.left-styles {padding-top: 15px;}
.left-styles a {font-size: 18px;}
.right-styles {padding-top: 15px;}
.right-styles a {font-size: 18px;}
}
.right-styles {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111000;
overflow: hidden;
transition: 0.5s;
padding-top: 60px;
}
.right-styles .cross-button, .left-styles .cross-button {
position: absolute;
top: 10px;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.right-styles a:hover, .left-styles a:hover{
color: green;
}
#para,#para1{
color: green;
font-size: 20px;
margin: 5vw;
}
#image,#image1{
width: 50vw;
height: 50vh;
margin-left: 6%;
}
#left,#right{
overflow: scroll;
}
#mains{
height: 200px;
}
If I understand you correctly, when you click the close button the page jumps to the top of the scroll window. If that is the problem, you need to use event.preventDefault();. This will stop the a tag behaving like a link.
$("#left-click1").click(function(event){
event.preventDefault();
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature1.jpg");
$("#para").text("1111ABCD");
});
I am attempting to get elements to transition onscreen. For example purposes I have set them to transition on page load.
The elements that are not floated work perfectly fine. However, the elements that have been floated right (They have the class exleft because they should be expanding leftward) do not transition.
Can someone explain why this is happening?
JsFiddle here
HTML:
<div id="templatebox">
<div class="ribbon exright" id="r1">
</div>
<div class="ribbon exleft" id="r2">
</div>
<div class="ribbon exright" id="r3">
</div>
<div class="ribbon exleft" id="r4">
</div>
</div>
CSS:
#templatebox{
width: 100%;
height: 800px;
padding-top: 50px;
}
.ribbon{
height: 50px;
position: relative;
transition: all 1s ease;
width: 300px;
margin-bottom: 20px;
z-index: 1000;
}
.exleft{
right: -1200px;
left: 0px;
margin-right: -100px;
float: right;
}
.exright{
left: -1200px;
right: 0px;
margin-left: -100px;
}
#r1{
background-color: red;
}
#r2{
background-color: green;
}
#r3{
background-color: blue;
top: 170px;
}
#r4{
background-color: yellow;
top: 170px;
}
JS:
var ribbons = document.getElementsByClassName("ribbon");
for(var i=0, j=ribbons.length; i<j; i++){
ribbons[i].style.right = "0px";
ribbons[i].style.left = "0px";
}
The floated ribbon has both a left and right attribute value set. If both attributes are set to a pixel value, only the left value will be used.
By setting
left: auto;
You can manipulate the right value and it will work as expected.
Here is an updated JSFiddle: https://jsfiddle.net/ym5p7y6v/
I'm trying to make a web page to time a race and I had the idea to make the html page with the timer slide from the right with hitting a button
here's the html of the main menu:
<!DOCTYPE HTML>
<body style="background:#f2f2f2;">
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu" onclick="openChronometre()" ></div>
</div>
</body>
here's a js fiddle of the main menu (without images)
here's a js fiddle of the timer (the layout isn't that great, still WIP)
when hitting the black bar in the main menu, the entire page html page for the timer should come from the right, is there any way to do that?
Sorry I didn't do the animation part. But as a basic idea...
You're probably better off keeping the timer as a div on the main menu page.
If it has to be another page then use an iframe or ajax to load the contents to the div I guess.
Either way it should be contained in the element you're clicking on. Then you can use some JavaScript to modify the CSS and show it/slide it on the page. The jQuery library has a lot of animation/slide functions for example.
I basically combined your 2 fiddles into one and added:
#options {position: absolute; left: 90%; }
and
onclick="opts = document.getElementById('options'); if (opts.style.left == '0px') { opts.style.left = '90%'; } else { opts.style.left = '0px';}"
html {
overflow: hidden;
}
body {
font-family: 'Century Gothic';
font-size: 34px;
}
#options {
box-shadow: 0 0 5px 1px;
margin-top: 100px;
margin-right: -8px;
height: 450px;
cursor: pointer;
position: absolute;
left: 90%;
}
#Chrono1,
#Chrono2 {
overflow: hidden;
background-color: #2d2d2d;
box-shadow: 0 0 4px 0 #0c0c0c;
padding: 6px 20px;
}
#Panel1,
#Panel2 {
overflow: hidden;
background-color: #2d2d2d;
box-shadow: 0 0 4px 0 #0c0c0c;
width: 400px;
height: 450px;
}
#Panel1:hover,
#Panel2:hover {
transition: opacity 0.5s;
-webkit-animation: PanelSlide 2s;
/* Chrome, Safari, Opera */
animation: PanelSlide 2s;
/* IE */
}
<body style="background:#f2f2f2;">
<div id="options" style="background-color: #262626; font-family: Century Gothic; color: #8c8c8c;" onclick="opts = document.getElementById('options');
if (opts.style.left == '0px') {
opts.style.left = '90%';
} else {
opts.style.left = '0px';
}
">
<div id="Title" style="font-size: 55px; text-align: center; margin-top: 3%">Timer</div>
<div id="Temps" style="text-align: center; font-size: 30px; margin: 7%;">
<div id="Chrono1" style="display: inline-block; margin-right: 540px; position:relative;">
00:00:00
</div>
<div id="Chrono2" style="display: inline-block; position:relative;">
00:00:00
</div>
</div>
<div id="Panels" style="text-align: center; font-size: 30px; margin-top: -5%;">
<div id="Panel1" style="display: inline-block; position:relative; margin-right: 300px; opacity: 0;">
</div>
<div id="Panel2" style="display: inline-block; position:relative; opacity: 0;">
</div>
</div>
</div>
</body>
Just have (or load) the chronometre page in a div that is outside of the visibility, then use the animations to slide it in:
#next_page {
position:fixed;
top:0px;
left:100%;
z-index:222;
height:100%;
width:100%;
background:rgba(0,0,0,0.6);
}
And then with JS (I used jQuery for convenience):
function openChronometre(){
$("#next_page").stop(0,0).animate(
{ left: 0 },
1000
);
}
You can see it working here: http://jsfiddle.net/1uggfw32/5/ (I made the options as a green box so you can click on them).
I'm trying to create a design with small clickable div boxes, that once clicked they flip by 180° and show content. Content which you can interact with: like clicking links, copy text or change the content with the use of more buttons.
I've managed to accomplish this, but my question follows: Is there a better way for this?
Found this website of a basic example
But being CSS based the content on the other side isn't interactable.
This is the code:
HTML
<div id="saos">
<div id="pg1" style="display:none;">
<blockquote>Page1</blockquote><br>
Yay content.
</div>
<div id="pg2" style="display:none;">
<blockquote>Page2</blockquote><br>
More content.
</div>
<div class="x" style="display:none;" onclick="closePage()">
<p>X</p>
</div>
<div id="2" class="an2 start startbak" onclick="openPage()">
<p class="sp">Click!</p>
</div>
<div id="cont" style="display:none;">
<p class="sp">Click!</p>
</div>
</div>
CSS
.write {
position: absolute;
width: 100px;
height: 50px;
background: #0055ff;
-webkit-transition: all 1.5s cubic-bezier(.08, 1, .08, 1);
left: 10px;
text-align: center;
font-family: Verdana;
}
.write:hover {
-webkit-transform: perspective(600px)scale(1.2);
-moz-transform: perspective(600px)scale(1.2);
}
.write p {
color: #002164;
text-align: center;
margin-top: 10px;
font-size: 22px;
}
.an {
-webkit-transition: all 1.5s cubic-bezier(.08, 1, .08, 1);
}
.an2 {
-webkit-transition: all .5s ease;
}
.page {
background-color: rgba(17, 17, 17, .8);
position: absolute;
left: 120px;
border: 2px solid #252525;
height: 330px;
width: 530px;
overflow: auto;
font-size: 14px;
color: #818181;
}
.start {
text-align: center;
font-family: Verdana;
position: absolute;
top: 150px;
left: 290px;
height: 120px;
width: 120px;
-webkit-transform: perspective(600px)rotateY(180deg)translateZ(-10px);
-moz-transform: perspective(600px)rotateY(180deg);
}
.start:hover {
background-color: #0055ff;
cursor: pointer;
}
.startbak {
background-color: #0036a3;
}
.mainbak {
background: #252525;
}
.sp {
color: #002164;
margin-top: 43px;
font-size: 30px;
-webkit-transform: rotateY(180deg)rotateZ(-45deg)translateZ(-10px);
-moz-transform: rotateY(180deg)rotateZ(-45deg);
}
.frame {
top: 0px;
left: 0px;
position: absolute;
width: 751px;
height: 452px;
-webkit-transform: perspective(600px)rotateY(0deg);
-moz-transform: perspective(600px)rotateY(0deg);
}
.x {
position: absolute;
left: 700px;
height: 18px;
width: 45px;
background-color: #c75050;
color: #fff;
display: table;
text-align: center;
font-size: 10px;
font-family: Verdana;
z-index: 2;
}
.x:hover {
background-color: #e04343;
cursor: default;
}
.x:active {
background-color: #993d3d;
}
.x p {
display: table-cell;
vertical-align: middle;
}
JavaScript
var htmlString = '<div class="f an write" style="top: 10px;" name="Home" onClick="openTab(\'pg1\',\'0\')"><p>Home</p></div>\n'
htmlString += '<div class="f an write" style="top: 65px;" name="About" onClick="openTab(\'pg2\',\'1\')"><p>About</p></div>\n'
function openTab(id, n){
for (var i=0;i<write.length;i++){
write[i].className = 'f an write';
write[i].style.top = i*55+10+'px';
name = write[i].getAttribute('name');
write[i].innerHTML = '<p>'+name+'</p>';
}
write[n].className = 'f an page';
write[n].style.top = '10px';
write[n].innerHTML= '<div class="ins">'+document.getElementById(id).innerHTML+'</div>';
}
var id2 = document.getElementById('2'),
x = document.getElementsByClassName('x')[0];
function openPage(){
id2.className = 'an2 frame mainbak';
setTimeout(function() {
id2.className = 'an2 frame mainbak'
id2.setAttribute('onclick','')
document.getElementById('2').innerHTML=htmlString
}, 150);
setTimeout(function() {
x.style.display='';
}, 600);
}
function closePage(){
id2.className = 'an2 start mainbak';
setTimeout(function() {
id2.className = 'an2 start startbak'
id2.setAttribute('onclick','openPage()')
document.getElementById('2').innerHTML=document.getElementById('cont2').innerHTML
}, 150);
x.style.display='none';
}
Also made a JSFiddle but it doesn't seem to work..
While on my browser does.
It should be possible to do this with only a couple of lines of Javascript. Rich Bradshaw's example that you posted was an excellent starting point.
Rather than starting the flip on hover (via css selectors) I added a couple of lines of Javascript - actually jQuery, but plain JS would work - to add the relevant class on click. It works really nicely...
See jsFiddle Demo
I also managed to get the back face clickable (as in that demo) so it should meet all of your needs.
By that method the HTML is reduced to:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://lorempixel.com/450/281/" />
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
<p>Including interactive HTML like
links</p>
</div>
</div>
</div>
And the Javascript is just:
$('#f1_container').click(function() {
$('#f1_container').addClass('clicked');
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>H a l f b l u u d</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
<style type='text/css'>
#rotating-item-wrapper {
list-style-type:none;
margin:0;
padding:0;
height: 150px;
}
.rotating-item-wrapper li{
float: left;
list-style-type:none;
width: 148px;
height: 150px;
margin: 0 0 0 6px;
padding: 0;
position: relative;
text-decoration: none;
}
.rotating-item-wrapper li div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rotating-item{
display:block ;
position: absolute;
width: 148px;
height: 150px;
}
.harleypaint {
position: absolute;
left: 850px;
top: -500px;
z-index: 2;
display:block ;
}
.harleydraw {
position: absolute;
left: -125px;
top: -400px;
z-index: 2;
display:block ;
}
.harleyguitar {
position: absolute;
left: -325px;
top: -50px;
z-index: 2;
display:block ;
}
.harleystand {
position: absolute;
left: 450px;
top: 10px;
z-index: 2;
display:block ;
}
.harleyblink {
position: absolute;
left: -100px;
top: -450px;
z-index: 2;
display:block ;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 3000;
//interval between items (in milliseconds)
var itemInterval = 1500;
//cross-fade time (in milliseconds)
var fadeTime = 3000;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
var rand = Math.floor(Math.random()*(numberOfItems-1)) + 1;
currentItem = (currentItem+rand) % numberOfItems;
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
//]]>
</script>
<style type='text/css'>
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
text-decoration: none;
}
.bmenu li{
font-size: 35px;
display: block;
}
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 4px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-decoration: none;
}
.bmenu:hover li a{
text-shadow: 0px 0px 6px #fff;
text-decoration: none;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
text-decoration: none;
}
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
$('body').stratus({
auto_play: false,
color: '24242D',
download: false,
links: 'https://soundcloud.com/halfbluud',
random: false
});
});
</script>
</head>
<body>
<table align="center" border="0" style="border-spacing: 0">
<tr>
<td width="598" height="267" > </td>
<td width="169"> </td>
</tr>
<tr>
<div class="mainpage"><td bgcolor="#000000"><center><iframe src="http://player.vimeo.com/video/75329627?title=0&byline=0&portrait=0&color=ffffff&autoplay=1&loop=1" width="600" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</center>
</td>
<td bgcolor="#000000"> <center><ul class="bmenu">
<li>About</li><br>
<li>Tour</li><br>
<li>Media</li><br>
<li>Store</li><br>
<li>News</li>
</ul></center>
</td>
</div>
</tr>
</table>
<ul class="rotating-item-wrapper">
<li>
<div class="harleypaint">
<img src="http://www.xaluan.com/images/weathericon/48px/01.png"> </div>
<div class="harleypaint" style="background-color: white;">
</div>
</li>
<li>
<div class="harleydraw">
<img src="http://www.xaluan.com/images/weathericon/48px/01.png"> </div>
<div class="harleydraw" style="background-color: white;">
</div>
</li>
<li>
<div class="harleyguitar">
<img src="http://www.xaluan.com/images/weathericon/48px/01.png"> </div>
<div class="harleyguitar" style="background-color: white;">
</div>
</li>
<li>
<div class="harleystand">
<img src="http://www.xaluan.com/images/weathericon/48px/01.png"> </div>
<div class="harleystand" style="background-color: white;">
</div>
</li><li>
<div class="harleyblink">
<img src="http://www.xaluan.com/images/weathericon/48px/01.png"> </div>
<div class="harleyblink" style="background-color: white;">
</div>
</li>
</ul>
</body>
</html>
I have a website i am making that will have a vimeo video, in the center of the page, and a menu right next to it. So, it will end up being an all white page with this black rectangle in the middle.
The website is for an artist. I am trying to have different images of him working fade in and out in different locations around the black rectangle (for nothing other than aesthetics.). The menu is straightforward and the page is overwhelmingly minimalistic. The pictures fading in and out in different places will give it "something"....a sort of haunting effect.
I have found randomizing code but i dont want one image to be able to appear back-to-back-to-back. I want it to start with one image and move around to the other 5, and then return to the first image. Most things that fade in and out in sequence aren't placed in different positions (which is where im running into problems). I get the code working but then once i place the images around (using 'absolute' positioning) something goes wrong.
When attempting to implement the help that is readily available online, it doesn't do what i want.
I guess i could try to literally just call on altered versions of the same code (just change the absolute position and the timer) per image but that seems unnecessary. It also doesn't seem like i would be able to have that infinitely loop.
I apologize for the lengthiness of my post, but i just want to be clear that the 'easy to find' scripts and posts regarding fade in/out images are not the answer to my problem. I have searched and searched to no avail.
I'm aware that the code i have doesn't work at all, but it's where i got the most recent time i took a swing at it. THANKS ahead of time!
This isn't perfect, but it should get you started. It cycles through an array of images and changes the src on one img tag. It then randomly picks a top and left position and fades the image in and out.
http://jsfiddle.net/bhlaird/TH7t7/3/
Javascript:
var images = [{
src: "http://placeKitten.com/g/500/500",
width: 500,
height: 500
}, {
src: "http://placeKitten.com/g/300/300",
width: 300,
height: 300
}, {
src: "http://placeKitten.com/g/600/600",
width: 600,
height: 600
}, {
src: "http://placeKitten.com/g/400/400",
width: 400,
height: 400
}, , {
src: "http://placeKitten.com/g/200/200",
width: 200,
height: 200
}];
var counter = {
val: 0,
top: 0,
left: 0
};
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function fadeImage(counter) {
counter.top = getRandomInt(0, $("body").height() - images[counter.val].height);
counter.left = getRandomInt(0, $("body").width() - images[counter.val].width);
$("#haunting").fadeTo(2000, 0.3).delay(1000).fadeOut(2000);
$("#haunting").attr({
src: images[counter.val].src
}).css({
top: counter.top,
left: counter.left
});
if (counter.val < images.length) counter.val++;
else counter.val = 0;
}
setInterval(function () {
fadeImage(counter);
}, 6000);
HTML:
<img id="haunting" style="display:none" src="http://placeKitten.com/g/500/200" />
<div id="video">
<img src="http://placekitten.com/200/200" />
<div id="menu">Some text</div>
</div>
CSS:
html, body {
height: 100%;
}
#video {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width:200px;
height:210px;
text-align:center;
}
#haunting {
position: absolute;
top:0;
left:0;
}