I am working on code to wrap BBCodes around a user selection, then leave the selection selected for possibly adding more BBCodes around the same selection.My problem is that there seems to be several different ways to do it and I can't figure out which one is "the best".Now, I can't use the "standard" way of doing this because I am working with TinyMCE. I know there are countless examples on how to do this with textareas... that is NOT what I need.TinyMCE can give me a selection RANGE, a selection NODE or a selection OBJECT. Note that if I use TinyMCE's range, it internally "normalizes" the range to be a standard W3C range, regardless of browser.I've created a new range, extracted the selection from the user's range, created elements for the open and close BBCode, inserted the elements into the range and finally set the user's selection to the new range. Works fine.
I also tried taking the selection node (which is an element), then simply used "innerHTML" to add the opening and closing tags, then set the node to the modified node. Works fine.I've also used the editor's built in "selection.getContent()" and "selection.setContent()" calls and THIS also works.I've even tried using the DOM "surroundContents()" function, then used a regex to change the < and > into [ and ]. Freaky... but that works too.So, my dilemma is... which method should I use???To recap, here's what I want (blue represents selected text):
This is a test sentence. (user selected some text)
This is a test sentence. (text is wrapped and remains selected).
This is a test sentence. (user clicked another bbcode button).
I'm trying to 'wrap tags' around text in a text box.
<script language=javascript> function insertFauxTags(fauxTag, e, endFauxTag) { var e = document.frmAddNewForum.txtTopicMessage.selected; document.frmAddNewForum.txtTopicMessage.Value += fauxTag + e + endFauxTag; } </script>
<a href="javascript:insertFauxTags('[p]' + e + '[/p]')"><img src="http://www.<%=strSiteName%>/images/parabutton.gif" border="0" alt="Paragraph" /></a> When I run this in FF I get 'e' is not defined - any ideas?
I found this code on some web site which actually works on my current Safari browser. I will be grateful if anyone out there with IE version 8 or less can verify it working as well.
Basically I wanted to highlight some text with mouse drag, and have that piece of text wrapped with [high] at the beginning and [/high] at the end.
I am building an e-learning lesson in Lectora that will be deployed to a SCROM compatible learning management system. The lesson is converted into HTML before that happens. My table of contents is around 100 pixels wide but some of the page names are longer than that and do not display fully when viewed in a browser.What I am trying to do is this:The page name for this page is very, very long and I can't see it all. Blah blahWould becomeThe page name for this page is very,
I've got a form with a textarea box, currently you can just type a message in the box and submit it, then it is added to a mysql database and shows up on a page I made for people to view staff memos.
I've been asked to add formatting options like bold, italic, underline etc. Unfortunately me and javascript have never really met so I'm quite stumped. I can handle the form processing with PHP converting [b] to <strong> etc myself but I need help with the actual user interface.
I've got an unordered lists. I need to make the numbers larger (ordered lists numbers) and keep the text in the list at the same size. So what I was assuming I need to do is make the <li> font-size larger (the size I want the unordered list number to be), then wrap the text with a <span> and make the <span> smaller. I'm using a CMS and since the client will be modifying the text in the CMS, I can't exactly tell them to put <span> text, blah, blah</span> in the unordered lists as they won't figure that out. So how would I write the jQuery to wrap the text in the unordered lists with a span? Currently the output is like so:
I am trying to get/set only text of list only element text value. But for some reason I can not select it in clear way. List something like:
<ul> <li id="myid"> Here text that I want to modify <ul> <li id="dfdf">i don't want modify this</li> <li id="dfdf">i don't want modify this</li> [Code]...
I have the following code I picked up which tries to fill in a text field with data depending on a user's menu item selection. I place this code in the header:
var groups = new Array(); groups["apple"] = "fruit"; groups["grape"] = "fruit"; groups["milk"] = "diary"; groups["cheese"] = "diary"; groups["chicken"] = "meat"; groups["beef"] = "meat";
function printColorAndGroup(){ var value = document.getElementByName('food').options[document.getElementByName('food').selectedIndex].value; document.getElementByName('food_group').value = groups[text]; document.getElementByName('food_color').value = colors[text]; }
I then use the following html in the body: Code: Food: <select name="food" onchange="printColorAndGroup()"> <option>apple</option> <option>grape</option> <option>milk</option> <option>cheese</option> <option>chicken</option> <option>beef</option> </select>
Group: <input type="text" name="food_group"> Color: <input type="text" name="food_color"> But when I run this nothing happens... Here's the page [URL]. None of the code above is colored... looks like I'm using the wrong tags here. Which tags should I use to post this stuff correctly?
I have 2 example/test pages of the issue I'm experiencing. For now, I'm just trying to get it to work in a standards-compliant browser, so view in something other than ie:
[URL]
If you click and drag the orange bar up or down, it works fine on the first page. However, on the 2nd page, if you click the orange bar and drag down too fast, it starts selecting text and then the bar gets all wacky.
My suspicion is that the bar gets messed up because the text is being selected. That occurs because if you scroll too fast, the cursor goes off the orange slider bar and starts selecting. If you scroll very slowly so that the cursor doesn't go off the bar it seems to scroll fine.
I've tried everything I can think of to stop the text from being selected, but I'm not 100% sure if that's the cause of the problem or just a symptom of something else (maybe bubbling or something?). I tried returning false on every mouse event on the lower panel, tried creating an absolutely-positioned mask above the text in the lower panel, tried removing all text from the lower panel, tried stopPropagation(), etc., but nothing seems to work.
If I set the mousedown/over/move on the lower panel to return false, it prevents selecting text normally by clicking the mouse & dragging, but it will STILL select the text if I click on the slider bar and drag down.
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.
I have a page on which I have 2 dropdowns. Both are similar. I have a piece of code that whill make a textbox appear if we select "list Box" as the option in the drop down. But for some reason, the first dropdown works fine, but for the second dropdown, the textbox is always there on page load. The code that I am presenting can be copied as a HTML page and you will know what I am referring to.
<html> <script type="text/javascript"> function showfield(name){ if(name=='lstbox')document.getElementById('div1').style.display="block"; else document.getElementById('div1').style.display="none"; } function hidefield() { [Code]...
Basically I'm making an order form that updates the Total Text Box at the bottom of the page depending upon which selection is made from the drop down box in the form,
Is there anything out there that allows for a diagonal and vertical text capture in javascript or jQuery? I was not successful in finding anything. I have a game similar to word find that I've developed, but I need to be able to capture text vertically and diagonally. Otherwise, the only solution will be for me to do a by-click basis to capture items on the screen. I found the script below which handles horizontal capturing:
<script type="text/javascript"> document.body.style.cursor="url(3DArrow.cur), crosshair" ; if (!window.Kolich){ Kolich = {}; } Kolich.Selector = {}; Kolich.Selector.getSelected = function(){ var t = ''; if (window.getSelection){ t = window.getSelection(); }else if(document.getSelection){ t = document.getSelection(); }else if(document.selection){ t = document.selection.createRange().text; }return t; }Kolich.Selector.mouseup = function(){ var st = Kolich.Selector.getSelected(); sel_text=st.replace(/s/gi,""); if(st!=''){ alert("You selected:"+sel_text); }} $(document).ready(function(){ $(document).bind("mouseup", Kolich.Selector.mouseup);}); </script>
I have a Javascript function that allows the display of a textbox upon selecting an option from a dropdown menu. In my case when a user selects listbox as the option, the text box appears. I want the same thing to happen when another option (checkbox) is selected. when I repeat the JAVAscript code, the first textbox(listbox's textbox) appears irrespective of which option(listbox, checkbox) I select. I want to be able to appear/disappear only the respective textbox. Here is my code.
<html> <script type="text/javascript" > function showfield(name){ if(name=='lstbox')document.getElementById('div1').style.display="block"; else document.getElementById('div1').style.display="none"; } function hidefield() { [Code]....
