Forums

matthewb

Hi Guys,
i have a page in dot.net frame in which a link opens to a popup in lightbox which shows a dynamic content in a iframe.

The issue is when the popup is opened it shows a horizontal scroll and a black background color (fraction of seconds) untill the iframe is loaded as the Class is kept for background color and overflow-x hidden in iframe but the still the problem continues. Can anyone help me out for this.

standuncan

Link?

matthewb

hi stan, thanks for responding to my question. i'm sorry to say that i can't share u the link for some copyright issues :( . I hope you get back to me again with some solution.

chrisburton

copyright issues? someone would have to use your content for there to be copyright issues.

Perhaps you mean confidentiality? Unless you provide some sort of mockup example of what your issue is, I don't think we'll be able to help you.

matthewb

Ya i mean confidentiality i m giving you the code by which u can get idea.

<div id="cboxLoadedContent" style="display: block; width: 800px; overflow: auto; height: 410px;">
<!--Here's the iframe where from the dynamic content comes-->

 <iframe class="cboxIframe" name="cbox1321511991629" src="http://localhost/companyName/loading.htm?page=fit.aspx"&gt;
 	<html lang="en"><head><title>

</title>
<link type="text/css" rel="stylesheet" href="http://localhost/companyName/CSS/style.css"&gt;
<script src="http://localhost/companyName/JSFiles/jquery1.6.js&quot; type="text/javascript"></script>
<script src="http://localhost/companyName/JSFiles/jquery.easing.js&quot; type="text/javascript"></script>
<script src="http://localhost/companyName/JSFiles/script.js&quot; type="text/javascript"></script>
<script src="http://localhost/companyName/JSFiles/dropdowntabs.js&quot; type="text/javascript"></script>


    
    <style type="text/css">
	dl.field dt.lblPopup, dl.field dt.lblPopup{float:left; font:normal 14px/16px "Gill Sans MT";margin-right:0;text-align:right;width:150px;color:#333;}
	span.roundPopup input, span.roundPopup{background:#fff url("images/static.png")no-repeat 0 100px ;}
	span.buttonPopup, span.buttonPopup input, span.buttonPopup input:hover, span.buttonPopup:hover{background:url(images/button-blue.png) no-repeat left top #fff; line-height:22px; height:27px; 		display:inline-block;  border:#F00 solid 0px; font-weight:600; cursor: pointer; padding-left:10px; color:#222; font-size:12px; }
	</style>
</head>
<body>
    <form id="aspnetForm" action="fit.aspx" method="post" name="aspnetForm">
<div>
<input type="hidden" value="" id="__EVENTTARGET" name="__EVENTTARGET">
<input type="hidden" value="" id="__EVENTARGUMENT" name="__EVENTARGUMENT">

</div>

<script type="text/javascript">
//&lt;![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]&gt;
</script>


<script type="text/javascript" src="/companyName/WebResource.axd?d=W05acR2BV-DBB1Abf9ZpaxGi6uBhoOkFzAFZUJ3G6CbVy_iYR3Qgai9EeoYmQHPeqnlFc_3i1Hp9QZS548QelISXOek1&amp;t=634208975469717278"></script>


<script type="text/javascript" src="/companyName/ScriptResource.axd?d=n7viFftalCfuNxLRw-EA-8MjLvaIQiqc6GyzIUhYWZGZIdNuVRxpwktOZhNtrmDQM_6c0WFgstsyt-_05wtojrZ78ziQUIi80mllytH1EvQM6Df-2IxHLHfwrS9Of9fjxnZNbg__U2g9ScU_buqaXx9sztHbjXzdEdnG0BjPxoatyNx_0&amp;t=5c2f384e"></script>
<script type="text/javascript">
//&lt;![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]&gt;
</script>

<script type="text/javascript" src="/companyName/ScriptResource.axd?d=YimIb6JIscUH1usSDaDNil2tc9wdjbyesgnukhvAfpTNHMqgDZBej7PVPQFM0vV0VJp7lAGJJQHzCiwFU5SF661cZzUO5j1uDdVAeoibgvxVN9YWTZKQze2S6GE5J026UDBO4eRJyAaosJupB3oovDnpEoAkLHCdEUOzJP09ljraYB_7ynVidH2k22oWu_Ky6KpIQQ2&amp;t=5c2f384e"></script>
    <script type="text/javascript">
//&lt;![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]&gt;
</script>

    <div id="jConfirmDiv">
    </div>
    
<style type="text/css">
html,body{background:#333 !important; height:100%; width:100%}
body #aspnetForm{width:auto !important;width:auto\9 !important;}
#cboxLoadedContent iframe{overflow-x:hidden !important;overflow-y:auto !important;}
*{margin:auto!important;padding:inherit!important;}
#cboxLoadedContent, #cboxContent {overflow-x:hidden !important;}

@media \0screen {
 body #aspnetForm{width:auto !important;}
 #cboxLoadedContent iframe{overflow-x:hidden !important;overflow-y:auto !important;}
}

</style>
    <div class="left">
        <div>
            <p style="text-align: center; ">
	Our products are measured at the widest part of the blade - the width of cuff links is their circumference.</p>
<hr>
<p style="text-align: center; ">
	&nbsp;</p>
<p style="text-align: center; ">
	&nbsp;</p>
<p style="text-align: center; ">
	&nbsp;</p>
<table cellspacing="0" cellpadding="1" border="1" align="center" style="width: 300px; ">
	<thead>
		<tr>
			<th scope="col">
				<font size="3"><font color="#FFFFFF">Style</font></font></th>
			<th scope="col">
				<font size="3"><font color="#FFFFFF">Dimensions</font></font></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="text-align: center; ">
				<font size="3">Standard</font></td>
			<td style="text-align: center; ">
				<font size="3">8.5 cm or more<br>
				(3.5 in or more)</font></td>
		</tr>
		<tr>
			<td style="text-align: center; ">
				<font size="3">Narrow</font></td>
			<td style="text-align: center; ">
				<font size="3">7 cm to 8 cm<br>
				(2.75 in to 3.25 in)</font></td>
		</tr>
		<tr>
			<td style="text-align: center; ">
				<font size="3">Standard</font></td>
			<td style="text-align: center; ">
				<font size="3">6.5 cm or less<br>
				(2.5in or less)</font></td>
		</tr>
	</tbody>
</table>

        </div>
    </div>

    
<div>

	<input type="hidden" value="0" id="__SCROLLPOSITIONX" name="__SCROLLPOSITIONX">
	<input type="hidden" value="0" id="__SCROLLPOSITIONY" name="__SCROLLPOSITIONY">
</div>

<script type="text/javascript">
//&lt;![CDATA[

theForm.oldSubmit = theForm.submit;
theForm.submit = WebForm_SaveScrollPositionSubmit;

theForm.oldOnSubmit = theForm.onsubmit;
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
Sys.Application.initialize();
//]]&gt;
</script>
<input type="hidden" value="/wEPDwUKMTAyMTMzODg1NmRk" id="__VIEWSTATE" name="__VIEWSTATE">
</form>


</body>
</html>
 </iframe>
 
 <!--iframe ends here-->
 </div>

hope this will help you.....

chrisburton

@matthewb Please wrap the code like this (without spaces) < pre >< code >CODE HERE</ code >< /pre >

chrisburton

....wow

Mottie

@matthewb It is difficult to work with that code because we don't have any dynamic content to load and we have no idea what scripts are being loaded. Maybe it would be best to post a demo on jsFiddle.net that will show us the issue.

And just to ask, did you try adding allowtransparency="true" and then making the iframe body background transparent? Here is a reference if you need it.

<iframe width="70%" height="500px" name="about" src="about.html" frameborder=0 allowtransparency="true"></iframe>

cnwtx

And also scrolling="no" to keep older browser from putting scrollbars on it.

matthewb

ya @cnwtx i have tried scrolling="no" & allowtransparency="true" but it does'nt work and bcoz of confidentiality of company i can't keep this at demo.

can any one solve this out.

Adman

@matthewb just to cover all bases, @Mottie also advised to change the style of the body tag, did you also add background: transparent; to the body?

matthewb

@Adman ya i have also tried background: transparent; to the body. But it does'nt works.

kgscott284

uh, instead of messing around with the iframe, how do you load the content, I get the feeling that the problem does not rely within the iframe but the content itself...but i think you are SOL due to confidentiality...

dpqmw80

have you tried scrolling="no" ?

matthewb

@dpqmw80 i have applied scrolling-x: hidden; as it is not required but on y-axis it is necessary if content expands.

@kgscott284 there is no problem with content. Buddy due confidentiality i can't show you the demo version :(

kgscott284

then you are sure you are using the proper selectors?

treehouse : what would you like to learn today?

Forums

A challenge for the masters in css