Iframe position help

[maxcyprus]

1) Script Title: Iframe

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...e-scroller.htm

3) Describe problem: Hi evrybody. I need to place iframe in the right hand side instead of left hand side. Kindly have a look my site www.medaperadiga.com . As you can see on the right side there are plenty of space and i want to place this there. kindly help me on this matter ! Thanks !!.

[jscheuer1]

This is primarily a layout issue. By even asking the question, you show that you probably need help in laying out your page. That's OK, we've all been there.

However, in almost all cases the answer will depend upon how the rest of your page lays out. To that end:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Also, try to indicate specifically where you want the iframe scroller to appear.

[maxcyprus]

Hi John, Thank you for replying . Then page link is www.medaperadiga.com. where i want to place iframe is the right hand side. (Exactly the opposite of that floating banner on the left hand side). This is the actual layout :

/*======= index.html =======*/

#page1 #header .col-1 {width: 249px; padding: 0 20px 0 36px;}
#page1 #header .col-2 {width: 208px; padding: 10px 40px 0 57px;}
#page1 #header .col-3 {width: 235px; padding: 1px 30px 0 37px;}

#page1 .row-1 .col-1 {width: 531px; padding: 0 70px 0 0;}
#page1 .row-1 .col-2 {width: 266px; padding: 17px 0 0 0;}

/*======= index-1.html =======*/

#page2 .col-1 {width: 531px; padding: 0 70px 0 0;}
#page2 .col-2 {width: 266px;}

/*======= index-2.html =======*/

#page3 .col-1 {width: 266px; padding: 0 64px 0 0;}
#page3 .col-2 {width: 537px;}

/*======= index-3.html =======*/

#page4 .col-1 {width: 100%; padding: 0 5px 5px 0;}
#page4 .col-2 {width: 266px;}

/*======= index-4.html =======*/

#page5 .col-1 {width: 531px; padding: 0 70px 4px 0;}
#page5 .col-2 {
	width: 266px;
}

/*======= index-5.html =======*/

#page6 .col-1 {
	width: 531px;
	padding: 0 70px 0 0;
	font-family: sandaru-n;
}
#page6 .col-2 {width: 266px;}


/*======= index-5.html =======*/

Thanks John !

[maxcyprus]

And this is the cssstyle :

-----------------------------------------------------------------------------------And this is the part of actual cssstyle :

* {
	margin: 0;
	padding: 0;
}
.wrapper {
	width: 100%;
	overflow: hidden;
}
.clear {
	clear: both;
	font-size: 0%;
	
	line-height: 0%;
	height: 0;
}
input, select {
	vertical-align: middle;
	font-weight: normal;
}
img {
	border: 0;
	vertical-align: top;
	text-align: left;
}
ul, ol {
	list-style: none;
}
object {
	vertical-align: top;
}
a {
	color: #8d9e01;
}
a:hover {
	text-decoration: none;
}
body {
	font-size: 100%;
	line-height: 1em;
	color: #000000;
	background-color: #0F0;
}
h3 {
	padding: 0 0 36px 0;
	line-height: 1.467em;
	font-size: 1.25em;
	font-weight: normal;
	color: #8d9e01;
}
.fleft {
	float: left;
}
img.fleft {
	margin: 0 30px 25px 2px;
}
.fright {
	float: right;
}
.col-1, .col-2, .col-3, .col-4 {
	float: left;
	overflow: hidden;
}
.block-1, .block-2, .block-3, .block-4 {
	float: left;
	overflow: hidden;
}
table, td {
	border-collapse: collapse;
	padding: 4px;
}
table, td, img {
	border: 0;
}
td, tr {
	vertical-align: top;
	text-align: left;
}
#main-tail {
	background: #fdf5e0 url(images/main-tail.gif) repeat-x 0% 0%;
}
#tail-bot {
	background: url(images/tail-bot.gif) repeat-x 0% 100%;
}
#top-right-tail {
	background: url(images/top-right-tail.gif) repeat-x 0% 0%;
	width: 50%;
	height: 364px;
	position: absolute;
	top: 0;
	right: 0;
}
#top-bg {
	background: url(images/top-bg.jpg) no-repeat 50% 0%;
	position: relative;
	z-index: 1;
}
#main {
	position: relative;
	width: 912px;
	font-size: 12px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	font-family: iskoola pota;
}
#page1 #header {
	min-height: 276px;
	height: auto !important;
	height: 276px;
	padding: 414px 0 0 0;
}
#flash-menu {
	width: 100%;
	height: 108px;
	position: absolute;
	top: 0;
	left: 0;
}
#flash-block {
	height: 525px;
}
#flash {
	width: 100%;
	height: 330px;
	position: absolute;
	top: 137px;
	left: 0;
	z-index: 2;
}
#flash1 {
	width: 100%;
	height: 378px;
	position: absolute;
	top: 137px;
	left: 0;
	z-index: 2;
}
#header {
	position: relative;
	height: 525px;
}
#logo {
	position: absolute;
	top: 22px;
	left: 10px;
}
#navi {
	position: absolute;
	top: 64px;
	right: 141px;
}
#navi li {
	float: left;
	padding: 0 0 0 2px;
}
#navi li a {
	background: url(images/menu-bg.gif) no-repeat 0% 0%;
	display: block;
	width: 100px;
	height: 43px;
	float: left;
	text-align: center;
	line-height: 43px;
	text-decoration: none;
	color: #cebf98;
}
#navi li a:hover {
	background: url(images/menu-act.gif) no-repeat 0% 0%;
	color: #1f1710;
}
#navi li#menu-act a {
	background: url(images/menu-act.gif) no-repeat 0% 0%;
	color: #1f1710;
}
#header-pic {
	position: absolute;
	top: 127px;
	left: -10px;
}
#block-tail {
	background: url(images/block-tail.jpg) repeat-y 0% 0%;
	width: 100%;
}
#block-top {
	background: url(images/block-top.jpg) no-repeat 0% 0%;
	width: 100%;
}
#block-bot {
	background: url(images/block-bot.jpg) no-repeat 0% 100%;
	width: 100%;
	min-height: 157px;
	height: auto !important;
	height: 157px;
	padding: 69px 0 50px 0;
	position: relative;
}
#block-bot p {
	line-height: 1.385em;
	font-size: 18px;
	color: #fff;
}
#block-bot p strong {
	display: block;
	padding: 15px 3px 0 0;
	font-size: 0.923em;
	font-weight: normal;
	font-style: italic;
	text-align: right;
	text-transform: uppercase;
	color: #f19c00;
}
.header-title1 {
	background: url(images/header-title-bg1.gif) no-repeat 0% 100%;
	min-height: 29px;
	height: auto !important;
	height: 29px;
	margin: 0 0 23px 0;
}
.header-title2 {
	background: url(images/header-title-bg2.gif) no-repeat 0% 100%;
	min-height: 29px;
	height: auto !important;
	height: 29px;
	margin: 0 0 12px 0;
}
.header-title3 {
	background: url(images/header-title-bg3.gif) no-repeat 100% 100%;
	min-height: 28px;
	height: auto !important;
	height: 28px;
	margin: 0 0 28px 0;
	padding: 0 0 0 73px;
}
.header-link1 {
	background: url(images/link-bg1.gif) no-repeat 0% 0%;
	display: block;
	height: 15px;
	padding: 0 0 0 25px;
	overflow: hidden;
	line-height: 15px;
	font-size: 1.083em;
	text-decoration: none;
	color: #fff;
	position: absolute;
	left: 37px;
	bottom: 15px;
}
.header-link1:hover {
	text-decoration: underline;
}
.header-link2 {
	background: url(images/link-bg2.gif) no-repeat 0% 0%;
	display: block;
	width: 70px;
	height: 15px;
	padding: 0 0 0 25px;
	overflow: hidden;
	line-height: 13px;
	font-size: 1.083em;
	text-decoration: none;
	color: #fff;
	position: absolute;
	left: 362px;
	bottom: 15px;
}
.header-link2:hover {
	text-decoration: underline;
}
.header-link3 {
	background: url(images/link-bg3.gif) no-repeat 0% 0%;
	display: block;
	width: 65px;
	height: 15px;
	padding: 0 0 0 25px;
	overflow: hidden;
	line-height: 13px;
	font-size: 1.083em;
	text-decoration: none;
	color: #fff;
	position: absolute;
	left: 647px;
	bottom: 15px;
}
.header-link3:hover {
	text-decoration: underline;
}
.list-1 li {
	background: url(images/marker-1.gif) no-repeat 0% 7px;
	padding: 0 0 0 18px;
	line-height: 1.692em;
	font-size: 1.083em;
	color: #000;
}
.list-1 li a {
	text-decoration: none;
	color: #000;
}
.list-1 li a:hover {
	text-decoration: underline;
}
#page1 #content {
	padding: 48px 10px 42px 35px;
}
#content {
	padding: 39px 10px 38px 35px;
}
#content p {
	overflow: hidden;
	line-height: 1.538em;
	font-size: 14px;
	font-family: "iskoola pota";
}
#content p em {
	float: right;
	padding: 0 8% 0 0;
	font-style: normal;
}
#content p b {
	display: block;
	color: #8d9e01;
}
#content p.type1 {
	padding: 0 0 19px 0;
	line-height: 1.385em;
}
#content p.type2 {
	padding: 0 0 15px 0;
	line-height: 1.385em;
}
#content p.type3 {
	padding: 0 0 6px 0;
	line-height: 1.385em;
}
#content p.extra-style {
	padding: 4px 0 4px 0;
}
#content p.extra-style1 {
	padding: 4px 0 16px 0;
	font-family: Verdana, Geneva, sans-serif;
}
#content p.no-indent {
	padding: 0 0 0 0;
}
.title {
	min-height: 70px;
	height: auto !important;
	height: 70px;
	padding: 0 0 10px 0;
}
.title-1 {
	min-height: 29px;
	height: auto !important;
	height: 29px;
	margin: 0 0 35px 0;
	padding: 0 0 0 2px;
	border-bottom: 1px solid #cec0a9;
}
.title-2 {
	min-height: 29px;
	height: auto !important;
	height: 29px;
	margin: 0 0 35px 0;
	padding: 50px 0 0 2px;
	border-bottom: 1px solid #cec0a9;
}
.link {
	background: url(images/link-bg.gif) no-repeat 1px 2px;
	display: inline-block;
	float: left;
	height: 17px;
	overflow: hidden;
	margin: 27px 0 0 0;
	padding: 0 0 0 26px;
	line-height: 15px;
	color: #8d9e01;
}
.link-1 {
	background: url(images/link-bg.gif) no-repeat 1px 2px;
	display: inline-block;
	float: left;
	height: 17px;
	overflow: hidden;
	margin: 18px 0 37px 0;
	padding: 0 0 0 26px;
	line-height: 15px;
	color: #8d9e01;
}
.link-2 {
	background: url(images/link-bg.gif) no-repeat 1px 2px;
	display: inline-block;
	float: left;
	height: 17px;
	overflow: hidden;
	margin: 20px 0 0 0;
	padding: 0 0 0 26px;
	line-height: 15px;
	color: #8d9e01;
}
.list {
	padding: 0 0 2px 0;
}
.list li {
	background: url(images/marker.gif) no-repeat 0% 10px;
	padding: 0 0 0 14px;
	line-height: 1.714em;
	font-size: 1.167em;
	color: #8d9e01;
}
.list li a {
	color: #8d9e01;
}
.list-2 li {
	width: 100%;
	overflow: hidden;
	padding: 0 0 35px 0;
	line-height: 1.385em;
	color: #000;
}
.list-2 li span {
	background: url(images/bg.gif) no-repeat 0% 0%;
	display: block;
	width: 46px;
	height: 50px;
	float: left;
	margin: 0 20px 0 0;
	padding: 0 2px 0 0;
}
.list-2 li span strong {
	display: block;
	height: 20px;
	line-height: 18px;
	text-align: center;
	font-size: 1.083em;
	font-weight: normal;
	color:#000;
}
.list-2 li span b {
	display: block;
	height: 30px;
	line-height: 26px;
	text-align: center;
	font-size: 1.5em;
	color: #000;
}
.list-2 li em {
	display: block;
	padding: 2px 0 6px 0;
	font-size: 1.167em;
	font-style: normal;
	color: #000;

Thanks John !

[jscheuer1]

Oh calm down. You haven't been banned. You probably just don't have enough posts yet to qualify to send Snookerman a PM.

BTW, though, it is bad form to post so much code without formatting it, example - instead of:

my code

do it like:

[CODE]my code[/CODE]

so that it looks like so:

my code

That way if it is real long, there will be scrollbars to view it, and if any lines are long, they won't get wrapped in odd places by the editor.

However, you needn't post so much code if we have a link to your site. We can look at the code ourselves.

I think Snookerman overreacted though in giving you an infraction, he should have just left a note in the thread and fixed the formatting himself. You are too new to get an infraction for that, it's not even in the official rules.

Anyways, back to your actual question. The one thing you have on the left is controlled by a script. I'm working on a version of it that will allow you to have two or more of these features on a page, on the left or right, top or bottom. It works in all browsers except IE 6 and less, though I see a way to fix that, just haven't gotten to it yet.

[maxcyprus]

Thanks John, You really helpfull and giving clear instruction. I will definetly be carefull next time when i post ! If Snookerman can see this message, please snookerman I do appologise for the mistake which John explain me and i promise i will not do it again !!! . Ok John whenever you get a positive solution for my thread, kindly drop me a message. Thanks and i really appreciate about your services !!.

[jscheuer1]

You're welcome. OK, I'll try to make this as easy as possible for you. First make a backup of your page. I don't have the proper encoding here to make an accurate copy of your text, so the below will be just an approximation of that part. On your page at http://www.medaperadiga.com/ replace:

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<layer id="divStayTopLeft">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#000000">
<p align="center" class="style47"><b><font size="5">නිවේදනයක්</font></b></td>
</tr>
<tr>
  <td width="100%" bgcolor="#000000"><div align="center"><span class="style54">99 194 101</span> <span class="style55">නමැති දුරකථන අංකය අප වෙබ් අඩවියට අයත් නොවන අතර,  එම අංකය  සතු පුද්ගලයා සමග අප වෙබ් අඩවිය කිසිම සම්බන්ධ තාවයක් නොමැති බව කරුණාවෙන් සලකන්න !!</span></div>
</tr>
</table>
<!--END OF EDIT-->
</layer>
<script type="text/javascript">
/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

var fstandardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body


if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 250;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+'px';this.style.top=y+'px';};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? window.pageYOffset + window.innerHeight : fstandardbody.scrollTop + fstandardbody.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? window.pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? window.pageYOffset + window.innerHeight : fstandardbody.scrollTop + fstandardbody.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

with:

<div id="divStayTopLeft" style="position:absolute;z-index:10;">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#000000">
<p align="center" class="style47"><b><font size="5">?????????</font></b></td>
</tr>
<tr>
  <td width="100%" bgcolor="#000000"><div align="center"><span class="style54">99 194 101</span> <span class="style55">????? ?????? ???? ?? ???? ?????? ???? ???? ???,  ?? ????  ??? ???????? ??? ?? ???? ????? ????? ??????? ?????? ?????? ?? ????????? ?????? !!</span></div>
</tr>
</table>
<!--END OF EDIT-->
</div>
<div id="divStayTopRight" style="position:absolute;z-index:10;width:150px;height:150px;background:#fff;">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<script type="text/javascript">

/***********************************************
* IFRAME Scroller script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//specify path to your external page:
var iframesrc="http://www.dynamicdrive.com/dynamicindex2/external.htm"

//You may change most attributes of iframe tag below, such as width and height:
document.write('<iframe id="datamain" src="'+iframesrc+'" width="150px" height="150px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"></iframe>')

</script>
<!--END OF EDIT-->
</div>

<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Original Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for legal use
Modifications here for multi-use and multi-side
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1
*/

function JSFX_FloatTopDiv(id, vPos, sX, sY){
	if(!document.getElementById){return;}
	this.el = document.getElementById(id);
	this.verticalpos = vPos;
	this.startX = !this.ie6? Math.abs(sX) : sX < 0? this.width(false) + sX - this.el.offsetWidth : sX;;
	this.startY = sY;
	this.fromH = sX < 0 && !this.ie6? 'right' : 'left';
	this.ml();
	var cObj = this;
	setInterval(function(){cObj.stayTopLeft();}, 10);
}
if(document.getElementById){
	JSFX_FloatTopDiv.prototype = {
		ml: function(){
			this.x = this.startX;
			if(this.verticalpos === 'fromtop'){
				this.y = this.startY;
			}
			else{
				this.y = this.height(false);
				this.y -= this.startY;
			}
		},
		stayTopLeft: function(){
			var el = this.el.style, wAdj = this.fromH === 'right'? -1 : 1;
			if(this.verticalpos === 'fromtop'){
				this.y += (this.height(true) + this.startY - this.y)/8;
			}
			else{
				this.y += (this.height(false) - this.startY - this.y)/8;
			}
			this.x += (this.width(true) * wAdj + this.startX - this.x)/8;
			el[this.fromH] = this.x + 'px';	el.top = this.y + 'px';
		},	
		trueBody: (function(){
			return document.compatMode && document.compatMode !== 'BackCompat'?
			function(){return document.documentElement;} :
			function(){return document.body;}
		})(),
		height: (function(){
			return window.innerHeight?
			function(s){return s? pageYOffset : pageYOffset + innerHeight;} :
			function(s){var tb = this.trueBody(); return s? tb.scrollTop : tb.scrollTop + tb.clientHeight;}
		})(),
		ie6: (function(){
			return !window.innerWidth && /MSIE (\d)/.test(navigator.appVersion) && RegExp.$1 < 7;
		})(),
		width: (function(){
			return window.innerWidth?
			function(){return pageXOffset;} : /MSIE (\d)/.test(navigator.appVersion) && RegExp.$1 < 7?
			function(s){var tb = this.trueBody(); return s? tb.scrollLeft : tb.scrollLeft + tb.clientWidth;} :
			function(){return this.trueBody().scrollLeft;}
		})()
	};
}

new JSFX_FloatTopDiv('divStayTopLeft', 'fromtop', 3, 150);
new JSFX_FloatTopDiv('divStayTopRight', 'fromtop', -3, 180);
</script>

Any questions, feel free to ask.

[maxcyprus]

Thank you for your great help John !! Its work fine ! really appreciate your help !! Kindly check my code if i made any errors . Thanks again !!

Kindly have a loo @ www.medaperadiga.com

[maxcyprus]

Thanks John ! Really appreciate your help.

[jscheuer1]

Looks good. Just one fine point, probably doesn't matter. Here:

</tr>
</table>
</layer>
</script>
<!--END OF EDIT-->

<!--END OF EDIT-->
</div>
<div id="divStayTopRight" style="posi . . .

It really should be:

</tr>
</table>
<!--END OF EDIT-->
</div>
<div id="divStayTopRight" style="posi