Create a numbered editor inside a panel or htmleditor - javascript

I'm trying to create an app with a database containing examples of scripts that I use in my apps for my personal use.
It is a very simple app: the west region has a grid with the name of the items, and the central region has a hbox with an editor and a panel with my notes.
My difficulty is building the editor.
The editor can be read only and load the script from database.
I do not need to be as complete as the Sencha Fiddle, the JS Fiddle or the Walking Tree app.
However I needed that has a numbered column on the left, as the editors mentioned above.
Any idea how to do this within a panel or a HTMLEditor or a textarea, or another solution that suits my purpose?
Thanks in advance.

If it is read only you most likely don't need it to be an editor and you can find some functionality like how here in Stackoverflow you can post code:
<div>like this</div>
Which I know there are plenty of those out there and probably already include line numbering natively. For example Prism.

Related

Completely redesigning the front-end for the Drupal forum

I only have web development experience with CakePHP, and I've recently started a Drupal project. My main task is to re-skin the Drupal forums so instead of a normal comment chain, there is a timeline of icons connected by a tree structure that display a comment when you click on them.
This is a pretty radical overhaul, and while I'd feel confident about doing this in CakePHP, where I can just write HTML as I please, the structure of Drupal confuses me. I've located the theme file that themes individual comments, but I'm not sure how to rewrite the page as a whole. A forum topic appears to just be a node with comments, so I'm not completely sure how to re-theme the whole page.
To Summarize, I need to:
Determine if any given node is a forum topic and replace the normal body with a scrollable timeline
Display simple shapes representing posts taking place at a certain time on the timeline connected as a tree
Hide the normal comments until the corresponding icons are clicked.
Additionally, I need a way for the user to filter posts on the timeline by their tags, but once I figure out the Javascript for showing the posts, this shouldn't be terribly difficult.
Thanks for helping out a confused web dev.

How to create graph in an HTML file using the jOrgChart?

Is it possible to draw a graph in an HTML file using the jOrgChart jQuery plugin, as in the example below?
If that's not possible then what are other options are available for drawing such chart, without using Drupal?
Assuming that this question is about the jOrgChart jQuery plugin, and assuming that Drupal is an option to consider, then for sure it's worth considering the jOrgChart sandbox ... at least that's where I'll start from if some day I want to start using jOrgChart in Drupal.
For other Drupal based alternatives for charting, checkout the Comparison of charting modules I created (note to myself: add this jOrgChart plugin and sandbox project to that comparison).
Curious to hear to what extend this attempt is an answer to this charting question ...
PS: Checkout my profile for more details about my charting background, etc.
Very easy to use given a nested unordered list element.
Drag-and-drop functionality allows reordering of the tree and
underlying structure.
Showing/hiding a particular branch of the tree by clicking on the
respective node.
Nodes can contain any amount of HTML except and . Easy to
style.
You can specify that sub-trees should start collapsed, which is
useful for very large trees
for html
https://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/example.html

Windows 8 grid app template - adding data dynamically

I want to dynamically add data into data.js in my JavaScript Windows 8 app based on the grid app template. I want some particular group items in that template to scroll from right to left. And also how to flip images of particular tile inside the group items?
For the question of adding data dynamically, I would check out the following samples:
HTML ListView loading behaviors sample
HTML ListView optimizing performance sample
More samples may be found at: http://code.msdn.microsoft.com/windowsapps
For the latter question, I'd suggest posting a separate question on the image manipulation, with some additional detail on what you're trying to do.
For more info on Windows Store app development, register for Generation App.

How to create draggable widgets?

Background
I am tasked with developing the front-end to an analytics product that presents the information to the user in a customizable dashboard like the one used by Google Analytics:
- Dashboard is comprised of draggable widgets arranged in a grid layout
- Widgets have a drag handle which can be clicked by the user to start dragging
- Widgets can be re-ordered by dragging and dropping the widget
Question
Part 1. Using jQuery (or any other open source Javascript API) can anyone explain to me how such a feature is implemented, from a high level overview.
Part 2. Can you recommend any resources for me to read that may be relevant to implementing this feature, or any foreseeable related features? (books, links, api docs, tutorials)
EDIT This one looks even better and more maintained! GRID by UberVU
Next one on the list is gridster.js
PS: I know this is an old thread but since this question is the first hit in Google I think its worth listing some newer libraries.
You can easily implement this.
You will get required info from
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
and
http://james.padolsey.com/javascript/inettuts-with-cookies/
First what comes to head is jQuery UI.
Use HTML 5
http://html5doctor.com/native-drag-and-drop/
You can find a lot of info here:
http://jqueryui.com/demos/draggable/
Use jQuery, and get on the Demo & Doc page to see how D&D is being used.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
If you wanna dive into a Widget Page/Dashboard architecture, and would like to see how others did it, take a look at Omar AL Zabir's book
http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=ntt_at_ep_dpt_1
I am pretty sure this one is going to make you happy!
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

Radiobutton Tree Control

I am developing a search form which displays a number of categories and sub-categories. The client has requested that I do not use cascading dropdowns but to display radiobuttons instead so that the user can see the top level categories at a glance.
I had a bit of a look around for any javascript plugins that might give me a head start and save me from having to write all of the code from scratch but didnt come up with too much.
Can anyone suggest a good plugin that will allow me to display a radio button list in a hierarchical collapsible tree structure?
Cheers,
Tristan
Solution
I ended up using this plugin and adapting it to my own needs -> http://code.google.com/p/checkboxtree/
There is a great jQuery plugin called jsTree.
http://www.jstree.com/
I personalize it for my needs as well.

Categories

Resources