Solved

Focus IFRAME when link is clicked

Posted on 2004-08-21
10
1,431 Views
Last Modified: 2010-05-18
       Hello.

        I need the following iframe to be focused:


document.writeln('<iframe onfocus="alert(\'focused\')" onblur="alert(\'blurred\')"     id="' + rte + '" name="' + rte + '" width="' + width + 'px" height="' + height + 'px"></iframe>');

        whenever the following is clicked:

document.writeln('<div id="table_' + rte + '"><a href=# width="200" height="24"title="Table" onClick="tableDialog(\'' + rte + '\'); return false;">Create Table</a></div>');



Here is the rest of the code,
Thanks!

----------------------------------------------------

<html>
<head>
<script language="JavaScript" type="text/javascript">

var isRichText = false;
var rng;
var currentRTE;
var allRTEs = "";

function tableDialog(){
alert("Create Table button pressed");
}

function initRTE(imgPath, incPath, css) {
     //set browser vars
     var ua = navigator.userAgent.toLowerCase();
     isIE = ((ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1));
     isGecko = (ua.indexOf("gecko") != -1);
     isSafari = (ua.indexOf("safari") != -1);
     isKonqueror = (ua.indexOf("konqueror") != -1);
     
     //check to see if designMode mode is available
     if (document.getElementById && document.designMode && !isSafari && !isKonqueror) {
          isRichText = true;
     }
     
     if (!isIE) document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEDOWN | Event.MOUSEUP);
     document.onmouseover = raiseButton;
     document.onmouseout  = normalButton;
     document.onmousedown = lowerButton;
     document.onmouseup   = raiseButton;
     
     //set paths vars
     imagesPath = imgPath;
     includesPath = incPath;
     cssFile = css;
     
     if (isRichText) document.writeln('<style type="text/css">@import "' + includesPath + 'rte.css";</style>');
}

function writeRichText(rte, html, width, height, buttons, readOnly) {
     if (isRichText) {
          if (allRTEs.length > 0) allRTEs += ";";
          allRTEs += rte;
          writeRTE(rte, html, width, height, buttons, readOnly);
     } else {
          writeDefault(rte, html, width, height, buttons, readOnly);
     }
}

function writeDefault(rte, html, width, height, buttons, readOnly) {
     if (!readOnly) {
          document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;">' + html + '</textarea>');
     } else {
          document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;" readonly>' + html + '</textarea>');
     }
}

function writeRTE(rte, html, width, height, buttons, readOnly) {
     if (readOnly) buttons = false;
     
     if (isIE) {
          if (buttons && (width < 600)) width = 600;
          var tablewidth = width;
     } else {
          if (buttons && (width < 500)) width = 500;
          var tablewidth = width + 4;
     }
     
     if (buttons == true) {
          document.writeln('<div id="table_' + rte + '"><a href=# width="200" height="24"title="Table" onClick="tableDialog(\'' + rte + '\'); return false;">Create Table</a></div>');
     }
     document.writeln('<iframe onfocus="alert(\'focused\')" onblur="alert(\'blurred\')"     id="' + rte + '" name="' + rte + '" width="' + width + 'px" height="' + height + 'px"></iframe>');
     document.writeln('<input type="hidden" id="hdn' + rte + '" name="' + rte + '" value="">');
     document.getElementById('hdn' + rte).value = html;
     enableDesignMode(rte, html, readOnly);
}

function enableDesignMode(rte, html, readOnly) {
     var frameHtml = "<html id=\"" + rte + "\">\n";
     frameHtml += "<head>\n";
     //to reference your stylesheet, set href property below to your stylesheet path and uncomment
     if (cssFile.length > 0) {
          frameHtml += "<link media=\"all\" type=\"text/css\" href=\"" + cssFile + "\" rel=\"stylesheet\">\n";
     } else {
          frameHtml += "<style>\n";
          frameHtml += "body {\n";
          frameHtml += "     background: #FFFFFF;\n";
          frameHtml += "     margin: 0px;\n";
          frameHtml += "     padding: 0px;\n";
          frameHtml += "}\n";
          frameHtml += "</style>\n";
     }
     frameHtml += "</head>\n";
     frameHtml += "<body>\n";
     frameHtml += html + "\n";
     frameHtml += "</body>\n";
     frameHtml += "</html>";
     
     if (document.all) {
          var oRTE = frames[rte].document;
          oRTE.open();
          oRTE.write(frameHtml);
          oRTE.close();
          if (!readOnly) oRTE.designMode = "On";
     } else {
          try {
               if (!readOnly) document.getElementById(rte).contentDocument.designMode = "on";
               try {
                    var oRTE = document.getElementById(rte).contentWindow.document;
                    oRTE.open();
                    oRTE.write(frameHtml);
                    oRTE.close();
                    if (isGecko && !readOnly) {
                         //attach a keyboard handler for gecko browsers to make keyboard shortcuts work
                         oRTE.addEventListener("keypress", kb_handler, true);
                    }
               } catch (e) {
                    alert("Error preloading content.");
               }
          } catch (e) {
               //gecko may take some time to enable design mode.
               //Keep looping until able to set.
               if (isGecko) {
                    setTimeout("enableDesignMode('" + rte + "', '" + html + "', " + readOnly + ");", 10);
               } else {
                    return false;
               }
          }
     }
}

</script>
</head>
<body>
<table><tr><td><form>
                                        <script language="JavaScript" type="text/javascript">
                                        <!--\n";
                                        function submitForm() {
                                        updateRTE('rte1');
                                        return true;
                                        }
                                        initRTE("rte/images/", "rte/", "rte/");
                                        //-->
                                        </script>
                                        <noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
                                        <script language="JavaScript" type="text/javascript">
                                        <!--
                                        writeRichText('rte1', '', 400, 200, true, false);
                                        //-->
                                        </script>
                                   </td>
                         </form>
</tr></table>
</body>
</html>
0
Comment
Question by:hankknight
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
10 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 11862118
Hi

Err... you mean like this:?

document.writeln('<div id="table_' + rte + '" onclick="focusEle(\'"+rte+"\');"><a href=# width="200" height="24" title="Table" onClick="tableDialog(\'' + rte + '\'); return false;">Create Table</a></div>');

and then have this function:

function focusEle(el) {
   var obj = (document.getElementById) ? document.getElementById(el) : (document.all) ? document.all[el] : document.layers[el];
   obj.focus();
   return true;
}

Regards,
Zyloch
0
 
LVL 16

Author Comment

by:hankknight
ID: 11862182
Thanks, but it still isn't focusing when I click the button.  

Here is the code, updated with your idea:

<html>
<head>
<script language="JavaScript" type="text/javascript">

var isRichText = false;
var rng;
var currentRTE;
var allRTEs = "";

function tableDialog(){
alert("Create Table button pressed");
}

function initRTE(imgPath, incPath, css) {
     //set browser vars
     var ua = navigator.userAgent.toLowerCase();
     isIE = ((ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1));
     isGecko = (ua.indexOf("gecko") != -1);
     isSafari = (ua.indexOf("safari") != -1);
     isKonqueror = (ua.indexOf("konqueror") != -1);
     
     //check to see if designMode mode is available
     if (document.getElementById && document.designMode && !isSafari && !isKonqueror) {
          isRichText = true;
     }
     
     if (!isIE) document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEDOWN | Event.MOUSEUP);
     document.onmouseover = raiseButton;
     document.onmouseout  = normalButton;
     document.onmousedown = lowerButton;
     document.onmouseup   = raiseButton;
     
     //set paths vars
     imagesPath = imgPath;
     includesPath = incPath;
     cssFile = css;
     
     if (isRichText) document.writeln('<style type="text/css">@import "' + includesPath + 'rte.css";</style>');
}

function focusEle(el) {
   var obj = (document.getElementById) ? document.getElementById(el) : (document.all) ? document.all[el] : document.layers[el];
   obj.focus();
   return true;
}


function writeRichText(rte, html, width, height, buttons, readOnly) {
     if (isRichText) {
          if (allRTEs.length > 0) allRTEs += ";";
          allRTEs += rte;
          writeRTE(rte, html, width, height, buttons, readOnly);
     } else {
          writeDefault(rte, html, width, height, buttons, readOnly);
     }
}

function writeDefault(rte, html, width, height, buttons, readOnly) {
     if (!readOnly) {
          document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;">' + html + '</textarea>');
     } else {
          document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;" readonly>' + html + '</textarea>');
     }
}

function writeRTE(rte, html, width, height, buttons, readOnly) {
     if (readOnly) buttons = false;
     
     if (isIE) {
          if (buttons && (width < 600)) width = 600;
          var tablewidth = width;
     } else {
          if (buttons && (width < 500)) width = 500;
          var tablewidth = width + 4;
     }
     

     if (buttons == true) {

      document.writeln('<div id="table_' + rte + '" onclick="focusEle(\'"+rte+"\');"><a href=# width="200" height="24" title="2Table" onClick="tableDialog(\'' + rte + '\'); return false;">Create Table</a></div>');

     }
     document.writeln('<iframe onfocus="alert(\'focused\')" onblur="alert(\'blurred\')"     id="' + rte + '" name="' + rte + '" width="' + width + 'px" height="' + height + 'px"></iframe>');
     document.writeln('<input type="hidden" id="hdn' + rte + '" name="' + rte + '" value="">');
     document.getElementById('hdn' + rte).value = html;
     enableDesignMode(rte, html, readOnly);
}

function enableDesignMode(rte, html, readOnly) {
     var frameHtml = "<html id=\"" + rte + "\">\n";
     frameHtml += "<head>\n";
     //to reference your stylesheet, set href property below to your stylesheet path and uncomment
     if (cssFile.length > 0) {
          frameHtml += "<link media=\"all\" type=\"text/css\" href=\"" + cssFile + "\" rel=\"stylesheet\">\n";
     } else {
          frameHtml += "<style>\n";
          frameHtml += "body {\n";
          frameHtml += "     background: #FFFFFF;\n";
          frameHtml += "     margin: 0px;\n";
          frameHtml += "     padding: 0px;\n";
          frameHtml += "}\n";
          frameHtml += "</style>\n";
     }
     frameHtml += "</head>\n";
     frameHtml += "<body>\n";
     frameHtml += html + "\n";
     frameHtml += "</body>\n";
     frameHtml += "</html>";
     
     if (document.all) {
          var oRTE = frames[rte].document;
          oRTE.open();
          oRTE.write(frameHtml);
          oRTE.close();
          if (!readOnly) oRTE.designMode = "On";
     } else {
          try {
               if (!readOnly) document.getElementById(rte).contentDocument.designMode = "on";
               try {
                    var oRTE = document.getElementById(rte).contentWindow.document;
                    oRTE.open();
                    oRTE.write(frameHtml);
                    oRTE.close();
                    if (isGecko && !readOnly) {
                         //attach a keyboard handler for gecko browsers to make keyboard shortcuts work
                         oRTE.addEventListener("keypress", kb_handler, true);
                    }
               } catch (e) {
                    alert("Error preloading content.");
               }
          } catch (e) {
               //gecko may take some time to enable design mode.
               //Keep looping until able to set.
               if (isGecko) {
                    setTimeout("enableDesignMode('" + rte + "', '" + html + "', " + readOnly + ");", 10);
               } else {
                    return false;
               }
          }
     }
}

</script>
</head>
<body>
<table><tr><td><form>
                                        <script language="JavaScript" type="text/javascript">
                                        <!--\n";
                                        function submitForm() {
                                        updateRTE('rte1');
                                        return true;
                                        }
                                        initRTE("rte/images/", "rte/", "rte/");
                                        //-->
                                        </script>
                                        <noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
                                        <script language="JavaScript" type="text/javascript">
                                        <!--
                                        writeRichText('rte1', '', 400, 200, true, false);
                                        //-->
                                        </script>
                                   </td>
                         </form>
</tr></table>
</body>
</html>
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 300 total points
ID: 11862199
My proposal is this:

var iFrameName = "rte1";
function tableDialog(){
  alert("Create Table button pressed");
  window.frames[iFrameName].focus();
}


0
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 
LVL 36

Expert Comment

by:Zyloch
ID: 11862205
Try moving the focusEle(\'"+rte+"\'); to before the createTable function inside the <a> tag like this:

<a href="#" onclick="focusEle(\'' + rte + '\');tableDialog(\'' + rte + '\'); return false;"
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11862228
My proposal can be reduced to this:


function tableDialog(iFrameName){
  alert("Create Table button pressed");
  window.frames[iFrameName].focus();
}

0
 
LVL 16

Author Comment

by:hankknight
ID: 11862269
Thanks, Zyloch, but it doesn't seem to be working.

Zvonko, your proposal looks like it should work:

function tableDialog(iFrameName){
  alert("Create Table button pressed");
  window.frames[iFrameName].focus();
}

How can I make it work where the name of the iframe is set by this?

document.writeln('<iframe onfocus="alert(\'focused\')" onblur="alert(\'blurred\')"     id="' + rte + '" name="' + rte + '" width="' + width + 'px" height="' + height + 'px"></iframe>');

I don't know the IFrame Name, so I don't know what to put for

  window.frames[iFrameName].focus();


I tried

  window.frames['+ RTE +'].focus();

But that didn't work.

Thanks!
0
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 200 total points
ID: 11862279
For Zvonko's you forgot the quotes like this:

window.frames[\'' + rte + '\'].focus();
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11862283
The iFrameName is a parameter in tableDialog() function header.
The correct iframe names is passed by the anchor click here:
);"><a href=# width="200" height="24" title="2Table" onClick="tableDialog(\'' + rte + '\');

So you have not to care.

The actual iframe name in your upper complete source is: rte1

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11862304
Perhaps it was not clear.
The complette function looks without changes like this:


function tableDialog(iFrameName){
 alert("Create Table button pressed");
 window.frames[iFrameName].focus();
}


0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11865462
Only to avoid confusion: Following line has no mean in my function:
window.frames[\'' + rte + '\'].focus();

Thanks for points.

0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question