LiveWire Peer Support Network

Printable Version of Topic "Damn HTML!"

- LiveWire Teen Forums & College Forums (http://www.golivewire.com)
-- (http://www.golivewire.com/forums/support-technical.html)
--- Web Design & Search Engine Optimization (http://www.golivewire.com/forums/forum-200-s-0.html)
---- Damn HTML! (http://www.golivewire.com/forums/peer-yaiebtb-support-a.html)

-- Posted by blufindr at 9:51 pm on Aug. 26, 2008

I'm trying to get a site to work with floating iFrames, but the damn things don't float. Help?

-- Posted by Narfle the Garthok at 9:52 pm on Aug. 26, 2008

Post your code, and I can fix it.

-- Posted by iwashere85 at 9:53 pm on Aug. 26, 2008

Sure, I'll help.

-- Posted by MrIndigo at 9:53 pm on Aug. 26, 2008

Show us the script you used...

-- Posted by blufindr at 9:55 pm on Aug. 26, 2008

Code:

BLARGH

Welcome to my site!

First stylesheet:
Code:
body {
color: #FFFFFF;
font-family: helvetica, verdana, sans-serif;
background-color: #000000;
}

Second stylesheet:
Code:
#1 {
position:absolute;
       left: 600px;
       top: 220px;
       width: 330px;
       height: 180px;
       z-index: 100
}

div#nav {
position: absolute;
left: 200px;
top: 100px;
width: 100px;
height: 500px;
z-index: 1;
background-color: green;
}

body {
color: white;
font-family: helvetica, verdana, sans-serif;
background-color: #000000;
background-image: url('splatter copy.png');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
}

-- Posted by scottyrob at 5:08 am on Aug. 27, 2008

Owch for using both iframes and the css - float... I hate both and both have compatiabilty problems. But them both together and youve got an inresting combination!

-- Posted by Narfle the Garthok at 7:28 am on Aug. 27, 2008



I recommend using javascript to do this floating iframe because the CSS you is a bit messy.

Code:

//Specify iframe to display. Change src and other attributes except "position" and "left/top":
var iframetag=''

//specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")):
var masterdivleft="10px"

//specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")):
var masterdivtop="bottom"

var ie=(document.all || window.opera) && document.getElementById
var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body

if (ie)
document.write(iframetag)

function positionit(){
masterdivobj=document.getElementById("masterdiv")
var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20
window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight
var dsocleft=ie? iebody.scrollLeft : pageXOffset
var masterdivwidth=masterdivobj.width
masterdivheight=masterdivobj.height
masterdivobj.style.left=(masterdivleft=="right")? window_width-masterdivwidth-20 : masterdivleft
setInterval("repositionit()", 100)
}

function repositionit(){
if (ie){
dsoctop=ie? iebody.scrollTop : pageYOffset
masterdivobj.style.top=(masterdivtop=="bottom")? window_height-masterdivheight-14+dsoctop : parseInt(masterdivtop)+dsoctop
}
}

if (window.attachEvent)
window.attachEvent("onload", positionit)

But that between the tags of your page or make it a .js file and call it in your (whatever way you want to do it).

The downside of this is it is not FF compatible, but these days you rarely see anyone doing a floating iframe because of all the issues they can cause.

If you don't want to go about it that way, take some of the code from this and improve your existing CSS.  

-- Posted by blufindr at 3:00 am on Aug. 31, 2008

Quote: from Narfle the Garthok at 12:28 am on Aug. 28, 2008


 
I recommend using javascript to do this floating iframe because the CSS you is a bit messy.

Code:

//Specify iframe to display. Change src and other attributes except "position" and "left/top":
var iframetag=''

//specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")):
var masterdivleft="10px"

//specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")):
var masterdivtop="bottom"

var ie=(document.all || window.opera) && document.getElementById
var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body

if (ie)
document.write(iframetag)

function positionit(){
masterdivobj=document.getElementById("masterdiv")
var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20
window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight
var dsocleft=ie? iebody.scrollLeft : pageXOffset
var masterdivwidth=masterdivobj.width
masterdivheight=masterdivobj.height
masterdivobj.style.left=(masterdivleft=="right")? window_width-masterdivwidth-20 : masterdivleft
setInterval("repositionit()", 100)
}

function repositionit(){
if (ie){
dsoctop=ie? iebody.scrollTop : pageYOffset
masterdivobj.style.top=(masterdivtop=="bottom")? window_height-masterdivheight-14+dsoctop : parseInt(masterdivtop)+dsoctop
}
}

if (window.attachEvent)
window.attachEvent("onload", positionit)

But that between the tags of your page or make it a .js file and call it in your (whatever way you want to do it).

The downside of this is it is not FF compatible, but these days you rarely see anyone doing a floating iframe because of all the issues they can cause.

If you don't want to go about it that way, take some of the code from this and improve your existing CSS.

Thanks But I got lazy and just decided to chuck everything in a table instead.

I'll remember that code for when I need to do this again though

-- Posted by Narfle the Garthok at 11:30 am on Aug. 31, 2008

Quote: from blufindr at 3:00 am on Aug. 31, 2008

Quote: from Narfle the Garthok at 12:28 am on Aug. 28, 2008
 
 
 I recommend using javascript to do this floating iframe because the CSS you is a bit messy.  

 
Code:
 
 //Specify iframe to display. Change src and other attributes except "position" and "left/top":  
 var iframetag=''  

 //specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")):  
 var masterdivleft="10px"  

 //specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")):  
 var masterdivtop="bottom"  

 var ie=(document.all || window.opera) && document.getElementById  
 var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body  

 if (ie)  
 document.write(iframetag)  

 function positionit(){  
 masterdivobj=document.getElementById("masterdiv")  
 var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20  
 window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight  
 var dsocleft=ie? iebody.scrollLeft : pageXOffset  
 var masterdivwidth=masterdivobj.width  
 masterdivheight=masterdivobj.height  
 masterdivobj.style.left=(masterdivleft=="right")? window_width-masterdivwidth-20 : masterdivleft  
 setInterval("repositionit()", 100)  
 }  

 function repositionit(){  
 if (ie){  
 dsoctop=ie? iebody.scrollTop : pageYOffset  
 masterdivobj.style.top=(masterdivtop=="bottom")? window_height-masterdivheight-14+dsoctop : parseInt(masterdivtop)+dsoctop  
 }  
 }  

 if (window.attachEvent)  
 window.attachEvent("onload", positionit)  
 

 

 But that between the tags of your page or make it a .js file and call it in your (whatever way you want to do it).  

 The downside of this is it is not FF compatible, but these days you rarely see anyone doing a floating iframe because of all the issues they can cause.  

 If you don't want to go about it that way, take some of the code from this and improve your existing CSS.    

 

Thanks But I got lazy and just decided to chuck everything in a table instead.

I'll remember that code for when I need to do this again though

Haha guess that works to, well no problem if you ever need anything related to Web Design/Development feel free to PM me.

www.golivewire.com