How does Newground dim out the background when you watch a movie?

Hi,
I've been trying to figure out how newgrounds.com dims out the background when you watch a movie like on this page:

http://www.newgrounds.com/portal/view/412197


I know then call a function called

movie_viewer.Launch

Code (markup):

From javascript but I'm not sure how to write that function. I know how to do a normal on pop-up function via javascript. Can anyone help me in getting the dimming out effect on the background and a pop-up styled the NG one? I'd like it for one of my sites that will show embedded adobe pdf files.

 

What do you mean by dim out? That shadow effect?

 

yeah, the shadow effect when you click the link to watch the movie.
I'm trying to get that to work on a regular link before I try to add some more javascript elements to it.

 

Hum, that's easy, you have to add an absolutely positioned div using the entire dimensions of the page, with a dark color and some transparency settings, opacity for firefox, and filter:alpha(opacity=##) to IE. And it needs to have a high z-index. Then the popup, needs to be absolutely positioned as well, and have a even higher z-index.

If you need some help coding that just ask.

 

Yeah I could use a bit of assistence, my usual pop-up windows is as follows:

<!--
function popup() {
window.open( "http://www.somewebsite.com/", "myWindow", 
"status = 1, height = 300, width = 300, resizable = 0" )
>

Code (markup):

Well, its a bit more complicated than that usually but thats the basics of it.

 

Well, there are some things you'll have to learn, if you still don't already know them, Which are ajax, and a little bit of dom handling. Right now I'm just passing by the forum, but I'll comeback later and make a more detailed post.
Cheers

 

First of all, I advice you to use SACK for the ajax requests, you can use anything you'ld like, but this is a wonderful tool. I'm still unnable to post links here, but just google for SACK and you'll find it.

Then, you can use something like this:

function ModalDialog(url) {	
	var _IE = (document.all) ? 1: 0;
	var tDiv;
	var cDiv;
	var iDiv = false;
	
	var self = this;	
		
	function createDialog() {
		hideBanner();
		tDiv = document.createElement('DIV');
		tDiv.className = 'transparentDiv';
		cDiv = document.createElement('DIV');
		cDiv.className = 'contentDiv';
		
		document.body.appendChild(tDiv);
		document.body.appendChild(cDiv);
		
		if (_IE) {
			iDiv = document.createElement('IFRAME');
			iDiv.frameborder = 0;
			iDiv.src = "about:blank";
			iDiv.scrolling = "no";
			iDiv.className = "iframeDiv";
			document.body.appendChild(iDiv);
		} 
		
		sendRequest();			
	}
	
	function sendRequest() {
		svar s = new sack();
		s.requestFile = url;
		s.onCompletion = function() {
           cDiv.innerHTML = s.response;
		   rebuildDialog();
		};
		
		cDiv.innerHTML = '<img src="loader.gif" />';

		rebuildDialog();
	}
	
	function rebuildDialog() {
		var topOffset = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
        document.documentElement.style.overflow = 'hidden';
        var bodyWidth = document.body.offsetWidth;
        var bodyHeight = document.body.offsetHeight;
		var browserHeight = getBrowserHeight();
        cDiv.style.width = '100 px';
        cDiv.style.height = '100 px';
        var tmpWidth = cDiv.offsetWidth;
        var tmpHeight = cDiv.offsetHeight;
		var left = Math.ceil((bodyWidth - tmpWidth) / 2);
		var top = Math.ceil((browserHeight - tmpHeight) / 2) +  topOffset;
        cDiv.style.left = left;
        cDiv.style.top = top;

		tDiv.style.left = 0;
		tDiv.style.top = 0;
        tDiv.style.height = bodyHeight;
        tDiv.style.width = bodyWidth;
		
		if (iDiv) {
			var iDiv = $('iDiv');
			iDiv.style.width = bodyWidth;
			iDiv.style.height = bodyHeight;
		}
		
		document.body.scrollTop = topOffset;
	}
	
	this.closeDialog = function() {	
		document.body.removeChild(cDiv);
		document.body.removeChild(tDiv);
		document.documentElement.style.overflow = '';
		
		if (iDiv) {
			document.body.removeChild(iDiv);
		}
	}
}	

Code (markup):

Just don't forget to add these styles:

                        .transparentDiv{	
				filter:alpha(opacity=40);
				opacity:0.4;
				-moz-opacity:0.4;
				background-color:#666;
				position:absolute;
				z-index:100000;
			}
			.iframeDiv{	
				filter:alpha(opacity=40);
				opacity:0.4;
				-moz-opacity:0.4;
				display:none;
				position:absolute;
				z-index:100001;
			}
			.contentDiv{
				border:3px solid #000066;	
				padding:2px;
				z-index:100002;
				position:absolute;
				background-color:#FFFF66;
			}

Code (markup):

And to change the loading code on the sendRequest function to your own html code. I hadn't tried the code yet, but I guess it should work. To create a dialog just use the code:

new ModalDialog("/path/to/dialog/content");

Code (markup):

Hope it helps.

 

Do I need to install SACK on my server to be able to use this thing?

 

No, SACK is a script. Is a javascript file you include on your page.

 

Thanks, I'll try it out tonight. This new project has me all over the place looking for stuff.

 

Ok, There's something I'm not getting. I have this in the include:

<script language="javascript" src="sacks.js"></script>
<script language="javascript" src="viewbehind.js"></script>

Code (markup):

And I'm using this as the link"

<a href="#" onclick="new ModalDialog('bigpic.jpg')" onMouseover="return overlib('<img src=testpic.jpg>')" onMouseout="return nd()">This is a test</a>

Code (markup):

Here's the example page I am using:
http://www.macgyverfixups.com/test/demo.html

My eventual goal is to get the hover and the pop-up effect to work when I hover over the options in the rightmost box, but I'm taking this one step at a time.

Now the onMouseover property is working but when I click the link it gives a javascript error.
viewhind.js is where I put your code.

 

Hum, I warned you, I hadn't tested the code. ;-)

Also I tought you wanted to load external code. And when you're passing a image link, that fails.

try this code now, you don't need to add sack:

function ModalDialog(url) {	
	var _IE = navigator.userAgent.indexOf("MSIE") > 0;
	var tDiv;
	var cDiv;
	var iDiv = false;
	var rDiv;
	
	var self = this;

	createDialog();
		
	function createDialog() {
		tDiv = document.createElement('DIV');
		tDiv.className = 'transparentDiv';
		cDiv = document.createElement('DIV');
		cDiv.className = 'contentDiv';
		
		document.body.appendChild(tDiv);
		document.body.appendChild(cDiv);
		
		if (_IE) {
			iDiv = document.createElement('IFRAME');
			iDiv.frameborder = 0;
			iDiv.src = "about:blank";
			iDiv.scrolling = "no";
			iDiv.className = "iframeDiv";
			document.body.appendChild(iDiv);
		} 
		
		sendRequest();			
	}
	
	function addEvent(el, evtType, func) {
	   if (el.addEventListener) { 
	      el.addEventListener(evtType, func, true);
	   } else if (el.attachEvent) {
	      el.attachEvent('on' + evtType, func);
	   } else {
	      el['on' + evtType] = func;
	   }
	}
	
	function sendRequest() {
		cDiv.innerHTML = '<div align="right"><a id="dialogclose" href="#">close</a></div><img src="' + url + '" />';
		addEvent(document.getElementById('dialogclose'), 'click', function() {self.closeDialog(); });
		rebuildDialog();
	}
	
	function rebuildDialog() {
		var topOffset = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
        document.documentElement.style.overflow = 'hidden';
        
        rDiv = document.createElement('DIV');
		rDiv.style.position = 'absolute';
		rDiv.style.left = '50%';
		rDiv.style.top = '50%';
		document.body.appendChild(rDiv);
		
		var browserWidth = rDiv.offsetLeft * 2;
		var browserHeight = rDiv.offsetTop * 2;
		
		document.body.removeChild(rDiv);
		
        var tmpWidth = cDiv.offsetWidth;
        var tmpHeight = cDiv.offsetHeight;
		var left = Math.ceil((browserWidth - tmpWidth) / 2);
		var top = Math.ceil((browserHeight - tmpHeight) / 2) +  topOffset;
        cDiv.style.left = left + 'px';
        cDiv.style.top = top + 'px';

		tDiv.style.left = 0 + 'px';
		tDiv.style.top = 0 + 'px';
        tDiv.style.height = browserHeight + 'px';
        tDiv.style.width = browserWidth + 'px';
		
		if (iDiv) {
			iDiv.style.width = browserWidth + 'px';
			iDiv.style.height = browserHeight + 'px';
		}
	}
	
	this.closeDialog = function() {	
		document.body.removeChild(cDiv);
		document.body.removeChild(tDiv);
		document.documentElement.style.overflow = '';
		
		if (iDiv) {
			document.body.removeChild(iDiv);
		}
	}
}

Code (markup):

Let me know if it worked well.

 

Woot! Finally got back from very-little internet land

Here's the result:
http://www.flashninjaclan.com/test/test.html

Didnt work that well.

Tried messing with it a bit, am I missing something? Are you sure I don't need SACK?