StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do I implement jQuery UI in a chrome extension
primarykey
Id
15286934
data
AcceptedAnswerId
0
AnswerCount
1
ClosedDate
2013-03-18T20:31:56.973
CommentCount
3
CommunityOwnedDate
CreationDate
2013-03-08T04:50:20.790
FavoriteCount
0
LastActivityDate
2013-03-12T07:39:58.007
LastEditDate
2013-03-12T07:39:58.007
LastEditorUserId
625354
OwnerUserId
625354
ParentId
0
PostTypeId
1
Score
2
ViewCount
1682
LastEditorDisplayName
text
Body
<p>I'm having a lot of trouble implementing jQueryUI in my chrome extension. I want to implement a selectable in my options page.</p> <p>The chrome extension is a browser action that when clicked redirects the page to a cached version. In my options page, I will let the user choose which cache database to use e.g. Google, Yahoo, Bing, etc.. I want to let them choose via a selectable.</p> <p>selectable: <a href="http://jqueryui.com/selectable/" rel="nofollow">http://jqueryui.com/selectable/</a></p> <p>I'm trying to implement a bare bones version of the selectable- basically just the demo they have, and then I'll build my webpage around the working version, but I can't seem to get it to work.</p> <p>manifest.json:</p> <pre><code>{ "manifest_version": 2, "name": "WebCache", "version": "2.0.0", "description": "View a cached version of a web page", "browser_action": { "default_icon": { "19":"/images/icon.png" }, "default_title": "Cache Page" }, "background": { "scripts": [ "redirect.js" ] }, "options_page": "options.html", "permissions": [ "tabs", "http://*/*", "https://*/*" ] } </code></pre> <p>options.html:</p> <pre><code><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Selectable - Serialize</title> <link rel="stylesheet" href="jQuery/jquery.ui.all.css"> <link rel="stylesheet" href="options.css" /> <link rel="stylesheet" href="jQuery/demos.css"> <link rel="stylesheet" href="jQuery/jquery.ui.base.css"> <link rel="stylesheet" href="jQuery/jquery.ui.all.css"> <link rel="stylesheet" href="jQuery/jquery.ui.core.css"> <link rel="stylesheet" href="jQuery/jquery.ui.selectable.css"> <script src="options.js"></script> <script src="jQuery/jquery-1.9.1.js"></script> <script src="jQuery/jquery.ui.core.js"></script> <script src="jQuery/jquery.ui.widget.js"></script> <script src="jQuery/jquery.ui.mouse.js"></script> <script src="jQuery/jquery.ui.selectable.js"></script> <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> <script> $(function() { $( "#selectable" ).selectable({ stop: function() { var result = $( "#select-result" ).empty(); $( ".ui-selected", this ).each(function() { var index = $( "#selectable li" ).index( this ); result.append( " #" + ( index + 1 ) ); }); } }); }); </script> </head> <body> <p id="feedback"> <span>You've selected:</span> <span id="select-result">none</span>. </p> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li> </ol> </body> </html> </code></pre> <p>I've pretty much just cut and pasted demo code (and added references to more javascript files), so I'm quite confused as to why it's not working. Right now it displays a list with properly formatted CSS as it does in the example, but the javascript isn't working. Any help is seriously appreciated.</p> <p>Many thanks, Daniel</p> <p>EDIT 2:</p> <p>The javascript works in my editor Coda, but still not in the extension. The css all shows correctly in the extension though.</p>
Tags
<jquery><json><jquery-ui><google-chrome-extension>
Title
How do I implement jQuery UI in a chrome extension
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USDbz
UserOwnerUserId
1. USDbz
plurals
PostLinksPostIdRelatedPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
2. PL
  singulars
  LinkTypeLinkTypeId
  LTDuplicate
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POHow do I implement jQuery UI in a chrome extension
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTModeratorReview
2. VO
  singulars
  PostPostId
  POHow do I implement jQuery UI in a chrome extension
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  POHow do I implement jQuery UI in a chrome extension
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.