We Keep Coding

Responsive `slide toggle` to slide from the bottom in website for mobile

I have a function slide toggle slides from right to left to show information in my webside. It works fine on windows but when I open my website on mobile my slide toggle covers the whole website screen. How can I change the slide toggle to slide from the bottom and be responsive for mobile interface or less than 750px.
This is my code for slide toggle:
var easing = 1;
var animation_speed = 200;
var slider_width;
var is_collapsed = true;
function slideToggle() {
is_collapsed = $('#btn').css("margin-right") == slider_width + "px" && !$('#btn').is(':animated');
var sign = (is_collapsed) ? '-' : '+';
if (!$('#btn').is(':animated')) {
if (easing) $('.willSlide').animate({
"margin-right": sign + '=' + slider_width
}, animation_speed);
else $('.willSlide').animate({
"margin-right": sign + '=' + slider_width
}, animation_speed);
}
(is_collapsed) ? $('.willSlide').removeClass('expanded'): $('.willSlide').addClass('expanded');
}
//function to open slide
function slideOpen() {
//if is_collapsed is true, animate div and open slider
if (is_collapsed) {
var sign = '+'
$('.willSlide').animate({
"margin-right": sign + '=' + slider_width
}, animation_speed);
//add expanded class to button when opened
$('.willSlide').addClass('expanded')
//set is_collapsed to false so it won't close slider on additional clicks
is_collapsed = false
}
}
$(document).ready(function() {
slider_width = $('#content').width(); //get width automaticly
$('#btn').click(slideToggle);
});
#content {
position: fixed;
height: 100%;
background: rgb(97, 97, 97);
width: 450px;
right: 0px;
margin-right: -450px;
}
#btn {
position: fixed;
width: 100px;
right: 0px;
background: rgb(117, 231, 117);
top: 100px;
border-radius: 5px 0px 0 5px;
color: #fff;
text-align: center;
padding: 40px 0;
cursor: pointer
}
.expandedTxt {
display: none
}
#btn.expanded .expandedTxt {
display: block
}
#btn.expanded .click {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="willSlide" id='content'></div>
<div class="willSlide" id='btn'>
<span class="click">open</span>
<span class="expandedTxt">close</span>
</div>
Here is demo for slide toggle

Div's not sorting according to classes

I found this article that's supposed to be related to what I was looking for, which is sorting a list by class. However, in my code, it didn't work. So I'm trying to figure out how to solve the problem. I have two classes, "offline" and "none". I want the class "offline" to come at top and the class "none" to appear at bottom under "offline" area. I have one more class in each div's which is "indbox", therefore, I tried to use "getElementsByClassName" but it's not working.
Here's my code from codepen.
$(document).ready(function() {
$(".con-button").click(function(){
var cssObj = {};
cssObj.left = $(this).position().left;
cssObj.width = $(this).outerWidth();
$(".controls .effect").css( cssObj );
if(this.id == "c-all") {
$('.offline').hide();
$('.offline').fadeIn("slow").show();
$('.online').hide();
$('.online').fadeIn("slow").show();
$('.none').fadeIn("slow").show();
} else if (this.id == "c-online") {
$('.offline').hide();
$('.online').hide();
$('.online').fadeIn("slow").show();
$('.none').hide();
} else if (this.id == "c-offline") {
$('.offline').hide();
$('.offline').fadeIn("slow").show();
$('.online').hide();
$('.none').hide();
}
});
$(".con-button").eq(0).trigger("click");
getSteams();
var elem = $('#offline').find('div').sort(sortMe);
function sortMe(a, b) {
return a.getElementsByClassName("offline") < b.getElementsByClassName("none");
}
$('#offline').append(elem);
});
var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "OgamingSC2", "maatukka", "Vinesauce", "brunofin", "comster404", "esl_csgo"];
var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?";
function getSteams() {
channels.forEach(function(indchannel) {
//for (var channel in channels) {
//var indchannel = channel;
var streamURL = "https://api.twitch.tv/kraken/streams/" + indchannel + cb;
var channelURL = "https://api.twitch.tv/kraken/channels/" + indchannel + cb;
$.ajax({
url: streamURL,
type: 'GET',
dataType: "jsonp",
data: {
//action: 'query',
format: 'json',
},
headers: {
"Accept": "application/vnd.twitchtv.v5+json",
},
success: function(data) {
var game;
var status;
if(data.stream === null) {
$.getJSON(data._links.channel + "/?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?", function(data2) {
if(data2.status == 404) {
game = "The Account doesn't exist";
status = "none";
} else {
game = "Offline";
status = "offline";
}
$("#offline").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
} );
} else {
game = data.stream.game;
status = "online";
$("#online").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
};
}
});
});
}
html, body{
height:100%;
margin: 0;
background-color: #ffffff;
}
.wrapper {
text-align: center;
position: relative;
width: 100%;
height: 100%;
display:block;
}
.container {
width: 75%;
margin: 30px auto 0;
position: relative;
}
.logobox img {
width: 20%;
margin: 0 auto;
}
.controls {
position: relative;
width: 100%;
}
.con-button {
position: relative;
background-color: white;
border: none;
margin: 0.5em 0 0 0;
padding: 0.5em 1em 0.5em 1em;
text-align: center;
color: rgb(100,65,164);
font-size: 20px;
transition: .4s;
}
.con-button:hover {
cursor: pointer;
/*border-bottom: 3px solid rgba(224, 217, 236, 1);*/
}
.con-button:focus {outline: 0;}
.divider hr {
border-top: 1px solid #6441A4;
}
.effect {
position: absolute;
display: block;
left: 0;
bottom: 5px;
height: 2px;
width: 60px;
transition: 0.4s ease-in-out;
/*border-bottom: 3px solid rgba(100, 65, 164, 1);*/
background: #6441A4;
}
.indbox {
width: 100%;
display: block;
margin: 5px 0px;
padding: 8px 0px;
}
.online {
background-color: #98FB98;
}
.offline {
background-color: #ff9999;
}
.none {
background-color: #D3D3D3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="twitchtvarea">
<div class="logobox">
<img src="https://s6.postimg.org/bay7stotd/Twitch_Purple_RGB.png" />
</div>
<div class="twitchbox">
<div class="controls">
<button id="c-all" class="con-button active" type="button">All</button>
<button id="c-online" class="con-button" type="button">Online</button>
<button id="c-offline" class="con-button" type="button">Offline</button>
<div class="effect"></div>
</div>
<div class="divider"><hr></div>
<div id="online"></div>
<div id="offline"></div>
</div>
</div>
</div>
</div>
The code I would like for you to focus on is:
var elem = $('#offline').find('div').sort(sortMe);
function sortMe(a, b) {
return a.getElementsByClassName("offline") < b.getElementsByClassName("none");
}
$('#offline').append(elem);
Please help me fix it.

Looking through your code, I find out that you are using thisSort Function; however, your way of doing is incorrect. In the example, they have:
function compare(a, b) {
if (a is less than b by some ordering criterion) {
return -1;
}
if (a is greater than b by the ordering criterion) {
return 1;
}
// a must be equal to b
return 0;
}
So in order to sort "offline" before "none", your function has to return 1
function sortMe(a, b){
if (a.hasClass("offline")) {
return 1; //if an element has offline, move it above.
} else {
return -1; //if an element doesn't have offline, it means it's none. Move it down.
}
}
You might want to add in the condition to check whether they both have offline class.

Your problem can be solved by using the :
appendTo();
method.
instead of the :
append();
method.
I added two additional divs in your html code and made a small change to your javascript code ant it works !!!
the html goes like this :
<div class="divider"><hr></div>
<div id="online"></div>
<div id="offline">
<div class="notconnected"></div>
<div class="nonexisting"></div>
</div>
</div>
and the javascript was changed here :
if(data2.status == 404) {
game = "The Account doesn't exist";
status = "none";
}
else {
game = "Offline";
status = "offline";
}
if(status==="none"){
$('<div class="indbox ' + status + '" id="'+status+'"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>').appendTo(".nonexisting");}
else{
$('<div class="indbox ' + status + '" id="'+status+'"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>').appendTo(".notconnected");
}
} );
The Documentation for the method is here : appendTo()

Generate Excel file thumbnail preview in Javascript

I have a project handling a library of excel files. To make it easilier for the users to visually scan them, I would like to generate preview thumbnail images of their content. Google drive does this (screenshot below) but I have no idea how.
Any ideas/suggestions on how this could be done (without using the drive API) ?

I guess this is what you need
http://github.com/lonekorean/mini-preview
DEMO
/*
* MiniPreview v0.9
*
* #author Will Boyd
* #github http://github.com/lonekorean/mini-preview
*/
(function($) {
var PREFIX = 'mini-preview';
// implemented as a jQuery plugin
$.fn.miniPreview = function(options) {
return this.each(function() {
var $this = $(this);
var miniPreview = $this.data(PREFIX);
if (miniPreview) {
miniPreview.destroy();
}
miniPreview = new MiniPreview($this, options);
miniPreview.generate();
$this.data(PREFIX, miniPreview);
});
};
var MiniPreview = function($el, options) {
this.$el = $el;
this.$el.addClass(PREFIX + '-anchor');
this.options = $.extend({}, this.defaultOptions, options);
this.counter = MiniPreview.prototype.sharedCounter++;
};
MiniPreview.prototype = {
sharedCounter: 0,
defaultOptions: {
width: 256,
height: 144,
scale: .25,
prefetch: 'pageload'
},
generate: function() {
this.createElements();
this.setPrefetch();
},
createElements: function() {
var $wrapper = $('<div>', { class: PREFIX + '-wrapper' });
var $loading = $('<div>', { class: PREFIX + '-loading' });
var $frame = $('<iframe>', { class: PREFIX + '-frame' });
var $cover = $('<div>', { class: PREFIX + '-cover' });
$wrapper.appendTo(this.$el).append($loading, $frame, $cover);
// sizing
$wrapper.css({
width: this.options.width + 'px',
height: this.options.height + 'px'
});
// scaling
var inversePercent = 100 / this.options.scale;
$frame.css({
width: inversePercent + '%',
height: inversePercent + '%',
transform: 'scale(' + this.options.scale + ')'
});
// positioning
var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
var top = (this.$el.height() + fontSize) / 2;
var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
$wrapper.css({
top: top + 'px',
left: left + 'px'
});
},
setPrefetch: function() {
switch (this.options.prefetch) {
case 'pageload':
this.loadPreview();
break;
case 'parenthover':
this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
case 'none':
this.$el.one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
default:
throw 'Prefetch setting not recognized: ' + this.options.prefetch;
break;
}
},
loadPreview: function() {
this.$el.find('.' + PREFIX + '-frame')
.attr('src', this.$el.attr('href'))
.on('load', function() {
// some sites don't set their background color
$(this).css('background-color', '#fff');
});
},
getNamespacedEvent: function(event) {
return event + '.' + PREFIX + '_' + this.counter;
},
destroy: function() {
this.$el.removeClass(PREFIX + '-anchor');
this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
this.$el.off(this.getNamespacedEvent('mouseenter'));
this.$el.find('.' + PREFIX + '-wrapper').remove();
}
};
})(jQuery);
.mini-preview-anchor {
display: inline-block;
position: relative;
white-space: nowrap;
}
.mini-preview-wrapper {
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
overflow: hidden;
z-index: -1;
opacity: 0;
margin-top: -4px;
border: solid 1px #000;
box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}
.mini-preview-anchor:hover .mini-preview-wrapper {
z-index: 2;
opacity: 1;
margin-top: 6px;
transition: opacity .3s, margin-top .3s;
}
.mini-preview-loading, .mini-preview-cover {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.mini-preview-loading {
display: table;
height: 100%;
width: 100%;
font-size: 1.25rem;
text-align: center;
color: #f5ead4;
background-color: #59513f;
}
.mini-preview-loading::before {
content: 'Loading...';
display: table-cell;
text-align: center;
vertical-align: middle;
}
.mini-preview-cover {
background-color: rgba(0, 0, 0, 0); /* IE fix */
}
.mini-preview-frame {
border: none;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MiniPreview Demo</title>
<link href="http://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<style>
body {
height: 100%;
margin: 0;
padding: 0 10% 40px;
font-size: 2rem;
line-height: 1.5;
font-family: 'Roboto Slab', sans-serif;
text-align: justify;
color: #59513f;
background-color: #f5ead4;
}
a {
color: #537f7c;
}
.break {
text-align: center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- MiniPreview stuff here -->
<link href="./jquery.minipreview.css" rel="stylesheet">
<script src="./jquery.minipreview.js"></script>
<script>
$(function() {
$('#p1 a').miniPreview({ prefetch: 'pageload' });
$('#p2 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'none' });
});
</script>
</head>
<body>
<p id="p1">
This demo shows how to add live mini-previews to links on hover. Check out these links to SitePoint and A List Apart. Hover over them to see a small preview of what they point to.
</p>
<p class="break">• • •</p>
<p id="p2">
Those previews were fetched as soon as this page loaded. This is great for having the previews ready ahead of time, but can eat up extra bandwidth. As an alternative, check out these links to Abduzeedo and Smashing Magazine. These previews aren't fetched until you hover over this paragraph.
</p>
<p class="break">• • •</p>
<p id="p3">
Finally, check out these links to Daniel's blog, Joni's blog, and my blog. These previews are only fetched when needed. This saves the most bandwidth, but there will be a delay before the previews can be shown.
</p>
</body>
</html>
ORIGINAL SOURCE:
http://codepen.io/kanakiyajay/pen/NqgZjo

I just use a library to generate a PNG preview of the excel file and show it.
I use Free Spire.XLS for .NET because I'm in the .net world, but you can look at Wijmo Workbook Viewer for your Node.js needs.

How to recover an active div

I try to use the jquery flip to display information on an div flip.
JSFIDDLE
I have a first div called "workListId", under a second div called "workId".
Under the div workId, two another div called "workDataId" and "workFlipId".
Under the div workDataId, two another div called "workDescriptionId" and "workURLId"
I have a problem with the div workDescriptionID.
If I flip the div in the order, I see the description in order too.
But if Iflip the third div(for example), I see the description of the first div.
I think the problem is about this line but I don't know to resolve it :
elt.html($('.workData').html());
So see my code below :
$(function(){
// A - CONSTRUCT THE DIV
for ( var i in works ){
// work div
$('<div/>', {
'id' : 'workId' + i,
'class' : 'work'
}).appendTo("#workListId");
// workFlip div
$('<div/>', {
'id' : 'workFlipId' + i,
'class' : 'workFlip'
}).appendTo("#workId" + i);
// workData div
$('<div/>', {
'id' : 'workDataId' + i,
'class' : 'workData'
}).appendTo("#workId" + i);
// workDescription div
$('<div/>', {
'id' : 'workDescriptionId' + i,
'class' : 'workDescription'
}).appendTo("#workDataId" + i);
// workURL div
$('<div/>', {
'id' : 'workURLId' + i,
'class' : 'workURL'
}).appendTo("#workDataId" + i);
// Insert the content in each div
$("#workFlipId" + i).html(path.pathBegin + works[i].image + path.pathEnd);
$("#workDescriptionId" + i).html('<p>' + works[i].description + '</p>');
$("#workURLId" + i).html('Read more...');
}//End for
// B - CONSTRUCT THE DIV FLIP
/* The code is executed once the DOM is loaded */
$('.work').bind("click",function(){
// $(this) point to the clicked .workFlip element (caching it in elem for speed):
var elt = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elt.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elt.revertFlip();
// Setting the flag:
elt.data('flipped',true);
}// End if
else
{
// Using the flip method defined by the plugin:
elt.flip({
direction: params.direction,
color: params.color,
speed: params.speed,
onBefore: function(){
// Insert the contents of the .workData div (hidden from view with display:none)
// into the clicked .workFlip div before the flipping animation starts:
elt.html($('.workFlip').siblings('.workData').html());
}
});// End $this.flip
// Setting the flag:
elt.data('flipped',true);
}// End else
});// End function work
});// End function

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
<script type="text/javascript">
eval(function (p, a, c, k, e, r) { e = function (c) { return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36)) }; if (!''.replace(/^/, String)) { while (c--) r[e(c)] = k[c] || e(c); k = [function (e) { return r[e] } ]; e = function () { return '\\w+' }; c = 1 }; while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); return p } ('(5($){5 H(a){a.1D.1f[a.1E]=1F(a.1G,10)+a.1H}6 j=5(a){1I({1J:"1g.Z.1K 1L 1M",1N:a})};6 k=5(){7(/*#1O!#*/11&&(1P 1Q.1h.1f.1R==="1S"))};6 l={1T:[0,4,4],1U:[1i,4,4],1V:[1j,1j,1W],1X:[0,0,0],1Y:[0,0,4],1Z:[1k,1l,1l],20:[0,4,4],21:[0,0,A],22:[0,A,A],23:[12,12,12],24:[0,13,0],26:[27,28,1m],29:[A,0,A],2a:[2b,1m,2c],2d:[4,1n,0],2e:[2f,2g,2h],2i:[A,0,0],2j:[2k,2l,2m],2n:[2o,0,R],2p:[4,0,4],2q:[4,2r,0],2s:[0,t,0],2t:[2u,0,2v],2w:[1i,1o,1n],2x:[2y,2z,1o],2A:[1p,4,4],2B:[1q,2C,1q],2D:[R,R,R],2E:[4,2F,2G],2H:[4,4,1p],2I:[0,4,0],2J:[4,0,4],2K:[t,0,0],2L:[0,0,t],2M:[t,t,0],2N:[4,1k,0],2O:[4,S,2P],2Q:[t,0,t],2R:[t,0,t],2S:[4,0,0],2T:[S,S,S],2U:[4,4,4],2V:[4,4,0],9:[4,4,4]};6 m=5(a){T(a&&a.1r("#")==-1&&a.1r("(")==-1){7"2W("+l[a].2X()+")"}2Y{7 a}};$.2Z($.30.31,{u:H,v:H,w:H,x:H});$.1s.32=5(){7 U.1t(5(){6 a=$(U);a.Z(a.B(\'1u\'))})};$.1s.Z=5(i){7 U.1t(5(){6 c=$(U),3,$8,C,14,15,16=k();T(c.B(\'V\')){7 11}6 e={I:(5(a){33(a){W"X":7"Y";W"Y":7"X";W"17":7"18";W"18":7"17";34:7"Y"}})(i.I),y:m(i.D)||"#E",D:m(i.y)||c.z("19-D"),1v:c.J(),F:i.F||1w,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};c.B(\'1u\',e).B(\'V\',1).B(\'35\',e);3={s:c.s(),n:c.n(),y:m(i.y)||c.z("19-D"),1x:c.z("36-37")||"38",I:i.I||"X",G:m(i.D)||"#E",F:i.F||1w,o:c.1y().o,p:c.1y().p,1z:i.1v||39,9:"9",1a:i.1a||11,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};16&&(3.9="#3a");$8=c.z("1b","3b").8(3c).B(\'V\',1).3d("1h").J("").z({1b:"1A",3e:"3f",p:3.p,o:3.o,3g:0,3h:3i});6 f=5(){7{1B:3.9,1x:0,3j:0,u:0,w:0,x:0,v:0,N:3.9,O:3.9,P:3.9,Q:3.9,19:"3k",3l:\'3m\',n:0,s:0}};6 g=5(){6 a=(3.n/13)*25;6 b=f();b.s=3.s;7{"q":b,"1c":{u:0,w:a,x:a,v:0,N:\'#E\',O:\'#E\',o:(3.o+(3.n/2)),p:(3.p-a)},"r":{v:0,u:0,w:0,x:0,N:3.9,O:3.9,o:3.o,p:3.p}}};6 h=5(){6 a=(3.n/13)*25;6 b=f();b.n=3.n;7{"q":b,"1c":{u:a,w:0,x:0,v:a,P:\'#E\',Q:\'#E\',o:3.o-a,p:3.p+(3.s/2)},"r":{u:0,w:0,x:0,v:0,P:3.9,Q:3.9,o:3.o,p:3.p}}};14={"X":5(){6 d=g();d.q.u=3.n;d.q.N=3.y;d.r.v=3.n;d.r.O=3.G;7 d},"Y":5(){6 d=g();d.q.v=3.n;d.q.O=3.y;d.r.u=3.n;d.r.N=3.G;7 d},"17":5(){6 d=h();d.q.w=3.s;d.q.P=3.y;d.r.x=3.s;d.r.Q=3.G;7 d},"18":5(){6 d=h();d.q.x=3.s;d.q.Q=3.y;d.r.w=3.s;d.r.P=3.G;7 d}};C=14[3.I]();16&&(C.q.3n="3o(D="+3.9+")");15=5(){6 a=3.1z;7 a&&a.1g?a.J():a};$8.1d(5(){3.K($8,c);$8.J(\'\').z(C.q);$8.1e()});$8.1C(C.1c,3.F);$8.1d(5(){3.M($8,c);$8.1e()});$8.1C(C.r,3.F);$8.1d(5(){T(!3.1a){c.z({1B:3.G})}c.z({1b:"1A"});6 a=15();T(a){c.J(a)}$8.3p();3.L($8,c);c.3q(\'V\');$8.1e()})})}})(3r);', 62, 214, '|||flipObj|255|function|var|return|clone|transparent||||||||||||||height|top|left|start|second|width|128|borderTopWidth|borderBottomWidth|borderLeftWidth|borderRightWidth|bgColor|css|139|data|dirOption|color|999|speed|toColor|int_prop|direction|html|onBefore|onEnd|onAnimation|borderTopColor|borderBottomColor|borderLeftColor|borderRightColor|211|192|if|this|flipLock|case|tb|bt|flip||false|169|100|dirOptions|newContent|ie6|lr|rl|background|dontChangeColor|visibility|first|queue|dequeue|style|jquery|body|240|245|165|42|107|140|230|224|144|indexOf|fn|each|flipRevertedSettings|content|500|fontSize|offset|target|visible|backgroundColor|animate|elem|prop|parseInt|now|unit|throw|name|js|plugin|error|message|cc_on|typeof|document|maxHeight|undefined|aqua|azure|beige|220|black|blue|brown|cyan|darkblue|darkcyan|darkgrey|darkgreen||darkkhaki|189|183|darkmagenta|darkolivegreen|85|47|darkorange|darkorchid|153|50|204|darkred|darksalmon|233|150|122|darkviolet|148|fuchsia|gold|215|green|indigo|75|130|khaki|lightblue|173|216|lightcyan|lightgreen|238|lightgrey|lightpink|182|193|lightyellow|lime|magenta|maroon|navy|olive|orange|pink|203|purple|violet|red|silver|white|yellow|rgb|toString|else|extend|fx|step|revertFlip|switch|default|flipSettings|font|size|12px|null|123456|hidden|true|appendTo|position|absolute|margin|zIndex|9999|lineHeight|none|borderStyle|solid|filter|chroma|remove|removeData|jQuery'.split('|'), 0, {}))
$(document).ready(function () {
//******************* SETTING THE FLIP ********************//
// direction : Set the direction of the flipped div
// lr : Left to right
// rl : Right to left
// tb : Top to bottom
// bt : Bottom to top
//
// color : Set the color of your div
// speed : Set the time speed to flip (default : 300)
//*********************************************************//
var params = {
direction: 'lr',
color: 'black',
speed: 220
};
//******************* SETTING THE WORKS ********************//
// title : Set the title of your work
// image : Set the image of your work
// description : Set the description of your work
// website : Set the link of your work or your full size image
//
// How to create many works ?
// Simply copy and paste the lines : " title1 : { ... }, "
// after your last works and complete the setting.
//*********************************************************//
var works = {
title1: {
image: 'facebook.png',
description: 'Description One.',
website: 'http://www.facebook.com'
}, // End title1
title2: {
image: 'google.png',
description: 'Description Two.',
website: 'http://www.google.com'
}, // End title2
title3: {
image: 'adobe.png',
description: 'Description Three.',
website: 'http://www.adobe.com'
}// End title3
}; // End var works
//******************* SETTING THE PATH OF WORKS ************//
// pathBegin : Set the path of your works
// pathEnd : DOES NOT CHANGE
//*********************************************************//
var path = {
pathBegin: '<img src="img/works/',
pathEnd: '"/>'
};
// A - CONSTRUCT THE DIV
$.each(works, function (i, work) {
// work div
$('<div/>', {
'id': 'workId' + i,
'class': 'work'
}).appendTo("#workListId");
// workFlip div
$('<div/>', {
'id': 'workFlipId' + i,
'class': 'workFlip'
}).appendTo("#workId" + i);
// workData div
$('<div/>', {
'id': 'workDataId' + i,
'class': 'workData'
}).appendTo("#workId" + i);
// workDescription div
$('<div/>', {
'id': 'workDescriptionId' + i,
'class': 'workDescription'
}).appendTo("#workDataId" + i);
// workURL div
$('<div/>', {
'id': 'workURLId' + i,
'class': 'workURL'
}).appendTo("#workDataId" + i);
// Insert the content in each div
$("#workFlipId" + i).html(path.pathBegin + work.image + path.pathEnd);
$("#workDescriptionId" + i).html('<p>' + work.description + '</p>');
$("#workURLId" + i).html('Read more...');
}); //End foreach
// B - CONSTRUCT THE DIV FLIP
/* The code is executed once the DOM is loaded */
$('.work').bind("click", function () {
// $(this) point to the clicked .workFlip element (caching it in elem for speed):
var elt = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elt.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elt.revertFlip();
// Unsetting the flag:
elt.data('flipped', true);
} // End if
else {
// Using the flip method defined by the plugin:
elt.flip({
direction: params.direction,
color: params.color,
speed: params.speed,
onBefore: function () {
// Insert the contents of the .workData div (hidden from view with display:none)
// into the clicked .workFlip div before the flipping animation starts:
//elt.html($('.workFlip').siblings('.workData').html()); //This Code Will Take only first div workDescription only.
elt.html(elt.find('.workFlip').siblings('.workData').html());
}
}); // End elt.flip
// Setting the flag:
elt.data('flipped', true);
} // End else
}); // End function work
});
</script>
<style type="text/css">
*
{
/* Resetting the default styles of the page */
margin: 0;
padding: 0;
}
body
{
/* Setting default text color, background and a font stack */
font-size: 0.825em;
color: white;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.workList
{
position: relative;
margin: 30px auto;
width: 950px;
}
.work
{
width: 180px;
height: 180px;
float: left;
margin: 5px; /* Giving the work div a relative positioning: */
position: relative;
cursor: pointer;
}
.workFlip
{
/* The work div will be positioned absolutely with respect
to its parent .work div and fill it in entirely */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid #ddd;
background: url("../img/background.jpg") no-repeat center center #f9f9f9;
}
.workFlip:hover
{
border: 1px solid #999; /* CSS3 inset shadow: */
-moz-box-shadow: 0 0 30px #999 inset;
-webkit-box-shadow: 0 0 30px #999 inset;
box-shadow: 0 0 30px #999 inset;
}
.workFlip img
{
/* Centering the logo image in the middle of the workFlip div */
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -70px;
}
.workData
{
/* Hiding the .workData div */
display: none;
}
.workDescription
{
font-size: 11px;
padding: 30px 10px 20px 20px;
font-style: italic;
}
.workURL
{
font-size: 10px;
font-weight: bold;
padding-left: 20px;
}
/* The styles below are only necessary for the styling of the demo page: */
#main
{
position: relative;
margin: 0 auto;
width: 100%;
}
h1
{
padding: 30px 0;
text-align: center;
text-shadow: 0 1px 1px white;
margin-bottom: 30px;
background: url("../img/page_bg.gif") repeat-x bottom #f8f8f8;
}
h1, h2
{
font-family: "Myriad Pro" ,Arial,Helvetica,sans-serif;
}
h2
{
font-size: 14px;
font-weight: normal;
text-align: center;
position: absolute;
right: 40px;
top: 40px;
}
a, a:visited
{
color: #0196e3;
text-decoration: none;
outline: none;
}
a:hover
{
text-decoration: underline;
}
a img
{
border: none;
}
</style>
</head>
<body>
<header></header>
<nav></nav>
<!-- BEGIN CONTENT -->
<div id="main">
<!-- Content of portfolio -->
<div id="workListId" class="workList">
</div>
</div>
<!-- End div id main -->
<!-- END CONTENT -->
<footer></footer>
</body>
</html>

jQuery not appending a drag-and-drop to connected folders

Going for a sort-of Windows explorer-style drag-and-drop folder behavior here. The "// make chapter items droppable" block isn't working - specifically, it's not appending the draggable to the dragged folder's list.
<html>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<style>
ul
{
margin: 0;
padding: 0;
}
ul#chapter_list
{
background: #fff;
}
#chapter_list li
{
list-style-type: none;
position: relative;
}
#chapter_list li .sortable_handle
{
cursor: move;
padding: 2px .5em 5px 5px;
position: relative;
top: -2px;
left: -5px;
}
span.chapter_title
{
cursor: pointer;
padding-left: 36px !important;
background: url(http://www.openwebgraphics.com/resources/data/2296/22x22_folder_orange_open.png) no-repeat 8px 50%;
}
.comic_chapter div, .comic_page
{
border: 2px solid black;
margin-bottom: 1px;
padding: 3px 5px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
li.comic_chapter ul
{
padding: 2px 2px 2px 1em;
margin: 3px;
}
#chapter_list li.drop_highlight div
{
background: darkBlue;
color: white;
}
.comic_chapter div
{
background: LightBlue;
}
.comic_page
{
background: #fff;
}
.chapter-placeholder
{
border: 2px dashed LightBlue;
margin: 2px;
}
.page-placeholder
{
height: 1.6em;
border: 2px dashed #666;
margin: 2px;
}
</style>
</head>
<body>
<script type="text/javascript" />
var chapter_list = {
0 : {
'chapter_title' : 'Un-Chaptered',
'chapter_pages' : {}
},
1 : {
'chapter_title' : 'Chapter 1',
'chapter_pages' : {
1 : {
'page_title' : 'Page 1'
},
2 : {
'page_title' : 'Page 2'
},
3 : {
'page_title' : 'Page 3'
},
4 : {
'page_title' : 'Page 4'
},
5 : {
'page_title' : 'Page 5'
},
6 : {
'page_title' : 'Page 6'
}
}
},
2 : {
'chapter_title' : 'Chapter 2',
'chapter_pages' : {
7 : {
'page_title' : 'Page 7'
},
8 : {
'page_title' : 'Page 8'
},
9 : {
'page_title' : 'Page 9'
},
10 : {
'page_title' : 'Page 10'
}
}
},
3 : {
'chapter_title' : 'Chapter 3',
'chapter_pages' : {
11 : {
'page_title' : 'Page 11'
},
12 : {
'page_title' : 'Page 12'
}
}
}
};
document.write('<ul id="chapter_list">');
for (i in chapter_list) {
chapter = chapter_list[i];
document.write('<li id="chapter_' + i + '" class="comic_chapter">' +
'<div>' +
'<span class="sortable_handle">||</span>');
if (i > 0) document.write('<input type="checkbox" />');
document.write('<span class="chapter_title">' + chapter.chapter_title + '</span>' +
'</div>' +
'<ul id="chapter_' + i + '_pages">');
for (n in chapter.chapter_pages) {
page = chapter.chapter_pages[n];
document.write('<li id="page_' + n + '" class="comic_page">' +
'<span class="sortable_handle">||</span>' +
'<label for="page_' + n + '_chk">' +
'<input type="checkbox" id="page_' + n + '_chk" />' +
' <span class="page_title">' + page.page_title + '</span>' +
'</label>' +
'</li>');
}
document.write('</ul>' +
'</li>');
}
document.write('</ul>');
</script>
<div id="debug"></div>
<script type="text/javascript">
// hide Chapter contents
$('.comic_chapter ul').hide();
// add onClick => toggle chapter-contents visibility
$('.chapter_title').bind('click', function(e){
$(this).parents('li.comic_chapter').children('ul').toggle();
});
// make Chapters sortable
$('#chapter_list').sortable({
handle: 'div .sortable_handle',
placeholder: 'chapter-placeholder',
forcePlaceholderSize: true
}).disableSelection();
// make Pages sortable
$('.comic_chapter ul').sortable({
handle: '.sortable_handle',
placeholder: 'page-placeholder',
connectWith: '.comic_chapter ul' // allow pages to be dragged between chapters
}).disableSelection();
$('.comic_chapter ul').droppable({
greedy: true
});
// make chapter items droppable
$('#chapter_list').children('li').droppable({
accept: '.comic_page',
hoverClass: 'drop_highlight',
drop: function(e, ui) {
$(this).children('ul').append(ui.draggable);
}
});
</script>
</body>
</html>
Thanks.

I see that you have droppables, but where are the draggables? Droppables accept draggables, not just static html (because, really, nothing is being dropped in that case)