Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: need a mod to the sidepanel script

  1. #1
    Join Date
    Feb 2011
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default need a mod to the sidepanel script

    Ajax Side Panel Script

    http://www.dynamicdrive.com/dynamici...xsidepanel.htm


    This really is a slick scrip and would like to use it on my site.
    However, I'm running into some problems because the way the script is written, you must have one file page for each item.

    What I need is to have a number of uniquely ID'd divisions on the same page and then the script calls those items.

    That way I don't have to write and load up several thousand little files.
    Corrections can be done easily edited on one page rather than across two or three.

    I'd even be willing to pay someone to write the mod.

    For a working model see this page
    http://mroldies.net/Jan-4-1960.html

  2. #2
    Join Date
    Aug 2004
    Posts
    9,910
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Try the below modified .js file, which lets you divvy up the contents of an Ajax page into various parts, by wrapping each part in a DIV with a unique ID, for example:

    Code:
    <div id="page1">
    Page 1 contents
    </div>
    
    <div id="page2">
    Page 1 contents
    </div>
    
    <div id="page3">
    Page 1 contents
    </div>
    Then, on your main page that loads the Ajax Panel script, to define a link that when clicked on loads a particular section within the Ajax page, add a URL parameter like so:

    Code:
    <li><a href="index.html?id=page1" rel="ajaxpanel">My Home Page</a> (internal link, auto loads using Ajax)</li>
    The parameter to add is ?id=divid, where "divid" is the ID of the DIV within the external file to show (with the rest of the page's contents discarded).
    DD Admin

  3. #3
    Join Date
    Feb 2011
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks. I will give it a try.

  4. #4
    Join Date
    Feb 2011
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Modified sidepanel works fine except for one snag

    Ajax sidepanel script


    http://www.dynamicdrive.com/dynamici...xsidepanel.htm

    http://mroldies.net/test1960.html
    http://mroldies.net/list1960.html

    As I also want to use the word press flash audio player, for some unknown reason it is not being activated when used with sidepanel.
    I have the audioplayer script active on both pages just to make sure one will work.

    When you open the second page by itself, you will see the audioplayer does function properly.

    Something in the sidepanel script is not allowing the other script to work.
    I really do want to use this script on the site. With the mod you made, that will save me from having to write thousands of little files.

    Thanks for the mod. Greatly appreciated.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,126
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    I had this worked out. Why didn't you continue our thread:

    http://www.dynamicdrive.com/forums/s...876#post275876

    ?

    Anyways, I made up this modified version of the script:

    ddajaxsidepanel.js

    In addition to allowing you to call a specific div or whatever via its id or other selector(s), it also allows for some import of javascript. But the main audio script still needs to be in the head of the 'top' page.

    So for example, in the head of my 'top' page I have:

    Code:
    <link rel="stylesheet" type="text/css" href="ddajaxsidepanel.css" />
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script src="ddajaxsidepanel.js">
    
    /***********************************************
    * Ajax Side Panel script-  Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    </script>
    <script type="text/javascript" src="http://1littleworld.net/test/1960/js/audio-player.js"></script>
    Then for the link to the content:

    Code:
    <li><a href="table_h.htm #table_1" rel="ajaxpanel">El Paso</a></li>
    Don't miss the space between the page filename and the # symbol.

    table_h.htm (some tables removed so the code could fit in the post):

    Code:
    <html>
    
    <head>
    
                <script type="text/javascript" src="http://1littleworld.net/test/1960/js/audio-player.js"></script>  
                <script type="text/javascript">  
                    AudioPlayer.setup("http://1littleworld.net/test/1960/player/player.swf", {  
                        width: 350,
                    initialvolume: 100						  
                    });  
                </script>  
    
    </head>
    
    <body>
    
    <div id="table_0">
    
    <h2>Welcome to 1960</h2>
    
    Click the MORE button to find out more information.<br/>
    Such as a weekly progress chart and even listen to the tunes.<br/>
    
    </div>
    
    <table id="table_1">
    <tr><td colspan="2">Marty Robbins
    <p>El Paso</p>
    <p id="audioplayer_1a">Alternative content</p>  
            <script type="text/javascript">  
            AudioPlayer.embed("audioplayer_1a", {soundFile: "http://1littleworld.net/test/1960/mp3/Robbins el paso.mp3"});  
            </script>  
    
    <p>Running Gun</p>		  
    <p id="audioplayer_1b">Alternative content</p>  
            <script type="text/javascript">  
            AudioPlayer.embed("audioplayer_1b", {soundFile: "http://1littleworld.net/test/1960/mp3/Robbins running gun.mp3"});  
            </script>  
    		  
    
    		  
    </td></tr>
    <tr><td>Dec 7</td><td></td></tr>
    <tr><td>Dec 14</td><td></td></tr>
    <tr><td>Dec 21</td><td></td></tr>
    <tr><td>Dec 28</td><td></td></tr>
    <tr><td>Jan 4 1960</td><td></td></tr>
    <tr><td>Jan 11</td><td></td></tr>
    <tr><td>Jan 18</td><td></td></tr>
    <tr><td>Jan 25</td><td></td></tr>
    <tr><td>Feb 1</td><td></td></tr>
    <tr><td>Feb 8</td><td></td></tr>
    <tr><td>Feb 15</td><td></td></tr>
    <tr><td>Feb 22</td><td></td></tr>
    <tr><td>Feb 29</td><td></td></tr>
    <tr><td>March 7</td><td></td></tr>
    <tr><td>March 14</td><td></td></tr>
    <tr><td>March 21</td><td></td></tr>
    <tr><td>March 28</td><td></td></tr>
    <tr><td>April 4</td><td></td></tr>
    <tr><td>April 11</td><td></td></tr>
    <tr><td>April 18</td><td></td></tr>
    <tr><td>April 25</td><td></td></tr>
    
    
    </table>
    
    <table id="table_2">
    
    <tr><td>Dec 7</td><td></td></tr>
    <tr><td>Dec 14</td><td></td></tr>
    <tr><td>Dec 21</td><td></td></tr>
    <tr><td>Dec 28</td><td></td></tr>
    <tr><td>Jan 4 1960</td><td></td></tr>
    <tr><td>Jan 11</td><td></td></tr>
    <tr><td>Jan 18</td><td></td></tr>
    <tr><td>Jan 25</td><td></td></tr> . . . 
    
     . . . <td></td></tr>
    <tr><td>March 28</td><td></td></tr>
    <tr><td>April 4</td><td></td></tr>
    <tr><td>April 11</td><td></td></tr>
    <tr><td>April 18</td><td></td></tr>
    <tr><td>April 25</td><td></td></tr>
    
    
    </table>
    
    <table id="table_10">
    
    <tr><td>Dec 7</td><td></td></tr>
    <tr><td>Dec 14</td><td></td></tr>
    <tr><td>Dec 21</td><td></td></tr>
    <tr><td>Dec 28</td><td></td></tr>
    <tr><td>Jan 4 1960</td><td></td></tr>
    <tr><td>Jan 11</td><td></td></tr>
    <tr><td>Jan 18</td><td></td></tr>
    <tr><td>Jan 25</td><td></td></tr>
    <tr><td>Feb 1</td><td></td></tr>
    <tr><td>Feb 8</td><td></td></tr>
    <tr><td>Feb 15</td><td></td></tr>
    <tr><td>Feb 22</td><td></td></tr>
    <tr><td>Feb 29</td><td></td></tr>
    <tr><td>March 7</td><td></td></tr>
    <tr><td>March 14</td><td></td></tr>
    <tr><td>March 21</td><td></td></tr>
    <tr><td>March 28</td><td></td></tr>
    <tr><td>April 4</td><td></td></tr>
    <tr><td>April 11</td><td></td></tr>
    <tr><td>April 18</td><td></td></tr>
    <tr><td>April 25</td><td></td></tr>
    
    
    </table>
    
    </body>
    
    </html>
    Here's a demo:

    http://home.comcast.net/~jscheuer1/s...ajax-panel.htm

    And another using your more recent setup:

    http://home.comcast.net/~jscheuer1/s.../1960-test.htm
    Last edited by jscheuer1; 06-21-2012 at 08:56 AM. Reason: fix for Opera, later add another demo
    - John
    ________________________

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

  6. #6
    Join Date
    Feb 2011
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Again, I thank you royally kind sir.
    This will allow me to have all of my information on just a few pages rather than on thousands.
    May I strongly suggest you post the new version to DD's site so that others can thoroughly appreciate the work?

  7. #7
    Join Date
    Feb 2011
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I trust I'm not ticking you off to much over this. But I have run into another problem.
    I want to add an image to show above the audioplayer. But for some reason, only the audioplayer is shown. Regardless of where the image tag is located or where the image itself is.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,126
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    Well it of course would need to be in the target div. As long as it is, try using the absolute path to it.

    I tried looking at your demo 1960list.htm again, but there's still only the one image in it. On my demo, that one image shows fine when requested.

    If you're still having problems, put up a demo of it that I can see.
    - John
    ________________________

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

  9. #9
    Join Date
    Feb 2011
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    if it is a matter of a space issue, that's no big deal for me. I use Liberty Basic to make short work of hand coding a hundred lines of code. So changing a space to an underscore is nothing. The headache comes in renaming the MP3's. Those I have to do by hand.

  10. #10
    Join Date
    Feb 2011
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    You are right. It is a space in the name issue. changing the space to a - and it works fine.
    Try my original site again and you will see that it works.

    http://mroldies.net/test1960.html

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
  •