How can i make a draggable item for a touchscreen - javascript

i made a game where you have to drag the right numbers to each other (1 -> one). But it does not work on a phone or ipad. I am not able to drag the draggable items with a thoughscreen.
/* Add some margin to the page and set a default font and colour */
body {
margin: 30px;
font-family: "Georgia", serif;
line-height: 1.8em;
color: #333;
}
/* Main content area */
#content {
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Slots for final card positions */
#cardSlots {
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
margin: 0 auto;
background: #ffd;
}
#cardSlots, #cardPile {
width: 910px;
height: 120px;
padding: 20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardSlots div, #cardPile div {
float: left;
width: 58px;
height: 78px;
padding: 10px;
padding-top: 40px;
padding-bottom: 0;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {
border-style: dashed;
}
#cardPile div {
background: #666;
color: #fff;
font-size: 50px;
text-shadow: 0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
/* Individually coloured cards */
#card1.correct { background: red; }
#card2.correct { background: brown; }
#card3.correct { background: orange; }
#card4.correct { background: yellow; }
#card5.correct { background: green; }
#card6.correct { background: cyan; }
#card7.correct { background: blue; }
#card8.correct { background: indigo; }
#card9.correct { background: purple; }
#card10.correct { background: violet; }
/* "You did it!" message */
#successMessage {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
<!doctype html>
<html lang="en">
<head>
<title>A jQuery Drag-and-Drop Number Cards Game</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
var correctCards = 0;
$( init );
function init() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '250px',
width: 0,
height: 0
} );
// Reset the game
correctCards = 0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
// Create the pile of shuffled cards
var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
numbers.sort( function() { return Math.random() - .5 } );
for ( var i=0; i<10; i++ ) {
$('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
for ( var i=1; i<=10; i++ ) {
$('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );
// If the card was dropped to the correct slot,
// change the card colour, position it directly
// on top of the slot, and prevent it being dragged
// again
if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go
if ( correctCards == 10 ) {
$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
} );
}
}
</script>
</head>
<body>
<div id="content">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
</div>
</body>
</html>
So my question is: can someone help me making this game work for an iphone or ipad with thoughscreen. I am a beginner at coding and hope someone can help! (I am new to SO as wel so i hope i did it right)


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
function touchHandler(event) {
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
var correctCards = 0;
$( init );
function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '250px',
width: 0,
height: 0
} );
// Reset the game
correctCards = 0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
// Create the pile of shuffled cards
var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
numbers.sort( function() { return Math.random() - .5 } );
for ( var i=0; i<10; i++ ) {
$('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
for ( var i=1; i<=10; i++ ) {
$('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );
// If the card was dropped to the correct slot,
// change the card colour, position it directly
// on top of the slot, and prevent it being dragged
// again
if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go
if ( correctCards == 10 ) {
$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
} );
}
}
</script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
/* Add some margin to the page and set a default font and colour */
body {
margin: 30px;
font-family: "Georgia", serif;
line-height: 1.8em;
color: #333;
}
/* Main content area */
#content {
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Slots for final card positions */
#cardSlots {
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
margin: 0 auto;
background: #ffd;
}
#cardSlots, #cardPile {
width: 910px;
height: 120px;
padding: 20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardSlots div, #cardPile div {
float: left;
width: 58px;
height: 78px;
padding: 10px;
padding-top: 40px;
padding-bottom: 0;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {
border-style: dashed;
}
#cardPile div {
background: #666;
color: #fff;
font-size: 50px;
text-shadow: 0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
/* Individually coloured cards */
#card1.correct { background: red; }
#card2.correct { background: brown; }
#card3.correct { background: orange; }
#card4.correct { background: yellow; }
#card5.correct { background: green; }
#card6.correct { background: cyan; }
#card7.correct { background: blue; }
#card8.correct { background: indigo; }
#card9.correct { background: purple; }
#card10.correct { background: violet; }
/* "You did it!" message */
#successMessage {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
</style>
<div id="content">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
</div>

Related

How to add a search button action in autocomplete search

I'm having problem in one issue. Blogger autocomplete search. I'm novice in programming. I want to add a button in the bottom which will work as a search submit / action button.
Here's my code:
<style type="text/css">
#searchForm {
display: inline-block;
position: relative;
width: 500px;
}
#searchForm input {
background: transparent;
font-size: 14px;
line-height: 27px;
text-indent: 14px;
width: 90%;
color: #212121;
border: 1px solid #e0e0e0;
border-right: none;
border-radius: 2px 0 0 2px;
outline: 0;
}
#searchForm input:hover,
#searchForm button:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
#searchForm button {
width: 60px;
border: 1px solid #e0e0e0;
border-radius: 0 2px 2px 0;
background: rgb(230, 230, 230);
cursor: pointer;
position: absolute;
top: 10px;
outline: 0;
line-height: 27px;
}
#searchForm button svg {
vertical-align: middle;
width: 21px;
height: 21px;
}
.results {
position: absolute;
top: 50px;
background: #fff;
border: 1px solid #e0e0e0;
width: 90%;
min-width: 320px;
border-top: unset;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.results li {
line-height: 15px;
list-style: none;
}
.results li a {
display: block;
padding: 0 15px;
color: #212121;
font-size: 15px;
font-weight: 500;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.results li:hover {
background: rgb(230, 230, 230);
}
.hidden {
display: none !important;
}
.expanded_result {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="searchForm" action="/search">
<input autocomplete="off" name="q" placeholder="Search" value="" />
</form>
<ul id="rslt" class="results hidden"></ul>
<button class="clear-text hidden">×</button>
<script>
//<![CDATA[
$(window).on("load", function () {
$("#searchForm input").on("keyup", function (e) {
var textinput = $(this).val();
if (textinput) {
$.ajax({
type: "GET",
url: "https://www.soratemplates.com/feeds/posts/summary",
data: {
alt: "json",
q: textinput,
},
dataType: "jsonp",
success: function (data) {
$(".results,.clear-text").removeClass("hidden");
$(".results").empty();
let seeMoreArr = [];
function mk_list_dom(postUrl, postTitle) {
return (
"<li><a href=" +
postUrl +
' title="' +
postTitle +
'">' +
postTitle +
"</li>"
);
}
if (data.feed.entry) {
for (var i = 0; i < data.feed.entry.length; i++) {
for (var j = 0; j < data.feed.entry[i].link.length; j++) {
if (data.feed.entry[i].link[j].rel == "alternate") {
var postUrl = data.feed.entry[i].link[j].href;
break;
}
}
var postTitle = data.feed.entry[i].title.$t;
i < 10 && $(".results").append(mk_list_dom(postUrl,
postTitle));
i > 9 && seeMoreArr.push({ postUrl, postTitle });
}
/*
data.feed.entry.length > 9 &&
$(".results").append(
'<div class="expand_"> <div class="expanded_result"></div> <button class="expand_btn">see more</button></div>'
),
seeMoreArr.forEach(({ postUrl, postTitle }) => {
$(".expanded_result").append(mk_list_dom(postUrl, postTitle));
}),
$(".expand_btn").on("click", (e) => {
$(".expanded_result").toggle();
$(e.target).text(function (i, text) {
return text === "see more" ? "see less" : "see more";
});
});
*/
} else {
$(".results").append(
"<div> No results </div>"
);
}
data.feed.entry
? $(".results").append(
"<div>found result: " + data.feed.entry.length + "</div>"
)
: $(".results").append("<div>found result: 0</div>");
},
});
} else {
$(".results,.clear-text").addClass("hidden");
}
});
$(".clear-text").click(function () {
$("#searchForm input").val("");
$(".results,.clear-text").addClass("hidden");
$(".results").empty();
});
});
//]]>
</script>
I want to add a button at the bottom of result div or section, which Will work as submit / search button. By clicking people can go to search results.
If anyone know, please help me.

You can show the code with snippets so people can better understand your question.
As for your question, the code that adds a button is already available where you shared it. It was a script that memorized after 9 recordings and added the results when you said show more. You put it in the comment line. With a small change, you can update it as a button that leads to the page you want as follows.
//<![CDATA[
$(window).on("load", function () {
$("#searchForm input").on("keyup", function (e) {
var textinput = $(this).val();
if (textinput) {
$.ajax({
type: "GET",
url: "https://www.ilmulislam.com/feeds/posts/summary",
data: {
alt: "json",
q: textinput,
},
dataType: "jsonp",
success: function (data) {
$(".results,.clear-text").removeClass("hidden");
$(".results").empty();
let seeMoreArr = [];
function mk_list_dom(postUrl, postTitle) {
return (
"<li><a href=" +
postUrl +
' title="' +
postTitle +
'">' +
postTitle +
"</li>"
);
}
if (data.feed.entry) {
for (var i = 0; i < data.feed.entry.length; i++) {
for (var j = 0; j < data.feed.entry[i].link.length; j++) {
if (data.feed.entry[i].link[j].rel == "alternate") {
var postUrl = data.feed.entry[i].link[j].href;
break;
}
}
var postTitle = data.feed.entry[i].title.$t;
if (i < 10) {
$(".results").append(mk_list_dom(postUrl, postTitle))
} else {
seeMoreArr.push({ postUrl, postTitle })
}
}
if (data.feed.entry.length > 1){
$(".results").append(
'<div class="expand_"> <div class="expanded_result"></div> <button class="expand_btn">see all</button</div>'
);
}
$(".expand_btn").on("click", (e) => {
alert("redirect to : www.google.com/search?q=" + textinput)
});
/*
data.feed.entry.length > 9 &&
$(".results").append(
'<div class="expand_"> <div class="expanded_result"></div> <button class="expand_btn">see more</button></div>'
),
seeMoreArr.forEach(({ postUrl, postTitle }) => {
$(".expanded_result").append(mk_list_dom(postUrl, postTitle));
}),
$(".expand_btn").on("click", (e) => {
$(".expanded_result").toggle();
$(e.target).text(function (i, text) {
return text === "see more" ? "see less" : "see more";
});
});
*/
} else {
$(".results").append(
"<div> No results </div>"
);
}
data.feed.entry
? $(".results").append(
"<div>found result: " + data.feed.entry.length + "</div>"
)
: $(".results").append("<div>found result: 0</div>");
},
});
} else {
$(".results,.clear-text").addClass("hidden");
}
});
$(".clear-text").click(function () {
$("#searchForm input").val("");
$(".results,.clear-text").addClass("hidden");
$(".results").empty();
});
});
//]]>
#searchForm {
display: inline-flex;
position: relative;
width: 100%;
}
#searchForm input {
background: transparent;
font-size: 14px;
line-height: 27px;
text-indent: 14px;
width: 90%;
color: #212121;
border: 1px solid #e0e0e0;
border-right: none;
border-radius: 2px 0 0 2px;
outline: 0;
}
#searchForm input:hover,
#searchForm button:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
#searchForm button {
width: 10%;
border: 1px solid #e0e0e0;
border-radius: 0 2px 2px 0;
background: rgb(230, 230, 230);
cursor: pointer;
outline: 0;
line-height: 27px;
}
#searchForm button svg {
vertical-align: middle;
width: 21px;
height: 21px;
}
.results {
position: absolute;
margin:0;
padding-left: 0;
background: #fff;
border: 1px solid #e0e0e0;
width: 100%;
border-top: unset;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.results li {
line-height: 15px;
list-style: none;
}
.results li a {
display: block;
padding: 0 15px;
color: #212121;
font-size: 15px;
font-weight: 500;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.results li:hover {
background: rgb(230, 230, 230);
}
.hidden {
display: none !important;
}
.expanded_result {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position:absolute;top:50px;width:500px;">
<form id="searchForm" action="/search">
<input autocomplete="off" name="q" placeholder="Search" value="" />
<button class="clear-text hidden">×</button>
</form>
<ul id="rslt" class="results hidden"></ul>
</div>

jQuery date range selector not working in Firefox and Edge

Have a look at my code:
$(function() {
$("#slider-range").slider({
range: true,
min: new Date('2010.01.01').getTime() / 1000,
max: new Date('2020.03.31').getTime() / 1000,
step: 86400,
values: [new Date('2012.07.12').getTime() / 1000, new Date('2013.02.01').getTime() / 1000],
slide: function(event, ui) {
$("#amount").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
}
});
$("#amount").val((new Date($("#slider-range").slider("values", 0) * 1000).toDateString()) +
" - " + (new Date($("#slider-range").slider("values", 1) * 1000)).toDateString());
});
$(function() {
$("#slider-range2").slider({
range: true,
min: new Date('2010.01.01').getTime() / 1000,
max: new Date('2020.03.31').getTime() / 1000,
step: 86400,
values: [new Date('2012.07.12').getTime() / 1000, new Date('2013.02.01').getTime() / 1000],
slide: function(event, ui) {
$("#amount2").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
}
});
$("#amount2").val((new Date($("#slider-range2").slider("values", 0) * 1000).toDateString()) +
" - " + (new Date($("#slider-range2").slider("values", 1) * 1000)).toDateString());
});
body {
font-family: sans-serif;
background: #f9f9f9;
}
body *,
body *:before,
body *:after {
box-sizing: border-box;
}
.date-range-col {
width: 100%;
border: 1px solid #e2e2e2;
background: #fff;
padding: 10px;
}
.date-range-col .date-range-item {
margin-bottom: 25px;
}
.date-range-col .date-range-display {
display: flex;
font-size: 13px;
margin-bottom: 10px;
}
.date-range-col .date-range-display label {
font-weight: normal;
width: 40%;
align-items: center;
display: flex;
}
.date-range-col .date-range-display input {
width: auto;
text-align: center;
color: #000;
border: 1px solid #eee;
margin-left: auto;
font-weight: normal;
padding: 6px 3px;
border-radius: 4px;
font-size: 12px;
}
.date-range-col .ui-widget-content {
background: #d6d8e7;
border-radius: 10px;
height: 9px;
border: 0;
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.date-range-col .ui-widget-content .ui-state-default {
background: #57669f;
border-radius: 100%;
border: 3px solid #d5d8e7;
cursor: pointer;
outline: 0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
}
.date-range-col .ui-widget-content .ui-state-default:hover {
background: #6f81c7;
}
.date-range-col .ui-slider-horizontal .ui-slider-handle {
top: -0.36em;
}
.date-range-col .ui-slider .ui-slider-handle {
width: 22px;
height: 22px;
}
.date-range-col .ui-widget-header {
background: #8b959f;
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="date-range-col">
<div class="date-range-item">
<div class="date-range-display">
<label for="amount">Production Date:</label>
<input type="text" id="amount" size="28" readonly/>
</div>
<div id="slider-range"></div>
</div>
<div class="date-range-item">
<div class="date-range-display">
<label for="amount2">Production Date:</label>
<input type="text" id="amount2" size="28" readonly/>
</div>
<div id="slider-range2"></div>
</div>
</div>
It is not working in Mozilla Firefox.
Is there any solution to solve this problem?

The date format you specified is invalidated in firefox.
Please use forward slash format for the date. like:
new Date('2010/01/01')

plus / minus accordion list

I have code below for an accordion list. How do I get a plus and minus sign in the left corner of the heading when opened I open and close the list, without changing the position of the text? Anything helps, cheers.
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
<section class="accordion js"><section class="sections">
<h1>
<span style="font-size: 18px;">1</span></h1>
<div>
<br/>
<p id="p">One</p>
</div> </section>
<br style="line-height: 15px;"/><section class="sections2">
<h1>
<span style="font-size: 18px;">2</span></h1>
<div>
<br/>
<p id="p">Two</p>
</div>
</section>

You'll have to add <span class="chevrone"></span> to each h1, and include css, I've added below. Note, that no additional javascript needed.
Additional CSS
.accordion.js .chevrone {
position: absolute;
left: 30px;
}
.accordion.js > *:not(.expanded) .chevrone:before {
content: '+';
}
.accordion.js >.expanded .chevrone:before {
content: '-';
}
Modified snippet
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion h1 {
width:100%;
}
.accordion.js .chevrone {
position: absolute;
left: 30px;
}
.accordion.js > *:not(.expanded) .chevrone:before {
content: '+';
}
.accordion.js >.expanded .chevrone:before {
content: '-';
}
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
<section class="accordion js"><section class="sections">
<h1>
<span class="chevrone" ></span>
<span style="font-size: 18px;">1</span></h1>
<div>
<br/>
<p id="p">One</p>
</div> </section>
<br style="line-height: 15px;"/><section class="sections2">
<h1>
<span class="chevrone" ></span>
<span style="font-size: 18px;">2</span></h1>
<div>
<br/>
<p id="p">Two</p>
</div>
</section>

Plus / Minus pictures for accordion list

The code below is for an accordion list I have created using HTML, CSS and JavaScript. Is there any way add a plus and minus picture in the left corner of the heading? So when I clicked on heading "A" or "B" the picture goes from the plus sign to the minus sign. Here are the two images I would like to use:
https://www.independencecenter.org/wp-content/uploads/2014/04/wellness.png
https://web.archive.org/web/20150227045704/http://licensing.paperbagrecords.com/wp-content/themes/licensing/assets/images/minus.png
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
<style>
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
</style>
<section class="accordion js">
<section class="sections">
<h1><span style="font-size: 18px;">A</span></h1>
<div>
<p class="p" style="text-align: center;"><span style="color: #007a5e;">aerheahqeh.</span></p>
</div>
</section>
<br style="line-height: 15px;"/>
<section class="sections2">
<h1><span style="font-size: 18px;">B</span></h1>
<div>
<p class="p" style="text-align: center;">Twtjwrjwrj </p>
</div>
</section>
</section>

Use pseudo-elements on the child of your expanded class and a background image. Something like:
.accordion.js h1{
position:relative;
}
.accordion.js h1::before{
content: "";
display:block;
height:20px;
width:20px;
position:absolute;
left:0;
top:0;
background: url(YourPlusImageUrlHere);
}
.accordion.js .expanded h1::before{
background: url(YourMinusImageUrlHere);
}
Adjust for your styles.

drag and drop - the elements don't drop

i'm making a drag and drop quiz here's the full code
<!doctype html>
<html>
<head>
<title>A jQuery Drag-and-Drop quiz</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
var correctCards = 0;
$( init );
function init() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '250px',
width: 0,
height: 0
} );
// Reset the game
correctCards = 0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
// Create the pile of shuffled cards
var numbers = ["A","B","C"];
numbers.sort( function() { return Math.random() - .5 } );
for ( var i=0; i<3; i++ ) {
$('<div>' + "<img src = \"" + numbers [i] + ".gif\" width = \"105\" height = \"100\" />"+ '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
var words = [ 'A', 'B', 'C'];
for ( var i=1; i<=3; i++ ) {
$('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );
// If the card was dropped to the correct slot,
// change the card colour, position it directly
// on top of the slot, and prevent it being dragged
// again
if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go
if ( correctCards == 3 ) {
$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
} );
}
}
</script>
</head>
<body>
<div class="wideBox">
<h1>Drag-and-Drop with jQuery: Your Essential Guide</h1>
<h2>A Number Cards Game</h2>
</div>
<div id="content">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
</div>
</body>
</html>
originally in the numbers array used to be numbers and it was working fine but then when i changed the numbers into pictures, i'm able to drag them but i'm not able to drop in the right place, like .. they are dragable but not dropable ! i didn't touch the code i only changed the array and the loop to show the pictures, anyone have any idea what to do, please ?
this is the style.css file
/* Main content area */
.wideBox {
clear: both;
text-align: center;
margin: 70px;
padding: 10px;
background: #ebedf2;
border: 1px solid #333;
}
/* Slots for final card positions */
#cardSlots {
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
margin: 0 auto;
background: #ffd;
}
#cardSlots, #cardPile {
width: 910px;
height: 120px;
padding: 20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardSlots div, #cardPile div {
float: left;
width: 58px;
height: 78px;
padding: 10px;
padding-top: 40px;
padding-bottom: 0;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {
border-style: dashed;
}
#cardPile div {
background: #666;
color: #fff;
font-size: 50px;
text-shadow: 0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
/* Individually coloured cards */
#card1.correct { background: red; }
#card2.correct { background: brown; }
#card3.correct { background: orange; }
#card4.correct { background: yellow; }
#card5.correct { background: green; }
#card6.correct { background: cyan; }
#card7.correct { background: blue; }
#card8.correct { background: indigo; }
#card9.correct { background: purple; }
#card10.correct { background: violet; }
/* "You did it!" message */
#successMessage {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
the code is originally for 10 elements in an array please help

well, i've found an answer, if someone is gonna need this code you just need to edit
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'string' );
var cardNumber = ui.draggable.data( 'string' );
this way it will detect the strings :)
have a nice day

<!doctype html>
<html lang="en">
<head>
<title>A jQuery Drag-and-Drop Card Game</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery-ui.min.js"></script>
<script type="text/javascript">
var correctCards = 0;
$( init );
function init() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '250px',
width: 0,
height: 0
} );
// Reset the game
correctCards = 0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
<!-- this shows how many cards -->
// Create the pile of shuffled cards
var numbers = [ 'a','b','c','d'];
numbers.sort( function() { return Math.random() - .2 } );
<!-- Note make sure you name your cards a.gif, b.gif, c.gif, d.gif -->
for ( var i=0; i<4; i++ ) {
$('<div>' + "<img src = \"" + numbers [i] + ".gif\" width =\"60\"height = \"100\" />"+ '</div>').data( 'string', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
var words = [ 'a', 'b', 'c', 'd'];
for ( var i=1; i<=4; i++ ) {
$('<div>' + words[i-1] + '</div>').data( 'string', words[i-1] ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'string' );
var cardNumber = ui.draggable.data( 'string' );
// If the card was dropped to the correct slot,
// change the card colour, position it directly
// on top of the slot, and prevent it being dragged
// again
if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go
if ( correctCards == 4 ) {
$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
} );
}
}
</script>
</head>
<body>
<div class="wideBox">
<h1>Drag-and-Drop with jQuery</h1>
<h2>Card Game</h2>
</div>
<div id="content">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
</body>
</html>

/* style.css */
/* This game works in Chrome */
/* Add some margin to the page and set a default font and colour */
body {
margin: 30px;
font-family: "Georgia", serif;
line-height: 1.8em;
color: #333;
}
/* Give headings their own font */
h1, h2, h3, h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/* Main content area */
#content {
margin: 80px 70px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Header/footer boxes */
.wideBox {
clear: both;
text-align: center;
margin: 70px;
padding: 10px;
background: #ebedf2;
border: 1px solid #333;
}
.wideBox h1 {
font-weight: bold;
margin: 20px;
color: #666;
font-size: 1.5em;
}
/* Slots for final card positions */
#cardSlots {
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
margin: 0 auto;
background: #ffd;
}
#cardPile {
width: 360px;
height: 120px;
padding: 20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
#cardSlots {
width: 360px;
height: 120px;
padding: 20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardPile div {
float: left;
width: 58px;
height: 78px;
padding: 10px;
padding-top: 5px;
padding-bottom: 34px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
}
#cardSlots div {
float: left;
width: 58px;
height: 78px;
padding: 10px;
padding-top: 40px;
padding-bottom: 0;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
}
#cardSlots div:first-child {
margin-left: 0;
}
#cardPile div:first-child {
margin-left: 0;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {
border-style: dashed;
background: #666;
font-size: 50px;
}
#cardPile div {
background: red;
color: #fff;
font-size: 50px;
text-shadow: 0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
}
/* Individually coloured cards */
/* Note carda will not turn to a new colour */
#carda.correct { background: blue; }
#cardb.correct { background: green; }
#cardc.correct { background: orange; }
#cardd.correct { background: yellow; }
/* "You did it!" message */
#successMessage {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}

Categories