Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change source of IFRAME?

    Hello and thanks so much in advance for your help.

    I am creating a rich text/HTML editor for late model IE only. I have most of the particulars worked out but there's one challenge that I'm stumped on...

    The editable area consists of an IFRAME. All the formatting options work OK (text color, bold, etc.) but what I'd like to do is add a "theme" to the message that is being composed - in other words, give the user the option of setting a default background color and font style that will be used throughout the entire message.

    What I've done is create a "Theme" dropdown that changes the IFRAME's src value to one of three external HTML files. Each of these HTML files contains the CSS attributes that create the theme (for now it's just background color, font face & color).

    This seems to do the trick, and it works quite well with one exception: If a user enters some text and then decides to change the theme, the previously-entered text is lost. Is there any way to change the IFRAME's source file without forcing a reload of the IFRAME's, thereby losing its text content? Should I re-think my overall approach?

    Thanks so much in advance...

    Here's a link to a demo.

    Here's the code for the file that contains the editor. The code for one of the theme files will follow:

    ==============================================

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <script language="javascript" type="text/javascript">
    var viewMode = 1;
    function doToggleView()
    {
    if(viewMode == 1)
    {
    iHTML = edit.document.body.innerHTML;
    edit.document.body.innerText = iHTML;

    toolbar.style.display = 'none';
    edit.focus();
    viewMode = 2;
    }

    else
    {
    iText = edit.document.body.innerText;
    edit.document.body.innerHTML = iText;

    toolbar.style.display = 'inline';
    edit.focus();
    viewMode = 1;
    }
    }

    var rng;

    // theme
    function work(a)
    {
    if (a.theme[0].selected)
    parent.editArea.location.href = 'theme_00.html';
    if (a.theme[1].selected)
    parent.editArea.location.href = 'theme_01.html';
    if (a.theme[2].selected)
    parent.editArea.location.href = 'theme_02.html';
    if (a.theme[3].selected)
    parent.editArea.location.href = 'theme_03.html';
    }
    // theme

    //Function to format text in the text box
    function FormatText(command, option) {
    if ((command == "forecolor")||(command == "backcolor")) {
    parent.command = command;
    buttonElement = document.getElementById(command);
    document.getElementById("colorpalette").style.left = getOffsetLeft(buttonElement) + "px";
    document.getElementById("colorpalette").style.top = (getOffsetTop(buttonElement) +
    buttonElement.offsetHeight) + "px";
    if (document.getElementById("colorpalette").style.visibility == "hidden")
    document.getElementById("colorpalette").style.visibility="visible";
    else {
    document.getElementById("colorpalette").style.visibility="hidden";
    }

    //get current selected range
    var sel = document.getElementById('edit').contentWindow.document.selection;
    if (sel!=null) {
    rng = sel.createRange();
    }
    }

    else {
    document.getElementById("edit").contentWindow.focus();
    document.getElementById("edit").contentWindow.document.execCommand(command, false, option);
    document.getElementById("edit").contentWindow.focus();
    }
    }

    //Function to set color
    function setColor(color) {

    //retrieve selected range
    var sel = document.getElementById('edit').contentWindow.document.selection;
    if (sel!=null) {
    var newRng = sel.createRange();
    newRng = rng;
    newRng.select();
    }

    document.getElementById("edit").contentWindow.document.execCommand(parent.command, false, color);
    document.getElementById("edit").contentWindow.focus();
    document.getElementById("colorpalette").style.visibility="hidden";
    }

    function getOffsetTop(elm) {
    var mOffsetTop = elm.offsetTop;
    var mOffsetParent = elm.offsetParent;

    while(mOffsetParent){
    mOffsetTop += mOffsetParent.offsetTop;
    mOffsetParent = mOffsetParent.offsetParent;
    }

    return mOffsetTop;
    }

    function getOffsetLeft(elm) {
    var mOffsetLeft = elm.offsetLeft;
    var mOffsetParent = elm.offsetParent;

    while(mOffsetParent) {
    mOffsetLeft += mOffsetParent.offsetLeft;
    mOffsetParent = mOffsetParent.offsetParent;
    }

    return mOffsetLeft;
    }

    function Select(selectname)
    {
    var cursel = document.getElementById(selectname).selectedIndex;

    // First one is always a label
    if (cursel != 0) {
    var selected = document.getElementById(selectname).options[cursel].value;
    document.getElementById('edit').contentWindow.document.execCommand(selectname, false, selected);
    document.getElementById(selectname).selectedIndex = 0;
    }
    document.getElementById("edit").contentWindow.focus();
    }

    function Start() {
    writeRTE();
    }


    function writeRTE() {
    document.writeln('<table border="0" cellpadding="0" cellspacing="0">');
    document.writeln('<form name="rte">');

    document.writeln('<tr id="toolbar">');
    document.writeln('<td>');
    document.writeln('<select name="selectFont" id="fontname" onChange="Select(this.id)">');
    document.writeln('<option value="Font" selected>Font Face</option>');
    document.writeln('<option value="Arial, Helvetica, sans-serif">Arial</option>');
    document.writeln('<option value="Courier New, Courier, mono">Courier</option>');
    document.writeln('<option value="Georgia, serif">Georgia</option>');
    document.writeln('<option value="Times New Roman, Times, serif">Times</option>');
    document.writeln('<option value="Verdana, sans-serif">Verdana</option>');
    document.writeln('</select>');

    document.writeln('&nbsp;');

    document.writeln('<select unselectable="on" id="fontsize" onchange="Select(this.id);">');
    document.writeln('<option value="Size">Size</option>');
    document.writeln('<option value="1">1</option>');
    document.writeln('<option value="2">2</option>');
    document.writeln('<option value="3">3</option>');
    document.writeln('<option value="4">4</option>');
    document.writeln('<option value="5">5</option>');
    document.writeln('<option value="6">6</option>');
    document.writeln('<option value="7">7</option>');
    document.writeln('</select>');

    document.writeln('&nbsp;');

    document.writeln('<select name="theme" id="theme" onchange="work(rte)">');
    document.writeln('<option value="Theme">Theme</option>');
    document.writeln('<option value="1">Theme 01</option>');
    document.writeln('<option value="2">Theme 02</option>');
    document.writeln('<option value="3">Theme 03</option>');
    document.writeln('</select>');

    document.writeln('&nbsp;</td>');

    // text color
    document.writeln('<td align="center"><div id="forecolor">&nbsp;<a href="#" onClick="FormatText(\'forecolor\', \'\')">TEXT COLOR</a>&nbsp;</div></td>');

    // bg color
    document.writeln('<td align="center"><div id="backcolor">&nbsp;<a href="#" onClick="FormatText(\'backcolor\', \'\')">BGCOLOR</a>&nbsp;</div></td>');

    // cut
    document.writeln('<td>&nbsp;<a href="#" onClick="FormatText(\'cut\')">CUT</a>&nbsp;');

    // copy
    document.writeln('<a href="#" onClick="FormatText(\'copy\')">COPY</a>&nbsp;');

    // paste
    document.writeln('<a href="#" onClick="FormatText(\'paste\')">PASTE</a>&nbsp;');

    // bold
    document.writeln('<a href="#" onClick="FormatText(\'bold\', \'\')">BOLD</a>&nbsp;');

    // italic
    document.writeln('<a href="#" onClick="FormatText(\'italic\', \'\')">ITAL</a>&nbsp;');

    // underline
    document.writeln('<a href="#" onClick="FormatText(\'underline\', \'\')">UL</a>&nbsp;</td>');

    document.writeln('</tr>');

    document.writeln('<tr><td colspan="4" height="3"></td></td>');

    document.writeln('</table>');

    document.writeln('<iframe id="edit" name="editArea" style="height:220px; width:684px; padding:0;" src="theme_00.html"></iframe>');

    document.writeln('<iframe id="colorpalette" src="palette.html" style="visibility:hidden; position: absolute; left: 0px; top: 0px; height:122px; width:166px;"></iframe>');

    document.writeln('<iframe src="themes/index.html" name="themelist" id="themelist" style="visibility:hidden; position: absolute; left: 0px; top: 0px; height:235px; width:405px;" scrolling="no"></iframe>');

    setTimeout("enableDesignMode()", 10);

    document.writeln('</form>');
    }

    function writeDefault() {
    document.writeln('<textarea id="edit" name="_msg" style="width: 678px; height: 220px;"></textarea>');
    }

    function enableDesignMode() {
    frames.edit.document.designMode = "On";
    }
    </script>

    <style>
    a {
    font-family : Verdana;
    font-size : 10px;
    }
    </style>

    </head>

    <body>

    <script language="javascript" type="text/javascript">
    <!--
    Start();
    //-->
    </script>

    </body>
    </html>

    ==============================================

    Theme:

    ==============================================

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>

    <style>
    body {
    font-family : Verdana;
    font-size : inherit;
    color : #000000;
    }
    </style>

    </head>

    <body bgcolor="#fff8dc">

    </body>
    </html>

    ==============================================

  • #2
    New Coder
    Join Date
    Aug 2002
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why not just link the IFRAME to a stylesheet and change the stylesheet instead of the htm file?

    If that doesn't work you could always 'grab' the innerHTML of the IFRAME, store it, then put it back when the new htm file is loaded.

  • #3
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd say that if you apply the right amount of class attributes to the iframe in question, you can simply use JavaScript... not to load a new page in the iframe, but to change the CSS values for the iframe that is already loaded.

    Sure there are other methods that are more complicated (like the idea you had -- doable, but more complex than necessary), but I think that this would be the simplest route.

    Hope this helps!

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #4
    New Coder
    Join Date
    Apr 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    RE: Change Source of IFRAME?

    Hi RSCI and Skyzyx - thanks for your responses...

    I considered trying to swap classes for the IFRAME, but I could not alter the IFRAME characteristics via classes - I had to embed style attributes within the IFRAME tag.

    It also occurred to me that I might be able to "store" the text that was entered in the IFRAME and put it back after the IFRAME reloaded with the new theme - but that's a little beyond my level of skill...That said, I'm up for giving it a try. Is there something available that I can refer to as a model?

    Thanks again,

    Dominick

  • #5
    New Coder
    Join Date
    Aug 2002
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately I don't have links on hand or examples. I would check on tutorials for document.all() (IE only) and innerHTML to start with. That might get you started in the right direction.

  • #6
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never, ever, ever, ever, ever, ever, ever, ever, ever, ever use document.all(). Use document.getElementById() instead.

    (I'm not upset, I just feel very strongly against unnecessary proprietary code )

    The new idea that you're having is exactly what I was referring to when I said that it was far more complex than it needed to be.

    Can you not use JavaScript on the primary page to access the CSS values in the iframe page? That would be infinitely easier, I'd think.

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    (I'm not upset, I just feel very strongly against unnecessary proprietary code )
    Correct. "document.all" is only needed for people who are still using IE 4.0 or IE 4.01 as their browser. That number is pretty close to zero already.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Skyzyx
    Never, ever, ever, ever, ever, ever, ever, ever, ever, ever use document.all(). Use document.getElementById() instead.
    <snip>
    And he says I'm "rough around the edges"
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •