SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX Accordion ?

    Hi,

    Can someone explain how to fix this?

    http://www.farawaytrains.co.uk/test22.html



    Many thanks.
    Last edited by invision2; Aug 4, 2008 at 05:41.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of trying to modify the accordian script it might be better to emulate the user clicking each 10 secs ... something like this maybe:

    Code JavaScript:
    function click(i) {
      var dts = $('dt');
      if(i!==dts.length) {
        $('dt:eq('+i+')').click();
      } else {
        click(0);
      }
      setTimeout(function(){click(++i)},10000);
    }
    click(0);
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's my code having had a hand from JimmyP, but it's still unsuccessful.

    I've attached both 'accordion.js' and 'jquery.js'.

    I get an error saying jQuery is not defined(because I think my external script link should be above it in the header. Is this right?

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <
    head profile="http://gmpg.org/xfn/11">

    <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <
    title>Michael Test</title>
    <
    script type="text/javascript">
    jQuery().ready(function(){    

        function 
    click(i) {
            var 
    dts = $('dt');
            if(
    i!==dts.length) {
                $(
    'dt:eq('+i+')').click();
            } else {
                
    click(0);
            }
        
    setTimeout(function(){click(++i)},2000);
        }
        
    click(0);
    });
    </script>
    </head>

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

    <script type="text/javascript" src="js/accordion.js"></script>
    <script type="text/javascript">
    jQuery().ready(function(){

        // applying the settings
        jQuery('#theMenu').Accordion({
            active: 'h3.selected',
            header: 'h3.head',
            alwaysOpen: false,
            animated: true,
            showSpeed: 400,
            hideSpeed: 800
        });
    });    
    </script>

    <a name="top"></a>
    <p class="skip"><a href="#cnt">Skip to content</a></p>
    <p class="skip"><a href="#nav">Skip to navigation</a></p>

            <ul id="theMenu">
                <li>
                    <h3 class="head"><a href="javascript:;">Test 1</a></h3>

                    <ul>
                        <li><a href="index.php">Content 1 1</a></li>
                        <li><a href="index.php">Content 1 2</a></li>

                        <li><a href="index.php">Content 1 3</a></li>

                    </ul>
                </li>

                <li>
                    <h3 class="head"><a href="javascript:;">Test 2</a></h3>
                    <ul>
                        <li><a href="index.php">Content 2 1</a></li>

                        <li><a href="index.php">Content 2 2</a></li>

                        <li><a href="index.php">Content 2 3</a></li>

                    </ul>
                </li>
                <li>
                    <h3 class="head"><a href="javascript:;">Test 3</a></h3>
                    <ul>

                        <li><a href="index.php">Content 3 1</a></li>

                        <li><a href="index.php">Content 3 2</a></li>

                        <li><a href="index.php">Content 3 3</a></li>
                    </ul>
                </li>
                <li>
                    <h3 class="head"><a href="javascript:;">Test 4</a></h3>

                    <ul>

                        <li><a href="index.php">Content 4 1</a></li>

                        <li><a href="index.php">Content 4 2</a></li>
                        <li><a href="index.php">Content 4 3</a></li>
                    </ul>
                </li>
                <li style="border-bottom:1px solid #D6D6D6">

                    <h3 class="head"><a href="javascript:;">Test 5</a></h3>

                    <ul>
                        <li><a href="index.php">Content 5 1</a></li>
                        <li><a href="index.php">Content 5 2</a></li>
                        <li><a href="index.php">Content 5 3</a></li>
                    </ul>
                </li>

            </ul>

    <!-- GOOGLE STATS GO HERE -->

    </body>

    </html> 
    Attached Files Attached Files

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, try loading jQuery above the other script.... Put it within <HEAD>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Plus you'll need to adjust the script I gave you a bit because you're not using dt's & dd's to markup the list (as they are in the example) - You're using LI & H3 etc...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Snippet of modified code:
    PHP Code:
    <title>Michael Test</title>
    <
    script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    jQuery().ready(function(){    

        function click(i) {
            var dts = $('h3');
            if(i!==dts.length) {
                $('h3:eq('+i+')').click();
            } else {
                click(0);
            }
        setTimeout(function(){click(++i)},2000);
        }
        click(0);
    });
    </script>
    </head>

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

    <script type="text/javascript" src="js/accordion.js"></script>
    <script type="text/javascript">
    jQuery().ready(function(){

        // applying the settings
        jQuery('#theMenu').Accordion({
            active: 'h3.selected',
            header: 'h3.head',
            alwaysOpen: false,
            animated: true,
            showSpeed: 400,
            hideSpeed: 800
        });
    });    
    </script>


    <a name="top"></a>
    <p class="skip"><a href="#cnt">Skip to content</a></p>
    <p class="skip"><a href="#nav">Skip to navigation</a></p>

            <ul id="theMenu">
                <li>
                    <h3 class="head"><a href="javascript:;">Test 1</a></h3>

                    <ul>
                        <li><a href="index.php">Content 1 1</a></li>
                        <li><a href="index.php">Content 1 2</a></li>

                        <li><a href="index.php">Content 1 3</a></li>

                    </ul>
                </li>

                <li>
                    <h3 class="head"><a href="javascript:;">Test 2</a></h3>
                    <ul>
                        <li><a href="index.php">Content 2 1</a></li>

                        <li><a href="index.php">Content 2 2</a></li>

                        <li><a href="index.php">Content 2 3</a></li>

                    </ul>
                </li>
                <li>
                    <h3 class="head"><a href="javascript:;">Test 3</a></h3>
                    <ul>

                        <li><a href="index.php">Content 3 1</a></li>

                        <li><a href="index.php">Content 3 2</a></li>

                        <li><a href="index.php">Content 3 3</a></li>
                    </ul>
                </li>
                <li>
                    <h3 class="head"><a href="javascript:;">Test 4</a></h3>

                    <ul>

                        <li><a href="index.php">Content 4 1</a></li>

                        <li><a href="index.php">Content 4 2</a></li>
                        <li><a href="index.php">Content 4 3</a></li>
                    </ul>
                </li>
                <li style="border-bottom:1px solid #D6D6D6">

                    <h3 class="head"><a href="javascript:;">Test 5</a></h3>

                    <ul>
                        <li><a href="index.php">Content 5 1</a></li>
                        <li><a href="index.php">Content 5 2</a></li>
                        <li><a href="index.php">Content 5 3</a></li>
                    </ul>
                </li>

            </ul>

    <!-- GOOGLE STATS GO HERE -->

    </body>

    </html> 
    No errors in my FF 'Error Console' it just doesn't want to work for me heh.

    Any ideas? Thanks for looking.
    Last edited by invision2; Aug 3, 2008 at 13:24.

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...
    Last edited by invision2; Aug 4, 2008 at 05:42.

  8. #8
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *bump*

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    No errors for me in FF, it just works for me with no trouble. Each section seems to accordion as they should do.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I meant to explain that I would like it to go through each item every 10 seconds.
    So it displays the first bit, then the second and so on, automatically.

    Unfortunately haven't been able to get that working in FF, only in IE7


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
  •