|
JavaScript - How Do I Get The Pixel Position Of The Caret In An Editable Iframe?
How do I get the pixel position of the caret in an editable IFrame?
I am building a WYSIWYG editor which works for Gecko, Trident, Webkit and Presto. I am doing this by setting the designMode to 'on' for an IFrame. The problem that I am having is that I need to know the pixel position of the caret so I can determine if the caret is at the bottom of the page. The reason I want the pixel position is so that way I can auto scroll the scrollbar to that position. I should mention that we are using JavaScript. Any ideas appreciated. Similar TutorialsI have a div tag that is contenteditable so that users can type in the div. There is a function that adds a link into the div when the user presses a button. I would like the caret to be positioned after the link so that users can continue to type. The link can be inserted many times. Example Code: Code: <div id="mydiv" contenteditable="true" tabindex="-1">before <a href="#">link</a> after</div> I require this code to work in: IE, Firefox, Opera, Safari and Chrome. Can anyone offer any help? Please could someone tell me the JavaScript to allow the user to edit the content in an iframe, but I need to know if it will allow the user to edit the iframe in all browser types.
Hello all, I am using an editable iframe to change the style of the text as a person enters text depending on what they type in. Sometimes the text needs to be a link, and while inserting a link works, I can't click on it. I was wondering if anyone knows how to get links in an editable iframe to click through. I've researched this for a while now without getting anywhere. Right now I'm guessing that I need to somehow find out if the user is hovering over a link and turn "designMode" off for that section of text, or the whole iframe, I'm not completely sure. Anyway, any help would be greatly appreciated! Hi all, 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. any help or pointers would be greatly appreciated. thanks. Hello I 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 Please help me 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 Please help me, it will be really appreciable. Thank you very much in advance! I'm currently trying to move a div that holds a text message forward pixel by pixel and eventually I'll write the code for it to go backwards and repeat. But I am not quite understanding what I've done wrong. It seems like a simple task, but It's not going anywhere. I call a function from the xhtml document like so: Code: <body onload = "moveText()">
<div id="movingText">
<p>This message should scroll forward</p>
</div>
............
and the function looks like: Code: function moveText() {
var movingText = document.getElementById("movingText");
movingText.style.left = (parseInt(movingText.style.left) + 1) + "px";
setTimeout("moveText()", 50);
}
it seems so clear cut, I can't imagine what could be wrong but apparently all my browsers don't like it. Anyway spot anything? hello guys, I need help I got simple page with two iframes in it Code: <iframe src="aaa" height="48%" width="100%"></iframe> <iframe src="bbb" height="48%" width="100%"></iframe> and I need when I load the page scrollbars position will be like 20% down like this http://img198.imageshack.us/img198/8935/scrollsw.png how can I do this? thank you I have created an editable grid based on: http://www.webismymind.be/editablegrid Although I have created a few basic sites - coding is still pretty new to me, but what I want to do is make this grid editable by an admin user - and then have other users who can view it but not edit it. I am trying to create a basic staff rota & any help would be much appreciated Thanks Hello all, I have a form which contains some fields like company_name, address, phone, email etc. Also, I have a database with companies. I want that, when typing the beginning of the company name, a combo box to suggest all companies that match that text. I want that when a company is selected from the combo, all other textboxes to be filled with the correct info from the database. Also, I want that the user to be able to write a company that is not registered in the database. What I have done until now: For the editable combo I used the dhtmlxcombo from he http://dhtmlx.com/docs/products/dhtmlxCombo/ (Filtering mode: (filter existing list)). I'm not a scripting expert, so I think I cannot build this combo all by myself. I modified just one thing. At the begining, the dhtmlxcombo.js file contained something like this: Code: if (tab)z.tabIndex=tab;z.style.width = (width-19)+'px';self.DOMelem.appendChild(z);self.DOMelem_input = z;z = document.createElement('input');z.type = 'hidden';z.name = name;self.DOMelem.appendChild(z);self.DOMelem_hidden_input = z;z = document.createElement('input');z.type = 'hidden';z.name = (name||"").replace(/(\]?)$/, "_new_value$1");z.value="true";self.DOMelem.appendChild(z);self.DOMelem_hidden_input2 = z
I added z.id='dest_company';, so the file looks something like this, now: Code: if (tab)z.tabIndex=tab;z.style.width = (width-19)+'px';self.DOMelem.appendChild(z);z.id='dest_company';self.DOMelem_input = z;z = document.createElement('input');z.type = 'hidden';z.name = name;self.DOMelem.appendChild(z);self.DOMelem_hidden_input = z;z = document.createElement('input');z.type = 'hidden';z.name = (name||"").replace(/(\]?)$/, "_new_value$1");z.value="true";self.DOMelem.appendChild(z);self.DOMelem_hidden_input2 = z};dhtmlXCombo_defaultOption.prototype._DrawHeaderButton = function(self, name, width)
The text field 'dest_company' is generated like this: PHP Code: <select name="dest_company" id="dest_company" OnChange="SelectReceiver(document.comanda.dest_company.value);" style="width:206px;" tabindex="10"> <?php echo ' <option value=""></option>'; $address_result = mysql_query("SELECT * FROM `webdb_".$_COOKIE['user']."` ORDER BY companie ASC"); while($row = mysql_fetch_array($address_result)) { echo '<option value="'.$row['id'].'">'.$row["companie"].'</option>'; } echo ' </select> <script> var z = dhtmlXComboFromSelect("dest_company"); z.enableFilteringMode(true); </script>'; ?> This is the SelectReceiver() function: Code: function SelectReceiver(id_dest)
{
if (id_dest=="")
{
document.getElementById("contact_destinatar").value="";
document.getElementById("adresa_destinatar").value="";
document.getElementById("oras_destinatar").value="";
document.getElementById("judet_destinatar").value="";
document.getElementById("zip_destinatar").value="";
document.getElementById("telefon_destinatar").value="";
document.getElementById("mail_destinatar").value="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("detalii_destinatar").innerHTML=xmlhttp.responseText;
var response = eval(xmlhttp.responseText);
}
}
xmlhttp.open("GET","modifica_detalii_destinatar.php?q="+id_dest,true);
xmlhttp.send();
}
And the file modifica_detalii_destinatar.php looks like this: PHP Code: <?php $q=$_GET["q"]; include ('conectare.php'); $sql="SELECT * FROM `webdb_".$_COOKIE['user']."` WHERE id='".$q."'"; $result = mysql_query($sql); while($row = mysql_fetch_array($result)) { echo ' document.getElementById("contact_destinatar").value = "'.$row['contact'].'"; document.getElementById("adresa_destinatar").value = "'.$row['adresa'].'"; document.getElementById("oras_destinatar").value = "'.$row['oras'].'"; document.getElementById("judet_destinatar").value = "'.$row['judet'].'"; document.getElementById("zip_destinatar").value = "'.$row['zip'].'"; document.getElementById("telefon_destinatar").value = "'.$row['telefon'].'"; document.getElementById("mail_destinatar").value = "'.$row['mail'].'"; '; } ?> All this is working just in Firefox. In IE, when I select a company from the combo box, an error is generated and no text box is completed with the correct data. The error I'm talking about is: Code: 'document.comanda.compania_destinatar.value' is null or not an object In Firefox, if I inspect element with Firebug, my select looks like this: Code: <div style="width: 204px;" class="dhx_combo_box ">
<input type="text" autocomplete="off" class="dhx_combo_input" tabindex="10" style="width: 185px;" id="companie_dest">
<input type="hidden" name="dest_company" value="45">
<input type="hidden" name="dest_company" value="false">
<img class="dhx_combo_img" src="codebase_xcombo/imgs/combo_select.gif">
</div>
Any help on this would be great. Many thanks and best regards! Hi, "I need editable table with calculations in javascript" "I have a table in that table i have 4 column like mark1,mark2 and total. if i give input to that specific cell the total is automatically calculate. Please send any code or any related links". I tried below code... <html> <head> <title>sample dynamic select list</title> <script language='javascript'> function changeContent(tablecell) { //alert(tablecell.firstChild.nodeValue); tablecell.innerHTML = "<INPUT type=text name=newname onBlur=\"javascript:submitNewName(this);\" value=\""+tablecell.innerHTML+"\">"; var u1=document.getElementById('m1').value; var u2=document.getElementById('m2').value; res=u1*u2; document.getElementById('t').innerHTML=res; tablecell.firstChild.focus(); } function submitNewName(textfield) {//alert(textfield.value); textfield.parentNode.innerHTML= textfield.value; // textfield.parentNode.innerHTML= res; } </script> </head> <body> Double click on any cell. Then enter your own text and then tab out or click on other place. <table border=1 bgcolor=gray> <tr> <th onDblClick="javascript:changeContent(this);">Mark1</th> <th onDblClick="javascript:changeContent(this);">Mark2</th> <th onClick="javascript:changeContent(this);">total</th> </tr> <tr> <td onDblClick="javascript:changeContent(this);" id="m1">10</td> <td onDblClick="javascript:changeContent(this);" id="m2">20</td> <td onClick="javascript:changeContent(this);" id="t"></td> </tr> </table> </body> </html> I got it editable table but i cannot able to add two cell and also assign result to total.. let u know please help me Thanks 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 Code: <script type="text/javascript" >
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
var x = 0 -document.documentElement.scrollTop;
var toP = String(x);
var toPP = toP + "px";
document.getElementById('fire').style.position = 'fixed';
document.getElementById('fire').style.top = toPP;
}
}
</script>
hi, i need to be able to allow a user to past into an editable div (via whatever the user chooses: right-click and paste, shortcut key, etc), but i want to discard formatting and only take the plain text. i can't use a textarea since the div will allow basic formatting (bold and italic) if applied by user-initiated events. the onbeforepaste event looked promising, but according to quirksmode the support is so limited as to be unusable. i searched the board, so apologies if this has been asked and answered. tyia for any suggestions. I have 2 questions. Can I have draggable editable images? I can make my images movable around the page, but I would like to be able to make the images editable and have the text follow the images. I would like to either have a drop down menu or buttons that can make the images displayed on the page then edit them and move them to my map location on the page. Is this possible, and thanks for any help guys. Here is the code I used for the movable images. Code: <img src="images/loconorth.gif" class="dragableElement" style="float:left"> <img src="images/locosouth.gif" class="dragableElement" style="float:left"> <img src="images/Loco east.png" width="80" height="36" class="dragableElement" style="float:right"> <p> <p><img src="images/Loco west.png" width="80" height="36" class="dragableElement" style="float:left"> I have a dropdown menu. the code is as below: <html:select name="data1" property="accountNumber" styleClass="formContent" > <option>Id1 </option> <option>Id2 </option> I need to give user an option to select from the list or enter a new value. how do you do this ? I can add another option say "new value" and when he choose this user should be able to add the new value/ please help !! I'm new to java script. Hello... Just curious on what I am doing wrong: I want to get the pixelHeight of a div called content and assign it to a variable. Then I want to use that variable as the css top position property for another div. I'm new to Javascript, but am learning it. Right now I am just having trouble assigning the variable. I get 'undefined' when I try to output the variable to the browser. Here's the code : Code: <script language="javascript">
var divh = document.getElementById('top').style.pixelHeight;
</script>
</head>
<body>
<!-- output divh -->
<script language="javascript">
document.write(divh);
</script>
this gives me undefined in my browser What am I doing wrong?? Thanks Kevin I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px. Right now it does nothing. The element always keeps the fixed positioning even after resizing the window. Here's what I have right now: Code: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" />
<meta name="verify-v1" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #000000;
font-family: Verdana;
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="image_src" href="./logo.png" />
<script language="javascript" src="emoto/float.js"></script>
</head>
<body>
<div class="wrapper">
<div id="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T
est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2
</div>
</div>
</body>
</html>
style.css Code: a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}
.wrapper{
min-height: 2000px;
min-width: 1000px;
}
#header_float{
width: 100%;
min-width: 1000px;
height: 35px;
left:0;
right:0;
top:0;
position: fixed;
background: #49963A;
z-index: 1000;
}
.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
}
.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}
.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}
.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}
.content_wrapper{
position: relative;
top: 35px;
width: 995px;
min-height: 450px;
}
img{
border: 0px;
}
float.js Code: if (screen.availWidth<=999)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';
Hi @ all! 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? Maybe there are other possibilities to find a solution, aren't there? I hope, you have understand what I want to realize. If not, please feel free to ask me! Thank you for answers and hint in advanced! Konstantin Hi I would appreciate a pointer in the right direction for a script I require. I will have two text boxes that will accept numeric values and an image. What I need is if the user change the value of box 1, the value in box 2 will automatically update depending on the pixel dimensions of the image and vice versa. Basically I need to automatically calculate the pixel ratio of an image and then use that value to multiply by the user inputted size. Any ideas? Rob Hello All, I'm about to pull my hair out dealing with this pixel. This is the information CJ has given me. The OID (order ID) is a unique alphanumeric ID that needs to be generated on your end, and will be assigned to each unique transaction that occurs. If the OID is not unique, meaning if our system detects a duplicate OID for another transaction, the second transaction will be ignored, which is why it is important that unique OIDs are generated for each transaction (in your case, for each lead form that is completed and submitted) and What I would suggest doing for your OID, is hardcoding a time and date stamp into the pixel to act as the OID. When you do this, you must exclude any symbols (colons, slashes, periods, etc) from the time/date stamp, and have the time be recorded all the way down to the millisecond. Since it will be extremely rare (if it happens at all) that two transactions will occur within the same millisecond, it will create a unique number to act as the OID for each lead that is submitted. I have no idea what this means or how to do it. Here's an example of a pixel. http://cj.com/u?CID=1520654&OID=Invo...TYPE=344815&IT EM1=lead&AMT1=0&QTY1=1&CURRENCY=USD& METHOD=IMG" height="1" width="20"> Someone please help, I am at my wits end. |
|||||||