# Facebox Table in DIV Umwandeln



## micronix (25. September 2009)

Hallo Tuts,
ich habe folgendes Problem und zwar möchte ich die Facebox in meine Seite einbinden doch gibt es Probleme mit anderen definitionen in der CSS Abstraktion..
Facebox hat leider noch table design und kommt daher mit anderen css tabellen in berührung so das es nicht richtig dargestellt werden kann.
So wie kann ich folgenden code also table in div umwandeln ?

CSS

```
#facebox .b {
  background:url(/facebox/images/b.png);
}

#facebox .tl {
  background:url(/facebox/images/tl.png);
}

#facebox .tr {
  background:url(/facebox/images/tr.png);
}

#facebox .bl {
  background:url(/facebox/images/bl.png);
}

#facebox .br {
  background:url(/facebox/images/br.png);
}

#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}

#facebox .popup {
  position: relative;
}

#facebox table {
  border-collapse: collapse;
}

#facebox td {
  border-bottom: 0;
  padding: 0;
}

#facebox .body {
  padding: 10px;
  background: #fff;
  width: 370px;
}

#facebox .loading {
  text-align: center;
}

#facebox .image {
  text-align: center;
}

#facebox img {
  border: 0;
  margin: 0;
}

#facebox .footer {
  border-top: 1px solid #DDDDDD;
  padding-top: 5px;
  margin-top: 3px;
  text-align: center;
}

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
  height: 10px;
  width: 10px;
  overflow: hidden;
  padding: 0;
}

#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}

.facebox_hide {
  z-index:-100;
}

.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}

* html #facebox_overlay { /* ie6 hack */
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
```

JS

```
/*  Facebox for Prototype, version 1
 *  By Scott Davis, htp://blog.smartlogicsolutions.com
 *
 *  Heavily based on Facebox by Chris Wanstrath - http://famspam.com/facebox
 *  First ported to Prototype by Phil Burrows - http://blog.philburrows.com
 *
 *  Licensed under the MIT:
 *  http://www.opensource.org/licenses/mit-license.php
 *
 *
 *  Dependencies:   prototype & script.aculo.us + images & CSS files from original facebox
 *  Usage:          Append 'rel="facebox"' to an element to call it inside a so-called facebox
 *
 *--------------------------------------------------------------------------*/


var Facebox = Class.create({
	initialize	: function(extra_set){
		if ($('facebox')){
			Element.remove('facebox');
		}
		this.settings = {
			loading_image	: '/facebox/images/loading.gif',
			close_image		: '/facebox/images/closelabel.gif',
			image_types		: new RegExp('\.' + ['png', 'jpg', 'jpeg', 'gif'].join('|') + '$', 'i'),
			inited				: true,	
			facebox_html	: new Template('\
	  <div id="facebox" style="display:none;"> \
	    <div class="popup"> \
	      <table> \
	        <tbody> \
	          <tr> \
	            <td class="tl"/><td class="b"/><td class="tr"/> \
	          </tr> \
	          <tr> \
	            <td class="b"/> \
	            <td class="body"> \
	              <div class="content" id="facebox_content"> \
	              </div> \
	              <div class="footer"> \
	                <a href="#" class="close"> \
	                  <img src="#{close_image}" title="close" class="close_image" /> \
	                </a> \
	              </div> \
	            </td> \
	            <td class="b"/> \
	          </tr> \
	          <tr> \
	            <td class="bl"/><td class="b"/><td class="br"/> \
	          </tr> \
	        </tbody> \
	      </table> \
	    </div> \
	  </div>')
		};
		if (extra_set) Object.extend(this.settings, extra_set);
		$$('body').first().insert({bottom: this.settings.facebox_html.evaluate({close_image: this.settings.close_image})});
		
		this.preload = [ new Image(), new Image() ];
		this.preload[0].src = this.settings.close_image;
		this.preload[1].src = this.settings.loading_image;
		
		f = this;
		$$('#facebox .b:first, #facebox .bl, #facebox .br, #facebox .tl, #facebox .tr').each(function(elem){
			f.preload.push(new Image());
			f.preload.slice(-1).src = elem.getStyle('background-image').replace(/url\((.+)\)/, '$1');
		});
		
		// this.keyPressListener = this.watchKeyPress().bindAsEventListener(this);
		
		this.watchClickEvents();
		fb = this;
		Event.observe($$('#facebox .close').first(), 'click', function(e){
			Event.stop(e);
			fb.close()
		});
		Event.observe($$('#facebox .close_image').first(), 'click', function(e){
			Event.stop(e);
			fb.close()
		});
		Event.observe(window, 'resize', function(e){
			fb.setLocation();
		});
	},
	
	// watchKeyPress	: function(e){
	// 	// not sure if the call to this will work here
	// 	if (e.keyCode == 27) this.close();
	// },
	
	watchClickEvents	: function(e){
		var f = this;
		$$('a[rel=facebox]').each(function(elem,i){
			Event.observe(elem, 'click', function(e){
				// console.log("here's what f is :: "+ f);
				Event.stop(e);
				f.click_handler(elem, e);
			});
		});
		
	},
	
	loading	: function() {
		if ($$('#facebox .loading').length == 1) return true;
		
		contentWrapper = $$('#facebox .content').first();
		contentWrapper.childElements().each(function(elem, i){
			elem.remove();
		});
		contentWrapper.insert({bottom: '<div class="loading"><img src="'+this.settings.loading_image+'"/></div>'});
		this.setLocation();
		
		Event.observe(document, 'keypress', this.keyPressListener);
	},
	
	reveal	: function(data, klass){
		this.loading();
		box = $('facebox');
		if(!box.visible()) fb.open();
		
		contentWrapper = $$('#facebox .content').first();
		if (klass) contentWrapper.addClassName(klass);
		contentWrapper.innerHTML = '';
		contentWrapper.insert({bottom: data});
		load = $$('#facebox .loading').first();
		if(load) load.remove();
		$$('#facebox .body').first().childElements().each(function(elem,i){
			elem.show();
		});
		this.setLocation();
		Event.observe(document, 'keypress', this.keyPressListener);
	},
	
	open    : function(){
		new Effect.Appear('facebox', { duration: 0.1 });
	},
	
	close		: function(){
		new Effect.Fade('facebox', { duration: 0.1 });
	},
	
	setLocation: function(){
		var pageScroll = document.viewport.getScrollOffsets();
			$('facebox').setStyle({
				'top': pageScroll.top + (document.viewport.getHeight()/ 10) + 'px',
				'left': String((document.viewport.getWidth()/2) - ($('facebox').getWidth()) + ($('facebox').getWidth()/2)) + 'px'
			});
	},
	
	new_box_for_url: function(url) {
		var fb = this;
		fb.open();
		var klass = '';
		fb.ajax(url, klass);

	},
	
	ajax: function(url, klass){
		var fb = this;
			new Ajax.Request(url, {
				method		: 'get',
				onFailure	: function(transport){
					fb.reveal(transport.responseText, klass);
				},
				onSuccess	: function(transport){
					fb.reveal(transport.responseText, klass);
				}
			});
	},
	
	click_handler	: function(elem, e){
		this.loading();
		Event.stop(e);
		
		// support for rel="facebox[.inline_popup]" syntax, to add a class
		var klass = elem.rel.match(/facebox\[\.(\w+)\]/);
		if (klass) klass = klass[1];
		
		// div
		this.open();
		
		if (elem.href.match(/#/)){
			var url				= window.location.href.split('#')[0];
			var target		= elem.href.replace(url+'#','');
			// var data			= $$(target).first();
			var d			= $(target);
			// create a new element so as to not delete the original on close()
			var data = new Element(d.tagName);
			data.innerHTML = d.innerHTML;
			this.reveal(data, klass);
		} else if (elem.href.match(this.settings.image_types)) {
			var image = new Image();
			fb = this;
			image.onload = function() {
				fb.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
			}
			image.src = elem.href;
		} else {
			// Ajax
			fb = this;
			url = elem.href;
			fb.ajax(url, klass);
		}
	}
});

var facebox;
Event.observe(window, 'load', function(e){
	facebox = new Facebox();
});
```

Wäre euch echt sehr dankbar wenn mir da jemand Helfen könnte.

Liebe Grüße
Sascha


----------



## Maik (25. September 2009)

Hi,


micronix hat gesagt.:


> ich habe folgendes Problem und zwar möchte ich die Facebox in meine Seite einbinden doch gibt es Probleme mit anderen definitionen in der CSS Abstraktion..
> Facebox hat leider noch table design und kommt daher mit anderen css tabellen in berührung so das es nicht richtig dargestellt werden kann.
> 
> 
> Wäre euch echt sehr dankbar wenn mir da jemand Helfen könnte.


wenn im Stylesheet die übrigen Regeldefinitionen für die einzelnen Tabellenelementtypen gleichermaßen mit einem Elternelement verknüpft sind  (siehe im Facebox-CSS die angewandten Selektoren für Nachfahren "#facebox table" und "#facebox td", die nur bei einer Tabelle und Tabellenzelle innerhalb eines Elements mit der ID *#facebox* Übereinstimmung finden), gibt es  keinen Konflikt  mit den Tabellenformatierungen.


```
<body>
    <div id="wrapper">
        <!-- Hier folgen irgendwann die Tabellen -->
    </div>
</body>
```


```
#wrapper table { ... }
#wrapper td { ... }
/* usw. */
```

mfg Maik


----------



## micronix (25. September 2009)

Das Problem ist ich muss es in DIV umwandeln das ganze
sprich der teil hier

```
<div id="facebox" style="display:none;"> \
	    <div class="popup"> \
	      <table> \
	        <tbody> \
	          <tr> \
	            <td class="tl"/><td class="b"/><td class="tr"/> \
	          </tr> \
	          <tr> \
	            <td class="b"/> \
	            <td class="body"> \
	              <div class="content" id="facebox_content"> \
	              </div> \
	              <div class="footer"> \
	                <a href="#" class="close"> \
	                  <img src="#{close_image}" title="close" class="close_image" /> \
	                </a> \
	              </div> \
	            </td> \
	            <td class="b"/> \
	          </tr> \
	          <tr> \
	            <td class="bl"/><td class="b"/><td class="br"/> \
	          </tr> \
	        </tbody> \
	      </table> \
	    </div> \
	  </div>
```

Da komm ich nicht drum rum
sonst müsste ich 400 seiten bearbeiten

Liebe Grüße
Sascha


----------



## Maik (25. September 2009)

Existieren die Tabellen nicht in einem übergeordneten Element?

mfg Maik


----------



## micronix (25. September 2009)

Leider nicht ;(


----------



## Maik (26. September 2009)

"Suchen und Ersetzen" bietet sogar der kleine Notepad-Editor von Windows 

Wenn du nicht einfach auf eine andere Box umsatteln willst, die mit DIV-Blöcken generiert wird, kannst du dich ja mal umschauen, welche  Techniken dir so  zur Verfügung stehen, eine tabellenlose CSS-Box mit abgerundeten Ecken zu erzeugen:


25 Rounded Corners Techniques with CSS
CSS Rounded Corners 'Roundup'

mfg Maik


----------



## Maik (26. September 2009)

Moin,

wie ich eben gesehen habe, wird die Facebox ja mit PNG-Grafiken ausgeschmückt, die eine Transparenz außerhalb des grauen Rahmens besitzen, womit die ineinander zu verschachteltenden DIV-Blöcke einer speziellen Ausrichtung  über die margin- u. padding-Eigenschaft befürfen, damit es  an den Ecken zu keinen sichtbaren Überschneidungen der einzelnen Blockschichten führt. Das Beispiel cssframe ist da einen Blick wert.

Oder du schaust mal, ob die Variante Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS mit der Facebox kompatibel  ist, die die Ecken mit einer einzigen   PNG-Grafik abdeckt (siehe z.B. dialog2-blue-800x1600.png), und dennoch die Boxenbreite und -höhe innerhalb dieser Bilddimensionen voll flexibel ist.

mfg Maik


----------



## micronix (27. September 2009)

Also bis jetzt habe ich es soweit ich komme leider nicht weiter
Dynamisch ist das ganze auch nicht


```
<body>
  <div id="facebox" style="margin-top: 220px"> 
    <div class="popup"> 
      <div class="table">  
          <div class="tl ts-1-1" style="position: relative"></div><div class="b ts-1-2" style="position: relative"></div><div class="tr ts-1-3" style="position: relative"></div>
           <div class="b ts-1-4" style="position: relative; background-position: center left;"></div>
            <div class="body" style="padding-top: 10px"> 
              <div class="content"> 
                <div class="image"><img src="http://www.google.de/logos/germanelections09.gif" /></div>
              </div> 
              <div class="footer"> 
                <a href="#" class="close"> 
                  <img src="closelabel.gif" title="close" class="close_image" /> 
                </a> 
              </div> 
            </div> 
            
			<div class="bl ts-1-1"></div>
			<div class="b ts-1-2"></div>
			<div class="br ts-1-3"></div>
           
      </div> 
    </div> 
  </div>
</body>
```


```
#facebox .b {
  background:url(./facebox/b.png);
}

#facebox .tl {
  background:url(./facebox/tl.png);
}

#facebox .tr {
  background:url(./facebox/tr.png);
}

#facebox .bl {
  background:url(./facebox/bl.png);
}

#facebox .br {
  background:url(./facebox/br.png);
}



#facebox .popup {
  position: relative;
}

#facebox .body {
  margin: 0px 10px;
  padding: 10px;
  background: #fff;
  width: 370px;
}

#facebox .table {
  border-bottom: 0;
  padding: 0;
}

#facebox .loading {
  text-align: center;
}

#facebox .image {
  text-align: center;
}

#facebox img {
  border: 0;
  margin: 0;
}

#facebox .footer {
  border-top: 1px solid #DDDDDD;
  padding-top: 5px;
  margin-top: 10px;
  text-align: right;
}

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
  height: 10px;
  width: 10px;
  overflow: hidden;
  padding: 0;
}

#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}

.facebox_hide {
  z-index:-100;
}

.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}


.gen-1 {
	line-height: 110%;
}

.ts-1 {
	height: 116px;
	text-align: left;
	width: 410px;
}

.ts-1-1 {
	clear: both;
	display: inline;
	float: left;
	height: 10px;
	margin-left: 0px;
	margin-top: 0px;
	overflow: hidden;
	padding: 0px;
	width: 10px;
}

.ts-1-2 {
	float: left;
	height: 10px;
	margin-left: 0px;
	margin-top: 0px;
	overflow: hidden;
	padding: 0px;
	width: 390px;
}

.ts-1-3 {
	float: left;
	height: 10px;
	margin-left: 0px;
	margin-top: 0px;
	overflow: hidden;
	padding: 0px;
	width: 10px;
}

.ts-1-4 {
	clear: both;
	display: inline;
	float: left;
	height: 96px;
	margin-left: 0px;
	margin-top: 0px;
	overflow: hidden;
	padding: 0px;
	width: 10px;
}

.ts-1-5 {
	float: left;

	margin-left: 0px;
	margin-top: 0px;
	padding: 10px;
	width: 370px;
}

.ts-1-6 {
	float: left;
	height: 96px;
	margin-left: 0px;
	margin-top: 0px;
	overflow: hidden;
	padding: 0px;
	width: 10px;
}

.gen-2 {
	clear: both;
}
```


----------



## Sven Mintel (27. September 2009)

Moin,

ist vielleicht keine Hilfe, aber aus eigener Erfahrung kann ich dir sagen, dass du, wenn du dort das HTML/CSS ändern willst, gleich das ganze Skript neu schreiben kannst.
Die Markup-Fummelei macht bei diesen Skripten 90% der Arbeit aus


----------



## Maik (27. September 2009)

Hi,

wenn neben der Facebox das JS-Framework jQuery  auch für weitere Anwendungen in deiner Seite zum Einsatz kommt, du also daran schon gebunden bist, kannst du ganz bequem auf FancyBox oder ThickBox ausweichen, die mit den gewünschten <div>-Blöcken arbeiten.

Falls jQuery nicht bindend ist, kannst du auch mal hier nachschauen:

Greybox
iBox
Lightbox - falls nur Grafiken im Spiel sind -
LightWindow
Lytebox
Slimbox - falls nur Grafiken im Spiel sind -

mfg Maik


----------

