We Keep Coding

chosen select is not working in my dropdown

I intend to use chosen select in my code, but it is returning an error and it doesn't work. I leave my code here:
var linha = ``;
linha += `<tr id="5">
<td class="text-center text-muted" style="vertical-align: middle;"><div class="tooltip-demo"><div class="most dropdown"><div class="caption"> <i class="pe-2x pe-va pe-7s-user"></i></div><div class="list">
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
<div class="item">Option 4</div>
<div class="item">Option 5</div>
</div></div><div class="tooltip">Atribuir Membro</div></div></td>
</tr>`;
$("#daberto tbody").html(linha);
$(".list").chosen({
disable_search_threshold: 5,
no_results_text: "Sem resultados",
placeholder_text_multiple: "Selecione opções",
width: "100%"
});
$(function() {
$('.dropdown > .caption').on('click', function() {
$(this).parent().toggleClass('open');
});
$('.dropdown > .list > .item').on('click', function() {
$('.dropdown > .list > .item').removeClass('selected');
$(this).addClass('selected').parent().parent().removeClass('open').children('.caption').text( $(this).text() );
});
$(document).on('keyup', function(evt) {
if ( (evt.keyCode || evt.which) === 27 ) {
$('.dropdown').removeClass('open');
}
});
$(document).on('click', function(evt) {
if ( $(evt.target).closest(".dropdown > .caption").length === 0 ) {
$('.dropdown').removeClass('open');
}
});
});
.tooltip-demo {
position: relative;
}
.tooltip {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: .1s;
position: absolute;
top: -.75rem;
left: 50%;
transform: translate(-50%, -100%);
background-color: #333;
color: #eee;
padding: .25rem .75rem;
white-space: nowrap;
border-radius: 3.5px;
}
.most:hover ~ .tooltip,
.most:focus ~ .tooltip,
.most.active ~ .tooltip {
opacity: 1;
visibility: visible;
}
div.dropdown {
position: relative;
}
div.dropdown > div.caption {
padding: 11px 40px;
border-radius: 3px;
cursor: pointer;
}
div.dropdown > div.list {
position: absolute;
background-color: #ffffff;
width: 100%;
border-radius: 0 0 3px 3px;
display: none;
margin-top: 15px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
div.dropdown > div.list > div.item {
padding: 11px 14px;
cursor: pointer;
}
div.dropdown > div.list > div.item.selected {
font-weight: bold;
}
div.dropdown > div.caption:hover,
div.dropdown > div.list > div.item:hover {
color: #29a4f6;
}
div.dropdown.open > div.caption {
border-radius: 3px 3px 0 0;
}
div.dropdown.open > div.list {
display: block;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon#1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<table class="align-middle mb-0 table table-borderless table-striped table-hover daberto" id="daberto">
<thead>
<tr>
<th class="text-center col-2">Destinatário</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
If you remove this code:
$(".list").chosen({
disable_search_threshold: 5,
no_results_text: "Sem resultados",
placeholder_text_multiple: "Selecione opções",
width: "100%"
});
The code works correctly. But I want the choice options that appear when clicking on the tag to open with the chosen select formatting, but it's not working.
Also, the chosen select appears as soon as the table is returned. It should only appear in the pick list when clicking on the tag.
I leave here an image of what I want:

Exclude element from JQuery-UI containment

I am trying to allow an element to be dragable/resizable inside of another element but not in the area of another child of that element.
Given the following table row:
I want to be able to drag and resize the blue area anywhere within the table row, but not where the grey table cell is (i.e. it would move/resize freely within the first four cells but be stopped when it reaches the last one).
I can constrain it to the table row using the containment: '.middle tr' or containment: $el.closest('tr'), (where $el is a selector for the blue element) options in JQuery.draggable and JQuery.resizable, but I haven't been able to find a way that works for excluding the last column from the containment.
How do you exclude an element from the containment area?
Example with code:
$(function() {
$("td").droppable({
drop: function(event, ui) {
var draggable = ui.draggable;
var newLeft = draggable.offset().left - draggable.closest(".middle table").offset().left;
var childNum = Math.round((newLeft + 100) / 100);
var newContainer = $(this).closest('tr').find('td:nth-of-type(' + childNum + ')');
draggable.css({
top: '',
left: ''
});
newContainer.append(draggable);
},
});
$(".planning-spot").resizable({
grid: [100, 10000000],
handles: "e",
containment: ".middle tr"
}).each(function() {
var $el = $(this);
$el.draggable({
containment: $el.closest('tr'),
axis: 'x',
});
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
overflow: hidden;
table-layout: fixed;
width: 500px;
margin: 20px;
}
tr {
position: relative;
background: #FFF;
}
td, th {
position: relative;
padding: 0;
width: 100px;
height: 30px;
border: 1px solid #000;
}
.planning-spot {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 90px;
border-radius: 10px;
margin: 5px;
text-align: center;
z-index: 1;
cursor: pointer;
color: #FFF;
width: 290px;
background: #3CF;
}
.no-planning {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="middle">
<table>
<tbody>
<tr>
<td>
<div></div>
<div class="planning-spot">18 / 20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td class="no-planning">
<div></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
http://jsfiddle.net/xpvt214o/668937/
I'm aware that I can check the location during the drop and stop functions of droppable and resizable respectively and reverse the action if needed (which is my current solution), but I'm looking for a solution to prevent it being moved into an "unwanted" area in the first place.

You can determine the draggable area with getBoundingClientRect() and assign containment to an array wich take the width of each resizeable elements
$(function() {
$("td").droppable({
drop: function(event, ui) {
var draggable = ui.draggable;
var newLeft = draggable.offset().left - draggable.closest(".middle table").offset().left;
var childNum = Math.round((newLeft + 100) / 100);
var newContainer = $(this).closest('tr').find('td:nth-of-type(' + childNum + ')');
draggable.css({
top: '',
left: ''
});
newContainer.append(draggable);
},
});
$(".planning-spot").resizable({
grid: [100, 10000000],
handles: "e",
containment: ".middle tr"
}).each(function() {
var $el = $(this);
var bBoxTr = $el.closest('tr')[0].getBoundingClientRect();
var bBoxTd = $el.closest('tr').children(".no-planning")[0].getBoundingClientRect();
var x1 = bBoxTr.x, y1 = bBoxTr.y;
var x2 = bBoxTr.right-bBoxTd.width, y2 = bBoxTr.bottom;
$el.draggable({
// containment: $el.closest('tr'),
containment: [x1,y1,x2-$el.width()-10,y2],
axis: 'x',
});
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: no-collapse;
overflow: hidden;
table-layout: fixed;
width: 500px;
margin: 20px;
}
tr {
position: relative;
background: #FFF;
}
td, th {
position: relative;
padding: 0;
width: 100px;
height: 30px;
border: 1px solid #000;
}
.planning-spot {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 90px;
border-radius: 10px;
margin: 5px;
text-align: center;
z-index: 1;
cursor: pointer;
color: #FFF;
width: 290px;
background: #3CF;
}
.no-planning {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="middle">
<table>
<tbody>
<tr id="test">
<td>
<div></div>
<div class="planning-spot">18 / 20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td class="no-planning">
<div></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Edit:
Since getBoundingClientRect(); is not supported by all browsers, better go with jquery features, position(), height() and width();.
See the revised snippet below, the function getDragArea returns an array with the coordinates of the drag area. I add a listener (mouseover) which permit to reset drag area when needed.
The table is wrapped in a scrolling div to test behavior.
$(function() {
$("td").droppable({
drop: function(event, ui) {
var draggable = ui.draggable;
var newLeft = draggable.offset().left - draggable.closest(".middle table").offset().left;
var childNum = Math.round((newLeft + 100) / 100);
var newContainer = $(this).closest('tr').find('td:nth-of-type(' + childNum + ')');
draggable.css({
top: '',
left: ''
});
newContainer.append(draggable);
},
});
$(".planning-spot").resizable({
grid: [100, 10000000],
handles: "e",
containment: ".middle tr"
}).each(function() {
$(this).on('mouseover',function(){
$(this).draggable({
containment: getDragArea($(this)),
axis: 'x',
});
})
});
function getDragArea($el){
var $tr = $el.closest('tr');
var $tds = $el.closest('tr').children(".no-planning");
var width = $el.closest('tr').width()-$tds.width()*$tds.length;
var height = $el.closest('tr').height();
var position = $el.closest('tr').position();
var x1 = position.left, y1 = position.top;
var x2 = x1+width, y2 = y1+height;
return [x1,y1,x2-$el.width()-10,y2]
}
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: no-collapse;
overflow: hidden;
table-layout: fixed;
width: 500px;
margin: 20px;
}
tr {
position: relative;
background: #FFF;
}
td, th {
position: relative;
padding: 0;
width: 100px;
height: 30px;
border: 1px solid #000;
}
.planning-spot {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 90px;
border-radius: 10px;
margin: 5px;
text-align: center;
z-index: 1;
cursor: pointer;
color: #FFF;
width: 290px;
background: #3CF;
}
.no-planning {
background: #CCC;
}
.wrapper{
overflow:auto;
width:500px;
height:120px;
border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="middle">
<table>
<tbody>
<tr id="test">
<td>
<div></div>
<div class="planning-spot">18 / 20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td class="no-planning">
<div></div>
</td>
<td class="no-planning">
<div></div>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>

I did the trick by checking if drag event will cause collision with non dragable item.
Checkout code below:
$(function() {
var nonDragableItems = $(".no-planning");
$("td").droppable({
drop: function(event, ui) {
var draggable = ui.draggable;
var newLeft = draggable.offset().left - draggable.closest(".middle table").offset().left;
var childNum = Math.round((newLeft + 100) / 100);
var newContainer = $(this).closest('tr').find('td:nth-of-type(' + childNum + ')');
draggable.css({
top: '',
left: ''
});
newContainer.append(draggable);
},
});
function onDrag(e, ui){
var dragElemRect = ui.helper[0].getBoundingClientRect();
for(var i=0;i<nonDragableItems.length;i++){
var elemRect = nonDragableItems[i].getBoundingClientRect();
if(areColliding(dragElemRect, elemRect))
return false;
}
}
function areColliding(rect1, rect2){
if(rect1.bottom <= rect2.top ||
rect1.top >= rect2.bottom ||
rect1.left >= rect2.right ||
rect1.right <= rect2.left)
return false;
return true;
}
$(".planning-spot").resizable({
grid: [100, 10000000],
handles: "e",
containment: ".middle tr"
}).each(function() {
var $el = $(this);
$el.draggable({
containment: $el.closest('tr'),
axis: 'x',
drag: onDrag
});
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
overflow: hidden;
table-layout: fixed;
width: 500px;
margin: 20px;
}
tr {
position: relative;
background: #FFF;
}
td, th {
position: relative;
padding: 0;
width: 100px;
height: 30px;
border: 1px solid #000;
}
.planning-spot {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 90px;
border-radius: 10px;
margin: 5px;
text-align: center;
z-index: 1;
cursor: pointer;
color: #FFF;
width: 290px;
background: #3CF;
}
.no-planning {
background: #CCC;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">
<div class="middle">
<table>
<tbody>
<tr>
<td>
<div></div>
<div class="planning-spot">18 / 20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td class="no-planning">
<div></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

How can I make my skills graph use a grade letter, rather than a percentage?

I've looked everywhere for this specific need but cannot find any good sources. I have a 'skills' graph that shows how well I can accomplish things. My issue is that I don't want it to display a percentage, but a letter grade (A+, A, B, C)
Here is the link
Here is the code
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
function grow() {
var element = '.bar';
var i = 1;
$(element).each(function(index, value) {
var percent = $(this).attr('data-percent');
var timing = percent / 100;
setTimeout(function() {
$(value).css('max-width', +percent + '%').css('transition', timing + 's ease all');
$(value).append('<div class="num">' + percent + '%</div>');
}, i * 50);
i++;
});
}
$(window).load(function() {
requestAnimationFrame(grow);
});
</script>
.bar {
background: white;
border-top: 1px solid #b4996d;
width: 100%;
max-width: 0;
height: 25px;
margin: 0 0 10px 0;
border-top-style: dotted;
}
.num {
line-height: 22px;
color: #b4996d;
font-size: 12px;
text-align: right;
font-family: 'open_sansbold';
}
.label-graph {
line-height: 22px;
position: absolute;
color: #333;
font-size: 12px;
font-family: 'open_sansbold';
}
.holder {
margin: 0 auto;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="holder">
<div class="bar" data-percent="95">
<span class="label-graph">Web Design</span>
</div>
<div class="bar" data-percent="95">
<span class="label-graph">Graphic Design</span>
</div>
<div class="bar" data-percent="95">
<span class="label-graph">Photoshop</span>
</div>
<div class="bar" data-percent="80">
<span class="label-graph">HTML5</span>
</div>
<div class="bar" data-percent="90">
<span class="label-graph">Illustration</span>
</div>
<div class="bar" data-percent="85">
<span class="label-graph">Print</span>
</div>
</div>

Here is a simple example with what #lux suggests in the comment. You add conditions on what you get with the data-percent attribute and it's on :)
See it here
$(function(){
$('.bar').each(function(i,v){
data = $(this).data('percent');
// just an example, you can set whatever you wants as value and conditions
if(data > 80){
$(this).addClass('grade-Aplus');
}
else if(data <= 80 && data > 60){
$(this).addClass('grade-A');
}else{
$(this).addClass('grade-B');
}
});
});
CSS
.bar:before {content:""; width: 0; height: 30px; background: blue; position: absolute; left: 0; top: 0; transition: all 0.5s; }
.bar { position: relative; margin: 15px 0; padding: 7px 0 0 110px}
.bar.grade-Aplus:before { width: 100px; content: "A+"; color: #fff;}
.bar.grade-A:before { width: 80px; content: "A"; color: #fff}
.bar.grade-B:before { width: 30px; content: "B"; color: #fff}
/* and so on ... :) */

Ability to flip div boxes, changing their size, and interacting with the content

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');
});

How can I have multiple images fade in and fade out infinitely,in sequence, in different locations (using abolute)?

<!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;
}