Skip to content

Commit

Permalink
styling and javascript improvements taken from craigambrose.com
Browse files Browse the repository at this point in the history
  • Loading branch information
@jadehopepunk
jadehopepunk committed Apr 13, 2009
1 parent f5d554e commit b1077f2
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 151 deletions.
160 changes: 29 additions & 131 deletions javascripts/redbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,51 +5,47 @@ var RedBox = {
{
this.showOverlay();
new Effect.Appear('RB_window', {duration: 0.4, queue: 'end'});
Element.scrollTo('RB_window');
this.cloneWindowContents(id);
},

loading: function()
{
this.showOverlay();
Element.show('RB_window');
this.setWindowPositions();
Element.show('RB_loading');
this.setWindowPosition();
},

addHiddenContent: function(id)
{
this.removeChildrenFromNode($('RB_window'));
this.moveChildren($(id), $('RB_window'));
this.activateRBWindow();
},

activateRBWindow: function()
{
Element.hide('RB_loading');
this.setWindowPositions();
new Effect.Appear('RB_window', {duration: 0.4, queue: 'end'});
Element.scrollTo('RB_window');
this.setWindowPosition();
},

close: function()
{
new Effect.Fade('RB_window', {duration: 0.4});
new Effect.Fade('RB_overlay', {duration: 0.4});
this.showSelectBoxes();
},

showOverlay: function()
{
var inside_redbox = '<div id="RB_window" style="display: none;"><div id="RB_loading"></div></div><div id="RB_overlay" style="display: none;"></div>'
if ($('RB_redbox'))
{
Element.update('RB_redbox', "");
new Insertion.Top($('RB_redbox'), inside_redbox);
new Insertion.Top($('RB_redbox'), '<div id="RB_window" style="display: none;"></div><div id="RB_overlay" style="display: none;"></div>');
}
else
{
new Insertion.Top(document.body, '<div id="RB_redbox" align="center">' + inside_redbox + '</div>');
new Insertion.Bottom(document.body, '<div id="RB_redbox" align="center"><div id="RB_window" style="display: none;"></div><div id="RB_overlay" style="display: none;"></div></div>');
}
new Insertion.Top('RB_overlay', '<div id="RB_loading" style="display: none"></div>');

this.setOverlaySize();
this.hideSelectBoxes();
new Effect.Appear('RB_overlay', {duration: 0.4, to: 0.6, queue: 'end'});
},

Expand All @@ -70,109 +66,29 @@ var RedBox = {
$("RB_overlay").style['height'] = yScroll +"px";
},

setWindowPositions: function()
setWindowPosition: function()
{
this.setWindowPosition('RB_window');
var pagesize = this.getPageSize();

$("RB_window").style['width'] = 'auto';
$("RB_window").style['height'] = 'auto';

var dimensions = Element.getDimensions($("RB_window"));
var width = dimensions.width;
var height = dimensions.height;

$("RB_window").style['left'] = ((pagesize[0] - width)/2) + "px";
$("RB_window").style['top'] = ((pagesize[1] - height)/2) + "px";
},

setWindowPosition: function(window_id)
{
var arrayPageSize = this.getPageSize();
var arrayPageScroll = this.getPageScroll();

var boxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
var boxLeft = arrayPageScroll[0];
Element.setTop(window_id, boxTop);
Element.setLeft(window_id, boxLeft);
},

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Stolen by from lightbox.js, by Lokesh Dhakar - http://www.huddletogether.com
// Core code from - quirksmode.com
//
getPageScroll: function(){

var xScroll, yScroll;

if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}

arrayPageScroll = new Array(xScroll,yScroll)
return arrayPageScroll;
},

//
// getPageSize()
// Returns array with page width, height and window width, height
// Stolen by from lightbox.js, by Lokesh Dhakar - http://www.huddletogether.com
// Core code from - quirksmode.com
// Edit for Firefox by pHaez
//
getPageSize: function() {

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;

// console.log(self.innerWidth);
// console.log(document.documentElement.clientWidth);

if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// console.log("xScroll " + xScroll)
// console.log("windowWidth " + windowWidth)

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
// console.log("pageWidth " + pageWidth)

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
getPageSize: function() {
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;

arrayPageSize = new Array(w,h)
return arrayPageSize;
},

removeChildrenFromNode: function(node)
Expand All @@ -197,25 +113,7 @@ var RedBox = {
content.style['display'] = 'block';
$('RB_window').appendChild(content);

this.setWindowPositions();
},

hideSelectBoxes: function()
{
selects = document.getElementsByTagName("select");
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = "hidden";
}
},

showSelectBoxes: function()
{
selects = document.getElementsByTagName("select");
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = "visible";
}
this.setWindowPosition();
}



}
35 changes: 15 additions & 20 deletions stylesheets/redbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,24 @@
filter: alpha(opacity=60);
}

#RB_redbox {
width: 100%;
position: absolute;
top: 0px;
}

#RB_window {
position: absolute;
left: 0;
width: 100%;
z-index: 102;
line-height: 0;
}

#RB_loading {
margin: 0 auto 0 auto;
width: 250px;
height: 250px;
z-index: 101;
width: 70px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
padding-bottom: 30px;
text-align: center;
background: #FFF url(../images/redbox_spinner.gif) no-repeat center center;
background: url(../images/redbox_spinner.gif) no-repeat bottom center;
}

.redbox_contents {
margin: 0 auto;
#RB_window {
z-index: 102;
background-color: #FFFFFF;
display: block;
text-align: left;
overflow: hidden;
margin: 20px auto 0 auto;
position:fixed;
position: absolute;
}

0 comments on commit b1077f2

Please sign in to comment.