jquery | chelsea hanna cohen

Using jQuery Drag-And-Drop in Ebooks

by chelseahannacohen

One of the hardest parts of my project was figuring out how to use jQuery correctly and, specifically, how to get its drag-and-drop code to work in iBooks. I pieced it together with the help of friends and people on Twitter, but I thought I’d write it out step-by-step for anyone who wants to try it in their own ebooks. So if you want to use drag-and-drop in your ebook, here’s how to do it (not supported in all e-readers).

1. Go here: http://jqueryui.com/. The UI stands for User Interface, and you can find all sorts of fun features here, such as tabs (which do work in iBooks, but not everything on this site does).

2. On the right, click on “Custom Download.” Uncheck “Toggle All” at the top, then make sure you select “Toggle All” under “UI Core” and also check “Draggable” and “Droppable” under “Interactions.” (For the purposes of this post, I’m assuming that you are only including drag-and-drop, but if you want to include other features in your ebook you can check their boxes as well). Doing a custom download with only what you need will help keep the size of your ebook down. You can change the theme if you want, and then click “Download.”

3. Go into the CSS folder of your download, copy the provided CSS files and the images folder, and paste them in your own CSS folder in your ebook. Do the same with all of the files in the js folder (if you don’t have a js folder in your ebook, create one on the same level as your CSS folder).

4. This next part will be determined by exactly what you want your drag-and-drop to do. In my Sherlock Holmes project, I have an interactive cluepad where you can drag selected clues. If the clue is correct, it will stay on the cluepad. If it is incorrect, it will bounce back. This is what I will be using for the purpose of this post, but you can play around with the other options if you’re looking for something different. Go back to the jQuery UI homepage and click on “Droppable” on the right. Select “Revert Draggable Position,” and then click “View Source” below. Copy everything between the script tags (but you won’t need the script tags themselves). Paste it into a new text document and save it as a .js file (I called mine draganddrop.js.). Add this .js file to your js folder as well.

For reference, this is what my draganddrop.js file consists of:

$(function() {
$( “.badclueleft” ).draggable({ revert: “valid” });
$( “.badclueright” ).draggable({ revert: “valid” });
$( “.goodclueleft” ).draggable({ revert: “invalid” });
$( “.goodclueright” ).draggable({ revert: “invalid” });
$( “.cluepad” ).droppable({
drop: function( event, ui ) {
$( this )
.find( “p” )
}
});
});

My “cluepad” class is the cluepad where the clues are dropped, and my “badclues” revert when they’re dropped on the cluepad, while my “goodclues” do not. You can style your classes for these functions however you like in your CSS.

5. There is one more jQuery that you need – and this is the key to making drag-and-drop work. It’s a hack that someone created called Touch Punch, and you can download it here: http://touchpunch.furf.com/. Download the Production version and place the .js file in your Javascript folder with the other jQuery files.

6. Now that you have everything you need, you need to do two things in your ebook to make the files work. The first one is listing everything you just added to your OEBPS file in the manifest of your content.opf file. When I say everything, I mean everything. This includes all the Javascript files, all the CSS files, and all of the image files. Here is what the relevant part of my manifest looks like:

Make sure that you’re putting the correct media-types for everything and note that your jQuery files and your images will most likely have different names than mine do.

7. The last thing you need to do is to link all of your Javascript and CSS files in the heads of your XHTML files. The heads should look something like this:

<head>
<title>Cluepad</title>
<link href=”css/template.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/jquery-ui-1.10.2.custom.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/jquery-ui-1.10.2.custom.min.css” rel=”stylesheet” type=”text/css”/>
<script type=”text/javascript” src=”js/jquery-1.9.1.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.10.2.custom.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.10.2.custom.min.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.touch-punch.min.js”></script>
<script type=”text/javascript” src=”js/draganddrop.js”></script>
</head>

with your own title and file links instead.

8. That’s it! To use drag-and-drop in the page, just use the classes you’ve assigned to your draganddrop.js file. Here is the code for one of my cluepads:

<div class=”cluepad”>
<p class=”cluepadtext”>Cluepad</p>
<p class=”oldclue”>The photograph is cabinet-sized.</p>
</div>
<div class=”goodclueleft”>
<p class=”cluetext”>Irene Adler and Godfrey Norton are married.</p>
</div>
<div class=”badclueleft”>
<p class=”cluetext”>Irene will be returning to Briony Lodge at 8:00. </p>
</div>
<div class=”badclueright”>
<p class=”cluetext”>The church was the Church of St. John.</p>
</div>
<div class=”goodclueright”>
<p class=”cluetext”>Holmes’ plan involves throwing a smokebomb.</p>
</div>

and that creates drag-and-drop perfectly in iBooks.

I hope this post will be helpful to someone, and if anything doesn’t make sense or anything needs more clarification, just let me know!

Uncategorized

1 Comment »

The Directed Study is Finished!

by chelseahannacohen

Last week, I finished my EPUB3, interactive, choose-your-own-adventure version of A Scandal in Bohemia. Cool things I did include:

-Several choices throughout the story – which choices you make determine which ending you reach. I wrote new portions of the story to facilitate these choices.

-The option to see how Holmes did it, where each choice that makes up the original text is highlighted as you go through the story.

-A plain text version, if you just want to read it straight through.

-An interactive cluepad at the end of many sections, which utilizes drag-and-drop jQuery. You’re presented with four possible clues and can drag each of them onto the cluepad. If the clue is true, it’ll stick. If not, it’ll bounce back.

-The use of media queries for the cluepad so that it looks great on both iPads and iPhones in landscape and portrait.

-An embedded font for handwritten notes

-It validates as EPUB3

I spent all semester working on this and am hoping to have it for sale on my website soon, as soon as I figure out pricing. I’ll be doing more specialized blog posts soon on the technical aspects (especially how I got drag-and-drop to work), so be on the lookout for those!

directed study publishing Uncategorized

JQuery and Javascript

by chelseahannacohen

I’ve been attempting to teach myself JQuery and Javascript lately, for use in my directed study., and, although it’s different from anything I’ve done before, it’s very interesting. I’ve been using Codecademy.com’s online courses, and while I’m learning a lot, I sometimes have to do the exercises three or four times before I can fully grasp what it is I’m doing and what the proper way to do it is.

It’s funny to reflect on this because, if you’d told me two years ago that I would be coming to this program and doing a project that involved Javascript by the end of it, I’d have thought you were crazy. How would that fit into a publishing program? And I wanted to be a fiction editor. Crazy to think how my career path has changed since then.

directed study publishing

1 Comment »

chelsea hanna cohen

Using jQuery Drag-And-Drop in Ebooks

The Directed Study is Finished!

JQuery and Javascript

Twitter Updates

Meta

Goodreads