I'm trying to get the cursor position to move to the end of the text within an editable iframe or div.I've been pointed to something called TextRange and have been reading up on it for days yet couldnt make sense of much (i'm still very new).what i'm trying to do is on a button click, the cursor will move to the end of the text in the iframe.
View 3 RepliesI am using the following code to enter text into text box when it is
empty:
<input name="txt_url" type="text" class="form_text_300" id="txt_url"
onClick="if(this.value == ''){this.value = 'http://'}">
it works fine but when it enters the text - 'http://' - the cursor
jumps back to the start of the line in the text box. How do I then
make the cursor be placed at the end of the text. For example:
http://
here------------------'
http://
and not-------'
editor.document.execCommand("insertHTML", false, "<br />") doesnt work when the text cursor is at the end of a sentence... but is does work when the cursor is at the middle of a sentence.
<script type="text/javascript">
window.onload = edit;
function edit() {
[code]....
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 :/
For those without the time or patience to read the full post i have summarised a list of my issues, for the full description of the reasons behind them please read on.
Disabling the text cursor in a specific text field (not the mouse cursor but the one which is controlled by the keyboard inside the field)
Adjust the blink rate or the colour of a carat.
Anyone who has some in-depth knowledge about browser based games who would like to tell me about how they stop arrow keys from scrolling around the page.
I am currently constructing a page which displays a gallery of images and I have been trying to correct one final issue for some time now.
I have used a pair of buttons to navigate through the table cells in which the images are stored by using a getElementByTagName function and having the buttons adjust the index of the desired image. This works fine.
My issue arises from the fact that I also assigned the arrow keys using onkeydown and the relevant keycodes to call the same function so that the user can navigate the table via those keys. It all worked perfectly until I tested the page while it was zoomed in far enough that the browser scrollbars kicked in and with each arrow key press the page would scroll while also changing the selected image.
This in itself kind of highlighted the fact that I shouldn't really be hijacking default browser functions, so the logical solution was to a) provide the user with the option to enable arrow key navigation and b) prevent the document from scrolling about while this option is enabled.
So for:
a) I created a button which when pressed activates the onkeydown functions for the arrow keys and then changes into a button which will deactivate them again onclick.
b) was a hell of a lot more difficult to fix but in the end I found what I will call a "back door" method where I insert a read only text field, set it to match the background (which is conveniently black) so it is invisible, and force the document focus into the text field while the button is active. This disables the scrolling completely while the navigation is turned on and works perfectly... in firefox.
Someone extremely clever at Microsoft decided to code IE to make the text entry cursor contrast with whichever background is selected for the field, as a result I'm stuck with a blinking white carat next to my buttons which may be one of the most irritating things I have ever seen on a black background.
So again, I would be extremely happy if someone could suggest a solution to any of the following:
Disabling the text cursor in a specific text field (searched far and wide about this and the only answer anyone gets seems to be 'why bother using a text box at all' or 'removing my carat would make me extremely angry as a user' but usually because they dont specify why they want to hide it).
At least adjust the blink rate or the colour of the carat to make it less annoying or invisible (seen one example about the blink rate in JS but it seemed angled towards game coding and I couldnt get it to work on my page - tips appreciated).
An alternative or all-round better way to approach the navigation function issue as I'm not too pleased about having an invisible, barely functioning text field in the middle of my page - I've seen a few posts about setting up a div which acts as its own window but I haven't yet seen it working.
Anyone who has some in-depth knowledge about browser based games who would like to tell me about how they stop arrow keys from scrolling around the page.
One thing that I am fixed on keeping is that it is the arrow keys which navigate the table, I know an instant solution would be to use ASDW but I've been bashing away at this for so long that it's getting personal now.
how I could move a div around a page on mouse down? Like drag and drop it where I want it to be on the page and grab its x,y position?
View 2 Replies View RelatedI have an editable Iframe control that I am using to allow users to
input formated text into a database for later viewing. One feature I
am toying with is the ability to vertically align their text. The idea
is to have a button for TOP, MIDDLE, and BOTTOM in which each will move
the text to the desired location within the box. So far I have tried
two ways to accomplish this. One is with a DIV around the text and
when the button is clicked it moves the DIV based on how high the DIV
has become. The other way I have attempted this is with a TABLE which
covers the entire iframe. When the buttons are clicked the appropriate
location is set in the cells valign property.
With the DIV attempt the body of the iframe has contentEditable turned
off and the DIV turned on. This would restrict the user from typing
outside of the DIV. The problem is that when the user clicks on the
iframe but outside of the DIV the cursor is gone. The user could also
hit ctrl-a on the keyboard to select all and eventually delete the DIV.
With the TABLE attempt the body of the iframe has contentEditable
turned on sice the TABLE seemed to not have that property. With the
body being off the table couldnt be edited. The problem here is that
the user can now type outside of the table and also delete the table
much easer than the DIV.
When i press tab in my document which has editor it brings focus on editor iframe. Now if i again press tab then the focus goes to send button which is below the editor. But also cursor stays in editor.In such condition if i start typing, then as soon as press space my form is submitted as focus was on send button.
View 5 Replies View RelatedI'm creating my WYSIWYG html web editor. but now I want to know witch
image is selected. I try the selection.createRange().htmlText but it
returns me null. I see that when i have an image selected, the selecion
type returns me "Control", but how can i access the properties of this
control?
I have an iframe which is by default hidden. It becomes visible on a double click event and should be in editable mode. I set iframeObject.contentDocument.designMode='on' on body load event. But when i fire a double click event, iframe becomes visible but not in editable mode. How to achieve this specially for firefox2.Any other alternative, let me know. In IE its working fine. Also i want to know how to set textarea value to an iframe
View 1 Replies View RelatedI have several issues with my multilevel drop down menu The First issue is : the page has 2 iframes (one has the horizontal multilevel drop down menu on the top) the below iframe has my site address Now, when i hover over the menu it does not open or expand but when i open just the menu without any iframes it does This clearly means that the menu is not coming out of the iframe bring it on top of everything of the page Note: i have placed the menu in one iframe and a page opens below it in another iframe. The Second issue is : I want the navigation bar that is the multilevel drop down menu to be editable Which means i have a blog and a forum on my site but my visitor wants that the blog should not appear there and another link to play games should
be there and hence he/she can edit it And please also try to make it work on cookies so that the user info and preferences are saved in cookies and whenever he/she comes back they see the page their way. For you: I would like to tell you that IdeaLab has launched a Twitter Advertising, Widget and Search platform and the first 1000 people are getting $100 go to tweetup.com
I'm trying to implement is a table with editable rows and columns that will feed back into a database. If I could do it with AJAX that would be great too, but I'm not too familiar with javascript. I don't need the code, I need more of an idea. The HTML Table is currently a recreation of the MySQL table minus a few columns. Its all in text, but if I could make the text editable, or better yet, make the text turn into input boxes it would be really cool. I'm not really sure what kind of methods and properties I would need, or quite how to put it all together. What do you think is the best way to go about the entire project?
View 8 Replies View RelatedI have javascript code in a website I inherited that allows users to edit a block of text. However the block of text is a product name, and needs to be uneditable by anyone that is not an admin.
View 2 Replies View RelatedHow would I make an normal form input field go from editable (where someone can write text into it) to solid text (not editable) simply by clicking anywhere on the page away from the field And then.. ..the reverse. Clicking on the non-editable text would suddenly create a form field (with that text in it) once again editable. Possible with JavaScript?
View 1 Replies View RelatedI have an instance where I do some work in a page contained in an iframe and then need to either outright move or just copy the resulting page elements into the parent page. All of the back end stuff works fine, but the Javascript just runs and doesn't produce anything. The script in question:
Code:
var AddressListDiv = parent.document.getElementById("AddressListDiv");
var ListPanel = document.getElementById("ListPanel");
for(var LPC = 0; LPC < ListPanel.childNodes.length; LPC++)
{
[Code]....
I think I'm running into a restriction in Javascript, but I'm not 100% sure.
I have to create an editable text window. On this text window, there will 2 buttons "save" and "cancel". On clicking the "save" button the text in the window should be saved in a text file to a predefined directory. How can this be done using jquery.
View 1 Replies View RelatedI'm relatively new to javascript. I want to create an editable text window popup. Upon writing a free text the user should have an option to save or clear the text. He should be able to save the text in a predefined location locally. How can this be done in javascript.
View 1 Replies View RelatedI have an iframe somewhere on my page. Now on click of a link, I would like to show it in a different location on the same page, BUT I don't want it to reload again. I've tried this simple method but it doesn't do it because the iframe reloads in its new location.
<script type="text/javascript">
function move(what, where)
{
document.getElementsByID(where).innerHTML = document.getElementsByID(what).innerHTML;
}
</script>
[Code]...
First off, sorry if this is the wrong section. Adobe Forms isnt exactly Web Development, but its the only place I could find to post about javascript. If this isnt the correct section, Now, onto the question (please note, I am inexperienced with javascript). I have an Adobe form with a default text like this I have javascript that looks like this, so that when tabbing into the field, it skips past the default text:
function SetEnd (text)
{
if (text.createTextRange)
{
var FieldRange = text.createTextRange();
FieldRange.moveStart('character', text.value.length);
FieldRange.collapse();
FieldRange.select();
}
}
SetEnd(this);
I was wondering if there is a way to make it so the default text cant be changed at all. Even better would be an alternative way of having the default text there but not "part" of the field, but at the same time, not being able to type over it either.
I've a div that is editable (contentEditable = true). The div has a fixed size like a letter page. When the user has written so much text that the text overflows I want add a new div above and let flow the overflown text in the other div. (it's the some behavior like MS Word in page view, but now it is in the web)
It is possible to do something like this in the web?
One way to implement this is to check if the text of the div overflows (I've found java script examples in the web which do that). And than I need the text that overflows to move it to the next div. But I have not found a function that do this. Is there such a function?
Another way is to insert a gap at that position a new page begins and use an background image that looks like a page border. With this solution, the whole text is in one div but it looks like floating to another page. But therefore, I have to add a gap between to lines at a specific position (the page border/margin and the gab between the pages). Does anyone have an idea how to realize this?
I have learned a good bit of PHP and have implemented it for use in my work as a math tutor.My kids are telling me, however, that it is too inconvenient to hit tab or click on the next text box and would prefer to use the old style pencil and paper.I thought of a good idea: Javascript would be able to automatically focus the curser on the next text box if some condition was met.For example: 6+7. If the textbox reads 13, it will focus on the next text box. Otherwise, nothing happens. This kills three birds with one stone; the user will know if they got the question right or wrong and it will move automatically if they got it correct.The problem is I lack any real JavaScript wisdom. I would guess this would be quite simple. The closest thing I have found upon searching was this from the user requestcode, but this has to do with once the user has typed in 4 characters it moves automatically.
<SCRIPT LANGUAGE="JavaScript">
function nextbox(fldobj,nbox)
{
[code]....
I want to get the cursor start and end position of a selected range in a text-field or text-area. i tried lot of functions in various forums. but when the last character of the selection is a new line character JavaScript ignore it in IE6. any one having idea ?
View 1 Replies View RelatedI'm totally new to JavaScript, and haven't been able to find the
answer to that on the web:
I have an image and want to use an imagemap in a way that when the
cursor touches a certain point there's some text (possibly
moving/scrolling) displayed on/over the image.
In concrtene: I have a face, and when touching the eye with the cursor
I want to print "seeing" in the screen.
I'am trying to create a text, which moves from the top to the bottom and the text which disappears at the bottom, comes in at the top.
<div id="myFloatingText">
|
V
Here is my text which should be moved down and the line which disappear at the bottom should
appear at the top.
|
V
</div>
Ive got a form with 3 text fields, one for first name, last name and one i dont what the user to be able to write things in(if that cant be done no biggy), when I hit submit, I want to move these two entries (first name and lastname) into uneditable text field so basically just combine the two, and then the user can add more names and it just keeps adding them to the end of the other text field... kinda hard to explain, basically like a chat type thing, where hitting enter just adds more names to the other text field except only you can see it.
View 9 Replies View RelatedI am actually using lotus domino designer to design a page. I am using javascript at the front end. I have created a field called status. I am trying to move a value to the field. using the code below:
document.forms[0]. status.value ="Submitted";
However I am getting an error message saying status is not and object or null.