LiveWire Network Peer Answers Peer Support Teen Forums Tech Forums College Forums 763 users online 224117 members 1271 active today Advertise Here Sign In
TeenCollegeTechPhotos | Quizzes | LiveSecret | Memberlist | Dictionary | News | FAQ
Member Spotlight
the raven
Music: Beck Aesop Rock S
Mood: Euphoric
You have 1 new message.
Emergency Help
Until you sign up you can't do much. Yes, it's free.

Sign Up Now
Membername:
Password:
Already have an account?
► Invite Friends
► Active Members
► Groups
► Contests
Moderators
2 online / 102 MPM
Fresh Topics
  LiveWire / Technical Forums / Web Design & Search Engine Optimization / Adding Reply

Quoting Post
Archived Topic: It will not be bumped to the top of the forum.
Topic Damn HTML!
Membername   Not a member? Sign Up Free (takes 20 seconds)
Password   Forgotten your password?
Post

 Font:   Size:   Color:

FAQ Keyword Search:
Post Options
Favorites Manager
Notify me of new replies to this topic by email
Notify me of new replies to this topic by private message
Original Post
blufindr Posted 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?

Replies
Narfle the Garthok Posted 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='<iframe id="masterdiv" src="anything.htm" width="350px" height="250px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -300px; top: -300px;"></iframe>'  

 //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 <head> </head> tags of your page or make it a .js file and call it in your <head></head> (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.

blufindr Posted 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='<iframe id="masterdiv" src="anything.htm" width="350px" height="250px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -300px; top: -300px;"></iframe>'

//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 <head> </head> tags of your page or make it a .js file and call it in your <head></head> (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

Narfle the Garthok Posted 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='<iframe id="masterdiv" src="anything.htm" width="350px" height="250px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -300px; top: -300px;"></iframe>'

//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 <head> </head> tags of your page or make it a .js file and call it in your <head></head> (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.  

scottyrob Posted 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!
blufindr Posted at 9:55 pm on Aug. 26, 2008
Code:
<html>

<head>

<title>BLARGH</title>

<link rel="stylesheet" type="text/css" href="pages.css">

<link rel="stylesheet" type="text/css" href="home.css">

</head>

<body>

<marquee>Welcome to my site!</marquee>

<p></p>

<div id="nav">
<a href="1.html" target="1">1</a>
<p>
<a href="ohai.html" target="1">ohai</a>
</p>
</div>

<p></p>

<div id="1">

<iframe width="330" height="180" name="1" src="1.html" frameborder="0">I have an iFrame. You just can't see it. <a href="http://www.getfirefox.com/";>Get a better browser.</a></iframe>

</div>

</body>

</html>

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;
}
MrIndigo Posted at 9:53 pm on Aug. 26, 2008
Show us the script you used...

iwashere85 Posted at 9:53 pm on Aug. 26, 2008
Sure, I'll help.
Narfle the Garthok Posted at 9:52 pm on Aug. 26, 2008
Post your code, and I can fix it.
All 8 previous replies displayed.

© 2000-2009 LiveWire Peer Support Network
Custom Web Hosting | Teen Advice | Peer Support