How to customize Ajax Tab Content Script ?

**lahurekanchh** · 11-18-2010, 03:07 AM

Hello,

I had uploaded Ajax Tab Content script as instructed. But when I put my web site page it display all frame and contents. I wanted to display content area of my page only. Also, some bullet also coming out along with tabs. Where should edit it ?

<head>
<link rel="stylesheet" type="text/css" href="ajaxtabs.css" />

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

/***********************************************
* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>
<body>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" class="selected" rel="#default">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="http://www.************" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
//Optional default content here.
</div>

<script type="text/javascript">

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

</script>

**jscheuer1** · 11-18-2010, 03:17 PM

In general, double check the step by step instructions on the demo page and make sure you've left nothing out.

But it sounds like:

Code:

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

and/or:

Code:

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

/***********************************************
* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

are 404 not found. Go back to the demo page and get them, upload them to the same folder as the page.

That should at least get it working. There may be other support files you're missing, like images. But those are also available on the demo page should you need them.

**lahurekanchh** · 11-19-2010, 02:52 AM

Thank you for your advice. I just copy and pasted in my pages with changes in link. It display all frames of my pages not only content area. Also, tabs appears with bullet which are not included in script.

**jscheuer1** · 11-19-2010, 07:16 AM

Originally Posted by lahurekanchh

Thank you for your advice.

You're welcome. Have you followed it and is the script now working for you?

**lahurekanchh** · 11-19-2010, 11:23 AM

I have no idea which line should I change exactly.

**jscheuer1** · 11-19-2010, 04:26 PM

The code looks OK. You are probably missing either or both of the ajaxtabs.css and ajaxtabs.js files.

Go back to the demo page and get them. Then upload them to the same folder as your page.

While you are on the demo page make sure you've followed all of the instructions there. There's more to it than just copying and pasting code, that part (from your first post) looks good.

If you want more help, we would need a link to your page to help further. But apparently that domain is banned or something. You could put a demo of the problem on another domain so we could check it out.

**lahurekanchh** · 11-21-2010, 06:24 AM

here is images of webpage when I use this script in my page.

Position of script

http://postimage.org/image/iuq6a8uc/

After clicking tab button. Result is as follows.

http://postimage.org/image/iurttlc4/

Blue aero bullet also appearing.

**jscheuer1** · 11-21-2010, 10:14 AM

OK, it wasn't what I was guessing. I was able to navigate to the page from the URL displayed in the address bar in the images. The problem is that settings in the custom.css file add (for ul li) that bullet (it's really a background image) and add 25px left padding. There's nothing in the the ajaxtabs.css file to override that, so these styles which may be appropriate somewhere else on the site, now or in the future, are getting put on the li elements used in this script.

To fix that, in the ajaxtabs.css file, add the following (highlighted):

Code:

/* ######### CSS for Shade Tabs. Remove if not using ######### */

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
padding: 0!important;
background-image: none!important;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-rig . . .

**lahurekanchh** · 11-22-2010, 10:20 AM

Thank you, that worked for bullets but I still need one customization.

When I click tab where I have external html link. In the display,

it display all my pages' menu bar, all the frame etc. If possible, I like to show only content area of the page not menu bars or frames etc.

Also it does not appear within page it goes out of pages.

Example at

http://postimage.org/image/iurttlc4/