I have a contenteditable div, it has some paragraphs in it.Assuming a situation, when I click the button "set caret position", the main div will focus, the caret will start at position number 8 of second paragraph, which means the caret will appear after the word "draw".How would you do it?
View 8 RepliesI'm using a div with contenteditable=true, and I need to know where the caret is for operations like splitting the html contents of that div where the caret is. Ultimately, if a piece of text is selected, I'll want to split that html content on the selection start / end.jCaret only seems to work for textareas.Is this possible in a div?
View 1 Replies View RelatedI have a contentEditable element, and am using setTimeout() to call a function which changes the innerHTML of the div. Problem is that changing innerHTML moves the caret to the end of the text.
I need to keep the caret pos so the user can keep typing. I tried storing the caret pos with
cursorPos=document.selection.createRange().duplicate();
And then later restoring it with cursorPos.select() - which is IE only, but it doesn't work because the content of the div gets changed between calls, and the behavior is undefined (it basically selects everything) ...
I wonder how to get/set the caret position of a textfield. I dont wanna paste something, but only set the caret position. With firefox I can do this stuff: textfield.startSelection = pos;With IE I dont have a plan how to solve.
View 14 Replies View RelatedI would like to determine where the current insertion point is in a text field.
Say I had a text field that held 80 characters. I would like to display to the
user the current position of the insertion point at any point in the field.
I have found the TextRange object and have found examples of how to insert text
at a particular location. I have not been able to find a way to return a
number depicting the current location of the cursor.
I've been able to find for an editable HTML textarea for a WYSIWYG editor. It can save and restore the caret position. It works on FF3.5+, IE8, but does not work on Opera 11, Safari 5, or Chrome 10. Any ideas why? I'm just trying to find some code that works on FF3+, opera 10+, safari 5, chrome 8+, and IE7+.
View 2 Replies View RelatedI am developing a page that works like a text editor.In that page, I am trying to show the user on which row and column he is in.
View 5 Replies View RelatedI'm creating a custom text box.that's an easy thing to do for me but I encounter some problems on the javascript part.in the onfocus event of the textbox I try to get the caret position on the start.it works perfect on FF, IE and opera but I just can't get it to work in safari and google chrome. I found out both browsers use webkit but have no idea how you do it for the 2 browsers.I'm using asp.net ajax components for javascript and this works for the 3 browsers get_inputElement() = my textbox
View 6 Replies View RelatedIs it possible to make a SELECT box editable, where a user can type their own entry to be acted upon on top of being able to select an option of course?
View 2 Replies View RelatedDoes a contentEditable DIV have the notion of an internal document? I'm trying to convert code that uses an IFrame.contentWindow.document to use the "document" inside a contentEditable DIV but they don't seem to be similar beasts. Eventually I want to add stylesheets to the contentEditable DIV as well as event handling. I'm porting an IFrame editor to a contentEditable DIV based editor.
View 1 Replies View Relatedi,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ?
[Code]....
in a DHTML Editing control (MSIE), I need to "extend" the caret to the
nearest text character in order to obtain a text selection (and than a
textRange object with the createRange method).
This is needed because I have a set of functions doing operations
within the edit control's rich text. But all the functions need to
start from a selected text (for example, adding a table row). My aim is
to get the things work also if no text is selected from the user. But I
could not find a way to have a selected text starting from the simple
cursor position.
Is there a way to disable Caret Browsing in FF using Javascript?
View 1 Replies View RelatedI'm building a rich editor to replace a textarea, and am about to
release it as "live." But there's one last thing I want to do with it.
When using a textarea, if the visitor clicks on "back" then the
information is (usually) still there. But with the contenteditable
field, it's gone.
I read on a web page a few days ago that there was an easy solution to
this, but I didn't save the information and didn't save the page. Any
ideas?
Does jQuery provide an abstraction for getting and setting the cursor for editable content div's? And if not, any assistance on how to do this? I really just want to pass the "id" and a cursor value to set it... or just the id to get the cursor value. Basically, I'd really like a high-level interface because trying to get it to work on Firefox alone is a massive pain :(
The fundamental problem is this:
If you have a div that contains text and other html elements, if the user's selection encompasses text and html, it won't do anything. I don't even think it registers.
Even when you do get a selection though, we can only find the cursor value within that range. So if there's html elements that are siblings to the left of it, the number of positions isn't accounted for.
I was I could just "get the selection information" and "store the selection information". When I try that, it still doesn't work :/
I have contentEditable="true" on some span tags on my page. The idea is to allow admin users to edit content inline on the page without having to send them to a giant form page. When only using contentEditable="true" it works fantastically. You can click into the span and type away. Now, the admin users want the text to be selected in the span once they click into it or bring focus to it by tabbing. I'm using the following function onclick and onfocus to get this working:
Code:
function selectText(el)
{
var span = $(el);
// FIREFOX
if (Browser.Engine.gecko) {
var div = document.createRange();
div.setStartBefore(span);
[Code]...
I'm trying to emulate exactly how a div with the attribute contentEditable = "true" would operate using a textarea...trying and failing. I found some code somewhere which attempts to do something like his but it isn't working well for me.
I want to do this without jquery and with javascript only. The best example I can think of is Facebook's text area that you use to write on somebody's wall.
Here's my sizing function
Code:
And here's my text area:-
Code:
I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome
<script type="text/javascript" >
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
var x = 0 -document.documentElement.scrollTop;
var toP = String(x);
var toPP = toP + "px";
[Code]...
#navigation li is the parent element, which is positioned relative.The ul element above that is also position relative. I previously tested a click function and was able to confirm I was getting the correct position back, so now I just need to set the CSS property correctly for all of those links.The reason I want to do this is I have a set of links that appear over a photo of a city skyline. When you hover over those items, I want them to be given a background image that is a blurred and lightened version of the same photo so it needs to line up (sort of like the tabs are made of frosted glass).
View 1 Replies View RelatedI have found nice short tutorial here: Rounded_Corners
It works fine unless I try to move it.
I have added only one DIV over all:
Now I see that my text (white) moved but not background.
How do I properly position the whole DIV of class "roundbox" ?
I have a HTML file that has a lot of content. In it I have a <div id="d1">somecontent</div> block. Would it be possible for me to know the position of this d1 (absolute or relative) displayed on the page / window if not setting it first ?
View 5 Replies View RelatedI have a <img> tag in my web page that i use as button.
when user will click on it, i would like to display a hidden <div> just under.
I mean by just under, that next pixel below the <img> should be the top of <div>.
Moreover, the left of <img> should be the left of <div>... like that it will look like aligned.
The challenge is the following one.
my <img> is positioned by CSS file, so it can (but it is not a must) have left and top setup... maybe not.
I did a short test :
if i setup in CSS file the left and top of <img>, a simple click on <img> can not retrieve the left and top of itself.
something like that i did :
function ShowCalendar(id_master)
{
var uleft = document.getElementById(id_master.id).left;
alert("Left : " + uleft);
}
where id_master = id of the <img> as following :
<img id='id_img' class='buttonimg' src='calendar2.gif' ></img>
So how can i solved this issue ?
Moreover, position of this <div> should be in absolute coordinates, to avoid issue in browser Xsing.
Hey peeps, I'm trying to get a webpage open and start scrolled fully to the bottom. How should I go about this?
View 3 Replies View RelatedI have some floating divs on my page.
When I click the div I want do display a menu over it, how can I
determine the position of the clicked div on the page?
I have simple table
<table id = "mytable" ....>
....
</table>
I want to get the left position of the table.
Everything I did getting wrong :
mytable.left doesn't work, neither mytable.style.left,
mytable.getAttribute("left") ...
What is the correct syntax for getting the position of the table element
(and others ...) ?
I am an html/css/php professional who dabbles a bit in javascript and many other languages. I must say up front however that I absolutely despise javascript. However, it is necessary for the work I do, so I get by. I have been working for roughly 5 hours trying to find a solution to this. What I do doesntwork, even though I believe it should. Here is my problem: I have a 'menu', based inside of a table. There is one particular td, that when clicked, displays a menu of the users online friends. The friends box is in a div.
The td is name 'online' and the friends box is named 'menufriends'. (with id's, of course.) My problem is that I need the friends box to display next to the td. So what when you click the td, it shows up to the right of it instead of below the menu. I have tried all sorts of different methods and cant even get it to change its position.
[Code]...