Ajax enables you to concisely organize your layout in a manner that keeps the user on the same screen; just like you would see on the homepage of Yahoo.com with the tabs etc.

Basically there are a couple of files that must be inside your web site, in this example I have them in Skins/default/smarttabs/

You may download the files from

The key to making your Ajax work in the web editor is to have the javascript codes at the very bottom of the html code of your web page. All web pages referenced in the tab must be part of your web site, meaning I cannot display a web page hosted on Yahoo.com into my tab on ZogoMe.com, all pages that I want to display in my Ajax tabs must be within ZogoMe.com

ajaxtabs.css

 ajaxtabs.js

loading.gif

shade.gif

shadeactive.gif

If you copy the text below into the HTML code of the web editor by clicking on the icon that looks like <> on the right side of the editor. You can have as many sets of tabs section per page as long as you give each tab set a unique name and you reference all of the tab names at the very bottom of the page (see the very bottom of this page).

After you have created your tabs, its only a matter of adding as many tabs as your screen real estate can accommodate.

One cool thing I figured out after our webinar was the ability to display a module in the ajaxcontent area without showing the header and footer file. You may see a full example on http://www.ZogoMe.com

<ul class="shadetabs" id="maintab1">
   <li class="selected"><a href="#default" rel="ajaxcontentarea">Home</a> </li>
   <li><a href="classifieds.aspx?view=Print" rel="ajaxcontentarea">Classified Ads</a> </li>
   <li><a href="discounts.aspx?view=Print" rel="ajaxcontentarea">Discount Coupons</a> </li>
   <li><a href="shopmall.aspx?view=Print" rel="ajaxcontentarea">Shopping Mall</a> </li>
   <li><a href="skins/default/smarttab/chili2.htm" rel="ajaxcontentarea">Diary of a Child-Slave</a> </li>
</ul>

<div class="contentstyle" id="ajaxcontentarea">

YOUR TEXT GOES HERE

  </div>

================

       <ul class="shadetabs" id="maintab2">
         <li class="selected"><a href="#default" rel="ajaxcontentarea2">Featured</a> </li>
         <li><a href="inews.aspx?DoAction=Business&amp;view=Print" rel="ajaxcontentarea2">Business</a> </li>
         <li><a href="inews.aspx?DoAction=Entertainment&amp;view=Print" rel="ajaxcontentarea2">Entertainment</a> </li>
         <li><a href="inews.aspx?DoAction=Health&amp;view=Print" rel="ajaxcontentarea2">health </a></li>
         <li><a href="inews.aspx?DoAction=Sports&amp;view=Print" rel="ajaxcontentarea2">Sports</a> </li>
         <li><a href="inews.aspx?DoAction=Technology&amp;view=Print" rel="ajaxcontentarea2">Technology</a> </li>
      </ul>
       <div class="contentstyle" id="ajaxcontentarea2"><span id="lblcontent">

DEFAULT TEXT FOR TABS SET #2 GOES HERE

          </DIV>
                                

<! - -  below are the javascript code that normally is in the header of a typical HTML page but for the web editor, this code must be inserted at the very bottom of the html code of your web page --  >

    <link href="skins/default/smarttab/ajaxtabs.css" type="text/css" rel="stylesheet" />

<script src="skins/default/smarttab/ajaxtabs.js" type="text/javascript">

//<![CDATA[

//]]>

</script></a></span></span></a></span></td>
                      </tr>
                    </tbody>
                  </table></td>
              </tr>
            </tbody>
          </table></span></div></span></p>
<script type="text/javascript">

//<![CDATA[

//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.

startajaxtabs("maintab1","maintab2")

//]]>

</script>