|
JavaScript - Clickable Links In Editable Iframe
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! Similar TutorialsPlease 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.
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. 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! Disclaimer 1: I am not a programmer, just a curious designer, so please take that into consideration in your replies. Disclaimer 2: Despite all advices against it, I couldn't find a better solution to my website than using iFrame Disclaimer 3: Before asking for help, I researched *several* forums and although I found people discussing similar issues, I was not successful at adapting their solutions to my needs. Gentlemen, I need your help implementing a method to intercept and redirect external links to a dynamic iframe. By "dynamic" iframe I mean an iframe whose SRC would be filled up in accordance to the external URL being intercepted and that it would resize its HEIGHT accordingly in order to avoid scroll bars. The function for resizing the iframe id="child" is already correctly implemented like so: Code: <script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('child').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('child').height=
the_height;
}
//-->
</script>
and the call Code: <iframe src="/main/index.php" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child"> This what I have going on: - index.html => contains some content and the iframe id="child" - childpage1[...N].php => several PHP pages which I do not want to show up outside of the parent "index.html". These pages use clean URLs from CMS such as "http://mydomain.com/pages/this-is-a-child-page/" Users might click on external links from search engines, for instance, about an specific page such as "http://mydomain.com/pages/this-is-child-page-7/" which obviously would load the page "orphaned", outside "index.html" and that is exactly what I am trying to avoid. Based on what I have researched so far, the best way (please, correct me if I'm wrong) to deal with this would be implementing a test condition on the header of the PHP child pages to verify if they are on "top" or not (if they are already inside the "parent" object "index.html"). If FALSE, the page would load normally, if TRUE, a variable should be created to store the URL of the requested page and passed through the link to the page "index.html" which would be immediately called. In "index.html" there would be a script to collect the variable sent through the link (something like "http://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/") and break the text string apart, store a portion of PATHNAME (in this case, "/pages/this-is-child-page-7/) and use it to replace the current SRC of iframe id="child". Probably, there would have to be another testing function in this script to compare the variable passed from the "orphaned" PHP page against the current value of SRC in iframe id="child" to determine if any action is actually required. This "replacement" function would be called onLoad and if tested true would run and refresh the page with the proper value in the iframe SRC. All this should be accomplished while still making the iframe HEIGHT dynamically adjustable and show a "clean" URL in the browser, such as "http://mydomain.com". The potential issues I foresee is an infinite loop due to two onLoad queries (one for SRC, another for HEIGHT) in the parent and child objects, which might required a merge into a single script. As you can tell, I have an idea of what needs to be done but not a clue on how to get it done. Any help would be greatly appreciated. Thanks, 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 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 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! 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. 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. 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 need to change the background and the header of a website on which i display ads (by an adserver) It works with this code : <script type="text/javascript"> parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)"; parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0"; parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat"; parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21"; parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)"; </script> But i need those elements become clickable. Have you any solutions ? Thanks a lot. Sorry for my %"*!?& english Benoo I have created this svg color picker : Edit fiddle - JSFiddle I want that each color can be clicked and if each of them clicked, it will rotate the selected image to the top while the rest of the color will be moved accordingly clockwise (like a wheel). I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button: Code: <input type="button" value="Preview" onClick="popupform();"> works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry). When I substitute Code: <input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();"> everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found. The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff. Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php) Thanks in advance. I have a situation in which I have to track clicks (links etc..). The problem is, I have a larger div ie - parentDiv - like 300px height, 400px width - approximate. This div has a background image. Now, the issue arises because over this div (parentDiv), I have another div "announceDiv" on top of it showing information. I ONLY want the parts of parentDiv that is NOT covered by announceDiv to be clickable. Just to reiterate, I have a big div that I want clickable (so I can add a link to the click), but over this big div I have a smaller div showing content ie, information, that links to its own stuff. BUT I want to be able to link from this background image that is in the parentDi without affecting when I click in the smaller div that is superimposed over it. any ideas? has to work in ie6+ and ff 3+ hi everyone! i downloaded a Facebook Page template recently. the template works great, but i wanted to add one thing. here is the demo of the code: http://www.facebooktemplates2u.com/d...best_business/ here is where you can download the template: http://www.schoolofrok.com/facebook/html.zip/ anyhow, the part i want to change is the link that directs it to the content. for example, when you scroll over About Us, the little pop up from the bottom comes out. when you click it, it takes you to the About Us content. what i wanted to do, is make it so that when you click the whole jpg, it can take you to the content also. i noticed that the small link that pops up is too tiny and people get confused on where to click. any suggestions? TIA! My slideshow links will only open inside my inline frame. I'm sure there's something simple I need to change in the code to make it open full screen. Here is my code. Any help would be so much appreciated! Thank you. Shawnel <head> <style type="text/css"> .style1 { vertical-align: top; } </style> </head> <script type="text/javascript"> <!-- //preload images var image1=new Image() image1.src="Images/Picture Box/PictureBox1.jpg" var image2=new Image() image2.src="Images/Picture Box/PictureBox2.jpg" var image3=new Image() image3.src="Images/Picture Box/PictureBox3.jpg" var image4=new Image() image4.src="Images/Picture Box/PictureBox4.jpg" var image5=new Image() image5.src="Images/Picture Box/PictureBox5.jpg" //--> </script> <body style="margin-top: 0"> <a href="javascript:slidelink()"><img src="Images/Picture Box/PictureBox1.jpg" name="slide" border="0" width="539" height="314" class="style1" /></a> <script type="text/javascript"> <!-- var step=1 var whichimage=1 function slideit(){ if (!document.images) return document.images.slide.src=eval("image"+step+".src") whichimage=step if (step<5) step++ else step=1 setTimeout("slideit()",3000) } slideit() function slidelink(){ if (whichimage==1) window.location="learnmore.htm" else if (whichimage==2) window.location="contactus.htm" else if (whichimage==3) window.location="hungerheroes.htm" else if (whichimage==4) window.location="donate.htm" else if (whichimage==5) window.location="volunteer.htm" } //--> </script> Hello.. I have seen this somewhere, but I don't know how to make it - possibly with a JavaScript integrated with the HTML code to create a submit button. What I want is once the page is loaded, I want the submit button to count down from 5 to 0, and when it's reached 0, the button is clickable - but before that, nothing happens when you click it obviously. How can I obtain this? Whether if it's created in JavaScript or jQuery doesn't matter, I use both... Thanks Hi! Not sure if this is the right forum for this, but I'm using Javascript so it kinda made sense I have some Javascript that is selecting text from a form textarea and copying it to the clipboard: Code: document.myForm.myTextarea.focus(); document.myForm.myTextarea.select(); document.execCommand( 'Copy' ); This works great. However there is a problem when I try to paste the text somewhere else. Assuming that the text that is being copied is a URL ( ie. http://www.google.com ), I would like it to be pasted as a link. When I grab a URL from the address bar inside a web browser and paste it somewhere ( such as an e-mail ), it automatically shows up as a clickable link. When I put a URL into my form textarea and run the javascript, it gets pasted as a plain text ( ie. not underlined and not clickable ). Why are these two different? I've tried running a program to see what is actually copied into the clipboard and I don't see any differences. There must be something that denotes the URL copied from the address bar as a link and therefore makes it clickable when pasted. Is there a way to force this in order to make what is copied to the clipboard from my form textarea a clickable link? Thanks! |
|||||||