Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Placement of a dynamic created iFrame in asp.net page

Status
Not open for further replies.
DocHoliday69

DocHoliday69

IS-IT--Management
May 21, 2010
6
US
Hi All,

I am newbie to Javascript. My issue is, I have this Javascript code (got it off the web) which create dynamic an iframe on page load. I would like know to modify the codes so that the iframe will inside a table/row/column on my apsx page.

Any help is greatly appreciated,
DocHoliday.

Here is the codes:

<script type="text/javascript">
<!--
function def()
{
var testframe = document.createElement("iframe");
testframe.name = testframe.id = "textEditor";


if (testframe.addEventListener){
testframe.addEventListener("load",function(e){this.contentWindow.document.designMode = "on";}, true);
} else if (testframe.attachEvent){
testframe.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";});
}

document.body.appendChild(testframe);

textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
textEditor.document.close();
textEditor.focus();

}
function fontEdit(x,y)
{
textEditor.document.execCommand(x,"",y);
textEditor.focus();
}
-->

</script>
 
Sort by date Sort by votes
Hi

DocHoliday69 said:
I would like know to modify the codes so that the iframe will inside a table/row/column on my apsx page.
Click to expand...
Just change the element who's [tt]appendChild()[/tt] are you calling :
Code: 
document[teal].[/teal]body[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]testframe[teal]);[/teal]
          [gray]||[/gray]
          [gray]\/[/gray]
document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'id_of_your_td'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]testframe[teal]);[/teal]


Feherke.
 
Upvote 0 Downvote
Hi feherke,
If I need to change the size of the iframe how I do that ?

Thanks
DocHoliday
 
Upvote 0 Downvote
Hi

Just set it, anywhere in the def() function, after the object was created ( after the line containing the [tt]createElement()[/tt] call ), for example :
Code: 
testframe[teal].[/teal]width[teal]=[/teal][purple]640[/purple]
testframe[teal].[/teal]height[teal]=[/teal][purple]480[/purple]

Feherke.
 
Upvote 0 Downvote
Thank feherke.

One more qeustion, what is wrong with the codes below ?
I am using image button to show/hide a table in an asp.net page. It doesn't give any erorr but when click on either image nothing happen.

Again thank for all your help thus far.
DocHoliday.

<script type="text/javascript" >

function hide()
{
var objTable = document.getElementById('tbHeadlineFormatting');
objTable.style.display = 'none';
}
function show()
{
var objTable = document.getElementById('tbHeadlineFormatting');
objTable.style.display = 'block';

}
</script>

HTML:

<tr>
<td style="width: 100%" class="text-bold">Headline:  
<input type="image" name="Open" src="Images/edit.gif" onclick="show();" />
</td>
</tr>
<tr>
<td style="width: 100%" class="text-bold">Headline:
<input type="image" name="Open" src="Images/edit.gif" onclick="hide();" />
</td>
</tr>
<table id="tbHeadlineFormatting" style="display:none;" border="0" cellpadding="0" cellspacing="0" width="35%">
</table>


 
Upvote 0 Downvote
Hi

It works for me, so the problem is probably elsewhere.

However it is quite wrong. The [tt]image[/tt] [tt]input[/tt] is a [tt]form[/tt] element, so it has to be placed on a [tt]form[/tt]. If you place it on a [tt]form[/tt] you will not enjoy the effect of JavaScript [tt]display[/tt] changing, because the [tt]image[/tt] [tt]input[/tt]'s default behavior is to submit the [tt]form[/tt], so the current document together with the freshly made change will be dismissed. ( Note that this behavior can altered/stopped. )

Feherke.
 
Upvote 0 Downvote
Hi,

I finally got to work late yesterday. The input images are in a form on my aspx page.


Again thank you for your help.
DocHoliday
 
Upvote 0 Downvote
Hi,
Got any problem, I want to retain the content in the iframe after user click on submit how would I go about ? Below is codes, I can't seem to get the content back to the headline iframe.

Thanks in advance,
DocHoliday.

<%@ Page Language="VB" ValidateRequest="false" AutoEventWireup="false" CodeFile="WriteAnnouncement.aspx.vb" Inherits="WriteAnnouncement" %>

<script type="text/javascript" >

function setHidden()
{
var frameHeadline=teHeadline.document.body.innerHTML;
document.getElementById('Headline').value=frameHeadline;
frmAnnouncement.txtHeadline.value=frameHeadline;

var val = document.all('txtHeadline').value;
Show(v);
val=teHeadline.document.body.innerHTML;

var frameAbstract=teAbstract.document.body.innerHTML;
document.getElementById('Abstract').value=frameAbstract;
frmAnnouncement.txtAbstract.value=frameAbstract;

var frameContent=teContent.document.body.innerHTML;
document.getElementById('Content').value=frameContent;
frmAnnouncement.txtContent.value=frameContent;
}

function Show(val)
{

var doc = Headlineframe.contentDocument;
if (doc == undefined || doc == null)
doc = Headlineframe.contentWindow.document;
doc.open();
doc.write(val);
doc.close();

}

function ShowHideHeadline(obj)
{
if(!obj.checked)
{
//Hide
document.getElementById('tbHeadlineFormatting').style.display = 'none';
document.getElementById('tbHeadlineFormatting').style.visibility="hidden";
}
else {

// Show
document.getElementById('tbHeadlineFormatting').style.display = '';
document.getElementById('tbHeadlineFormatting').style.visibility ="visible";
}
}

function ShowHideAbstract(obj)
{
if(!obj.checked)
{
//Hide
document.getElementById('tbAbstractFormatting').style.display = 'none';
document.getElementById('tbAbstractFormatting').style.visibility="hidden";
}
else {

// Show
document.getElementById('tbAbstractFormatting').style.display = '';
document.getElementById('tbAbstractFormatting').style.visibility ="visible";
}
}

function ShowHideContent(obj)
{
if(!obj.checked)
{
//Hide
document.getElementById('tbContentFormatting').style.display = 'none';
document.getElementById('tbContentFormatting').style.visibility="hidden";
}
else {

// Show
document.getElementById('tbContentFormatting').style.display = '';
document.getElementById('tbContentFormatting').style.visibility ="visible";
}
}

</script>

<body onload="Headline(); Abstract(); Content(); WriteContent();">
<form id="frmAnnouncement" runat="server">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" >
<tr>
<td style="width: 100%">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" >
<tr>
<td style="width: 100%">
<asp:Label ID="lblAddAnouncement" runat="server"></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 100%">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" >
<tr>
<td style="width: 10%" class="text-bold">Start Date:</td>
<td style="width: 10%">
<asp:TextBox ID="txtStart" runat="server" CssClass="text"></asp:TextBox>
</td>
<td style="width: 2%" class="text-bold">@</td>
<td style="width: 10%" class="text-bold">12:00 AM</td>
<td style="width: 68%">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 100%">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" >
<tr>
<td style="width: 10%" class="text-bold">End Date:</td>
<td style="width: 10%">
<asp:TextBox ID="txtEnd" runat="server" CssClass="text"></asp:TextBox>
</td>
<td style="width: 2%" class="text-bold">@</td>
<td style="width: 10%" class="text-bold">12:00 AM</td>
<td style="width: 68%">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 100%" class="text-bold">Headline:&nbsp;&nbsp;
<asp:CheckBox ID="chkHeadline" runat="server" CssClass="text-bold" Text="Open Text Formatting Tool" onclick="ShowHideHeadline(chkHeadline)" />
</td>
</tr>
<tr>
<td>
<table id="tbHeadlineFormatting" style="display:none " border="0" cellpadding="0" cellspacing="0" width="35%">
<tr>
<td align="left" style="background-color: #aabcdd; height: 19px;" class="h2">
&nbsp;Formatting Options
</td>
</tr>
<tr>
<td style="background-color: Black ; height: 3" >
</td>
</tr>
<tr>
<td>
<div style="width:533px; background-color: #aabcdd; text-align:left; margin-bottom:10px ">
<input type="button" id="Button7" style="height:21px; width:21px; font-weight:bold;" value="B" onclick="HeadlinefontEdit('bold')" />
<input type="button" id="Button8" style="height:21px; width:21px; font-style:italic;" value="I" onclick="HeadlinefontEdit('italic')" />
<input type="button" id="Button9" style="height:21px; width:21px; text-decoration:underline;" value="U" onclick="HeadlinefontEdit('underline')" /> |
<input type="button" style="height:21px; width:21px;"value="L" onclick="HeadlinefontEdit('justifyleft')" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" onclick="HeadlinefontEdit('justifycenter')" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" onclick="HeadlinefontEdit('justifyright')" title="align right" /> |
<select id="Select7" onchange="HeadlinefontEdit('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="Select8" onchange="HeadlinefontEdit('fontsize',this[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="Select9" onchange="HeadlinefontEdit('ForeColor',this[this.selectedIndex].value)" style="width: 60px">
<option value="black">Black</option>
<option style="color:red;" value="red">Red</option>
<option style="color:blue;" value="blue">Blue</option>
<option style="color:green;" value="green">Green</option>
<option style="color:pink;" value="pink">Pink</option>
<option style="color:Yellow;" value="Yellow">Yellow</option>
</select> |
<input type="button" style="height:21px; width:21px;"value="1" onclick="HeadlinefontEdit('insertorderedlist')" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="?" onclick="HeadlinefontEdit('insertunorderedlist')" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="?" onclick="HeadlinefontEdit('outdent')" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="?" onclick="HeadlinefontEdit('indent')" title="Indent" />
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="tdHeadline"></td>
</tr>
<tr>
<td style="width: 100%">
<table id="tbAbstract" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
<tr>
<td style="width: 100%" class="text-bold">Abstract:(Optional)
<asp:CheckBox ID="chkAbstract" runat="server" CssClass="text-bold" Text="Open Text Formatting Tool" onclick="ShowHideAbstract(chkAbstract)" />
</td>
</tr>
<tr>
<td style="width: 100%">
<table id="tbAbstractFormatting" style="display:none" border="0" cellpadding="0" cellspacing="0" width="35%">
<tr>
<td align="left" style="background-color: #aabcdd; height: 19px;" class="h2">
&nbsp;Formatting Options
</td>
</tr>
<tr>
<td style="background-color: Black ; height: 3" >
</td>
</tr>
<tr>
<td>
<div id="dAbstract" style="width:533px; background-color: #aabcdd; text-align:left; margin-bottom:10px ">
<input type="button" id="Button1" style="height:21px; width:21px; font-weight:bold;" value="B" onclick="AbstractfontEdit('bold')" />
<input type="button" id="Button2" style="height:21px; width:21px; font-style:italic;" value="I" onclick="AbstractfontEdit('italic')" />
<input type="button" id="Button3" style="height:21px; width:21px; text-decoration:underline;" value="U" onclick="AbstractfontEdit('underline')" /> |
<input type="button" style="height:21px; width:21px;"value="L" onclick="AbstractfontEdit('justifyleft')" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" onclick="AbstractfontEdit('justifycenter')" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" onclick="AbstractfontEdit('justifyright')" title="align right" /> |
<select id="Select1" onchange="AbstractfontEdit('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="Select2" onchange="AbstractfontEdit('fontsize',this[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="Select3" onchange="AbstractfontEdit('ForeColor',this[this.selectedIndex].value)" style="width: 60px">
<option value="black">Black</option>
<option style="color:red;" value="red">Red</option>
<option style="color:blue;" value="blue">Blue</option>
<option style="color:green;" value="green">Green</option>
<option style="color:Silver;" value="Silver">Silver</option>
<option style="color:Yellow;" value="Yellow">Yellow</option>
</select> |
<input type="button" style="height:21px; width:21px;"value="1" onclick="AbstractfontEdit('insertorderedlist')" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="?" onclick="AbstractfontEdit('insertunorderedlist')" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="?" onclick="AbstractfontEdit('outdent')" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="?" onclick="AbstractfontEdit('indent')" title="Indent" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="tdAbstract"></td>
</tr>
<tr>
<td style="width: 100%">
<table id="tbContent" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">

<tr>
<td style="width: 100%" class="text-bold">Content:
<asp:CheckBox ID="chkContent" runat="server" CssClass="text-bold" Text="Open Text Formatting Tool" onclick="ShowHideContent(chkContent)" />
</td>
</tr>
<tr>
<td style="width: 100%">
<table id="tbContentFormatting" style="display:none" border="0" cellpadding="0" cellspacing="0" width="35%">
<tr>
<td align="left" style="background-color: #aabcdd; height: 19px;" class="h2">
&nbsp;Formatting Options
</td>
</tr>
<tr>
<td style="background-color: Black ; height: 3" >
</td>
</tr>
<tr>
<td>
<div id="dContent" style="width:533px; background-color: #aabcdd; text-align:left; margin-bottom:10px ">
<input type="button" id="Button4" style="height:21px; width:21px; font-weight:bold;" value="B" onclick="ContentfontEdit('bold')" />
<input type="button" id="Button5" style="height:21px; width:21px; font-style:italic;" value="I" onclick="ContentfontEdit('italic')" />
<input type="button" id="Button6" style="height:21px; width:21px; text-decoration:underline;" value="U" onclick="ContentfontEdit('underline')" /> |
<input type="button" style="height:21px; width:21px;"value="L" onclick="ContentfontEdit('justifyleft')" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" onclick="ContentfontEdit('justifycenter')" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" onclick="ContentfontEdit('justifyright')" title="align right" /> |
<select id="Select4" onchange="ContentfontEdit('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="Select5" onchange="ContentfontEdit('fontsize',this[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="Select6" onchange="ContentfontEdit('ForeColor',this[this.selectedIndex].value)" style="width: 60px">
<option value="black">Black</option>
<option style="color:red;" value="red">Red</option>
<option style="color:blue;" value="blue">Blue</option>
<option style="color:green;" value="green">Green</option>
<option style="color:Silver;" value="Silver">Silver</option>
<option style="color:Yellow;" value="Yellow">Yellow</option>
</select> |
<input type="button" style="height:21px; width:21px;"value="1" onclick="ContentfontEdit('insertorderedlist')" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="?" onclick="ContentfontEdit('insertunorderedlist')" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="?" onclick="ContentfontEdit('outdent')" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="?" onclick="ContentfontEdit('indent')" title="Indent" />
</div>
</td>
<td style="background-color: black; height: 2" ></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="tdContent"></td>
</tr>
</table>
</td>
</tr>
</table>
<asp:HiddenField ID="txtHeadline" runat="server" />
<input type="hidden" name="Headline" id="Headline" />
<asp:HiddenField ID="txtAbstract" runat="server" />
<input type="hidden" name="Abstract" id="Abstract" />
<asp:HiddenField ID="txtContent" runat="server" />
<input type="hidden" name="Content" id="Content" />
<input type="submit" value="submit" onclick="setHidden();"/>
</form>
<script type="text/javascript">
<!--
function Headline()
{
var Headlineframe = document.createElement("iframe");
Headlineframe.name = Headlineframe.id = "teHeadline";
Headlineframe.style.width="100%";
Headlineframe.style.height="90%";

if (Headlineframe.addEventListener)
{
Headlineframe.addEventListener("load",function(e){this.contentWindow.document.designMode = "on";}, true);
}
else if (Headlineframe.attachEvent)
{
Headlineframe.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";});
}

document.getElementById('tdHeadline').appendChild(Headlineframe);
teHeadline.document.designMode="on";
teHeadline.document.open();
teHeadline.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
teHeadline.document.close();
teHeadline.focus();
}

function HeadlinefontEdit(x,y)
{
teHeadline.document.execCommand(x,"",y);
teHeadline.focus();
}

function Abstract()
{
var Abstractframe = document.createElement("iframe");
Abstractframe.name = Abstractframe.id = "teAbstract";
Abstractframe.style.width="100%";
Abstractframe.style.height="90%";

if (Abstractframe.addEventListener)
{
Abstractframe.addEventListener("load",function(e){this.contentWindow.document.designMode = "on";}, true);
}
else if (Abstractframe.attachEvent)
{
Abstractframe.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";});
}

document.getElementById('tdAbstract').appendChild(Abstractframe);
teAbstract.document.designMode="on";
teAbstract.document.open();
teAbstract.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
teAbstract.document.close();
teAbstract.focus();

}
function AbstractfontEdit(x,y)
{
teAbstract.document.execCommand(x,"",y);
teAbstract.focus();
}

function Content()
{
var Contentframe = document.createElement("iframe");
Contentframe.name = Contentframe.id = "teContent";
Contentframe.style.width="100%";
Contentframe.style.height="90%";

if (Contentframe.addEventListener)
{
Contentframe.addEventListener("load",function(e){this.contentWindow.document.designMode = "on";}, true);
}
else if (Contentframe.attachEvent){
Contentframe.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";});
}

document.getElementById('tdContent').appendChild(Contentframe);
teContent.document.designMode="on";
teContent.document.open();
teContent.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
teContent.document.close();
teContent.focus();

}
function ContentfontEdit(x,y)
{
teContent.document.execCommand(x,"",y);
teContent.focus();
}
-->

</script>
</body>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
738
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
363
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
331
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
296
coldbohemia
coldbohemia
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
148
penguinspeaks
penguinspeaks

Part and Inventory Search

Sponsor

Back
Top