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

[Archbob]

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


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.

[hrcerqueira]

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

[Archbob]

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.

[hrcerqueira]

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.

[Archbob]

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" )
>



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

[hrcerqueira]

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

[hrcerqueira]

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);
}
}
}


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;
}


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");


Hope it helps.

[Archbob]

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

[hrcerqueira]

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

[Archbob]

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

[Archbob]

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>


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>


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.

[hrcerqueira]

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);
}
}
}


Let me know if it worked well.

[Archbob]

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?