Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: How to customize Ajax Tab Content Script ?

  1. #1
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to customize Ajax Tab Content Script ?

    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>
    Last edited by lahurekanchh; 11-18-2010 at 07:17 AM. Reason: link broken

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by lahurekanchh View Post
    Thank you for your advice.
    You're welcome. Have you followed it and is the script now working for you?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have no idea which line should I change exactly.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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 . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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/

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Remove from the external page(s) any content you don't want displayed once they are imported. You should also have no:

    • link style tags

    • meta tags

    • opening or closing html, head, title, style, script or body tags


    on the imported pages.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •