1

Topic: FYI - Adding inline AJAX content tabs to vldPersonals

One thing I'm always trying to do is to find a way to provide instructions to visitors/members in a neat concise way. I found the answer at dynamic drive. You can read the instructions at dynamic drive or you can read my instructions on how I added it to vldPersonals below.

As far as I can tell, you can add content, images or video to the external file and ajax will display it in vldPersonals. I only played with content and images to this date.

If you want to check out my visitors ajax content tabs go to http://www.filipina-lady.org.  Click some of the tabs to see how it works

Here are some examples. You have control over the css coding, color, fonts, etc.

[img]http://www.filipina-lady.net/test231/visitor01.jpg[/img]

[img]http://www.filipina-lady.net/test231/visitor02.jpg[/img]

[img]http://www.filipina-lady.net/test231/member01.jpg[/img]


Ok, if you are interested here are my  instructions to adding to vldPersonals.

1. Download the AJAX content tabs from here:

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

The download link is called  ajaxtabscontent.zip -- it is in the middle of the page.

2. Unzip it

3. Upload the ajaxtabs folder to your template media folder. This folder contains the CSS and JS files.

4. In yout template header.tpl add the following code between the header tags.

<script type="text/javascript" src="{virtual_tpl_path}{loggedin_template}/media/ajaxtabs/ajaxtabs.js"></script>
<link rel="stylesheet" type="text/css" href="{virtual_tpl_path}{loggedin_template}/media/ajaxtabs/ajaxtabs.css">

Note: I added the above codes right after: <script type="text/javascript" src="{virtual_path}includes/js/misc.js"></script>

5. In the zip file there is some external htm files you may want to upload to the root of your vldPersonals. They are named external1.htm, external2.htm, etc (do not upload the demo.htm file). Later you can edit the content and rename these files to more keyword friendly names for search engine purposes.

Ok, now we are ready to add the coding to your template homepage.tpl. Where you add is up to you, but it makes sense to add it towards the top of your template. You can check out my source code at http://www.filipina-lady.org if you want.

Here is my coding which you may need to adapt for your site. I will explain the coding more in the image below. Note: if you copy the code below as is and paste in your site, it probably will need to be changed to reflect your sites proper linking. For example, I named my external files filipina-1.htm, filipina-2.htm, etc, keeping my search engine keywords in mind. Recommend reading the images below I explain further

    <!-- IF loggedin == "1" -->
<ul id="countrytabs" class="shadetabs">
<li><a href="#" class="selected" rel="#default" >Hello {loggedin_username}</a></li>
<li><a href="filipina-1.htm" rel="#iframe">Add Picture</a></li>
<li><a href="filipina-2.htm" rel="countrycontainer">My Profile</a></li>
<li><a href="filipina-3.htm" rel="countrycontainer">Explore and Network</a></li>
<li><a href="filipina-4.htm" rel="countrycontainer">Contact</a></li>

</ul>
<div id="countrydivcontainer" style="border:1px solid gray; width:550px; margin-bottom: 1em; padding: 10px">
<p><font color="#e2ba00">Hello {loggedin_username}</font></p>
<p><font color="#e2ba00"> This section is to provide Filipina Lady Members some basic instructions to get their membership started. Please take a few moments to explore each instruction tab to help complete your membership. Also, it is important that you note the links above for your account -- &quot;My page, My profile, Messages&quot;, etc. </font></p>
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>
  <!-- ENDIF -->
  
  <!-- IF loggedin == "0" -->
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="#default" >Welcome</a></li>
<li><a href="lady-1.htm" rel="petsdivcontainer">Registration</a></li>
<li><a href="lady-2.htm" rel="petsdivcontainer">Picture Gallery</a></li>
<li><a href="lady-3.htm" rel="petsdivcontainer">Finding Love</a></li>
<li><a href="lady-4.htm" rel="petsdivcontainer">Contact us</a></li>
</ul>
<br style="clear: left" />
</div>

<div id="petsdivcontainer" style="border:1px solid gray; width:550px; margin-bottom: 1em; padding: 10px">
  <p><font color="#e2ba00">Welcome to Filipina Lady Dating. Membership is 100% FREE for both male and female members. All we ask is that you are truthful in your profile, upload a profile photo when you register and upload at least one picture to your gallery. </font></p>
  <p><font color="#e2ba00">To read more about Filipina Lady Dating, click a tab above or explore the site. </font></p>
 </div>
 
 <script type="text/javascript">

var mypets=new ddajaxtabs("pettabs", "petsdivcontainer")
mypets.setpersist(false)
mypets.setselectedClassTarget("link")
mypets.init()

</script>

  <!-- ENDIF -->

NOTE: Recommend you read the instructions on the image below. If you can not read the image below in vld forum (vld forum resizes the image), click the link below to read it on my forum

http://www.filipina-lady.net/filipina-forum/viewtopic.php?p=375#375

[img]http://www.filipina-lady.net/test231/code01.jpg[/img]

NOTE: Recommend you read the instructions on the image below. If you can not read the image below in vld forum (vld forum resizes the image), click the link below to read it on my forum

http://www.filipina-lady.net/filipina-forum/viewtopic.php?p=375#375

[img]http://www.filipina-lady.net/test231/external01.jpg[/img]

Thats it. There are a lot more instructions and different things you can do with this code. You don't have to  use it just for content. I believe you can make a slide show with it as well and many other things you can do but I haven't had a chance to play around with it yet.  You can check the instructions out at dynamic drive. When time permits, I may play around more with the default code. If you discover anything neat, please share.

Last edited by db3204 (2008-02-14 12:37:10)

2

Re: FYI - Adding inline AJAX content tabs to vldPersonals

Man, I should learn by now to check my site out in both IE and Firefox after making changes. I use firefox and posted the above after coding but never looked at it in IE until after I posted. When I did look at it in IE, man, things were out of line while in firefox it looked perfect.

I finally got it to line up correctly in both firefox and IE in case someone looked at it with IE the first time and thought what a mess. Sorry

Dan

3

Re: FYI - Adding inline AJAX content tabs to vldPersonals

Hey, nice, I use this one also.
Only: why do you prefer the ajax version above the javascript?

4

Re: FYI - Adding inline AJAX content tabs to vldPersonals

Hey bud

Probably if I was doing it today, I would use jquery. If you noted the date of my first post, it was done when vldPersonals did not have jquery by default.

5

Re: FYI - Adding inline AJAX content tabs to vldPersonals

ow, i didn't know smile
i try to use as much as possible pure CSS, i even removed my jquery menu with a css dropdown: less conflicts, more speed :-)

6

Re: FYI - Adding inline AJAX content tabs to vldPersonals

Have a look at the CSS Tab Designer

It gives you quick and simple CSS tabs which provide a nice starting point for tweaking to your own styles.

I had no qualms or problems using it.
From memory it also provides 'sliding door' tabs

[img=CSS Tabs]http://www.fatlizard.com.au/uploads/vld/vld.css.jpg[/img]

Last edited by fatlizard (2010-08-05 10:17:59)

7

Re: FYI - Adding inline AJAX content tabs to vldPersonals

thx fatlizard, looks promissing !

8

Re: FYI - Adding inline AJAX content tabs to vldPersonals

db3204,

You seem to have tried everything that I want to do.  I looked as the AJAX and it is similar but I want to add tab content to some of my vld pages.  I have everything uploaded correctly, but I do not see any content.  All I see is the tabs and the content box below it and the links take you no where...any ideas?