I was wondering, is there a way of getting text to go over an image, but have it so that the text can be changed without going into the html, aka using a textbox from a form displayed on the webpage, and the inputted text being put on the image? i know it can be done but im struggling on where to start, and any reply pointing me in the right direction would be most gratefully recieved.
Gareth
If browser compatibility is not an issue, this can be done with HTML5 like so:
<div contenteditable="true">
This text can be edited by the user.
</div>
Then you could either set the image as the background image for that div, or place the image within that div but set the z-index lower than that of the text.
Related
Is there a way to disable right clicking on an image in gmail? I'm aware of methods to do so using javascript, but only for an entire page. Is it possible to embed jscript into the body of an email and have it parsed?
You can scrape the image out no matter what you do, so if you want to "disable" right clicking you could just put the image under a transparent div.
There is no way to do this in html email. CSS position and negative margins are not widely supported, so you can't hide it under another transparent element.
Even if you embed the image using base64, it still right-clicks to download it.
I want to make a basic text editor using angularjs (or just pure javascript). The idea is that I will have a div to contain the text, instead of using textarea. I want the user to be able to click anywhere inside the div and have a blinking cursor appear where they click. I really have no idea how to do this. Any suggestions? By the way, I would prefer not to use contentEditable.
Since you prefer not to use contenteditable, Here's a few suggestions you could have a look at to get a blinking cursor, manually:
Overlay the div with a canvas element, get the click's position, and animate a line on the canvas at that position.
Overlay a animated .gif containing the blinking line at the click's position.
Use a animated .gif containing the blinking line as the div's background, and set the background-position, depending on the click's location.
For the above two suggestions, instead of a .gif, you can use a static image, and toggle it.
You'll have to keep in mind that the line will have to snap to the closest character boundary, so you won't have your cursor blinking in the middle of a character. Using a monospaced font would make that a lot easier.
You will still have to write the other features a text field has, though:
Text manipulation.
Selections.
Copy / pasting
You can make the div editable by adding contentEditable="true" attribute to the div element.
<div contentEditable="true"></div>
As you mentioned you wanted to avoid using of contentEditable then you can go for Javascript/Jquery plugin. It will be very easy for you if you use plugin rather developing it on your own. Here is a jquery plugin which can come in handy. http://www.appelsiini.net/projects/jeditable
you could try setting the div to contenteditable
<div contenteditable>
</div>
JSFiddle
Seems you are looking for html5 contenteditable attribute.
http://html5demos.com/contenteditable
I have a set of thumbnails and whenever a user clicks a thumbnail I'd like to show a corresponding descriptive text.
I was planning to do it with one div that its innerhtml will change according to the onclicked thumbnail (with javascript). Will all the descriptive text be invisible to robots (seo-wise)?
Any better idea how to implement it?
For SEO, it is simplest if all text you want the search engine to see is in your actual HTML markup. Rather than change the innerHTML on one div, you might put multiple divs next to each other and just hide/show the right ones. Then all text will be in the markup.
Thumbnail descriptions also belong in the alt attribute on the image and search engines look for them there. I don't know exactly how your app works to know if that's sufficient, but you may at least want to also put the descriptive text there.
I am trying to implement something like the "Change/Remove Link" in Gmail/Google Docs richtext WYSIWYG edtior, when you type a URL, a div shows underneath it says "Goto Link, Change, Remote"
How could I write something like that using jQuery?
How to get row and column of cursor?
how can I calculate font width and height (especially non-fixed width font with some Bold/Italic style)
How to make sure the DIV appears at the start of a word?
Thank you in advance!
Answer: http://jsfiddle.net/morrison/57BR3/
What it does:
Creates div positioned near hyperlink.
Looks like Google docs box.
Ability to change text and url.
Remove is implemented.
What it does not do:
Work on textarea. Textareas don't support html as they are plain text. This is a complex process to work-around. Find a library, then implement my answer.
Open when your cursor gets moved onto it by arrowkeys. Doesn't work because of above item.
You're suggesting you're building a WYSIWYG editor. Are you sure you want to use a textarea? Textareas don't support HTML. To answer your later comment, the best way to get the (x, y) position of the caret in a text area is to use the textarea-caret-position plugin.
I have a real-time HTML editor, with a textarea on the left for code entry, and a 'preview' DIV on the right to contain the preview of the code entered. At the moment, when editing the code in the left pane, the preview just sits where it is, so often the part of the code you're editing is not in the visible area of the preview (especially when images are involved).
My question is how do I make the preview scroll to show the part of the code that's currently being edited?
Here is the page I have so far:
http://www.caerphoto.com/rtedit.html
You'll notice in the source I have a (currently unused) matchPreview() function that tries to match the scroll position of the preview based on the scroll position of the textarea, but obviously if images or large text are involved the two panes no longer match.
Instead of a div from the clone target try using a tag.
let me decompose your task into 2 subtasks:
get informed when the dom changes
you could listen on changes of the dom like onsubtreemodified.
see
en.wikipedia.org/wiki/DOM_events
scroll the element into view
the answer to this is the scrollintoview method:
see
www.quirksmode.org/dom/tests/scrollintoview.html
however, this might not help you too much, since you are updating the whole html document on every change of the textarea. since you cannot get the position of the cursor inside the textarea, this might be not that easy.
sorry mate, at the end I have no solution, but maybe my rumination helps in some way nevertheless.
good luck!
When I tried this in Firefox. no line-breaks were seen in the preview; is this correct? I may be able to help (done something similsr recently), but not if the line breaks are removed...