/    Sign up×
Community /Pin to ProfileBookmark

iFrame, Basics

Copy linkTweet thisAlerts:
Oct 29.2007

This is my first post as I’m trying to make my first iFrame web page. I am familiar with html, but am not sure how to line up my inline to fit the proper space. I’m also trying to figure out the coding to make my scroll bar the same as my background for better blending effect. Any help or comments are MUCHLY appreciated. And junk I don’t need, please also advise. penmorecastle.com
‘index.html’ is my main page and ‘content.html’ is my inline

PS think it would be worth my while to learn css instead of continuing with html? opinions appreciated

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>

<style type=”text/css”>
<!–
.style1 {color: #FFFFFF}
.style2 {
font-family: Arial, Helvetica, sans-serif;
color: #CC0000;
}
.style3 {color: #990000}
–>
</style>

<title></title>
<body bgcolor=”462B16″ text=”#000000″ link=”#000000″ vlink=”#000000″ background=”462B16″>
<body>
<IFrame src=”content.html” frameborder=”120″ allowtransparency=”true”></IFrame>

</body>
<TABLE BORDER=”0″ CELLPADDING=”0″ CELLSPACING=”0″ WIDTH=”780″ HEIGHT=”450″>
<TR>
<TD ROWSPAN=”3″ COLSPAN=”1″ WIDTH=”24″ HEIGHT=”428″><img src=”/logo_1007_1x1.gif” width=”24″ height=”428″></TD>
<TD ROWSPAN=”3″ COLSPAN=”1″ WIDTH=”346″ HEIGHT=”428″><IMG NAME=”logo_10071″ SRC=”/logo_1007_1x2.gif” WIDTH=”346″ HEIGHT=”428″ BORDER=”0″></TD>
<TD ROWSPAN=”1″ COLSPAN=”1″ WIDTH=”397″ HEIGHT=”22″><img src=”/logo_1007_1x3.gif” width=”397″ height=”22″></TD>
<TD ROWSPAN=”4″ COLSPAN=”1″ WIDTH=”13″ HEIGHT=”450″>&nbsp;</TD>
<TD WIDTH=”1″ HEIGHT=”22″><IMG NAME=”blank” SRC=”/blank.gif” WIDTH=”1″ HEIGHT=”22″ BORDER=”0″></TD>
</TR>
<TR>
<TD ROWSPAN=”1″ COLSPAN=”1″ WIDTH=”397″ HEIGHT=”205″><IMG NAME=”logo_10074″ SRC=”/logo_1007_2x1.gif” WIDTH=”397″ HEIGHT=”205″ BORDER=”0″></TD>
<TD WIDTH=”1″ HEIGHT=”205″><IMG NAME=”blank” SRC=”/blank.gif” WIDTH=”1″ HEIGHT=”205″ BORDER=”0″></TD>
</TR>
<TR>
<TD ROWSPAN=”1″ COLSPAN=”1″ WIDTH=”397″ HEIGHT=”201″><img name=”logo_10075″ src=”/logo_1007_3x1.gif” width=”397″ height=”201″ border=”0″></TD>
<TD WIDTH=”1″ HEIGHT=”201″><IMG NAME=”blank” SRC=”/blank.gif” WIDTH=”1″ HEIGHT=”201″ BORDER=”0″></TD>
</TR>
<TR>
<TD ROWSPAN=”1″ COLSPAN=”2″ WIDTH=”370″ HEIGHT=”22″><img src=”/logo_1007_4x1.gif” width=”370″ height=”22″></TD>
<TD ROWSPAN=”1″ COLSPAN=”1″ WIDTH=”397″ HEIGHT=”22″><img src=”/logo_1007_4x2.gif” width=”397″ height=”22″></TD>
<TD WIDTH=”1″ HEIGHT=”22″><IMG NAME=”blank” SRC=”/blank.gif” WIDTH=”1″ HEIGHT=”22″ BORDER=”0″></TD>
</TR>
</TABLE>

<span class=”style3″>I am trying to make this into a transparent iframe, but need HELP with the coding. I want the inset frame to be located in the rounded rectangle above.
</span>
<p align=”left” class=”style1″><a href=”/castlegate3.html” class=”style2″>ENTER</a></p>
</body>
</html>

to post a comment
HTML

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@sticks464Oct 30.2007 — think it would be worth my while to learn css instead of continuing with html?[/QUOTE]
Yes, however css is not another language to learn in place of html. It is complimentary to html. Html is the markup and css is the presentation.

Concerning you problem, I don't think you can get true transparency the way you want for all browsers. Background:transparent only works in FF, not IE.
Copy linkTweet thisAlerts:
@CentauriOct 30.2007 — "rounded rectangle"? What rounded rectangle? - I see a messy table which doesn't contain tabular data and shouldn't have anything to do with a rounded rectangle.....

If you want the iframe to appear within a rounded rectangle, put it within a container and use background graphics on the container to produce the rounded rectangle.[CODE]<div class="rounded_box">
<iframe src="content.html"></iframe>
</div>[/CODE]
Copy linkTweet thisAlerts:
@sticks464Oct 30.2007 — I got this to work with javascript. (IE5.5, 6, 7, and FF). The images are attached for the side scroll buttons and the background. Save them to your images folder.
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
background:#462B16;
color:#000;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}

a:link {
color:#000;
}

a:hover {
color:#ECD1B3;
text-decoration:none;
}

#wrapper {
width:760px;
height:100%;
margin:0;
}

#content {
background:#462b16 url('images/penmore_bg.jpg') no-repeat;
width:760px;
height:450px;
}

.style2 {
margin-left:30px;
font-size:130%;
}

#marqueecontainer{
position: relative;
width: 350px; /*marquee width */
height: 183px; /*marquee height */
background-color: transparent;
overflow: hidden;
padding: 2px;
padding-left: 4px;
}
.scroll_div {
float:right;
margin:228px 0px 0 0;
width: 365px;
width/**/: 385px !important;
}
.vmarquee_content {
position:absolute;
}
</style>
<script type="text/javascript" language="javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=1000; //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1; //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1; //Pause marquee onMousever (0=no. 1=yes)?
var tim;
////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed;
var pausespeed=(pauseit==0)? copyspeed: 0;
var actualheight='';

function scrollmarquee(){
//document.write(parseInt(cross_marquee.style.top));
//if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) {
if (document.getElementById('track').value == "") {
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) {
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px";
//alert(actualheight);
}
else {
//alert(parseInt(marqueeheight));
cross_marquee.style.top=parseInt(marqueeheight)-8+"px";
}
}
}

//press down
function pressdown() {
document.getElementById('track').value = "yes";

if (parseInt(cross_marquee.style.top)<(actualheight)) {
cross_marquee.style.top=parseInt(cross_marquee.style.top)+ 10 +"px";
//alert(parseInt(cross_marquee.style.top) + "---" + actualheight + " marqueeheight: " + parseInt(marqueeheight) );
//alert(actualheight);
tim = setTimeout("pressdown()", 150);
}
else {
//alert(parseInt(marqueeheight));
cross_marquee.style.top=parseInt(marqueeheight)*(-1)+"px";
tim = setTimeout("pressdown()", 150);
}
}

//press up
function pressup() {
document.getElementById('track').value = "yes";
//cross_marquee.style.top=parseInt(cross_marquee.style.top)+10+"px";
//alert(document.getElementById('track').value);

if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) {
cross_marquee.style.top=parseInt(cross_marquee.style.top)-10 +"px";
//alert(parseInt(cross_marquee.style.top) + "---" + actualheight + " marqueeheight: " + parseInt(marqueeheight) );
//alert(actualheight);
tim = setTimeout("pressup()", 150);
}
else {

cross_marquee.style.top=parseInt(marqueeheight)-8+"px";
tim = setTimeout("pressup()", 150);
//alert(cross_marquee.style.top);
}
}

//on mouse out
function mouse_out() {
document.getElementById('track').value = "";
clearTimeout(tim);
//alert(document.getElementById('track').value);
scrollmarquee;
}

//init()
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee");
cross_marquee.style.top=0;
marqueeheight=document.getElementById("marqueecontainer").offsetHeight;
actualheight=cross_marquee.offsetHeight;
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px";
cross_marquee.style.overflow="scroll";
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",35)', delayb4scroll);
}

//event listener
if (window.addEventListener) {
window.addEventListener("load", initializemarquee, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", initializemarquee);
}
else if (document.getElementById) {
window.onload=initializemarquee;
}

</script>

</head>

<body>
<div id="wrapper">
<div id="content">
<div class="scroll_div" >

<table width="360px" border="0">
<tr>
<td>
<!-- scroll -->
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" class="vmarquee_content">

<!--YOUR SCROLL CONTENT HERE -->
<p>This is my content space.
This is my content space.
This is my content space.
This is my content space.
This is my content space.
This is my content space.
This is my content space.
This is my content space.</p>
<!--End SCROLL CONTENT HERE-->
</div>
</div>
</td>

<td>
<img src="images/nav-arrow-up.gif" width="13" height="13" border="0" id="rollfirst"
onmouseover="document.getElementById('rollfirst').src='images/nav-arrow-up-hover.gif';pressup();"
onmouseout="document.getElementById('rollfirst').src='images/nav-arrow-up.gif';mouse_out();">
<br><br>
<img src="images/nav-arrow-down.gif" width="13" height="13" border="0" id="rollfirst2"
onmouseover="document.getElementById('rollfirst2').src='images/nav-arrow-down-hover.gif';pressdown();"
onmouseout="document.getElementById('rollfirst2').src='images/nav-arrow-down.gif';mouse_out();">
<input id="track" name="track" type="hidden" value="">

</td>
</tr>
</table>
</div>
</div>
<h3 class="style2"><a href="castlegate3.html">ENTER</a></h3>
</div>
</body>
</html>[/CODE]

[upl-file uuid=cda9b340-1574-445a-af8f-bddf013b3292 size=227B]nav-arrow-up-hover.gif[/upl-file]

[upl-file uuid=dbde0774-d95a-4540-a896-1477cb3da83a size=228B]nav-arrow-up.gif[/upl-file]

[upl-file uuid=601ee5ce-f3a8-47d4-9627-774802e5fb0d size=251B]nav-arrow-down-hover.gif[/upl-file]

[upl-file uuid=01b79f9e-f3da-497e-9803-2c4d35f53ffe size=244B]nav-arrow-down.gif[/upl-file]

[upl-file uuid=0a829ec9-7e8a-445f-8e03-daa3ee161af9 size=37kB]penmore_bg.jpg[/upl-file]
Copy linkTweet thisAlerts:
@meladyauthorOct 30.2007 — Wow, thanks sticks for all your work on this! I can see from this that I still have a great deal to learn. I put your code to work and the only problem I had is that I am not able to view the bg image on the site. Any suggestions as to what I'm doing wrong here?

penmorecastle.com

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>

<style type="text/css">

body {

background:#462B16;

color:#000;

margin:0;

padding:0;

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

}

a:link {

color:#000;

}

a:hover {

color:#ECD1B3;

text-decoration:none;

}

#wrapper {

width:760px;

height:100%;

margin:0;

}

#content {

background:#462b16 url('images/penmore_bg.jpg') no-repeat;

width:760px;

height:450px;

}

.style2 {

margin-left:30px;

font-size:130%;

}

#marqueecontainer{

position: relative;

width: 350px; /*marquee width */

height: 183px; /*marquee height */

background-color: transparent;

overflow: hidden;

padding: 2px;

padding-left: 4px;

}

.scroll_div {

float:right;

margin:228px 0px 0 0;

width: 365px;

width/**/: 385px !important;

}

.vmarquee_content {

position:absolute;

}

</style>

<script type="text/javascript" language="javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=1000; //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1; //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1; //Pause marquee onMousever (0=no. 1=yes)?
var tim;
////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed;
var pausespeed=(pauseit==0)? copyspeed: 0;
var actualheight='';

function scrollmarquee(){
//document.write(parseInt(cross_marquee.style.top));
//if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) {
if (document.getElementById('track').value == "") {
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) {
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px";
//alert(actualheight);
}
else {
//alert(parseInt(marqueeheight));
cross_marquee.style.top=parseInt(marqueeheight)-8+"px";
}
}
}

//press down
function pressdown() {
document.getElementById('track').value = "yes";

if (parseInt(cross_marquee.style.top)<(actualheight)) {
cross_marquee.style.top=parseInt(cross_marquee.style.top)+ 10 +"px";
//alert(parseInt(cross_marquee.style.top) + "---" + actualheight + " marqueeheight: " + parseInt(marqueeheight) );
//alert(actualheight);
tim = setTimeout("pressdown()", 150);
}
else {
//alert(parseInt(marqueeheight));
cross_marquee.style.top=parseInt(marqueeheight)*(-1)+"px";
tim = setTimeout("pressdown()", 150);
}
}

//press up
function pressup() {
document.getElementById('track').value = "yes";
//cross_marquee.style.top=parseInt(cross_marquee.style.top)+10+"px";
//alert(document.getElementById('track').value);

if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) {
cross_marquee.style.top=parseInt(cross_marquee.style.top)-10 +"px";
//alert(parseInt(cross_marquee.style.top) + "---" + actualheight + " marqueeheight: " + parseInt(marqueeheight) );
//alert(actualheight);
tim = setTimeout("pressup()", 150);
}
else {

cross_marquee.style.top=parseInt(marqueeheight)-8+"px";
tim = setTimeout("pressup()", 150);
//alert(cross_marquee.style.top);
}
}

//on mouse out
function mouse_out() {
document.getElementById('track').value = "";
clearTimeout(tim);
//alert(document.getElementById('track').value);
scrollmarquee;
}

//init()
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee");
cross_marquee.style.top=0;
marqueeheight=document.getElementById("marqueecontainer").offsetHeight;
actualheight=cross_marquee.offsetHeight;
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px";
cross_marquee.style.overflow="scroll";
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",35)', delayb4scroll);
}

//event listener
if (window.addEventListener) {
window.addEventListener("load", initializemarquee, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", initializemarquee);
}
else if (document.getElementById) {
window.onload=initializemarquee;
}

</script>

</head>

<body>

<div id="wrapper">

<div id="content">

<div class="scroll_div" >

<table width="360px" border="0">

<tr>

<td>

<!-- scroll -->

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">

<div id="vmarquee" class="vmarquee_content">

<!--YOUR SCROLL CONTENT HERE -->
<p>This is my content space.

This is my content space.

This is my content space.

This is my content space.

This is my content space.

This is my content space.

This is my content space.

This is my content space.</p>

<!--End SCROLL CONTENT HERE-->

</div>

</div>

</td>

<td>
<img src="images/nav-arrow-up.gif" width="13" height="13" border="0" id="rollfirst"
onmouseover="document.getElementById('rollfirst').src='images/nav-arrow-up-hover.gif';pressup();"
onmouseout="document.getElementById('rollfirst').src='images/nav-arrow-up.gif';mouse_out();">
<br><br>
<img src="images/nav-arrow-down.gif" width="13" height="13" border="0" id="rollfirst2"
onmouseover="document.getElementById('rollfirst2').src='images/nav-arrow-down-hover.gif';pressdown();"
onmouseout="document.getElementById('rollfirst2').src='images/nav-arrow-down.gif';mouse_out();">
<input id="track" name="track" type="hidden" value="">

</td>
</tr>

</table>

</div>

</div>

<h3 class="style2"><a href="castlegate3.html">ENTER</a></h3>

</div>

</body>

</html>
Copy linkTweet thisAlerts:
@meladyauthorOct 30.2007 — update: tweaked the coding for image location and wha-la...this is so great and gives me alot to study as I learn
Copy linkTweet thisAlerts:
@CentauriOct 30.2007 — I'm a bit lost here - at what point did an iframe containing content.html turn into a scrolling marquee ????
Copy linkTweet thisAlerts:
@meladyauthorOct 30.2007 — I did notice that I didn't change anything to the 'content.html' page, but wasn't sure how to ask.
Copy linkTweet thisAlerts:
@sticks464Oct 30.2007 — You don't need the content page anymore. The content that scrolls is on the index page in the script area.
[CODE]<!--YOUR SCROLL CONTENT HERE -->
<p>This is my content space.
This is my content space.
This is my content space.
This is my content space.
This is my content space.
This is my content space.
This is my content space.
This is my content space.</p>
<!--End SCROLL CONTENT HERE-->[/CODE]
The content here can be coded as if it were a page, only without the html, head or body opening and closing tags.
Copy linkTweet thisAlerts:
@savvykmsOct 30.2007 — A few tips to help...
[CODE]scripting format:
<script type="text/javascript" language="javascript">
<!--
//script here, the HTML comment tags stops old broswers from displaying text
-->
</script>
inline frame:
<iframe src="page.html"></iframe>
CSS:
<div style="overflow: scroll; width: 512; height: 128;">
<!-- HTML code here -->
</div>[/CODE]
×

Success!

Help @melady spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...