You offered the template for "worldscheapestproperties"?  Is there somewhere I can download it?  Beautiful piece of work!

I can sent it to you if you want

Just PM me your email

Paul

Thanks,

I sent it.

Wondering if anyone knows how to duplicate the layout here, specifically how to create and populate tabs that pull in the listing detail???

I'm doing the same thing on one of my sites.  The easiest way I've found to create similar tabs in DNN is with CSS tabs linked to ASP:MULTIVIEW command.  Time saver for some really good tabs here: http://www.highdots.com/css-tab-designer/

It's a free program that generates tabs using the exploding boy and several other of the popular free layouts and lets you make your own variations as well.  Pop the CSS into the page, create your Multiview & views and then format your individual html layouts and insert them and you are good to go!

This is the script for building tabs, put in yeeti.js file...

/* Yetii - Yet (E)Another Tab Interface Implementation version 1.2 http://www.kminek.pl/lab/yetii/ Copyright (c) 2007-2008 Grzegorz Wojcik Code licensed under the BSD License: http://www.kminek.pl/bsdlicense.txt */ function Yetii() { this.defaults = { id: null, active: 1, interval: null, wait: null, tabclass: 'tab', activeclass: 'active', callback: null }; for (var n in argumentsΎ]) { this.defaults[n]=argumentsΎ][n] }; this.getTabs = function() { var retnode = [] var elem = document.getElementById(this.defaults.id).getElementsByTagName('*'); var regexp = new RegExp("(^|\\s)" + this.defaults.tabclass.replace(/\-/g, "\\-") + "(\\s|$)"); for (var i = 0; i < elem.length; i++) { if (regexp.test(elem[i].className)) retnode.push(elem[i]); } return retnode; }; this.links = document.getElementById(this.defaults.id + '-nav').getElementsByTagName('a'); this.show = function(number){ for (var i = 0; i < this.tabs.length; i++) { this.tabs[i].style.display = ((i+1)==number) ? 'block' : 'none'; this.links[i].className = ((i+1)==number) ? this.defaults.activeclass : ''; } this.defaults.active = number; if (this.defaults.callback) this.defaults.callback(number); }; this.rotate = function(interval){ this.show(this.defaults.active); this.defaults.active++; if(this.defaults.active > this.tabs.length) this.defaults.active = 1; var self = this; if (this.defaults.wait) clearTimeout(this.timer2); this.timer1 = setTimeout(function(){self.rotate(interval);}, interval*1000); }; this.next = function() { this.defaults.active++; if(this.defaults.active > this.tabs.length) this.defaults.active = 1; this.show(this.defaults.active); }; this.previous = function() { this.defaults.active--; if(!this.defaults.active) this.defaults.active = this.tabs.length; this.show(this.defaults.active); }; this.tabs = this.getTabs(); this.show(this.defaults.active); var self = this; for (var i = 0; i < this.links.length; i++) { this.links[i].customindex = i+1; this.links[i].onclick = function(){ if (self.timer1) clearTimeout(self.timer1); if (self.timer2) clearTimeout(self.timer2); self.show(this.customindex); if (self.defaults.wait) self.timer2 = setTimeout(function(){self.rotate(self.defaults.interval);}, self.defaults.wait*1000); return false; }; } if (this.defaults.interval) this.rotate(this.defaults.interval); };

Here is the tab implementation into template View.Item.html file

[script removed] <div class="tabs-container"> <div class="tab" id="xtab1" style="text-align:left;" mce_style="text-align:left;"> <br> <span id="LblHide1" class="head" style="display:none;" mce_style="display:none;">Datos Generales</span> <div class="hr"></div> <strong>[CAPTION:Zona]</strong><br /> [CUSTOM:Zona]<br /><br /> <strong>[CAPTION:Direccion]</strong><br /> [CUSTOM:Direccion]<br /> [CUSTOM:Localidad] [CUSTOM:CP] ([CUSTOM:Provincia])<br /><br /> <strong>[CAPTION:Precio]</strong><br /> [CUSTOM:Precio]<br /><br /> <strong>Características</strong><br /> <table width="135px" height="20px" ID="Table3"> <tr> <td width="20px" align="right"><span class="NormalBold">[CUSTOM:Habitaciones]</span></td> <td width="25px" class="bed"></td> <td width="20px" align="right"><span class="NormalBold">[CUSTOM:Garages]</span></td> <td width="25px" class="car"></td> <td width="20px" align="right"><span class="NormalBold">[CUSTOM:WC]</span></td> <td width="25px" class="bath"></td> </tr> </table> <div class="hr"></div> <b>[CUSTOM:DescripcionCorta]</b><br /> [CUSTOM:DescripcionLarga]<br><br> </div> <div class="tab" id="xtab2" style="text-align:center;" mce_style="text-align:center;"> <br> <span id="LblHide2" class="head" style="display:none;" mce_style="display:none;">Imágenes del Inmueble <div class="hr"></div></span> [PHOTOS]<br><br> </div> [EXPRESSION:MostrarMapa:=:True] <div class="tab" id="xtab3" style="text-align:center;" mce_style="text-align:center;"> <span id="LblHide3" class="head" style="display:none;" mce_style="display:none;">Mapa de Localización <div class="hr"></div></span> <span class="head">¿Cómo llegar?</span><div class="hr"></div> <table> <tr><th align="center" title="TIPOVIA NOMBRECALLE, LOCALIDAD, CODIGOPOSTAL (p.e.: Calle Trajano, 1, Almería, 04002)">Indique dirección origen  </th><th align="left"> </th></tr> <tr><td><input type="text" size="35" id="fromAddress" name="from" value="" title="TIPOVIA NOMBRECALLE, LOCALIDAD, CODIGOPOSTAL (p.e.: Calle Trajano, 1, Almería, 04002)"/></td> <td> [script removed] </td></tr> <tr><td colspan="2"><span id="propmax" style="font-size:xx-small;" mce_style="font-size:xx-small;"></span></td></tr> </table> <div id="directions" style="display:none;width:98%"></div> <div id="propmap" style="overflow:hidden;position:relative;border:1px black solid;width:500px;height:400px;"></div> <div id="pano" style="width:500px; height: 200px"></div> </div> [/EXPRESSION:MostrarMapa:=:True] [HASAGENT] <div class="tab" id="xtab4" style="text-align:left;" mce_style="text-align:left;"> <br> <span class="head">Agente asignado a la Propiedad</span><div class="hr"></div> <table width="100%"> <tr> <td align="center"> [AGENT:Foto] </td> <td valign="top"> [AGENT:FirstName] [AGENT:LastName]<br /> [AGENT:Region], [AGENT:Country]<br /> <a href="http://[AGENT:Website]" mce_href="http://[AGENT:Website]" target="_blank">[AGENT:Website]</a> </td> </tr> </table> </div> [/HASAGENT] <div class="tab" id="xtab5" style="text-align:center;" mce_style="text-align:center;"> <br> <span class="head">Formulario de Contacto</span><div class="hr"></div> Por favor, siéntase libre de solicitar la información que considere de su interés!<br><br> [CONTACTFORM]<br><br> </div> </div> </div>

And include this script in template body:

[script removed]<!-- new Yetii({id: 'tab-container-1',callback: customfunction}); function customfunction(tabnumber) { if ((tabnumber==3) && (HayMapa==true)) { eval("mapload()"); } } // -->[script removed]

Finally, include this in css file:

/* yeetiTab */ div.yeetiTab { width: 100%; margin: 0 0 20px 0; } ul.yeetiTab { list-style-type: none; width: 100%; float: left; } ul.yeetiTab li { margin: 0 2px 0 0; float: left;list-style-type: none; } ul.yeetiTab a { float: left; display: block; padding: 4px 8px; border: 1px solid #ccc; border-bottom: 0; color: #666; background: #eee; text-decoration: none; font-weight: bold;text-decoration:none; } ul.yeetiTab a:hover { background: #fff;text-decoration:none; } ul.yeetiTab a.active { background: #fff; padding-bottom: 5px; cursor: default;text-decoration:none; } .tabs-container { clear: left; border: 1px solid #ccc; border-top:none; padding: 20px 8px 0 8px;background-color:white; }

doggiedaddy,

That looks like a really cool tool, thank you!

I'm not a programmer, I'm just learning this stuff, would you be able to provide more detail, or even better an example of the code?

Specifically:

1. "Pop the CSS into the page" - What page? The existing stylesheet?

2. "Create your multiviews and views" - I dont know how to do this, do you have an example you can share that I can then modify to my site?

3. "Format individual html layouts and insert them" - I dont know what this means either.

I know I probably sound retarded, but I'm just learning as I go along. :)

Thanks for any further assistance you can provide.

Brian

Hi Everyone,

I'm a huge fan of Scott's work and PM has really helped with my latest site.

Here I use it for a Project DB -

http://www.i95coalition.net/i95/Projects/ProjectDatabase/tabid/120/Default.aspx

If you drill down to a specific project you can see how we use tabs to display the Overview and Details.

We also use it as part of our Clearinghouse DB-

http://www.i95coalition.net/i95/Library/IncidentMgmtClearinghouse/tabid/86/Default.aspx

In this app the tabs are dynamic. So, the Image tab is only shown if the project has an image and the Documents tab is shown only if it has documents, etc.

We were also able to show all of our featured projects by category:

http://www.i95coalition.net/i95/Projects/FeaturedProjects/tabid/119/Default.aspx