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

This is really impressive...how did you create the tabs on the project details view...Any instructions you can provide on how you did it is very much appreciated.

Thanks

Jerry

This is my template with tabs and google maps (the latter is no longer useful because the module offers functionality). Use my custom fields, you must adapt it to work with yours

hi,

Impressive, the part with tabs.. can you direct me how did you do this?

ot if you can share the template or part of containing the tabs..

Thanks,

bytewiz9

My Wife's site is running the property agent as a type of review...  http://www.paintersquest.com

In fact her site has nothing but modules that was made from here...  :)

A couple people asked me to share this employee directory I build with the PA module. Sorry it took me so long to do so. Here it is:

A Project Case Study directory:

http://www.ksise.com/CaseStudies/tabid/56/Default.aspx

Thanks again, Scott, for a great module!

Hello Jose,

I like your templates for google.

I receive an error when I use the map in first tab in IE7 ( in firefox it's OK)

Internet Explorer cannot open the Internet site http://......

Operation aborted

Thanks,

Marius

You can publish your web address for can check it live.

Thanks Jose,

I add this code and it's work

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
mapload();
})