I am trying to build a timeline that will scale, and add evenly spaced markers along side the 'timeline' so that the user can add additional times within an admin panel.
for instance, if there was 4 markers they would automatically split across 1/4 of the timeline regardless of width.
So like this <--|--|--|--|-->
Here is the code:
<style>
body {
background: black;
}
#timeline {
width:49.5%;
background: url(http://brendonwells.co.uk/CPD/ice-training/img/timeline.png) center center no-repeat;
background-size: 100%;
height: 30px;
position: relative;
}
.checkpoint {
position: absolute;
width: 1px;
height: 13px;
top: 13px;
margin-left: auto;
margin-right: auto;
background: white;
cursor: pointer;
}
.checkpoint:hover {
background: white;
}
.checkpoint p {
position: absolute;
height: 30px;
width:0;
bottom: -35px!important;
margin-left: auto;
margin-right: auto;
opacity: 0;
transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
}
.checkpoint:hover p {
opacity: 1;
}
</style>
<div id="timeline">
<div class="checkpoint" >
<div class="rel">
<p>5 Minutes</p>
</div>
</div>
<div class="checkpoint" >
<p>10 Minutes</p>
</div>
<div class="checkpoint" >
<p>15 Minutes</p>
</div>
<div class="checkpoint" >
<p>20 Minutes</p>
</div>
<div class="checkpoint" >
<p>25 Minutes</p>
</div>
<div class="checkpoint" >
<p>30 Minutes</p>
</div>
<div class="checkpoint" >
<p>35 Minutes</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
//Set slide times
var time1 = 300;
var time2 = 600;
var time3 = 900;
var time4 = 1200;
var time5 = 1500;
var time6 = 1800;
var time7 = 2100;
//Array to keep all the times
var times = [time1, time2, time3, time4, time5, time6, time7];
//variable to iterate through all of them
var chosenTime = 0;
//placement needs multiplier
var multiplier = 1;
function deliverTimes() {
$('.checkpoint').each(function() {
$(this).data("time", times[chosenTime]);
//console.log("The data is " + $(this).data('time'));
chosenTime++;
//console.log('running');
placement($(this));
});
}
//Call the function
deliverTimes();
//Clicking checkpoints
$('.checkpoint').click(function() {
video.currentTime = $(this).data("time");
});
//place the checkpoints
function placement($div) {
var width = $('#timeline').width();
var margin = ((width/$('.checkpoint').length) - 10) * multiplier;
console.log(margin);
$div.css("left", margin + "px");
multiplier++;
}
</script>
http://brendonwells.co.uk/timeline.html
I also prepared a link so that the CSS could be messed with etc..
Thanks
You can achieve your desired look utilizing CSS3 flexbox to handle the spacing and width. Add and remove checkpoints in the html and css will handle the rest. No JS required.
HTML
<div id="timeline">
<div class="checkpoint">
<div class="rel">
<p>5 Minutes</p>
</div>
</div>
<div class="checkpoint" >
<p>10 Minutes</p>
</div>
<div class="checkpoint" >
<p>15 Minutes</p>
</div>
<div class="checkpoint" >
<p>20 Minutes</p>
</div>
<div class="checkpoint" >
<p>25 Minutes</p>
</div>
<div class="checkpoint" >
<p>30 Minutes</p>
</div>
<div class="checkpoint" >
<p>35 Minutes</p>
</div>
</div>
CSS
body {
background: #000;
}
#timeline {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
color: #fff;
height: 30px;
display: flex;
position: relative;
}
#timeline::after {
content: "";
position: absolute;
width: 100%;
border-top: 1px dashed #fff;
top: 50%;
left: 0;
}
#timeline .checkpoint {
flex: 1;
position: relative;
height: 50%;
margin-top: 15px;
border-right: 1px solid #fff;
}
#timeline .checkpoint:last-child {
border-right: none;
}
#timeline .checkpoint p {
width: 0;
margin: 0;
cursor: pointer;
opacity: 0;
transition: all .3s ease;
}
#timeline .checkpoint p:hover {
opacity: 1;
}
https://jsfiddle.net/s5rL5eja/
You may be able to use this system here Responsivegrid.css to evenly space them, otherwise, you could use a function that sets the width for each of the checkpoints to a percentage of 100%. So if you have 5 checkpoints the width may be 19% per checkpoint/child, with a margin that is 1% of the total width, and then you would just give either the checkpoint:first-child or checkpoint:last-child a margin of 0% (I am not sure what class each of your checkpoints has but you just replace checkpoint with whatever class)
TLDR: Give each checkpoint a percentage of the entire width based on a js function. Make either the first or last checkpoint have a 0% margin.
Related
I'm struggling with infinite carousel below:
let $carousel = document.querySelector('.carousel');
let $ref_ribbon = document.querySelector('.carousel__ribbon');
let $ref_right = document.querySelector('.carousel__button--right');
let $ref_left = document.querySelector('.carousel__button--left');
let $ref_counter = 0;
let $direction;
const transfer = () => {
if ($direction === -1) {
$ref_ribbon.appendChild($ref_ribbon.firstElementChild);
} else if ($direction === 1) {
$ref_ribbon.prepend($ref_ribbon.lastElementChild);
}
$ref_ribbon.style.transition = "none";
$ref_ribbon.style.transform = "translateX(0px)";
setTimeout(function() {
$ref_ribbon.style.transition = "transform .7s ease-in-out";
})
}
const right_button = () => {
if ($direction === 1) {
$ref_ribbon.prepend($ref_ribbon.lastElementChild);
$direction = -1;
}
$direction = -1;
$carousel.style.justifyContent = 'flex-start';
$ref_ribbon.style.transform = `translateX(-${300}px)`;
}
const left_button = () => {
$ref_counter--;
if ($direction === -1) {
$ref_ribbon.appendChild($ref_ribbon.firstElementChild);
$direction = 1;
}
$direction = 1;
$carousel.style.justifyContent = 'flex-end';
$ref_ribbon.style.transform = `translateX(${300}px)`;
}
$ref_right.addEventListener('click', right_button);
$ref_left.addEventListener('click', left_button);
$ref_ribbon.addEventListener('transitionend', transfer)
.carousel {
display: flex;
margin: auto;
position: relative;
height: 200px;
width: 300px;
background-color: red;
justify-content: flex-start;
}
.carousel__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 100;
}
.carousel__button--left {
left: 0;
}
.carousel__button--right {
right: 0;
}
.carousel__ribbon {
display: flex;
flex-direction: row;
outline: 3px solid black;
height: 100%;
transition: transform .7s ease-in-out;
}
.carousel__pane {
display: flex;
background-color: skyblue;
height: 100%;
width: 300px;
flex-shrink: 0;
outline: 1px dashed navy;
}
.carousel__content {
text-align: center;
margin: auto;
}
.carousel__indicator {
display: flex;
gap: 10px;
left: 50%;
transform: translateX(-50%);
height: 30px;
position: absolute;
bottom: 0;
}
.carousel__circle {
height: 10px;
width: 10px;
background-color: gray;
border-radius: 50%;
cursor: pointer;
}
.carousel__circle--active {
background-color: black;
}
<div class="carousel">
<button class="carousel__button carousel__button--left"><</button>
<button class="carousel__button carousel__button--right">></button>
<div class="carousel__ribbon">
<div class="carousel__pane">
<p class="carousel__content">Pane 1</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 2</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 3</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 4</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 5</p>
</div>
</div>
<div class="carousel__indicator">
<div class="carousel__circle carousel__circle--active"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
</div>
</div>
I would like to connect indicator so when somebody click on proper circle then carousel will automatically slide to this particular panel. Also, I would like to set this circles that they will show which panel is currently active.
In addition, I would like to get such effect that carousel will jump to this particular panel immediately, ommiting other panels between.
So, if active one is first panel and I click fifth circle, then carousel will smoothly change panel like to the panel number two, but instead of number two I will see number five.
Sadly I always fail to get this effect. I would appriciate if somebody more experienced direct me how to deal with this problem.
I am working on a custom Angular component that currently looks like the following:
The small green portion that you see on the left is my attempt to have a separate div overlap so that when I click on one of the white circular selectors, the green is filled up until that point.
Here is the code I have:
var shell = document.querySelector('.shell');
var inner = document.querySelector('.inner-shell');
shell.addEventListener('click', function(ev) {
alert("in");
if (ev.path && ev.path[0].className === 'indicator') {
var targetNode = ev.srcElement;
var centerX = targetNode.offsetLeft + targetNode.offsetWidth;
var centerY = targetNode.offsetTop + targetNode.offsetHeight;
inner.style.width = `${centerX + 40}px`;
}
});
.inner-shell {
background-color: #6FBC92;
width: 50px;
transition: 1s;
}
.shell {
background-color: #DCDCDC;
border-radius: 20px;
display: inline-flex;
}
.indicator {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 20px;
height: 13px;
margin: 3px 28px;
width: 13px;
}
<div class="inner-shell">
<div class="shell">
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
</div>
Here is what I am getting with the code above (I clicked on the last indicator to get to this state):
How can I instead place inner-shell on top of the shell but still underneath the indicators ?
Thanks
You can put the inner-shell inside shell and use position:absolute to make overlap on the indicators
See code snippet:
var shell = document.querySelector('.shell');
var inner = document.querySelector('.inner-shell');
shell.addEventListener('click', function(ev) {
if (ev.path && ev.path[0].className === 'indicator') {
var targetNode = ev.srcElement;
var centerX = targetNode.offsetLeft + targetNode.offsetWidth;
var centerY = targetNode.offsetTop + targetNode.offsetHeight;
inner.style.width = `${centerX + 40}px`;
}
});
.shell .inner-shell {
background-color: #6FBC92;
width: 10px;
transition: 1s;
position: absolute;
top: 0;
left: 0;
display: inline-block;
height: 100%;
border-radius: 20px;
}
.shell {
background-color: #DCDCDC;
border-radius: 20px;
display: inline-flex;
position: relative;
}
.indicator {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 20px;
height: 13px;
margin: 3px 28px;
width: 13px;
position:relative;
z-index:111;
}
<div class="shell">
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="inner-shell"></div>
</div>
You can use linear-gradient, here is a simplified example that you can adjust:
var shell = document.querySelectorAll('.container div');
for(var i=0;i<shell.length;i++) {
shell[i].addEventListener('click', function(ev) {
var centerX = ev.target.offsetLeft - ev.target.parentNode.offsetLeft + 15;
ev.target.parentNode.style.backgroundSize =centerX+'px 100%';
});
}
.container {
margin:5px auto;
height:30px;
width:300px;
border-radius:30px;
background-image:linear-gradient(green,green);
background-position:left;
background-size:0px 100%;
background-repeat:no-repeat;
background-color:grey;
display:flex;
justify-content:space-around;
transition:1s all;
}
.container > div {
height:30px;
width:30px;
border-radius:50%;
background:#fff;
}
<div class="container">
<div></div><div></div><div></div><div></div>
</div>
I am trying to create slider with step and I am unable to find good solution with this and I have tried to modify many sliders like owl carousel and swipe slider but this didn't work.
jQuery(".step1").click(function() {
jQuery('.steps .stp .active').removeClass('active');
jQuery('.hot-section-right .active').removeClass('active');
jQuery('.step1 .stepp').addClass('active');
jQuery('.step-one').addClass('active');
});
jQuery(".step2").click(function() {
jQuery('.steps .stp .active').removeClass('active');
jQuery('.hot-section-right .active').removeClass('active');
jQuery('.step2 .stepp').addClass('active');
jQuery('.step-two').addClass('active');
});
jQuery(".step3").click(function() {
jQuery('.steps .stp .active').removeClass('active');
jQuery('.hot-section-right .active').removeClass('active');
jQuery('.step3 .stepp').addClass('active');
jQuery('.step-three').addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="steps">
<div class="step1 stp"> <span class="stepp active">STEP 1</span></div>
<div class="step2 stp"> <span class="stepp">STEP 2</span></div>
<div class="step3 stp"> <span class="stepp">STEP 3</span></div>
</div>
<div class="hot-section-right">
<div class="step-one active"><img src="img/xstep-1.png"></div>
<div class="step-two"><img src="img/xstep-2.png"></div>
<div class="step-three"><img src="img/xstep-2.png"></div>
</div>
I've made a starter code for you. I think from this on you could style it and make it look better. I've also played a little bit with the code and created an autoplay function.I hope this will help you:
$(document).on('click', '.stepp', function() {
$('.active_btn').removeClass('active_btn');
$(this).addClass('active_btn');
var id = $(this).attr('id');
id = id.replace('step', '');
$('.active_img').removeClass('active_img');
$('#img' + id).addClass('active_img');
currentSlide = id - 1;
});
$(document).on('click', '.img', function() {
$('.active_img').removeClass('active_img');
$(this).addClass('active_img');
var id = $(this).attr('id');
id = id.replace('img', '');
$('.active_btn').removeClass('active_btn');
$('#step' + id).addClass('active_btn');
currentSlide = id - 1;
});
var currentSlide = 0; //start index
var totalElements = $(".img").length; //total number of slides
function autoplay() {
$(".img").eq(currentSlide).click();
currentSlide++;
if (currentSlide == totalElements) {
currentSlide = 0; //resetting the index when the end is reached
}
}
//call autoplay using setInterval every 1s
setInterval(autoplay, 1000);
body{
background: #F4F4F5;
}
.steps{
margin-bottom: 10px;
border: 1px solid #adadad;
border-radius: 20px;
max-width: 300px;
width: 100%;
text-align: center;
padding: 5px 5px;
box-sizing: border-box;
}
.img{
opacity: 0.6;
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
-o-transition: all 350ms;
transition: all 350ms;
max-width: 100px;
display: table-cell;
vertical-align: middle;
}
.img img{
cursor: pointer;
max-width: 100%;
width: 100%;
height: auto;
}
.stp{
display: inline-block;
cursor: pointer;
}
.stepp{
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
-o-transition: all 350ms;
transition: all 350ms;
padding: 5px 10px;
border-radius: 20px;
display: block;
}
.active_btn{
background: #fff;
box-shadow: 2px 2px 10px #000;
}
.active_img{
opacity: 1;
max-width: 140px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="steps">
<div class="stp"> <span id='step1' class="stepp active_btn">STEP 1</span></div>
<div class="stp"> <span id='step2' class="stepp">STEP 2</span></div>
<div class="stp"> <span id='step3' class="stepp">STEP 3</span></div>
</div>
<div class="hot-section-right">
<div id='img1' class="img active_img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div>
<div id='img2' class="img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div>
<div id='img3' class="img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div>
</div>
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;
}