Can anyone help with a scrollable content area

m2244 · 30th August 12, 01:45 AM

Hello,

I am trying to make a scrollable content div that pops up when a user clicks on a word for more information. I want this to have a white background so that when it pops up you can't see the main page behind it. I have the thing working to a point. The problem is that if I put an image in there that is wider than the popup I get a horizontal scrollbar (which is good) but when you scroll over the white background scrolls with it and then you can see the main page content.

Keep in mind that I will be loading content to this popup dynamically so I never know how wide the images will be.

I also do not want to put a background color on the parent popup div 'id="popup"' because I want to reduce the alpha of the border slightly.

As you can see I started to experiment with another div inside the parent div and give it an index so that it would act as a background for the scrollable div, but that gave me great fits.

Any suggestions?

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
.popup{
	position:fixed;
    border: solid rgba(0,0,128,.85);
	border-width: 40px 20px 20px 20px;
    border-radius :30px;
	width: 800px;
	height: 500px;
    margin : auto; 
    padding : 20px; 
	overflow: auto;
}

#content_bckgrnd{
	position:fixed;
	background-color:#fff;
	width: 100%;
	height: 100%;
}

#pop_content{
	position:relative;
	background-color:#fff;
	width: 100%;
	top:80px;
	left:-20px;
	z-index: 3;
	padding:20px;
	
}
</style> 
 

 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script> 
$(document).ready(function(){ 
    var popup_height = document.getElementById('popup').offsetHeight; 
    var popup_width = document.getElementById('popup').offsetWidth; 
    $(".popup").css('top',(($(window).height()-popup_height)/2)); 
    $(".popup").css('left',(($(window).width()-popup_width)/2)); 
}); 
</script>
</head>


<body>

<div>This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. This is text for the masses. </div>

<div id="popup" class="popup">
<!--<div id="content_bckgrnd"></div>-->
<div id="pop_content">
some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text some lengthy text ENDENDENDEND<br> 
some lengthy text<br> 
some lengthy text<br> 
some lengthy text<br>
<img src="testimage.jpg" alt="This is an image" />
some lengthy text<br> 
some lengthy text<br> 
some lengthy text<br> 
some lengthy text<br> 


</div> 
</div> 

</body>


</html>

meesa · 30th August 12, 03:59 AM

Do you have a live preview?

m2244 · 30th August 12, 10:26 AM

Quote:

Originally Posted by meesa

Do you have a live preview?

Unfortunately no. But if you run that code local with an image named correctly it will work.

meesa · 31st August 12, 05:59 AM

I don't even start with the image hidden. Use a free host like Webs to get it onto a live server.

30th August 12, 03:59 AM	#2
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,134	Re: Can anyone help with a scrollable content area Do you have a live preview? __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

31st August 12, 05:59 AM	#4
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,134	Re: Can anyone help with a scrollable content area I don't even start with the image hidden. Use a free host like Webs to get it onto a live server. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode