|
JavaScript - Iframe Problem...please Help!!!
Hi, I am building a chat/messenger application using PHP and Javascript.
I currently have two iframes, one has the chat, the other the users in the database and their status, which is set to default 'offline' and updated to 'online' when logging in.There is also an option to change colour of both iframes like so: [CODE]function change_background_pink() { document.frames.chatContents.document.body.style.backgroundColor="pink"; [CODE] and then this code to call the function: [CODE]<BUTTON onclick=change_background_pink()>Pink</BUTTON>[CODE] The problem is, that when the frames refresh, the background of the users frame goes back to the default white colour (the text does change to show newly logged users), yet the chat one stays the newly selected colour as intended (again the text changes as required). Here is the code of the iframe as it stands now: [CODE] <?php include("connect.php"); $query=mysql_query("SELECT * FROM users;"); echo "<table style='font-family:arial;font-size:14px;'>"; // echo "<th align=left>Username:" . "<th align=left>Status:"; //while loop for rows while($rows=mysql_fetch_array($query)){ echo "<tr>"; //show member deatils echo "<td>" . $rows['username'] . "</td>" . "<td>" . $rows['status'] . "</td>"; echo "</tr>"; } ?> <script type="text/javascript"><!-- setTimeout("refreshiframe()", 10000); //poll server in one second function refreshiframe(){ document.location.reload(); } //--> </script> [CODE] What I am asking is if anybody knows how i can just refresh the actual text part of the frame from the database rather than the entire frame? Many, many thanks in advance for any advice i may recieve and sorry if it sounds confusing i cannot think of a simpler way of explaining it. Similar TutorialsBeen tinkering with X7Chat, a php/javascript chat app, and have run into a problem putting it in an iframe. Works fine in a full or popup window, but one of the functions hangs when the app is run in an iframe or frameset. I know iframes can be picky about relative/absolute urls, but this one has me stumped. Too much code to post, but here's the error: Line: 140 Char: 3 Error: 'opener.window.parent.frames.profile.document' is null or not an object Code: 0 URL: http://www.xxxxxxxx.org/x7chat/index...General%20Chat Not sure, but I believe the problem involves this function: Code: $script = " <script language=\"javascript\" type=\"text/javascript\">\n opener.window.clearTheWay(); opener.window.parent.frames['profile'].document.location='./index.php?act=frame&frame=profile&room=$_GET[room]&user=$_GET[user]&tto=1';\n </script>\n "; The X7Chat website appears to be abandoned - support forum is offline, and emails are returned. Any bright ideas would be appreciated. Hello, i'm trying to post news on my site. so i was able to reached this http://www.shmtestforums.uphero.com/...ller/test.html but i couldn't get, exactly what i want. i really want is when load the page it should shows only 3 rows then after few seconds(say 2 seconds), the 1st row should disappear and bellow 3 rows should come up (eg. when google_1 row is disappear, google_2 & google_3 & google_4 rows should come up) this rotation should be continuous i tried this many. but no positive result. so please.... please....help me to solve this. this is the problematic java script, Code: <script type="text/javascript">
var scrollspeed=cache=1
var initialdelay=500
function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}
function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}
function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}
if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller
</script>
thank you . I'm using a simple PHP login script (this one: http://www.zubrag.com/scripts/password-protect.php) in tandem with Fancybox (he http://fancybox.net/). The Fancybox pop-ups on my pages use iframes, to hold written content and links. When I log in once, I can access all the regular HTML pages inside the login script without having to log in again. But when I click Fancybox's pop-up links, the pop-up is logged OUT. How can I make all the iframe pop-ups stay logged in when the user is logged in? Thanks for any help, much appreciated. Hi all let me start off by saying: "AAAAAAHHHHHHHAAAAAAA" Feel better now! I have an iFrame which loads individual pages from my site, I am using javaScript to tell the iFrame to resize to the size of the page that is being loaded, the problem is when I click on the link the iFrame does not resize but if I click on the link again it does resize! The fuction is called but only the second time round. Also the none of the script works in FireFox! HELP PLZ! My Code: Code: <SCRIPT LANGUAGE=javascript>
<!--
function reSize()
{
try{
var oBody = ifrm.document.body;
var oFrame = document.all("ifrm");
oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
}
//An error is raised if the IFrame domain != its container's domain
catch(e)
{
window.status = 'Error: ' + e.number + '; ' + e.description;
}
}
//-->
</SCRIPT>
<body onload="reSize()" onresize="reSize()">
<li>
<a href="home.html" rel="nofollow" target="info" onclick="reSize();">
<img src="css/images/home.gif" width="40" height="40" alt="" class="nav_menu_image" />
<span class="nav_title">Home</span>
<br/>
</a>
</li>
<iframe onresize=reSize() id=ifrm src="home.html" name="info" frameborder="0"
padding="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="500px"
allowTransparency="true" noresize>
</iframe>
Code: window.onload = function()
{
var vIframeUrl;
vIframeUrl= document.getElementById("ifrBDiagram").src;
if (vIframeUrl == "#" && document.getElementById("txtBnr").value == "")
{
document.getElementById("ifrBDiagram").src = "C://eBondingDiagram//Infineon.jpg";
}
getIframeSize();
}
function getIframeSize()
{
//Get window width and height
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {//alert("in 2");
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {//alert("in 3");
winW = window.innerWidth;
winH = window.innerHeight;
}
document.getElementById("ifrBDiagram").width = (winW * 0.95);
document.getElementById("ifrBDiagram").height = (winH * 0.88);
}
Code: <table width="100%" height="100%" bgcolor="#CAD4E3" align="center" valign="center" style="border: 5px solid;"> <tr> <td><b>Bnr No:</b></td> <td><input type="text" id="txtBnr" name="txtBnr" /></td> <td> </td> <td> </td> </tr> <tr> <td><b>Lot No:</b></td> <td><input type="text" id="txtLot" name="txtLot" /></td> <td><INPUT id="btnCopy" TYPE="button" VALUE="Bonding Diagram" ONCLICK="fncCopy()"> <INPUT id="btnUpdate" TYPE="button" VALUE="End Lot" ONCLICK="reloadPage()"></td> <td> </td> </tr> <tr> <td><b>Failure Catalogues:</b></td> <td><select id="myList"> <option></option> <option>DSO</option> <option>Pre-Assembly</option> <option>PO EOL</option> <option>TDSON/TSDSON</option> <option>S308/WISON</option> </select> </td> <td><INPUT id="btnCata" TYPE="button" VALUE="Failure Catalogue" ONCLICK="fcnFailureCatalogue()"></td> <td> </td> </tr> <tr> <td colspan="4"> <iframe name="ifrBDiagram" id="ifrBDiagram" src=# style="border-width:4px; border-style:solid; border-color:blue;"> <span id="sMsg"></span> </iframe> </td> </tr> </table> When I first run the html , the interface just goes like this. After I press F5 to refresh the window, it displays this. The image just wont fit the iframe exactly. Can anyone please help to spot the bug ? I tried to use different resolution picture but still, the problem just doesn't solve. Is it really because of the image resolution ? Or something else gone wrong in my html ? Thanks I have a paragraph of text which is embedded in an IFrame. when i search particular string in that paragraph, if the string is found then the string will be highlighted and the full paragraph is loaded in IFrame. but, if the searched text is at the bottom, then scroll bar in an iframe is not automatically moved to the hidden highlighted text position. any body help me to move the scroll bar automatically to the hidden text position in the IFrame? please run the code, type any text from the paragraph of text and click serach button. see the output. [if the searched text is at the bottom, move the scroll bar to see it in the iframe] code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script language="javascript" type="text/javascript"> var html = "Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text."; var iframe; var id; var doc; var index; var highlightStartTag = "<span style='color:#EE7A03'>"; var highlightEndTag = "</span>"; var wrong_word = "speltext"; var afterHighlightText; var newText; var start = 0; function highlight() { iframe = document.getElementById('frame1'); doc = iframe.document; if (iframe.contentDocument) doc = iframe.contentDocument; else if (iframe.contentWindow) doc = iframe.contentWindow.document; } function highlight1() { newText = html; var tid = document.getElementById('TextBox1'); var text = tid.value; index = newText.indexOf(text); if (index >= start) { var length = 0; length = index + wrong_word.length; var before_delim = newText.charAt(index - 1); var after_delim = newText.charAt(length); var beforeHighlightText = newText.substring(0, index - 1); afterHighlightText = newText.substring(length + 1, newText.length); newText = beforeHighlightText + before_delim + highlightStartTag + newText.substr(index, text.length) + highlightEndTag + after_delim + afterHighlightText; doc.write(newText); } else { alert("Reached End"); } return false; } </script> </head> <body onload="highlight()" > <form id="form1" runat="server"> <div> <div> <b>Sample Text:</b> <br /> Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text. </div> <br /> <b>Type the Text to Search from the above passage, for EG:"powerful"</b> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <br /> <b>Move Scroll button to see hidden highlighted text</b> <iframe id="frame1"></iframe> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Search" OnClientClick="return(highlight1());" /> </div> </form> </body> </html> Thanks, Lakshmi Ok, I have a problem with iframe code my function looks like this: Code: createPlayer: function (cfg) {
var div = document.getElementById(cfg.block2);
var hold = document.createElement('div');
hold.className = 'ytPlayer';
var iframe = document.createElement('iframe');
iframe.setAttribute('id', cfg.block + 'Player');
iframe.setAttribute('width', '70%');
iframe.setAttribute('height', cfg.height);
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('src', 'http://www.youtube.com/embed/' + ytPlayerParams.videoId + '?enablejsapi=1&autoplay=' + ytPlayerParams.autoplay + '&modestbranding=1');//controlbar set
iframe.setAttribute('allowfullscreen', '');
hold.appendChild(iframe);
div.insertBefore(hold, div.firstChild);
//return iframe;
},
and i was trying to add something that will call a function when the video in iframe will end.. i tryed setting evets for onStateChange but didnt work (probably did something wrong).. i tryed alot of things but it just didnt work when i paused the vid or when vid ended.. can anyone somehow help me?? Thanks in advance. Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}
Is it possible? Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem: I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix: Code: <script>
// No redirection!
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://www.mysite.com/my404.html'
}
}, 1)
</script>
What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html. Is there another solution for me so that the page within the iframe cannot redirect the parent page? Hi I have a page with 3 iFrames, showing different content. iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2 iFrame2: Here is a list of items from a database. iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A). When the (A) php page loads, it should reload iFrame2 I have tried to put something like: <body onLoad=parent.location.reload()> and put it on the (A) php page. This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload... So, I was looking for the right code to put, like onLoad=iFrame2.location.reload() However, I can't seem to find the correct code, so I hope any of you can help me... Hello.... I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first. Code: <div id="top-navigation" title="top-navi">
<ul><li id="homePageLink" class="first">
<a id="homePageTab" class="navigation-font" href="</a>
</li>
</ul>
</div>
In the above code how can i change the class="navigation-font" from the first iframe? Please help.... Hello, I've lately brought a new search engine scirpt however I was wonder how i could grap what ever the url is being viewed in the iframe, in order to create a hyperlink button which wil take the user to what ever is displayed in the iframe, but without my frame? Very simplilar to the 'remove frame' link that google images has on it's search result pages. I firstly thought that a PHP code would have being able to do this. However after being told my a number of PHP experts I relised that Java was the way forward. Therefore I would love any help what so ever in help me to carry out this task. I've attached the search page from my site with the iframe located. However i've had to change the file from PHP to txt. Many Thanks does not work in iframe, the error described he http://groups.google.com/group/ie7-j...73a3e?lnk=raot if I do correction as suggested then the error dissapears, but does not work (hover). Anyone found solution for that ? |
|||||||