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.
Related
I am using tinyMCE editor, i need to make some contents radonly (nonEditable).
As per its documentation, if i use class "mceNonEditable" with some elements, it fulfill the requirement, but unfortunately if i select that specific element and press backspace / Enter / Delete button, it removes that content.
All i want is that, user shouldn't be able to make any contact with those elements.
Official example can be seen here.
Any how, I also tried to accomplish this with an overlay div, overlay div needs absolute position, and after applying this style, editor convert this div into drag able form.
Please help, if there is any other solution..
I've found that setting the contentEditable attribute to false on the element does the trick.
I have two simple textareas where in i want to highlight the javascript code being written.
As soon as the user types the function in the text area , the keywords etc have to be displayed in different color or so.
I tried to hack this script . But couldnt get what i wanted.
You could check Ace (demo) and CodeMirror (demo).
I suppose Textarea that can do syntax highlighting on the fly? and Online Code Editor questions will be useful for you as well.
I've always been interested in having textarea elements with added functionalities such as code highlighting, while still remaining as simple editable textareas. I've experimented a little bit here: http://www.dcc.uchile.cl/~jmunoz/
It's far from optimal and quite buggy, but still... It allows text highlighting using arbitrary rules. I used to have a working version which allowed to change the text color (And not just the background), but It had some issues.
Basically what I do is adding a div overlay with exactly the same content and font style as the text area but with transparent fonts. The text inside has span elements wrapping certain words and phrases which may have special backgrounds, borders, etc.
To allow for different font colors, I tried making the textarea text transparent while showing the overlay div text. The main issue there was that the cursor became transparent too.
I would say that using a div with editablecontent seems like a much better option.
I think that you can use a div or section tag with content editable attribute. Inside this div or section you can use an additional markup for higlight functions, vars and etc. But this attribute work only in new browsers that support html5 attribute content editable. Here is a demo
If you need a simple js highligter, may be this one https://github.com/cloudhead/hijs is usefull for your task
Because a text area cannot contain markup, you cant so highlighting per se. The approach I used for an inline spell checker was to overlay divs for words that were spelled incorrectly. This was possible because it was possible to get the x and y location of words inside the text.
However it may be preferable to overlay the textarea with a content editable div which would allow you to wrap content in spans etc and then apply styling.
i really need help, i can't see something that is obvious, and usually then it is the best to ask for help.
I have 4 divs in a 12 column grid.Each div is clickable, and when clicked should display the corresponding div beneath it, that is initially set to display:none.
Everything is fine as long as i click on them in order from first to last, but if i first click, let's say on third div, it shows its corresponding div, but not beneath it, it shows it in place of the first corresponding div.
I am using simple slideToggle here, and really can't understand what is wrong.If i put the corresponding divs(the hidden ones) to visible, they are all displayed correctly, so it is not a CSS error.
I can provide the code, but i put it online, just click on methods tab, and you will see what i mean.
Here is the link
Sorry if i didn't explain it better, english is not my native language.Thanks!
You need to keep space for these div's. Use visibility:hidden and animation but do not use display:none which doesn't keep space for hidden element. All built-in effect functions like hide(), slideToggle() etc. will set display:none to your element.
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...