Mobile safari ignoring z-index - javascript

Try clicking one of the thumbnails here: http://henrybuilt.com/questions/
On a computer it works as desired (the text overlay is displayed on top of the first image in the slide set and then goes away when next or previous is clicked). On iPad or iPhone in both safari and chrome, the text overlay appears for a second and then gets covered by my background image slide div once it loads and I cannot make my overlay (.slide_view .title) appear on top of the background div.
The specific css:
.slide_view .title{
display: none;
position: absolute;
top:0;
left:0;
background-color: white;
width: 100%;
height: 100%;
z-index: -3
}
#backstretch{
z-index: -3;
}
The full doc:
<?php
$slides = array(
array("Why talk with us", "whytalk", 6),
array("Who we are", "who", 1),
array("Notable projects", "notable", 0),
array("Products", "products", 0),
array("Unique options", "unique", 11),
array("Kitchens", "kitchens", 0),
array("Whole House", "whole", 0),
array("Furniture", "furniture", 4),
array("Opencase", "opencase", 0),
array("What is a system", "system", 5),
array("HB vs Custom", "vscustom", 0),
array("HB vs Euro system", "vseuro", 0),
array("Design Process", "design", 0),
array("Making it", "making", 0),
array("Installation", "installation", 0),
array("Pricing", "pricing", 0),
array("Materials", "materials", 0),
array("High functions", "highfunctions", 0),
array("Craft quality", "craft", 0),
array("Press kit", "press", 0),
array("Working remotely", "working", 0),
array("Client site", "client", 0)
);
?>
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 0;
padding: 0;
color: #000;
font-size: 62.5%;
}
body, input, textarea, select{
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.wrapper{
max-width: 1000px;
margin: auto;
padding: 2%;
}
.header{
font-size: 3em;
margin-bottom: 2%;
padding: 2% 0%;
}
.thumb_wrapper{
float: left;
width: 17%;
margin-right: 3%;
margin-bottom: 2%;
}
.thumb_wrapper:hover{
cursor: pointer;
opacity: 0.5;
}
.thumb_wrapper img{
width: 100%;
margin-bottom: 1%;
}
.thumb_wrapper .caption{
text-transform: uppercase;
opacity: 0.8;
font-size: 1em;
margin: 2% 2%;
}
.slide_view{
display: none;
}
.slide_view .nav_bar{
width: 100%;
height: 10%;
background-color: rgba(0, 0, 0, 1);
position: absolute;
bottom: 0;
left: 0;
}
.slide_view .title{
display: none;
position: absolute;
top:0;
left:0;
background-color: white;
width: 100%;
height: 100%;
z-index: -3
}
.slide_view .text{
position: absolute;
top:50%;
margin-top: -1em;
font-size: 4em;
color: black;
width: 100%;
text-align: center;
text-transform: uppercase;
}
#backstretch{
z-index: -3;
}
.caption{
}
.controls{
float: right;
margin-right: 3%;
display: block;
height: 100%;
width: 20%;
}
.prev, .next {
height: 8%;
padding: 10px;
border-radius: 5px;
background: rgba(0,0,0,.5);
position: absolute;
top: 50%;
margin-top: -50px;
cursor: pointer;
z-index: 3;
}
.prev:hover, .next:hover, .back:hover {
opacity: 0.5;
cursor: pointer;
}
.next{
right: 5%;
}
.prev{
left: 5%;
}
.back{
float: left;
display: block;
height: 100%;
}
.back img{
height: 90%;
margin-top: 5%;
margin-left: 50%;
margin-right: 50%;
display: block;
}
.overlay{
display: none;
position: absolute;
top:0;
left:0;
background-color: black;
width: 100%;
height: 100%;
}
.image_caption{
text-transform: uppercase;
margin-left: 10%;
padding-top: 1%;
float: left;
font-size: 1em;
color: #fff;
}
.relative{
width: 100%;
height: 100%;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
var showing_title = false;
var showing_title_for_first_time = false;
var slides = [
<?php
foreach($slides as $slide){
echo "
['".$slide[0]."', '".$slide[1]."', ".$slide[2]."],";
}
?>
["", "", 0]
];
var current_group;
var current_index;
var transition_length = 500; //in ms
$(document).ready(function(){
var image_width = $(".thumb_wrapper .image_wrapper").width();
$(".thumb_wrapper .image_wrapper").height(image_width*.75);
$(".thumb_wrapper").click(function(){
var t = this;
var group = $(t).attr("group");
slideView();
var prefix = slides[group][1];
var index = 0;
current_group = group;
current_index = index;
setSlide(prefix, index);
showing_title = true;
showTitleForGroup(group);
});
$(".next").click(function(){
next();
});
$(".prev").click(function(){
prev();
});
$(".exit").click(function(){
thumbView();
});
});
function slideView(){
setTimeout(function(){
$(".thumb_view").hide();
$(".slide_view").show();
}, transition_length);
showing_title_for_first_time = true;
}
function thumbView(){
setTimeout(function(){
$.backstretch("destroy");
$(".slide_view").hide();
$(".thumb_view").show();
}, transition_length);
transition();
}
function showTitleForGroup(group){
showing_title = true;
transition();
setTimeout(function(){
$(".title").show();
$(".title .text").html(slides[group][0]);
}, transition_length);
}
function hideTitle(){
showing_title = false;
transition();
setTimeout(function(){
$(".slide_view .title").hide();
}, transition_length);
}
function transition(){
$(".overlay").fadeIn(transition_length, function(){
$(".overlay").fadeOut(transition_length);
});
}
function setSlide(prefix, index){
transition();
setTimeout(function(){
$.backstretch("images/"+prefix+"_"+index+".jpg");
if(showing_title){
$("#backstretch").zIndex(-3);
}
}, transition_length);
}
function next(){
if(showing_title){
hideTitle();
}else{
var group_size = slides[current_group][2];
var groups = slides.length;
var index = current_index + 1;
var group = current_group;
if(index >= group_size){
index = 0;
group = parseInt(current_group) + 1;
if(slides[group][0] == ""){
group = 0;
}
showTitleForGroup(group);
}
var prefix = slides[group][1];
current_index = index;
current_group = group;
setSlide(prefix, index);
}
}
function prev(){
if(showing_title && !showing_title_for_first_time){
hideTitle();
}else{
var index = current_index - 1;
var group = current_group;
if(current_index == 0){
group = current_group - 1;
if(group == -1){
group = slides.length - 2;
}
index = slides[group][2] - 1;
if(!showing_title_for_first_time){
showTitleForGroup(current_group);
}
}
if(showing_title_for_first_time){
hideTitle();
showing_title_for_first_time = false;
}
var prefix = slides[group][1];
current_index = index;
current_group = group;
setSlide(prefix, index);
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="thumb_view">
<div class="header">
henrybuilt
</div>
<div class="content">
<?php
$i = 0;
foreach($slides as $slide){
?>
<div class="thumb_wrapper" group="<?php echo $i; ?>">
<div class="image_wrapper">
<img src="images/<?php echo $slide[1]; ?>_0.jpg" />
</div>
<div class="caption">
<?php echo $slide[0]; ?>
</div>
</div>
<?php
$i++;
}
?>
<div style="clear:both"></div>
</div>
<div class="footer">
</div>
</div>
<div class="slide_view">
<div class="nav_bar">
<div class="relative">
<div class="back">
<img class="exit" src="images/exit.png"/>
</div>
<div class="image_caption">
</div>
</div>
</div>
<img class="next" src="images/next.png"/>
<img class="prev" src="images/prev.png"/>
<div class="title">
<div class="text">
some text
</div>
</div>
</div>
</div>
<div class="overlay">
</div>
<div style="display:none">
<?php
foreach($slides as $slide){
for($i = 0; $i < $slide[2]; $i++){
echo '
<img src="images/'.$slide[1].'_'.$i.'.jpg"/>';
}
}
?>
</div>
</body>
</html>


Please update the below CSS code:
.prev, .next{z-index:999999}
.slide_view .title{z-index:999}
.slide_view .text{z-index:9999}

Related

Vanilla JS budget app delete dynamically rendered income or expense

I've made a budgeting app that has expenses and Income tabs. Every time you add an expense or income, the app pushes the information inside of an array of objects and dynamically renders an <li> component and places it inside of a <ul>. I'm having trouble with the edit and delete features. Each individual <li> comes with a delete and edit button. The <li>, delete button, and edit button all have the same id of Date.now(). Date.now() is used because it produces a number based on milliseconds and won't produce the same id twice unless someone types an expense or income twice within one millisecond I want to click on the delete button inside of the <li> and have my app remove that individual object from my entry_list[] array and also remove the <li> from the DOM.
'use strict'
const balanceElement = document.querySelector(".balance .value");
const totalIncome = document.querySelector(".income-total");
const totalOutcome = document.querySelector(".outcome-total");
const incomeElement = document.querySelector(".income-tab");
const expense = document.querySelector(".expense-tab");
const all = document.querySelector(".all-tab");
const incomeList = document.querySelector(".income-tab .list");
const expenseList = document.querySelector(".expense-tab .list");
const allList = document.querySelector(".all-tab .list");
const expensesButton = document.querySelector(".tab1");
const incomeButton = document.querySelector(".tab2");
const allButton = document.querySelector(".tab3");
const addExpense = document.querySelector(".add-expense")
const expenseTitle = document.querySelector(".expense-title-input")
const expenseAmount = document.querySelector(".expense-amount-input")
const addIncome = document.querySelector(".add-income")
const incomeTitle = document.querySelector(".income-title-input")
const incomeAmount = document.querySelector(".income-amount-input")
const list = document.querySelector('.list')
//SWITCHING BETWEEN TABS
expensesButton.addEventListener('click', () => {
expense.classList.remove('hidden');
incomeElement.classList.add('hidden');
expensesButton.classList.add('clicked');
incomeButton.classList.remove('clicked');
})
incomeButton.addEventListener('click', () => {
incomeElement.classList.remove('hidden');
expense.classList.add('hidden');
expensesButton.classList.remove('clicked');
incomeButton.classList.add('clicked');
})
incomeList.addEventListener('click', deleteOrEdit)
expenseList.addEventListener('click', deleteOrEdit)
let entry_list = []
addExpense.addEventListener('click', () =>{
if(expenseTitle.value == '' || expenseAmount.value == ''){
return;
}
let expense = {
type: 'expense',
title: expenseTitle.value,
amount: expenseAmount.value,
id: Date.now()
}
entry_list.push(expense)
clearExpense()
changeLists()
})
addIncome.addEventListener('click', () =>{
if(incomeTitle.value == '' || incomeAmount.value == ''){
return;
}
let income = {
type: 'income',
title: incomeTitle.value,
amount: incomeAmount.value,
id: Date.now()
}
entry_list.push(income)
clearIncome()
changeLists()
})
const clearExpense = () =>{
expenseTitle.value = '';
expenseAmount.value = '';
}
const clearIncome = () =>{
incomeTitle.value = ''
incomeAmount.value = ''
}
const changeLists = () =>{
expenseList.innerHTML = ''
incomeList.innerHTML = ''
entry_list.map((entry) =>{
if(entry.type == 'expense'){
return expenseList.innerHTML += `<li id = "${entry.id}" class= "${entry.type}">
<div class = "entry">${entry.title}: $${entry.amount}</div>
<div class="icon-container">
<div class = "edit" id="${entry.id}"></div>
<div class ="delete" id="${entry.id}"></div>
</div>
</li>`
}
else if(entry.type == 'income'){
return incomeList.innerHTML += `<li id = "${entry.id}" class= "${entry.type}">
<div class = "entry">${entry.title}: $${entry.amount}</div>
<div class="icon-container">
<div class = "edit" id="${entry.id}"></div>
<div class ="delete" id="${entry.id}"></div>
</div>
</li>`
}
})
addIncomes()
}
const addIncomes = () =>{
let sum = 0;
let income = 0;
let outcome = 0;
balanceElement.innerHTML = 0
totalIncome.innerHTML = 0
totalOutcome.innerHTML = 0
entry_list.forEach(list =>{
if(list.type == 'expense'){
sum -= list.amount
outcome -= list.amount
}else if(list.type == 'income'){
sum += Number(list.amount)
income += Number(list.amount)
}
balanceElement.innerHTML = '$' + sum
totalIncome.innerHTML = '$' + income
totalOutcome.innerHTML = '$' + outcome
})
}
// // DETERMINE IF BUTTON IS EDIT OR DELETE
function deleteOrEdit(e){
const targetButton = e.target;
const entry = targetButton.parentNode.parentNode;
if(targetButton.classList == ('delete')){
deleteEntry(entry)
}else if(targetButton.classList == ('edit')){
editEntry(entry);
}
}
// //DELETE FUNCTION
const deleteEntry = (entry) =>{
console.log(entry.id)
entry_list.splice(entry.id, 1)
// entry.innerHTML = ''
console.log(entry.id)
addIncomes()
}
// EDIT FUNCTION
const editEntry = (entry) =>{
let Entry = entry_list[entry.id]
if(entry.type == "income"){
incomeAmount.value = Entry.amount;
incomeTitle.value = Entry.title;
}else if(entry.type == "expense"){
expenseAmount.value = Entry.amount;
expenseTitle.value = Entry.title;
}
deleteEntry(entry);
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&family=Raleway:wght#400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.budget-container{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background-color: #4F98CA;
}
.balance-container{
width: 360px;
height: 470px;
background-color: #50D890;
border-radius: 30px;
margin-right: 100px;
}
.app-title{
color: white;
margin-top: 1rem;
margin-left: 1rem;
}
.month{
color: white;
margin-top: 1rem;
text-align: center;
}
.budget-header{
display: flex;
flex-direction:column;
justify-content: center;
}
.balance{
margin-top: 1rem;
margin-left: 1rem;
}
.title{
color: white;
font-size: 1.25rem;
opacity: .75;
}
.value{
font-size: 1.75rem;
color: white;
font-weight: bold;
margin-left: 1rem;
}
.account{
margin-top: 2.5rem;
margin: 2.5rem 1.5rem 2.5rem 1.5rem;
display: flex;
justify-content: space-between
}
.income-total{
color: white;
text-align: center;
font-size: 1.5rem;
}
.outcome-total{
color: #4F98CA;
text-align: center;
font-size: 1.5rem;
}
/* DASHBOARD */
.budget-dashboard{
display: block;
width: 360px;
height: 470px;
position: relative;
border-radius: 30px;
background-color: white;
}
.dash-title{
margin-top: 2rem;
margin-left: 1rem;
font-size: 1.5rem;
}
.toggle{
margin: 1rem;
display: flex;
cursor: pointer;
}
.toggle .tab2, .tab3{
margin-left: 1rem;
cursor: pointer;
}
.clicked{
font-weight: bold !important;
}
.hidden{
display: none !important;
}
/* EXPENSES TAB */
.expense-tab{
display: flex;
justify-content: center;
}
.expense-input-container{
position: absolute;
top: 400px;
border-top: solid 1px gray;
width: 100%;
}
.expense-amount-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.expense-title-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.add-expense{
color: none;
background-color: none;
border: none;
outline: none;
color: inherit;
}
/* INCOME TAB */
.income-tab{
display: flex;
justify-content: center;
}
.income-input-container{
position: absolute;
top: 400px;
border-top: solid 1px gray;
width: 100%;
}
.input{
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem;
}
.income-amount-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.income-title-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.add-income{
color: none;
background-color: none;
border: none;
outline: none;
}
.plus-img{
width: 40px;
}
/* li */
ul{
width: 360px;
height: 255px;
list-style: none;
margin-top:20px;
overflow-x: auto;
}
/* BUTTON ICONS */
.edit{
background-image: url('media/Icons/icons8-edit-48.png');
background-size: contain;
width: 25px;
height: 25px;
background-repeat: no-repeat;
margin-right: 10px;
}
.delete{
background-image: url('media/Icons/icons8-trash-can-48 (2).png');
background-size: contain;
width:25px;
height: 25px;
background-repeat: no-repeat;
}
.income{
width:250px;
height: auto;
padding-left: 20px;
margin-bottom: 10px;;
word-wrap: break-word;
color: black
}
.expense{
width:250px;
height: auto;
padding-left: 20px;
margin-bottom: 10px;;
word-wrap: break-word;
font-family: 'Gilroy Bold';
color: #4F98CA;
}
li{
display: flex;
justify-content: space-between;
width: 100% !important;
padding-right: 20px;
}
.icon-container{
display: flex;
}
#media (max-width:900px){
.budget-container{
display: inline-block;
position: relative
}
.balance-container{
position: absolute;
top: 10%;
left: 25%;
}
.budget-dashboard{
position: absolute;
left: 25%;
top: 40%;
}
}
<!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.0">
<link rel="stylesheet" href="style.css">
<title>Budgetrr</title>
</head>
<body>
<main class="budget-container">
<section class="balance-container">
<div class="app-title">
<p>Budgetrr</p>
</div>
<h1 class="month">OCTOBER</h1>
<section class="budget-header">
<div class="balance">
<div class="title">
Balance
</div>
<div class="value">
<small>$</small>0
</div>
</div>
<div class="account">
<div class="budget-income">
<div class="title">
Income
</div>
<div class="income-total">
<small>$</small>0
</div>
</div>
<div class="chart"></div>
<div class="budgetoutcome">
<div class="title">
Expenses
</div>
<div class="outcome-total">
<small>$</small>0
</div>
</div>
</div>
</section>
</section>
<section class="budget-dashboard">
<div class="dash-title">Dashboard</div>
<div class="toggle">
<div class="tab1 clicked">Expenses</div>
<div class="tab2">Income</div>
<!-- <div class="tab3 clicked">All</div> -->
</div>
<div class="income-tab hidden">
<ul class="list"></ul>
<div class="income-input-container">
<form class="input">
<input type="text" class="income-title-input" name="title" placeholder="Title">
<input type="number" class="income-amount-input" name="amount" placeholder="$0">
<button type = "button" class="add-income"><img class= "plus-img"src="media/Icons/icons8-add-new-48.png" alt=""></button>
</form>
</div>
</div>
<div class = "expense-tab">
<ul class="list"></ul>
<div class="expense-input-container">
<div class="input">
<input type="text" class="expense-title-input" name="title" placeholder="Title">
<input type="number" class="expense-amount-input" name="amount" placeholder="$0">
<button type="button" class="add-expense"><img class= "plus-img" src="media/Icons/icons8-add-new-48.png" alt=""></button>
</div>
</div>
</div>
</section>
</main>
<script src="JavaScript/budget.js"></script>
</body>
</html>
I've tried to use .splice() but I can't seem to get it to work.

Your entry is an object. And entry has an id property with Date type.
Your delete function calls this:
entry_list.splice(entry.id, 1)
Javascript splice function
function takes number as argument(s).
You should find the id of element you want to delete and get its index. After that you can delete the element with splice method.
Here is how to delete:
// Find the index of object at the given list
const index = entry_list.findIndex(x => x.id === entry.id);
// Starting from index of element to delete, remove 1 element.
entry_list.splice(index, 1);

Progressbar with vertical line

I am implementing a simulation of a Dutch- and an English-auction in otree.
For the interface, I am using a progress bar for the price that the supplier gets.
In the English-auction the price increases every half second and in the Dutch-auction the price decreases every half second.
Now I want to add a vertical line for the costs of the supplier, which changes every round.
How can i add a vertical line to the progress bar?
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myCosts {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 100%;
height: 30px;
background-color: #40bf80;
text-align: center;
line-height: 30px;
color: white;
}
#costLine{
width: 0%;
height: 30px;
background-color: #FF0000;
text-align: center;
line-height: 30px;
color: white;
}
.bg-info{
background-color: #ddd;
}
</style>
Your costs for this round are:
<div id="myCosts">
<div id="costLine">{{player.cost}}</div>
</div>
Current price is:
<div id="myProgress">
<div id="myBar">$200</div>
</div>
<p></p>
<p id="Message"></p>
<script>
var left_line = ({{player.cost|json}}-101);
var right_line = (200-{{player.cost|json}});
let cost = {{player.cost|json}}
let bot_stop = {{player.bot_stop|json}};
let price = {{Constants.start_value|json}};
var Auction;
var Auction2;
document.getElementById("costLine").innerHTML = "$"+cost;
document.getElementById("costLine").style.width = cost-100+'%';
function startAuction(){
document.getElementById("stop_button").disabled = false;
document.getElementById("start_button").disabled = true;
Auction = setInterval(function(){
if(price == bot_stop){
document.getElementById("Message").innerHTML = 'The other supplier has dropped out. You win with a price of ' + bot_stop;
document.getElementById("stop_button").innerHTML = 'Next Page'
stopAuction();
}
if(price != bot_stop){
price = price -1;
document.getElementById("myBar").innerHTML='$'+price;
document.getElementById("myBar").style.width = (price-100) +'%';
}
},500)
}
function stopAuction() {
document.querySelector("[name=winning_price]").value = price;
document.getElementById("stop_button").innerHTML = 'Next Page'
clearInterval(Auction);
}
</script>
<button type="button" class="otree-btn-next btn btn-primary" id="start_button" onclick="startAuction()">Start Auction</button>
<button class="otree-btn-next btn btn-primary" disabled id="stop_button" onclick="stopAuction()">Drop Out</button>
<p></p>
<p></p>
<input type="hidden" name="winning_price" />

Add a child element <div id=myBarPrice></div> to <div id="myProgress">.
Add position: relative; attribute to the #myProgress selector.
Add new style block for a new element:
#myBarPrice {
background-color: #FF0000;
width: 2px;
height: 100%;
position: absolute;
right: 100%;
top: 0;
}
Set #myBarPrice position with js:
...
document.getElementById("costLine").innerHTML = "$"+cost;
document.getElementById("costLine").style.width = cost-100+'%';
document.getElementById("myBarPrice").style.right = cost+'%'; // <=====
function startAuction(){
document.getElementById("stop_button").disabled = false;
document.getElementById("start_button").disabled = true;
...
Here is a mockup in codepen.io
CSS code:
#myProgress {
width: 100%;
background-color: #ddd;
position: relative;
}
#myCosts {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 80%;
height: 30px;
background-color: #40bf80;
text-align: center;
line-height: 30px;
color: white;
}
#myBarPrice {
background-color: #FF0000;
width: 2px;
height: 100%;
position: absolute;
right: 40%;
top: 0;
}
#costLine{
width: 60%;
height: 30px;
background-color: #FF0000;
text-align: center;
line-height: 30px;
color: white;
}
.bg-info{
background-color: #ddd;
}
HTML code:
Your costs for this round are:
<div id="myCosts">
<div id="costLine">{{player.cost}}</div>
</div>
Current price is:
<div id="myProgress">
<div id="myBar">$200</div>
<div id=myBarPrice></div>
</div>

I have created tasks through template literals, and want to drag and drop names to the task i want

`
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Task Manager</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="main-container">
<header>
<h1>TASK MANAGER</h1>
<div id="task-value-check" class="value-check"></div>
<div id="member-value-check" class="value-check"></div>
<div id="input">
<div id="task-form">
<form onsubmit="createTask(event)">
<input class="text-input" name="task" type="text" placeholder="Name of
new task">
<input class="button" type="submit" value="ADD"/>
</form>
</div>
<div id="tasks-header" class="header">TASKS</div>
<div id="member-form">
<form onsubmit="createMember(event)">
<input class="text-input" name="teamMember" type="text"
placeholder="Name of new team member">
<input class="button" type="submit" value="ADD"/>
</form>
</div>
<div id="members-header" class="header">TEAM MEMBERS</div>
</div>
</header>
<main>
<div id="assign-value-check" class="value-check"></div>
<div id="assign-form">
<form onsubmit="assignToMember(event)">
<input class="text-input" class="input-txt" id="check-task" type="text"
placeholder="Pick task">
<input type="submit" id="assign-button" value="ASSIGN" class="button"
class="input-submit">
</form>
</div>
<div id="assignments-header" class="header">TASK ASSIGNMENTS</div>
<main>
<div id="listing">
<div id="tasks-rendering" class="rendering"></div>
<div id="members-rendering" class="rendering"></div>
<div id="assignments-rendering" class="rendering"></div>
</div>
</main>
</div>
<script src=index.js></script>
</body>
</html>
function createTask(event) {
event.preventDefault();
let task = document.querySelector("[name='task']").value;
task = task.toLowerCase();
const taskList = JSON.parse(localStorage.getItem('task')) || [];
if (task === "") {
document.getElementById("task-value-check").innerHTML = "PLEASE ENTER A TASK";
} else {
document.getElementById("task-value-check").innerHTML = "";
document.getElementById("member-value-check").innerHTML = "";
const tasks = { task};
taskList.push(tasks);
window.localStorage.setItem('task', JSON.stringify(taskList));
event.target.reset();
renderTaskList();
}
}
function createMember(event) {
event.preventDefault();
let member = document.querySelector("[name='teamMember']").value;
member = member.toLowerCase();
if (member === "") {
document.getElementById("member-value-check").innerHTML = "PLEASE ENTER A TEAM MEMBER";
} else {
document.getElementById("member-value-check").innerHTML = "";
document.getElementById("task-value-check").innerHTML = "";
const members = { member };
const memberList = JSON.parse(localStorage.getItem('member')) || [];
memberList.push(members);
window.localStorage.setItem('member', JSON.stringify(memberList));
event.target.reset();
renderMemberList();
}
}
function assignToMember(event) {
event.preventDefault();
const taskList = JSON.parse(localStorage.getItem('task')) || {};
let nameTask = document.getElementById('check-task').value;
let valueCheck = document.getElementById('assign-value-check');
if (nameTask === "") {
valueCheck.innerHTML = "PLEASE ENTER A TASK AND A TEAM MEMBER";
} else if (nameTask === "") {
valueCheck.innerHTML = "PLEASE ENTER A TASK";
} else {
valueCheck.innerHTML = "";
nameTask = nameTask.toLowerCase();
const assignMemberList = JSON.parse(localStorage.getItem('assignment')) || [];
let task;
if (nameTask != '') {
for (const a of taskList) {
if (a.task === nameTask) {
task = a.task;
}
}
if (task != undefined) {
let assignToMember = {task};
assignMemberList.push(assignToMember);
window.localStorage.setItem('assignment', JSON.stringify(assignMemberList));
} else {
valueCheck.innerHTML = "PLEASE ENTER AN EXISTING TASK AND/OR TEAM MEMBER";
}
renderUpdatedTaskList();
}
event.target.reset();
}
}
function renderTaskList() {
const taskList = JSON.parse(window.localStorage.getItem("task")) || [];
const taskListOutput = document.getElementById("tasks-rendering");
taskListOutput.innerHTML = "";
for (const a of taskList) {
let taskElement = document.createElement("div");
taskElement.innerHTML = `<div class="object-render">
<h4>${a.task.charAt(0).toUpperCase() + a.task.slice(1)}</h4>
</div>`;
taskListOutput.appendChild(taskElement);
}
}
function renderMemberList() {
const memberList = JSON.parse(window.localStorage.getItem("member")) || [];
const memberListOutput = document.getElementById("members-rendering");
memberListOutput.innerHTML = "";
for (const m of memberList) {
let memberElement = document.createElement("div");
memberElement.innerHTML = `<div class="object-render" draggable="true"
ondragstart="drag(event)">
<h4 id="drag1">${m.member.charAt(0).toUpperCase() +
m.member.slice(1)}</h4>
</div>`;
memberListOutput.appendChild(memberElement);
}
}
I am trying to drag and drop names to different tasks, but when I do the names i drop only
appears on the first created task. I want to be able to drag and drop names to the task I want. I also want them to stay there when the site is refreshed.
function renderUpdatedTaskList(){
const assignMemberList = JSON.parse(localStorage.getItem('assignment')) || [];
const assignmentListOutput = document.getElementById('assignments-rendering');
assignmentListOutput.innerHTML = "";
for (const a of assignMemberList) {
let assignmentElement = document.createElement("div");
assignmentElement.innerHTML = `<div id="assignment-object-render" class="object-render-
assignments"
class="containers" ondragover="allowdrop(event)">
<h1>${a.task.charAt(0).toUpperCase() + a.task.slice(1)}</h1>
<br>
<p>medlemmer</p>
<div class="membersDiv" ondragover="allowdrop(event)" ondrop="drop(event)">
</div>
</div>`;
assignmentListOutput.appendChild(assignmentElement);
}
renderMemberNamesOnTask();
}
function allowdrop(ev) {
ev.preventDefault();
}
function drag(ev) {
let memberInfo = ev.target.innerText;
ev.dataTransfer.setData("text/plain", memberInfo);
}
function drop(ev) {
ev.preventDefault();
const taskAndMember = JSON.parse(localStorage.getItem("taskAndMember")) || [];
let memberInfo = ev.dataTransfer.getData("text/plain");
task = ev.target.parentElement.querySelector("h1").innerText;
ev.target.append(memberInfo);
memberAndTask = {task, memberInfo};
taskAndMember.push(memberAndTask);
window.localStorage.setItem("taskAndMember", JSON.stringify(taskAndMember));
renderUpdatedTaskList();
}
function renderMemberNamesOnTask(){
const taskAndMember = JSON.parse(localStorage.getItem("taskAndMember")) || [];
let membersDiv = document.querySelectorAll(".membersDiv");
membersDiv.innerHTML = "";
for(const m of taskAndMember){
let htmlTxt = document.createElement("div");
htmlTxt.innerHTML = `${m.memberInfo}`;
Every name i drag on to a task will only appear on the first created task. I am pretty sure the problem lies somewhere here.
membersDiv.appendChild(htmlTxt);
}
}
`

`
body{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
#main-container{
position: relative;
background-color: gainsboro;
margin: 0 auto;
width: 800px;
height: 1000px;
border-bottom: 30px solid floralwhite;
}
header{
z-index: 2;
position: absolute;
width: 800px;
height: 100px;
background-color: floralwhite;
text-align: center;
}
.text-input{
font-size: 15px;
border: 1px solid white;
height: 17px;
width: 250px;
}
.button{
font-size: 14px;
border: 1px solid white;
color: grey;
height: 20px;
width: 50px;
}
#task-form{
position: absolute;
left: 40px;
margin-top: 15px;
top: 110px;
}
#member-form{
position: absolute;
right: 40px;
margin-top: 15px;
top: 110px;
}
.value-check{
position: absolute;
z-index: 3;
top: 110px;
font-size: 12px;
color: red;
}
#task-value-check{
left: 40px;
}
#member-value-check{
right: 210px;
}
#assign-value-check{
top: 561px;
left: 135px;
}
.header{
position: absolute;
z-index: 2;
top: 170px;
background-color: antiquewhite;
color: grey;
border-bottom: 1px solid white;
height: 20px;
width: 370px;
font-size: 15px;
padding: 10px;
}
#tasks-header{
left: 0px;
}
#members-header{
right: 0px;
}
#assignments-header{
top: 620px;
width: 780px;
text-align: center;
}
#assign-form{
position: absolute;
left: 220px;
top: 578px;
}
#check-task{
position: absolute;
left: -85px;
}
#check-member{
position: absolute;
right: -445px;
}
#assign-button{
position: absolute;
width: 80px;
left: 450px;
}
#plus-symbol{
position: absolute;
color: white;
top: -28px;
left: 175.5px;
}
#assignment-object-render{
background-color: floralwhite;
padding: 20px;
padding-bottom: 50px;
font-size: 10px;
text-align: center;
}
.object-render{
background-color: floralwhite;
padding: 20px;
font-size: 10px;
text-align: center;
width: 62px;
word-wrap: break-word;
overflow-y: auto;
height: 55px;
}
.object-render-assignments{
background-color: floralwhite;
padding: 20px;
font-size: 10px;
text-align: center;
}
#tasks-rendering{
top: 210px;
}
#members-rendering{
top: 210px;
right: 0px;
}
#assignments-rendering{
bottom: 20px;
width: 760px;
height: 280px;
}
.rendering{
position: absolute;
background-color: antiquewhite;
font-family: sans-serif;
padding: 20px;
width: 350px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-row-gap: 20px;
grid-column-gap: 20px;
overflow: auto;
}
.membersDiv{
height: 70px;
width: 200px;
background-color: lightgray;
overflow-y: scroll;
}
This is the css code.
`

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 ... :) */

Problems implenting Hero Carousel Slider

The slider/carousel I'm trying to implent is this: http://www.paulwelsh.info/jquery-plugins/hero-carousel/
I know that I have to add HTML code for it, which I am unable to due to little experience with designing websites (started my course around a month ago). Can you help me with the HTML code I am supposed to add to get this to work? This is my HTML, CSS & Javascript. The HTML is what I THINK it should look like, which is obviously wrong.
HTML
<div class="what here?">
<ul class="and what here?">
anything here?
<li><img src="images/deadmau5/slide1.jpg" ></li>
<li><img src="images/deadmau5/slide2.jpg" ></li>
<li><img src="images/deadmau5/slide3.jpg" ></li>
<li><img src="images/deadmau5/slide4.jpg" ></li>
</ul>
</div>
CSS
.hero {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 48px;
}
.hero-carousel article {
width: 980px;
margin: 0 auto;
height: 480px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero-carousel article .contents {
position: relative;
z-index: 2;
top: 72px;
left: 48px;
list-style: none;
color: #000;
width: 556px;
padding: 20px;
background: rgba(255,255,255,0.8);
-pie-background: rgba(255,255,255,0.8);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: 48px;
right: auto;
}
.hero-carousel-nav li a {
background: #D21034;
color: #fff;
border: none;
outline: none;
display: block;
float: left;
padding: 5px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav li a:hover {
background: #89051C;
}
.hero-carousel-nav li a:active,
.hero-carousel-nav li a:focus {
border: none;
outline: none;
}
Javascript
jQuery.fn.heroCarousel=function(a){a=jQuery.extend({animationSpeed:1000,navigation:true,easing:"",timeout:5000,pause:true,pauseOnNavHover:true,prevText:"Previous",nextText:"Next",css3pieFix:false,currentClass:"current",onLoad:function(){},onStart:function(){},onComplete:function(){}},a);if(jQuery.browser.msie&&parseFloat(jQuery.browser.version)<7){a.animationSpeed=0}return this.each(function(){var k=jQuery(this),b=k.children();currentItem=1;childWidth=b.width();childHeight=b.height();if(b.length>2){b.each(function(m){if(a.itemClass){jQuery(this).addClass(a.itemClass)}});b.filter(":first").addClass(a.currentClass).before(b.filter(":last"));var d=Math.round(childWidth*k.children().length),l="-"+Math.round(childWidth+Math.round(childWidth/2))+"px";k.addClass("hero-carousel-container").css({position:"relative",overflow:"hidden",left:"50%",top:0,"margin-left":l,height:childHeight,width:d});k.before('<ul class="hero-carousel-nav"><li class="prev">'+a.prevText+'</li><li class="next">'+a.nextText+"</li></ul>");var e=k.prev(".hero-carousel-nav"),h;if(a.timeout>0){var j=false;if(a.pause){k.hover(function(){j=true},function(){j=false})}if(a.pauseOnNavHover){e.hover(function(){j=true},function(){j=false})}function c(){if(!j){e.find(".next a").trigger("click")}}h=window.setInterval(c,a.timeout)}e.find("a").data("disabled",false).click(function(p){p.preventDefault();var m=jQuery(this),n=m.parent().hasClass("prev"),o=k.children();if(m.data("disabled")===false){a.onStart(k,e,o.eq(currentItem),a);if(n){f(o.filter(":last"),"previous")}else{f(o.filter(":first"),"next")}m.data("disabled",true);setTimeout(function(){m.data("disabled",false)},a.animationSpeed+200);if(a.timeout>0){window.clearInterval(h);h=window.setInterval(c,a.timeout)}}});function f(m,q){var o=parseFloat(k.position().left),n=parseFloat(k.css("margin-left"));if(q==="previous"){m.before(m.clone().addClass("carousel-clone"));k.prepend(m);var p=Math.round(n-childWidth);var r="+="}else{m.after(m.clone().addClass("carousel-clone"));k.append(m);var p=l;var r="-="}if(a.css3pieFix){g(jQuery(".carousel-clone"))}k.css({left:o,width:Math.round(d+childWidth),"margin-left":p}).animate({left:r+childWidth},a.animationSpeed,a.easing,function(){k.css({left:"50%",width:d,"margin-left":n});jQuery(".carousel-clone").remove();i()})}function g(n){var m=n.attr("_pieId");if(m){n.attr("_pieId",m+"_cloned")}n.find("*[_pieId]").each(function(o,p){var q=$(p).attr("_pieId");$(p).attr("_pieId",q+"_cloned")})}function i(){var m=k.children();m.removeClass(a.currentClass).eq(currentItem).addClass(a.currentClass);a.onComplete(k,k.prev(".hero-carousel-nav"),m.eq(currentItem),a)}if(jQuery.browser.msie){e.find("a").attr("hideFocus","true")}a.onLoad(k,e,k.children().eq(currentItem),a)}})};

Embed these resources from the sample page that you provided:
<link rel="stylesheet" media="all" href="jquery.heroCarousel.css" type="text/css" />
<script type='text/javascript' src='jquery.heroCarousel-1.3.js'></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
Then follow this HTML Structure:
<div class="hero">
<div class="hero-carousel">
<article><img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" >
</article>
</div>​
Then add this javascript code to the end of your site:
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
css3pieFix: true
});});
DEMO: http://jsfiddle.net/dCYB7/1/, http://fiddle.jshell.net/dCYB7/1/show/
EDIT:
The entire slider in one HTML+CSS+Javascript collection:
<style>
#slider { width:100%; overflow:hidden; height:372px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-bg.png); margin-bottom:25px; }
#slider-container { height:352px; width:950px; margin:auto; padding-top:10px; position:relative; }
#slider-inner { width:10000px; height:352px; position:absolute; top:10px; left:-970px; }
.slide { width:938px; height:340px; border:6px solid #000; float:left; margin-right:20px; position:relative; }
#slider-arrow-left { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-left.png); position:absolute; left:-53px; top:120px; z-index:999; } #slider-arrow-left:hover { background-position:0 -124px; }
#slider-arrow-right { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-right.png); position:absolute; right:-53px; top:120px; z-index:999; } #slider-arrow-right:hover { background-position:0 -124px; }
#slider-fade-left { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png); position:absolute; left:-320px; top:0px; z-index:2; }
#slider-fade-left:hover { opacity:0.92; }
#slider-fade-right { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png); position:absolute; right:-320px; top:0px; z-index:2; }
#slider-fade-right:hover { opacity:0.92; }
#slider-black-left { height:372px; width:1000px; position:absolute; top:0px; left:-1300px; background-color:#0c100f; }
#slider-black-right { height:372px; width:1000px; position:absolute; top:0px; right:-1300px; background-color:#0c100f; }
</style>
<div id="slider">
<div id="slider-container">
<div id="slider-inner">
<div class="slide">
<a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://smarturl.it/albumtitlegoeshere"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/neffmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a> </div>
</div>
<span id="slider-arrow-left"></span>
<span id="slider-arrow-right"></span>
<span id="slider-fade-left"></span>
<span id="slider-fade-right"></span>
<div id="slider-black-left"></div>
<div id="slider-black-right"></div>
<div id="hearts">
<span class="heart"></span>
<span class="heart"></span>
<span class="heart"></span>
<span class="heart"></span>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function slideLeft(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = oldOrb - 1; if (newOrb < 1) { newOrb = 4; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '+=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left > -10) { me.css('left', '-3880px'); }
bindAll();
});
}
function slideRight(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
oldOrb = parseInt(oldOrb);
var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '-=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left < -4840) { me.css('left', '-970px'); }
bindAll();
});
}
function slideRight2() {
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '-=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left < -4840) { me.css('left', '-970px'); }
});
}
function slideTo(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = $(this).attr('id'); newOrb = newOrb.substr(5,6);
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
var To;
if (newOrb == 1) { To = -970; } if (newOrb == 2) { To = -1940; } if (newOrb == 3) { To = -2910; } if (newOrb == 4) { To = -3880; }
$('#slider-inner').animate({
left: To
}, 600, 'easeOutQuart', function() {
bindAll();
});
}
function orbChange(orb) {
$('.heart-active', '#hearts').removeClass('heart-active');
$('#heart' + orb + ' span').addClass('heart-active');
}
function bindAll() {
$('#slide-left').bind('click', slideLeft);
$('#slide-right').bind('click', slideRight);
$('#slide-left-fade').bind('click', slideLeft);
$('#slide-right-fade').bind('click', slideRight);
$('#hearts a').bind('click', slideTo);
}
function unbindAll() {
$('#slide-left').unbind('click', slideLeft);
$('#slide-right').unbind('click', slideRight);
$('#slide-left-fade').unbind('click', slideLeft);
$('#slide-right-fade').unbind('click', slideRight);
$('#hearts a').unbind('click', slideTo);
}
var refreshId = setInterval(function() {
slideRight2();
}, 6000);
bindAll();
});
</script>
Live DEMO | CODE

add width and margin 0 auto in .hero class
.hero {
position: relative;
overflow: hidden;
margin-bottom: 48px;
margin: 0 auto;
width: 960px;
}

Categories