How to create a multiple effect textarea like google translate textbox? - ajax

Textbox of google translate (the left textbox- please view my screenshot: http://s970.photobucket.com/albums/ae190/swenteiger7/technology%20screenshot/?action=view&current=google_translate_textbox_event.png) have a lot of nice effects such as automatic highlight a word, automatically scaled ...
I am currently need to create a textarea so in my web application. I want to know a technology (prefer based on ajax and work well across platforms JSP) or website tutorials which help me to make a textbox like google translate textarea.
Thank you for viewing my question

Just to get you started see: https://developer.mozilla.org/en/HTML/Content_Editable and the links at the bottom of that page.
Basically it's not actually a textbox. It's a regular html element, but is marked as editable so people can type into it. But because it's regular html you can do special effects with it.

Related

Umbraco - how to insert clickable images into page?

I am a beginner with Umbraco. I am able to upload images to the Media Library and then put them onto the page, but for my sidebars I want the images to be clickable links to other parts of my site and other sites.
At the moment I am using the Rich Text Editor to write an anchor tag etc. but this seems ridiculous and I don't want content authors [attempting to be] writing HTML.
It seems like there should be a built-in data type for this, or a property on the image but I see nothing. Do I need to write my own Razor code as a DataType? This seems like such a common thing that I'm surprised there is not a built-in solution.
I'm using 7.2.8
If you're already using the RTE, you can just select the image and click the Link button, then whatever you have selected (in this case the image) should become a link. No need to make your own HTML :-)

CKEditor multiple iframe dialog fields show the same dialog

I have created two CKEditor plugins. Each of them uses an "Iframe Dialog Field", meaning that a dialog box is launched and the contents of that dialog box is a webpage (you can think of the entire dialog box as being like one big iframe).
Each plugin works perfectly on its own. However if I use both plugins in the same CKEditor app, they both end up displaying the same page, rather than two different pages, despite the fact that they point to two different pages. I see no reason why this should be happening. Does anyone know how to prevent this?
To make sure there is no confusion, an "IFrame Dialog Field" is a dialog box whose contents are another webpage.
Documenentation - http://ckeditor.com/addon/iframedialog
[ This is different from using an "IFrame dialog", which I believe is a plugin that lets the user add an iframe to the page.
Documentation - IFrame Dialog: http://ckeditor.com/addon/iframe ]
In terms of usage, when using an IFrame Dialog Field, you specify the url of the page to load in the addIframe() command. Here is an example of using a CKEditor Iframe dialog
https://gist.github.com/garryyao/1170303
Back to my issue - if I use just one of the plugins in my CKEditor, it works perfectly. Each plugin points at a different url, and opens that url as the contents of the dialog box. But, if I use both plugins in my CKEditor, although I see a different icon for each, both end up launching a dialog box which points to the same url. Depending which one I launch first, that is the url both end up opening. It is as if you are only allowed to use one IFrame Dialog Field in CKEditor, and the first one used overwrites all others.
This same question was asked a couple of years ago, with no response on the CKEditor forum. The person who asked the question posted his solution, or rather his workaround, which was to NOT use the IFrame Dialog Field altogether, but to instead use a regular dialog and then put an iframe element within it.
http://ckeditor.com/forums/CKEditor-3.x/multiple-iframedialog-plugins-display-same-dialog
That seems like an OK workaround, but it is a workaround and not a solution. I haven't tried it yet, and don't know what potential issues I will run into if I go down that route. I'd prefer to fix my existing code rather than rewrite the plugins, unless I have no choice.
Any help would be appreciated.
Since I have not found any further information, or received any answers here, I ended up going with the workaround mentioned at the end of my question - I used a regular dialogue box and put a big Iframe within it. This problem doesn't exist with that approach, and It looks pretty much the same as an Iframe dialog box. (Considering the almost total lack of community support with CKEditor customization, I've realized it is better to just adjust your design/concept to do what is more easily accomplished with CKEditor, rather than get CKeditor to do exactly what you want).

How to add RichText editor to a page as component in HippoCMS?

I'm creating some project using HippoCMS 10 and I need to add RichText editor as part of the page, so that customer can use it and fill something there. This editor must act exactly the same way as in Document Editor (customer can click Image button in toolbar and select image from ImagePicker dialog box).
Can't find anything about it in HippoCMS official documentation. I learned how to create custom plugins and how to integrate CKEditor into page separately, but for image picking, I need default behaviour as in Hippo.
How can I achieve this? Any help will be appreciated!
I think your question was answered on the community group. The answer there was:
"it should be quite easy to have a CKEditor in the website.
However, it doesn't really make sense to me to have site visitors able to pick CMS documents and images from the site. The picker dialogs are designed to work inside the CMS only. You should be able to create your own picker dialog that can read from a REST service that exposes the images/documents.
I don't think it will be possible to reuse the CMS picker dialog in the site."
and
"your use case is fine, when I said "it doesn't really make sense", I was really referring to the technical limitations of the pickers. You should be able to achieve what you want with a custom dialog that plugs into a REST service though. Unfortunately there is no quick solution for this that I can think of."
Just adding this for future reference.

I can't get the first modal, in the series of modals, to open

Greeting and thanks for your generosity in providing this wonderful forum,
I'm using jQuery Orbit Slider and Reveal Modal. I setup the slider to include content and within the content are hotlinks to a series of modals.
I can't get the first modal, in the series of modals, to open. It appears the plugin is programmatically generating inline CSS that is overriding my CSS stylesheet. Mainly z-index selector is keeping the first modal hidden (or invisible). The subsequent modals in that series work as intended.
When viewed using Chrome Inspect Console shows the inconsistency please note at "featuredContent10" which is where the slide4 resides (it's actually a background image). The data-reveal-id="slide4-1" is the first one in the series of modals. I did not add the inline styles it's in the reveal.js file.
Unfortunately, I don't know enough about reveal and can't find any information regarding a solution. The information I came away with is to ask for assistance on stackoverflow.com. 99.9% of the time I find solution on my own, however, I'm at a lost and my client likes the features of both plugins. Any help you can give me would be very much appreciated.
If it helps here’s a link to the beta site: http://www.partnershipwithearth.com/thecooperationway-1/
Go to Slide 11 lower left link is the culprit. You'll notice the dialog box and close button do appear without the image (slide4-1).
Your expertise is greatly appreciated

A library that allows to add footnotes to a web page

I would like to add in my web app ability to add comments to a specific word in the page. Something like the LaTex footnotes.
The UI I had in mind is, each word would be highlighted when the mouse hovers over it (or that the space after it is being highlighted), and when the user clicks, a textbox to enter the comment pops up near the place the comment would appear. After the user entered the comment a little number would appear after this word in the web page, and other users would be able to click on this number and reveal the comment.
The architecture I had in mind is, a client side javascript program that would handle the view. The model and the controller would be on the server. They would save the document in some textile-like format (say, StackOverflow's question's format), and would only verify permissions (ie users would only be allowed to add [1] (user-name) ... to the document body
).
That's the architecture and UI I had in mind, but I'm open to new suggestions.
Is there any similar component availible?
I have been developing one with similar features. I use jQuery as the main framework and build on it.
1.select text to add some footnote to it.
2.click on the bubble to show dialog for enter your comments.
3.text with comments highlighted. Mouse hover over to bring up the dialog window with comments
entered earlier, hover out to close dialog window.
(pics here)
It is not perfect now and I am trying to make it a plugin(javascript code) with JSP(maybe. it's coldfusion now.)
The best thing I found so is the digress plugin for wordpress which allows paragraph-based comments.

Resources