|
JavaScript - Iframe Offsetheight Ridiculously Large
I'm using the following code to generate an iframe with a variable height depending on the page:
Code: <script type="text/javascript">
function setHeight() {
parent.document.getElementById('oh').height = document['body'].offsetHeight;
}
</script>
<iframe onload="setHeight()" id="oh" src="/openhouse" width="680px" frameborder="0">Missing Page, please alert me to this by email, thank you.</iframe>
However, as I progress through the pages, the height doesn't get registered correctly. When I get to the final page it looks like this: <img src="http://imgur.com/BUySz.jpg" alt="" title="Hosted by imgur.com" /> (I scrolled out to show how ridiculous it is) Any thoughts? I'm not sure if I"m allowed to provide a URL here, and if I'm not, mod's please delete it. http://174.120.192.57/page/general/openhouse/ It is being pulled from http://174.120.192.57/openhouse/ Similar TutorialsHi 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 Hello, I have a very large function that activates on one click. It does many individual events that modify my site. They all work seperately but when I put them in a single function they all break. Is there a way, order or priority for putting large things of code in functions? I tried doing {} blocks but it didn't help. 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 Everyone, I've written a custom discussion forum in Perl for my site. There are five forums and each forum can have 100 active threads to read. I have a feature to remember (via writing a cookie) if a user has been in a thread and what was the last post at that time. Next time they click on the thread JavaScript reads the cookie and takes them right down to the first new post in a thread. Very similar to the green arrow on this forum. Each forum has its own cookie, to remember the last thread and post read during a visit: Code: Name=FORUM_A Value=2133.4|2133.4|2618.3|2607.11|2606.0|... Name=FORUM_B Value=2609.2|2597.2|2592.0|2589.1|2588.0|... Name=FORUM_C Value=2568.1|2569.3|2563.13|2605.4|2555.1|... Name=FORUM_D Value=2621.2|2620.4|2595.6|2585.0|2308.0|... Name=FORUM_E Value=2615.0|2612.3|2602.12|2608.2|2600.1|... This works just fine in Firefox and IE8. The problem I'm having in browsers like Safari is once the entire set of cookies get so long (100 entries in each of the five forums) Safari truncates the entire set of cookies during the: var cookieValue = document.cookie;. In the end the cookieValue variable is left with maybe 3 1/2 cookies, truncating off the last two. Is there any workaround for this or am I asking too much for javascript. It does work perfectly in Firefox, FF does not seem to have this truncating issue. Thanks in advance for everyone's assistance. HTML5&JS-Game-1 Large JS Into Separate JS Files? Hi, I am a C++ game programmer who attempted to make an HTML5/JS game. Game turned out great (except for some performance issues on old computers). Although the game is good, I am terribly embarrassed about the source. Source is HTML5/JavaScript and its one giant, ugly, and confusing HTML file. I've been researching on Google how to split the 1 large HTML file into smaller separate *.js files but can not get it working. Here is the URL link to the game's folder on my web site: http://16bitsoft.com/T-Crisis3AI--HTML5/ I've tried to split the one HTML file into smaller separate *.js files. Had a "Logic.js" file with all logic global variables and functions in it and I loaded the "Logic.js" file (I think) into main HTML file but the main HTML file can't locate the logic variables and functions??? If your a Jedi Master Ninja Assassin HTML5/JavaScript coder then please try to help! Thanks! JeZ+Lee 16BitSoft Video Game Design Studio www.16BitSoft.com Here is screenshots of the game: 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 got my scroller to work on my website now. thumbnail scroll doesnt auto scroll down as its going through the image... how do i make scrollbar automatically move while its going through the highlighted thumbnail image... i hope didnt sound confusing at all but heres the link to my website html coding http://rusty813.comuv.com/sample2.html 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.... I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>
HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> 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 ? Above is the image of my situation, what I need is for the captcha's to be loaded perfectly and displayed to the user as shown in the image with the green box around it, I currently have a script to set focus to the text field however it is kind of messy for some reason and ends up leaving it looking like the frame in the red box in the image. Here is what I have been using: Code: if (( document.URL.indexOf("cast_skills") != -1 ) || ( document.URL.indexOf("security_prompt") != -1 ) || ( document.URL.indexOf("joinraid") != -1 )){
if ( document.forms.length > 0 ) {
document.forms[0].elements[1].focus();
}
}
This works fine since on each of the pages it is required there is only 1 form. However when loading smaller frames it causes some problem. The next question I have to ask is, is it possible to have a script that when the enter key is pressed inside frame 1, automatically move the focus on to the text field in frame 2? Noting that the page inside the frames is not my own and I cannot do anything with it. Any help would be appreciated with this matter, Many thanks. 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 Hello Experts I need your advice. I dont know if this is the write place to post my query. But I have an assignment due today. I have got everything working except an iframe that is driving me nuts. the question on the assignment asks to insert a command to write the HTML code <iframe src='weekday.htm'></iframe> to the webpage where weekday is the text string returned by the weekDay() function. The iframe should display the daily schedules that are stored in the sunday.htm through saturday.htm file. The weekDay() function is located in an external .js file that I have already linked to my webpage. Another thing is there is no weekday.htm file instead there are files sunday.htm through saturday.htm that have the daily schedules to de displayed in the iframe. I know that I should some link the weekday.htm file to the weekDay() function. This is what I have done so far: <h2 id="title">Today at the Union</h2> <p> <script type="text/javascript"> /* Dispaly the daily schedule in an inline frame. Display schedules are stored in the files sunday.htm through saturday.htm */ <iframe src='weekday.htm'> var weekday = weekDay(); document.write(weekday); </iframe> </script> </p> Please advice as to how to get this thing working. I am not an expert( I am still learning.) I tried my best (spent several hours breaking my head on this). So any help is much appreciated. Thank you for your time Hi Am new to javascript. I have a requirement where user clicks on a image which should direct to iframe. Please follow 2 scripts and please advice how to open iframe link instead of link in window.open Image code: <img src = "../samples/images/Edit3.png" alt = "Edit Status" height = 13 width = 13 onclick = "window.open('../cgi-bin/cognos.cgi?b_action=cognosViewer&ui.action=run&ui.object=%2fcontent%2ffolder%5b%40name%3d%27NARM%27% 5d%2fpackage%5b%40name%3d%27TM1_NARM_RISK_DASHBOARD_CREDIT_FINANCE%27%5d%2ffolder%5b%40name%3d%27Cre dit%20Finance%20Overlay%20Reports%27%5d%2freport%5b%40name%3d%27%23%2060%2b%20Rate%27%5d&ui.name=%23 %2060%2b%20Rate&run.outputFormat=&run.prompt=true','KPIDetail','width=600,height=350,scrollbars=yes,left=300,top=300')"> Iframe code: <iframe src="http://tm1lab.us.hsbc/TM1Web/TM1WebMain.aspx?AdminHost=tm1lab.us.hsbc&TM1Server=narm_risk_dashboard&action=OpenObject&type=Webshe et&value=Applications/CF_Commentary/H60Rate" width="100%" height = "100%" scrolling=no > </iframe> Hello, If JavaScript is disabled, does the content in an iframe become un-viewable/ blocked? This is in general, regardless of how safe or trusted the website/ content is. Code: <html> <head> <noscript>Javascript is disabled. Having it enabled provides the greatest functionality.</noscript> </head> <body> <noscript>Javascript is disabled. Having it enabled provides the greatest functionality.</noscript> <iframe src="first.html" width="300" height="300" /> </body> </html> |
|||||||