chelsea hanna cohen

Using jQuery Drag-And-Drop in Ebooks

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:

<item id=”jquerycss” href=”css/jquery-ui-1.10.2.custom.css” media-type=”text/css”/>
<item id=”jquerymincss” href=”css/jquery-ui-1.10.2.custom.min.css” media-type=”text/css”/>
<item id=”jquery” href=”js/jquery-1.9.1.js” media-type=”text/javascript”/>
<item id=”jquerycustom” href=”js/jquery-ui-1.10.2.custom.js” media-type=”text/javascript”/>
<item id=”jquerymincustom” href=”js/jquery-ui-1.10.2.custom.min.js” media-type=”text/javascript”/>
<item id=”jquery.ui.touch-punch.min.js” href=”js/jquery.ui.touch-punch.min.js” media-type=”text/javascript”/>
<item id=”draganddrop.js” href=”js/draganddrop.js” media-type=”text/javascript”/>

<item id=”ui-bg_diagonals-thick_75_f3d8d8_40x40.png” href=”css/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png” media-type=”image/png”/>
<item id=”ui-bg_dots-small_65_a6a6a6_2x2.png” href=”css/images/ui-bg_dots-small_65_a6a6a6_2x2.png” media-type=”image/png”/>
<item id=”ui-bg_flat_0_333333_40x100.png” href=”css/images/ui-bg_flat_0_333333_40x100.png” media-type=”image/png”/>
<item id=”ui-bg_flat_65_ffffff_40x100.png” href=”css/images/ui-bg_flat_65_ffffff_40x100.png” media-type=”image/png”/>
<item id=”ui-bg_flat_75_ffffff_40x100.png” href=”css/images/ui-bg_flat_75_ffffff_40x100.png” media-type=”image/png”/>
<item id=”ui-bg_glass_55_fbf8ee_1x400.png” href=”css/images/ui-bg_glass_55_fbf8ee_1x400.png” media-type=”image/png”/>
<item id=”ui-bg_highlight-hard_100_eeeeee_1x100.png” href=”css/images/ui-bg_highlight-hard_100_eeeeee_1x100.png” media-type=”image/png”/>
<item id=”ui-bg_highlight-hard_100_f6f6f6_1x100.png” href=”css/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png” media-type=”image/png”/>
<item id=”ui-bg_highlight-soft_15_EEB4B4_1x100.png” href=”css/images/ui-bg_highlight-soft_15_EEB4B4_1x100.png” media-type=”image/png”/>
<item id=”ui-icons_004276_256x240.png” href=”css/images/ui-icons_004276_256x240.png” media-type=”image/png”/>
<item id=”ui-icons_cc0000_256x240.png” href=”css/images/ui-icons_cc0000_256x240.png” media-type=”image/png”/>
<item id=”ui-icons_ffffff_256x240.png” href=”css/images/ui-icons_ffffff_256x240.png” media-type=”image/png”/>

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!

1 Comment »

A Scandal in Bohemia: Can You Solve the Case? For Sale!

I realized that the new page I created wouldn’t show up in my blog feed, so I wanted to post that you can now download my interactive choose-your-own-adventure version of A Scandal in Bohemia from my website for whatever price you think it’s worth 🙂 Just go here: https://chelseahannacohen.com/canyousolvethecase/ and select the version you want! Click the Paypal button to decide how much you want to pay. 

Leave a comment »

The Directed Study is Finished!

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!

Leave a comment »

Ebooks vs. Print Books – Why You Can Have Both

I have this conversation with a lot of people. I tell them I work with ebooks, that I enjoy making them and even reading them, too. “But what about print?” they ask. “How can you be a part of the demise of print publishing as we know it and the collapse of the industry?” (That last part may be a dramatization). 

But those people have it all wrong. I love print. I have a tiny bedroom in an apartment in Boston that is positively overflowing with books – I’ve filled more than two bookshelves, and the ones that won’t fit on the shelves are currently organized two deep on a small table. And yet I also have a Kindle Fire, an iPad Mini, and an iPhone with four different e-reader apps downloaded onto it. It’s not a case of either/or – just because I love ebooks and think they have their place in publishing doesn’t mean I think print should die. I love to read my print books when I’m relaxing at home. When I’m just looking to browse for books, I’ll stop by a bookstore to see what they have to offer – and then actually buy the books there, not on Amazon later that day. 

But when I’m taking the subway during rush hour, crushed up against numerous other people, my personal bubble completely and utterly collapsed, I love the fact that I can pull out my iPhone, open an ebook, and read. I love the fact that I don’t have to dig through my backpack for a paperback I don’t have the room to hold out in front of me. When I’m at the gym, I love that I can just put my iPhone on the shelf on the machine and not have to worry about the pages staying open. My iPhone is always with me, which means my ebooks are always with me as well. 

The bottom line: when it comes down to it, I would prefer owning a print copy to an ebook copy. To me, the substance of a print copy, the way it lines up on my bookshelf, and the fact that I can do with it whatever I please are things that an ebook currently can’t provide. But the absolute convenience of my ebooks outweighs many of their downsides, and, in the end, as long as people are reading, isn’t that enough? Print books will be around for the foreseeable future, but so will ebooks – people just need to realize that they can coexist and that they both have their time and their place in publishing. It’s not an “or” – as in, “Do you prefer print books or ebooks?” It’s an “and.”

Leave a comment »

The content is finished!

Last week, I finished all of the content for my Sherlock Holmes Choose-Your-Own-Adventure project. There are 16 different ways to go through the story, with six different endings which range from solving the case to Sherlock being escorted away by the police. It’s based on A Scandal in Bohemia, so the decision to have one of the endings be solving this case was actually one I wrestled with since the central theme of A Scandal in Bohemia is that Holes is bested by Irene Adler. But in the end, I decided that this was my project and that I would allow the reader to solve the case – if they make the right decisions, of course. 

So now I get to start making it into an interactive ebook. Features I’m planning on including include a cluepad to help you solve the case, a map of major locations in the story, and an option once you finish to go back to the beginning and see how Holmes did it, which highlights the choices that lead to the actual story as written by Sir Arthur Conan Doyle. 

I’m excited about where this is heading! Now I get to play and see what I can do. 

 

Leave a comment »

Choosing Your Own Adventure – Keeping It All Straight

As I get deeper into my Sherlock Holmes directed study, I actually found it incredibly tricky to keep all the paths I was mapping out through the choices straight. How much do I have to write? How does it branch off from the original material? How can I even begin to keep what I still need to do straight and the paths and consequences of each choice together? How do you organize a non-linear story?

Perhaps somewhat ironically for an ebook project, I didn’t find a good way to keep it all together until I drew it out using that old-fashioned tool of pen and paper. Still working out the final kinks so I can start the Javascript ASAP, but so far, this part has been more challenging than I thought it would be. That’s all right, though – all part of the fun 🙂

Leave a comment »

Updates

So, as you can probably tell, my first post didn’t lead to more posts, as I feel is often the case with blogs. But I’m going to try and bring this back to life, to actually post blog entries, thoughts, life updates here. So here’s where my life is now since I created this back in October:

–I have a new job! I’m still at Pearson, with Pearson Learning Solutions (custom publishing), but I’ve worked my way up from proofreader to Media Project Manager. I’m on the ebook team, so I deal with ebooks for third-party platforms. I started last Monday, so it’s still ramping up, but I think I’m really going to enjoy it. 

–New classes! I’m taking a digital publishing class this semester, where we’re learning about apps and enhanced magazines. I’m also doing a directed study where I’m creating an interactive ebook Choose-Your-Own-Adventure version of Sherlock Holmes and an internship where I’m converting print titles to ebooks. So it’s a very ebook/technology intensive semester – just the way I like it. I’m graduating in May – exciting!

So that’s where my life is now, what it’s become. Be on the lookout for more thoughts and ideas shortly 🙂

Leave a comment »