| View previous topic :: View next topic |
| Author |
Message |
vedica
Joined: 23 Apr 2007
Posts: 11
Location: Noida, India
|
 Posted: Mon Apr 23, 2007 10:25 pm iframe not laoding properly |
 |
|
|
I am in the middle of creating a website and have used different iframes in two of the pages.
I have also used a javascript to fix the png transparency in IE (<7):
http://www.freewebs.com/juhi21/pngfix.js , with the following code in the head section of each page:
| Code: |
<head>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
</head> |
Everything goes fine in Firefox all the time, but in IE (6) the iframe starts to load but then goes blank when the loading is done. if i remove the code from the head section of the pages(not the iframes), it works fine, only ofcourse without alpha transparency.
Page with png-fix code included: http://www.freewebs.com/juhi21/guestbook.htm
(iframe source: http://www.freewebs.com/juhi21/guestbook_frame.html)
page without png fix code included:
http://www.freewebs.com/juhi21/news.htm (iframe source: http://www.freewebs.com/juhi21/news_frame.htm)
How can I make both the png-fix and the iframes work at the same time? Kindly point out the source of the problem and the solution, if any. I am a complete newbie, so it might be something really stupid as well.[/code] |
|
graphicsgod
Joined: 06 Feb 2007
Posts: 65
|
| Posted: Wed Apr 25, 2007 11:41 am |
|
|
|
Try this instead.
Put this on the pages you want to fix the gifs or pngs for older browsers between the header tags.
| Code: |
<style type="text/css">
img {
behavior: url("fixmypngs.htc");
}
</style>
|
And create a text file and put this text in there and save. Then rename the text file to "fixmypngs.htc".
| Code: |
<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";
var realSrc;
var blankSrc = "images/blank.gif";
var isPrinting = false;
if (supported) fixImage();
function propertyChanged() {
if (!supported || isPrinting) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}
function afterPrint() {
isPrinting = false;
fixImage();
}
</script>
</public:component>
|
Now test it out! It should work, and allow your iframes to work as well.
Also if you want an iframe code that auto exopands and looks like it's part of the page... Try this.
This goes in the header area.
| Code: |
<script type="text/javascript">
var iframeids=["Name_of_iFrame_here"]
var iframehide="yes"
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</script>
|
If you want more iframes to work with the same code, just add a comma between each iframe name.
Example:
| Code: |
var iframeids=["iFrame_One","iFrame_Two","iFrame_Three"]
|
And this goes in the body section.
| Code: |
<iframe id="Name_of_iFrame_here" src="webpage.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none">If you can see this, your browser doesn't understand and use IFRAME's. However, we'll still <A HREF="webpage.html">link</A> you to the file.</iframe>
|
Enjoy!
Rob |
|
vedica
Joined: 23 Apr 2007
Posts: 11
Location: Noida, India
|
|
graphicsgod
Joined: 06 Feb 2007
Posts: 65
|
| Posted: Tue May 01, 2007 10:43 am |
|
|
|
Hmm intresting...
Did you create a text file, insert the code, save it as "fixmypngs.htc", and upload it to where the page is at?
I know it works, since I've been using it for a few years.
Heres a quick website I made a few months ago for a friend.
http://www.idtagem.com
Theres two PNGs and the rest are GIFs with transparencies. I've tested it on all browsers and only I.E.4&3 the code won't work on.
Rob |
|
graphicsgod
Joined: 06 Feb 2007
Posts: 65
|
| Posted: Tue May 01, 2007 11:17 am |
|
|
|
BTW... Very nice website and layout!! Just got done looking at it. Did you use any programs or code it the "fun way"  ?
Rob |
|
Keikura
Joined: 24 Mar 2007
Posts: 167
Location: U.K.
|
| Posted: Tue May 01, 2007 11:20 am |
|
|
|
Might wanna sort out that repeated background.
The bg your using is less than the width of my browser window so it repeats horizontally. |
|
graphicsgod
Joined: 06 Feb 2007
Posts: 65
|
| Posted: Tue May 01, 2007 11:35 am |
|
|
|
LOL, just noticed that!! Yeah that can be a big issue for those with browsers full screen or larger screens!
I would put that middle image in a table or something and separate it from the pink background..
Rob |
|
vedica
Joined: 23 Apr 2007
Posts: 11
Location: Noida, India
|
| Posted: Wed May 02, 2007 4:36 am |
|
|
|
Hey,
I just now tried to use ur code all over again, 2 c if i mite hv made sum mistake....it sure looks different from what it did when i used it last time, but there are those red crosses over the images, and the iframe transparencies are still not working...link: http://www.freewebs.com/juhi21/index%5Fdummy%5Fframed%5Ffixed.htm
yeah, ur website looks pretty cool!...all the images were looking fine in ie, guess it shud work with me too. 
| Quote: |
| BTW... Very nice website and layout!! Just got done looking at it. Did you use any programs or code it the "fun way" Wink? |
thanx! nah i m afraid i dont no enuf html 2 do it the 'fun' way, i used dreamweaver.  |
|
graphicsgod
Joined: 06 Feb 2007
Posts: 65
|
| Posted: Wed May 02, 2007 4:31 pm |
|
|
|
Ok perfect!!!!!!!!!!
Now were on the right track. Now for the part I left out . Don't worry, I did that on purpose!
Your missing a blank GIF image that the HTC file is trying to find . What you need to do is create a blank 1 pixel by 1 pixel GIF image and call it "blank.gif". Techincally you can call it anything you want, you will just have to change the name in the HTC file. You'll need to change that info any way since I have the blank.gif in a "images" directory. You'll need to change this to point it to where you will have that file stored on your server. Or you can create an "images" directory and put it there, your call!
And if you don't feel like making the image, or don't have the tools.
Click here for the file.
http://www.idtagem.com/images/blank.gif
(to see the "dot", just hit control-A and it will select all of the page. You should see a little dot appear in the top left side of the browser. Now just right click on it and choose "Save As". You know the rest!)
Enjoy and peace!
Rob |
|
graphicsgod
Joined: 06 Feb 2007
Posts: 65
|
| Posted: Wed May 02, 2007 4:39 pm |
|
|
|
| vedica wrote: |
| yeah, ur website looks pretty cool!...all the images were looking fine in ie, guess it shud work with me too. . |
Thanks. That site could have been better, but I was going by a quick sketch on a bar napkin and was only given a weekend to do it in since she wanted to sell they're stuff ASAP . And since I code using only notepad, most of that time was for coding, the images were slapped in at the last minute.
My favorite recent websites was for a radio station and a Sirius radio program. Unfortunately I can't seem to find the links right now, I guess I could post an image off my HD... or something.
Rob |
|
graphicsgod
Joined: 06 Feb 2007
Posts: 65
|
|
vedica
Joined: 23 Apr 2007
Posts: 11
Location: Noida, India
|
| Posted: Wed May 02, 2007 10:42 pm |
|
|
|
haha  kay, i uploaded a 1x1 blank gif image (i already had the Images directory, so I didnt have to do much )
here's how it looks now: http://www.freewebs.com/juhi21/index%5Fdummy%5Fframed%5Ffixed.htm
The images are perfect!  thanx!
the iframes still have white backgrounds though.
but thanx!
hey, those websites are awesome! specially the sirius radio-station one...cool! |
|
graphicsgod
Joined: 06 Feb 2007
Posts: 65
|
| Posted: Thu May 03, 2007 12:22 pm |
|
|
|
I wouldn't use the transparent tag in the iFrame, just for that reason. I would use the background of the area to fill the background of the iFrame. That way it will work on more browsers and remove that problem.
Also cut up your background and insert it into tables or via CSS to allow faster loading and less problems. It may mean more work "now", but it will be better in the end!
Rob |
|
graphicsgod
Joined: 06 Feb 2007
Posts: 65
|
| Posted: Thu May 03, 2007 6:14 pm |
|
|
|
Ok I spent the last couple hours and fixed your website to work with a better system and keep everything looking and working how you want it to.
Check your email since I did more than just code ! You can change the images to your liking, I didn't have much to go on... so I made do  . I used winzip to put all the files into, FYI.
The whole site is using CSS and is all hacked up to load and be displayed better.
Enjoy!
Rob |
|
vedica
Joined: 23 Apr 2007
Posts: 11
Location: Noida, India
|
| Posted: Wed May 09, 2007 4:26 am |
|
|
|
hey! thats awesome!! i cant believ u recoded the whole thing! gee thanx!
i think its a good idea to do it your way. its more browser compatible and seems better...and i seriously need to cut down on the loading time! i'll do it all over again following your way...thanx again! |
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
