I've had a browse around similar posts but not found anything that is really related to my scenario.
I have a summary page in which I iframe several pages that the user has travelled through on route to the summary page. In each of the pages that are being iframed. I'm using .toggle to expand/collapse the content of the page.
The issue I'm finding is that I'm using a script on the summary page when it is first loaded to make the iframe the size of the content of the page it is including, but when I click to toggle that content and collapse it, it leaves the iframe at the same size so that there is a huge chunk of whitespace.
I'm guessing that I need to send something back from the included page to the summary page that says the content size has changed and to therefore re-size the iframe size but am unsure how to do this.
Can someone please point me in the right direction?
An example of the files is...
Parent.html
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">
// Resize an iframe so it's as tall as its contents. This could be much shorter but is expanded for clarity.
function size_frame(frame_name, frame_id)
{
// Get the iframe element
var frame_element = document.getElementById(frame_id);
// Get the iframe frame-window object. Note this has different properties to frame_element.
var frame_window = frames[frame_name];
// Set the height to 1px first, because some browsers will give you the maximum height of either the
// frame or its contents, when you try to read the scrollHeight property as we do below.
frame_element.style.height = "1px";
// set the height of the iframe element to the "scrollHeight" of the document element of the frame window.
frame_element.style.height = frame_window.document.documentElement.scrollHeight +"px";
}
</script>
<h1>SUMMARY</h1>
<table border="0" cellspacing="0" cellpadding="0" width="850">
<tr>
<td><iframe src="child1.html" width="850" frameborder="0" scrolling="no" name="child1" id="child1" onload="size_frame('child1','child1');"></iframe></td>
</tr>
</table>
Child.html:
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function () {
$('th[event-type-header]').bind('click', function () {
var eventType = $(this).attr('event-type-header');
$('tr[event-type="' + eventType + '"]').toggle('hide-event-type');
});
});
</script>
<h1>Child Page</h1>
<table width="800" border="0" cellspacing="0" cellpadding="0" class="content">
<tr>
<th class="content" event-type-header="childPage">
Header <img src="arrow_down.gif" align="right" width="15" />
</th>
</tr>
<tr class="content2" event-type="childPage">
<td align="center">
<table width="750" cellpadding="0" cellspacing="0" class="content">
<tr>
<th class="content" colspan="2">Sub Heading</th>
</tr>
<tr class="content2">
<td>
Some Text
</td>
</tr>
</table>
</td>
</tr>
</table>
You need to use offsetHeight, rather than scrollHeight.
Related
I have written a simple html file to display the page provided by a hyper link under the table in the same page.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
$('.link').on("click", function(e) {
e.preventDefault();
var href = $(this).attr('href');
$("#content").html('<object data='+href+' />');
return false;
});
});
</script>
<style>
object {
width: 1570px;
height: 1000px;
border: 1px solid green;
}
</style>
</head>
<body bgcolor="#EBF5FB">
<h1 align="center" >SLA Monitor Reports </h1>
<div align="center">
<table cellpadding="25px" border=1>
<tr>
<td><a class="link" href="https://www.wikipedia.org/"><img src="\\TSHomeServer\TSHome$\231456\Downloads\1ITD.png" alt="SRs Proposed Due Date" style="width:200px"></a></td>
<td><a class="link" href="https://bwp.wdf.nova.corp/irj/servlet/prt/portal/prtroot/pcd!3aportal_content!2fcom.nova.pct!2fplatform_add_ons!2fcom.sap.ip.bi!2fiViews!2fcom.nova.ip.bi.bex?BOOKMARK=CU4A95OJ17A355B2112ML30G6"><img src="\\TSHomeServer\TSHome$\231456\Downloads\1Google.png" alt="Ticket Aging" style="width:200px"></a></td>
</tr>
</table>
<br><br>
</div>
<div id="content">
</div>
</body>
</html>
The first hyper link which is targeted to wikipedia.org is properly displayed in a div under the table.
But when i try to access the second link which is an intranet site pointed to a bw report hosted in a intranet server,i get a access-control-allow-origin error and the page keeps on trying to validate against the bw server.
But if i try to open the same intranet link in a new browser window..it validates and i can access the BW report.
Can you please let me know how to access the same BW report in the same page using div tag and handle this Access-Control_Allow_Origin issue.
I have a page with a frameset that consists of two frames; a top frame and a bottom frame. The top frame has a menu with submenus. The problem I am having is that the bottom frame does not allow the submenus to drop down as they should. I could expand the size of the top frame but management does not want this. Since it appears to not be possible to have the dropdown menu flow over the bottom menu, the best way I can think of to make it work is to hide the bottom frame while expanding the top frame. This is theory only though. I have never worked with asp.net or frames before so, to be honest, I'm not sure if it will work or not.
There is a separate page for the frameset and frames and it looks like this:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="dhss.mohsaic.webapplication.mohsaic.DefaultFrameset" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>MOHSAIC</title>
<link rel="shortcut icon" href="/Images/bavicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0" />
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0" />
<meta name="vs_defaultClientScript" content="JavaScript" />
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" />
</head>
<frameset border="0" framespacing="0" rows="95,*" name="frameset" class="frameset" id="frameset">
<frame src="<%=HeaderFrameURL%>" scrolling="no" frameborder="0" noresize="noresize" name="fraHeader" />
<frame src="<%=EntireBodyURL%>" scrolling="auto" frameborder="0" noresize="noresize" name="fraEntireBody" id="bottomFrame" />
</frameset>
</html>
The the html of the menu, which in a separate file is:
<div>
<table id="tblAreaTabs" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
margin: 0px; padding-top: 0px" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td class="DarkHeader" width="100%" bgcolor="#000000">
<asp:Menu ID="mainMenu" Runat="server" Orientation="Horizontal"
DynamicMenuItemStyle-CssClass="ChildLink" StaticMenuItemStyle-Font-Underline="true" StaticMenuItemStyle-CssClass="ParentLink" StaticEnableDefaultPopOutImage="false"
style="text-align:center;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='black', Positive='true');">
</asp:Menu>
</td>
<td valign="middle" class="DarkHeader">
<asp:HyperLink ID="hlError" runat="server" NavigateUrl="DssStatus.aspx" Target="fraDssStatus"
ImageUrl="/images/error.gif" BorderWidth="0px" Height="15px">The connection to DSS is not available.</asp:HyperLink><asp:HyperLink
ID="hlWarn" runat="server" NavigateUrl="DssStatus.aspx" Target="fraDssStatus"
ImageUrl="/images/warn.gif" BorderWidth="0px" Height="15px">The connection to DSS is partially available. </asp:HyperLink>
</td>
</tr>
</tbody>
</table>
</div>
the submenus are created dynamically depending upon the login credentials of the user
I have tried several ways to do what I want to do. The first was to add onmouseover="whileHovering()" to the asp:menu tag and add the following javascript:
var origCols = null;
function whileHovering() {
//alert("Yes, I'm working");
if (origCols !== null)
showFrame();
else
hideFrame();
};
function hideFrame() {
var frameset = parent.document.getElementById("frameset");
origCols = frameset.rows;
frameset.rows = "120, 0";
};
function showFrame() {
document.getElementById("frameSet").rows = origCols;
origCols = null;
};
However, this did not work. I receive the error 'cannot read property 'rows' of null. After investigating, the frameset is null and nothing I did would change that. So I gave up on that route and tried:
(function() {
alert("I have entered the function")
$('#mainMenu').hover(function () {
alert('hidden function working')
$(this).parent.document.getElementById('bottomFrame').style.visibility = "hidden"
}), function () {
alert('visible function working')
$(this).parent.document.getElementById('bottomFrame').style.visibility = "visible"
}
});
I get no errors from this but nothing happens. It doesn't even hit the anonymous function.
I would appreciate it if someone could tell me what I am doing wrong.
If you use frameset and frames you will have such problems. Writing JS/Jquery code is just a workaround and frankly not so good.
Any specific reason why you are using it?
Have you tried using ASP.NET master pages to have common menu and using it on different pages?
If that's not a feasible option, have you tried using iframe? In the main html file, create your menu and below the div/table tag of your menu, add an iframe. This iframe will show different pages that you are currently showing in #bottomFrame.
Do you put $ before (function() in your code? $(function() {}) fires when the document has been parsed and is ready, without it your function won't work. Also you don't need to use getElementById('bottomFrame').style.visibility in jQuery, there are quite short and elegant way to edit css rules, using css(property, value). Also don't forget to put ; in the end of your statements. The whole code looks like this:
$(function () {
alert("I have entered the function");
$('#mainMenu').hover(function() {
alert('hidden function working');
$(this).parent().css("visibility", "hidden");
}, function() {
alert('visible function working');
$(this).parent().css("visibility", "visible");
});
});
UPDATE:
If I understood you correctly you want to hide bottomFrame when hover on MainMenu, then use this code:
$(function () {
alert("I have entered the function");
$('#mainMenu').hover(function() {
alert('hidden function working');
$('#bottomFrame').css("visibility", "hidden");
}, function() {
alert('visible function working');
$('#bottomFrame').css("visibility", "visible");
});
});
I have looked up many examples for cross domain iframe height but none of them were able to solve the issue.
I have an simple HTML given below. I want to resize the iframe inside it according to the height of the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<table width="780" height="406" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1">
<tr>
<td valign="top"><table width="778" border="0" cellspacing="0" cellpadding="0">
</td>
</tr>
</table>
<iframe src="http://mywebapplication.com" width="100%" ></iframe
<table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="53575f">
<tr>
<td align="center" height="38"><span class="Footer">All Rights Reserved © ABC 2009-2012.
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
What i Have tried
using a second javascript file added to the iframe to send a postMessage back to the parent.
HTML Page containing iframe
<iframe src="http://mywebapplication.com" width="100%" id="zino_iframe"></iframe>
<script type="text/javascript">
var zino_resize = function (event) {
alert("sds");
var zino_iframe = document.getElementById('zino_iframe');
if (event.origin !== "http://hrcraft.noviavia.com") {
return;
}
//alert(zino_iframe);
if (zino_iframe) {
alert(event.data);
zino_iframe.style.height = event.data + "px";
}
};
if (window.addEventListener) {
window.addEventListener("message", zino_resize, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", zino_resize);
}
window.addEventListener("message", myListener, false);
function myListener(event) {
if (event.origin !== "http://hrcraft.noviavia.com") {
return;
}
//do something
}
The function for sending height is also added on the master page of the mywebapplication.
I have been following this example
http://zinoui.com/blog/cross-domain-iframe-resize
Although the question is in relation to solving an issue with the OP own personal code. Their is a tried and tested library can be used to solve the issue of resizing an iframe to the contents height. This library deals with cross domain and so I think it is worth mentioning.
https://davidjbradshaw.github.io/iframe-resizer/
you place two files one in the parent one in the child (iframe)
in your parent:
<style>iframe{width:100%}</style>
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe>
<script>iFrameResize({log:true})</script>
In your child you just add this file:
iframeResizer.contentWindow.min.js
The library takes care of the resizing and also cross domain. Check the docs.
I have an assignment where the objective is to make sure that the large (changing) image on top also changes links just like its smaller counterpart on the bottom.
I can't seem to figure out how to make that happen. I'm only able to link the larger image with to a single link and not have it change its links to match the links of the smaller images.
Please help (if possible) and please advise if this can be done with just javascript & html/css.
Here is the code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image link assignment</title>
<script type="text/javascript">
function changeImg(imgName, imgFile) {
document.images[imgName].src=imgFile;
}
function preloadPic() {
first = new Image();
second = new Image ();
third = new Image ();
fourth = new Image ();
fifth = new Image ();
first.src="Philips_radio.png"
second.src="news.png"
third.src="jellyfish.png"
forth.src="saturn.png"
fifth.src="sport-bike.png"
}
</script>
</head>
<body onload="preloadPic()">
<table width="500">
<td colspan="3"><img src="Philips_radio.png" name="bigOne" width="200" height="200"></td>
<tr>
<td><img id="pRadio" name="smallOne1" onmouseover="changeImg('bigOne','Philips_radio.png')" src="Philips_radio.png" width="100px" height="100px"></td>
<td><img id="gNews" name="smallOne2" onmouseover="changeImg('bigOne','news.png')" src="news.png" width="100px" height="100px"></td>
<td><img id="imgurJelly" name="smallOne3" onmouseover="changeImg('bigOne','jellyfish.png')" src="jellyfish.png" width="100px" height="100px"></td>
<td><img id="saturnSkyReport" name="smallOne4" onmouseover="changeImg('bigOne','saturn.png')" src="saturn.png" width="100px" height="100px"></td>
<td><img id="roadTripNationalParks" name="smallOne5" onmouseover="changeImg('bigOne','sport-bike.png')" src="sport-bike.png" height="100px" width="100px"></td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image link assignment</title>
<script type="text/javascript">
function changeImg(imgName, imgFile, newLink) {
document.getElementById(imgName).src=imgFile;
document.getElementById("link").href = newLink;
}
</script>
</head>
<body>
<table width="500">
<td colspan="3"><img src="Philips_radio.png" id="bigOne" width="200" height="200"></td>
<tr>
<td><img id="pRadio" name="smallOne1" onmouseover="changeImg('bigOne','http://i.imgur.com/bE6Jtz1b.jpg', 'http://www.pandora.com/')" src="http://i.imgur.com/bE6Jtz1b.jpg" width="100px" height="100px"></td>
<td><img id="gNews" name="smallOne2" onmouseover="changeImg('bigOne','http://i.imgur.com/aopbWb.jpg', 'http://news.google.com')" src="http://i.imgur.com/aopbWb.jpg" width="100px" height="100px"></td>
<td><img id="imgurJelly" name="smallOne3" onmouseover="changeImg('bigOne','http://i.imgur.com/beLoPXBb.jpg', 'http://imgur.com/')" src="http://i.imgur.com/beLoPXBb.jpg" width="100px" height="100px"></td>
<td><img id="saturnSkyReport" name="smallOne4" onmouseover="changeImg('bigOne','http://i.imgur.com/lArG2Bob.jpg', 'http://www.griffithobs.org/sky/skyreport.html')" src="http://i.imgur.com/lArG2Bob.jpg" width="100px" height="100px"></td>
<td><img id="roadTripNationalParks" name="smallOne5" onmouseover="changeImg('bigOne','http://i.imgur.com/cgAPeeqb.jpg', 'http://www.nps.gov/index.html')" src="http://i.imgur.com/cgAPeeqb.jpg" height="100px" width="100px"></td>
</tr>
</table>
</body>
</html>
I am using blockui for "Wait ... loading" pop up. It is working fine, but has one small issue: the overlay is covering only captured screen, not scroll window. If I scroll right, the width is not fully covered (but height is covered fully).
I have only width has problem.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
jQuery('#myAlert').click(function () {
jQuery.blockUI({ message: '<center> <img src="/_layouts/1033/styles/ajax-loaderbar.gif" alt="Loading.." />
<br /> <font size="2" face="Arial" >
<b> Please wait... </b></font></center><br />
<font size="2" face="Arial" ><b>while we load all your information.</b></font>'});
});
});
</script>
The blocking element should be an immediate child of the BODY tag. It should be nested like this:
<html>
<!-- etc -->
<body>
<div id="domMessage"></div>
...
And not this:
<html>
<!-- etc -->
<body>
<div id="some-other-div">
<div id="domMessage"></div>
</div>
...