Solved

Focus IFRAME when link is clicked

Posted on 2004-08-21
10
1,422 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
  • 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
 
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now