JQuery :: Re-establish User Selection In A Div With Designmode=true
Jun 5, 2009
I have a web app where I have created a div to masquerade at a textarea so I can add highlighting according to so rules. I rely on setting designmode=true. After certain amounts of idle time my code grabs the text from the div, which consists of tags and <span> tags and re-generates the html with new spans. The paragraphs and text stay the same. So far so good. But when the div "repaints" the insertion is set to the beginning of the div. I want it to visually stay put, meaning I need to somehow record where it was before nd then restore it afterwards. Problem is, I can't seem to get my head wrapped around how selections (Ranges, etc.) work. I've been googling around for the last day or so and have not yet seen the light.
Let me first say I am not a java programmer but I can follow the tutorials and get some things to work. Here I am trying to create a password protected page, realizing the level of security is not very high.
This page of code, link1.html, will be blank and if the correct password is entered then I want to automatically link to another page, barcs.html.
Below is the distillation of code with which I am having troubles. The code works, but I am sure that there must be a better way of doing things.
This simple program displays two boxes. When the user mouses over either box, all boxes are returned to their original state, a zIndex of 2 is applied to it, then the box expands partially over the other box. This works fine.
However, I am using setTimeout to coordinate the setting of the zIndex value, which is something that I would think would better be accomplished through a callback. The problem is that I do not know if a called function can take a callback (I have tried without success).[code]...
I am trying to pass the slection made by a user to a javscript function using the onchange event. The problem is I can get the index but not the actual value. As my list is variable (dependent on a db) I cannot hard code to a static index. I either need a way to determine the number of items in a select control or a way to determine the actual selection made by the user.
Can anyone enlighten me as to the code to determine what option the user selects?
I am working on a robot project, that is required to create a website to control the robot via serial port.. The website is plainly html, no linking to database is needed...
I have no idea how and what language to use and can JavaScript communicate with serial port? and how?
I have a confirm message box which asks the user whether they wish to take a survey. At the moment the confirm box appears each time the page is loaded. Would there be a way that when the user selects OK to take the survey this is remembered, so when the users next visit the page the box doesn't appear?
I have problem, the code cannot operate. The user must select in dropdown list having one display of image every time.
JS code var sel = document.getElementById("sw"); function f1(){ var imgs = ['chart1.cgi', 'chart2.cgi', 'chart3.cgi', 'chart4.cgi']; var im = document.getElementById("pic"); im.src = imgs[this.selectedIndex]; }
how to properly add some text content before and after a user's selection?I am working with the TinyMCE editor, and I can get the following from it:
* User's selection as a W3C compatible range * User's selection as a browser selection object * User's selection as a node (element) that encompasses the user's selection
I also need the user's selection to remain selected after being wrapped.I've looked all over the web and could find nothing (except running into my OWN previous questions about this).Here's an example of what I'm trying to do:
[URL]
First line is original text, second line a part is selected, third line the selection is wrapped and the selection remains selected.
How do we use javascript to only allow selection from the list in question 3 to be made IF the user selected at least 1 check box in question 2? Below is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL]"> <html xmlns="[URL]" xml:lang="en" lang="en"> <head><title> Example </title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head><body><form name="Form"><h1>Survey </h1> <p> Please take a minute to fill in the form below. </p><ol> <li> Question 1.</li> <li> Q2.Which classes have you attended? <br /> <input type="checkbox" name="attend" id="aerobics" value="aerobics"/> <label for="aerobics">Aerobics</label> <br /> <input type="checkbox" name="attend" id="boxing" value="boxing"/> <label for="boxing">Boxing</label> <br /> <input type="checkbox" name="attend" id="circuit" value="circuit"/> <label for="circuit">Circuit Class</label> <br /> <input type="checkbox" name="attend" id="weight" value="weight"/> <label for="weight">Weight Training</label> </li> <li> Q3. Which of the above classes has been beneficial for you? (choose one from the list): <select class="drop" name="dropdown"> <option value="aerobics">Aerobics</option> <option value="boxing">Boxing</option> </select></li></ol></form></body></html>
I've got the following code snippet in a function to set a coockie based on whether or not the user selects a checkbox. Using an alert the cookie text looks fine but when I go to retrieve the values the only one it can find is the value for user. I've a few different things and none of them seem to work. I'm getting the same thing in both IE and Firefox. The only cookie listed is the 'user' with the proper expiration date. Code:
I have 3 TextFields, called txtUSD, txtEUR, txtAUS. And a PopupList with the same values, minus the txt part, but I need to form the names of the TextFields to use based on the selection that the user made. So I've done this:
Code: function btConvert_Click(event){ var amount = document.getElementById("txtAmount").value; var rates = document.getElementById("lstConvertTo").value; var from = "txt" + document.getElementById("lstFrom").options[document.getElementById('lstFrom').selectedIndex].text; var to = "txt" + document.getElementById("lstConvertTo").options[document.getElementById("lstConvertTo").selectedIndex].text; var curr_from = document.getElementById(from).value; var curr_to = document.getElementById(to).value; if(curr_from > curr_to){ amount * rates; } else { amount / rates; } alert(result); }
But every time I try it I get this error: Code: mobile/main.js line 215: Result of expression 'document.getElementById(from)' [null] is not an object.
I have a page I am working and I am having some trouble with: I need to show and hide areas based on a radio selection. I initally started using the show / hide feature in Jquery but the problem is the elements need to be removed but then put back if the user selects the radio buttonagain as it has form elements that have validaion on them. The validation is still trying to validate the form elements becuase they are still on the page but just not showing. This is the radio group the user makes the selection from:
I have a ColdFusion page with a select drop down list. On submit, I'm storing the value in a cfparam and trying to use jQuery to auto select that particular option. Currently I'm using :contains but this is unacceptable because it selects the last item that contains the cfparam.
$("option:contains('<cfoutput>#form.company_type#</cfoutput>')").attr('selected', 'selected'); Is there something like this: $("option").equals('<cfoutput>#form.company_type#</cfoutput>')").attr('selected', 'selected');
[Code]....
I willconsider other alternatives to accomplishing my objective.
I am trying to create a web page in which the contents of one selection list depends upon which element in another selection list is chosen, but where the information to populate the first selection list comves from an SQL database on the web server.
There are a couple of these situations in my application but, for example, the first list might be a list of counties, and the second list a list of states/provinces. Obviously the names of counties depend upon which state/province is chosen, but there are too many possibilities to be able to embed them within the web page itself. So when the user selects a state/province I need to go to the server to ask for the list of counties.
I have seen a number of posts that sort of address this issue. For example it is suggested to use <script src="a URL"/> to ask the server side code to send up data of type "text/javascript". However the examples do not seem to address how the server side code would know which state/province the user had selected.
If there is a web site that addresses this sort of thing, I would appreciate any pointers.
I'm trying to build a web page where the user can insert text dinamically. When the user hits a button, a new text box is created and the user can insert text into it.
It's working nice with Firefox 1.0, but it's not working with IE 6.0.2800.1106 (W2K SP4) Code:
is it possible to set document.designMode = "on" for an iframe element that is loaded into a page with AJAX? I've been searching for a solution for hours, it can't be set with <body onload=> since the page is already loaded, and window.onload does not work. Any ideas?? The reason i need to do this is because I have a web app that includes a multipage form and the pages of the form are controlled with XmlHttpRequest, i need the iframe element that is loaded to act as a rich text editor.
If the user presses enter and their cursor is in the middle of a <p>, i want to insert a <br> tag. If their cursor is at the end of the <p> tag's innerHTML, then i want to insert a new <p> tag.
I can insert both tags as I need, but I can't find a way to get the position of the cursor relative to its containing tag (just assuming there's no other markup in the <p>'s innerHTML, so that selection.parentElement() will return the <p> tag).
In the code below I have an iframe that acts as a WYSIWYG editor. On load a link is loaded inside the iframe. When you click the link a div opens that displays the URL of that link. Upon changing the link inside the DIV I want to update the href tag that I clicked.
I've experimented with pasteHTML/execCommand("inserthtml") however this only updates the link when you select the text before clicking (as opposed to just clicking on the link), otherwise it inserts a whole new link.[code]...
I have a few DIVs which contain text, and when the user double clicks on them, I want the DIVs to change into an interface where he can edit that text. So far, I managed to document.createElement and IFRAME and attach it to the DIV successfully. I could only get IFRAME.contentWindow.document.designMode = 'on'; working in IE. Here's the code: ("this" - is the DIV element)
[Code]...
As you probably can see I am also trying to set the DIV's innerHTML (the text, basically) as the editable text inside the IFRAME, but this too is not working.
I'm rewriting a cms for Mozilla and it uses designMode. My problem is that the cursor can leave the editing div-element so the functions don't work correctly.
How can I prevent the cursor from leaving this html-element?
I have a drop-down box which lists manufacturers of computer products. I want it so that when a user clicks "Other" from the drop-down box, a new input field appears below it which asks them to specify an alternative manufacturer.
I know it is to do with the "onchange" attribute of the manufacturer input field, but I am new to JavaScript and don't know what code is required for the function to do this.
I've been able to successfully add event handlers to an iframe where designMode = "on". The scope of these events are at the document of the iframe (contentWindow.document). What I would like to do is actually bind events to elements w/in the document while designMode is on. I have tried various methods like using find(), bind() and or live() but seem to have hit a road block. I have tried the following w/nosuccess. In the examples below .doc() returns the iframe's document.
I am trying to create a WYSIWYG editor for my site, but seeing as how every browser gives different results when using the execcommand method, I am trying to do my own insertions instead.
What I would like to do is create an iframe with designMode On to enable editing of the frame, but when someone does a command to bold text, I want to make a method which enters <b>Some Highlighted Text</b> into the frame where the user highlighted so it would appear bold and the source would have the <b> tags.
My issue is I have been unsuccessful in learning how to take the selected text within an iframe and surround it with tags. I was able to accomplish this in Internet Explorer using this code:
Except the resulting text would actually have the <i> tags appear, and the source would be:
Pretty retarded if you ask me since in no way did I want it to convert the tags into entities.
Anyway, if anyone could please direct me to a method in which I can successfully take selected text within the iframe and surround it with HTML tags in such a way that the formatting will actually show.
