need a mod to the sidepanel script

Printable View

06-19-2012, 08:31 PM
oldmanInAz

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
06-20-2012, 07:16 AM
ddadmin

1 Attachment(s)

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).
06-20-2012, 06:25 PM
oldmanInAz

Thanks. I will give it a try.
06-21-2012, 01:40 AM
oldmanInAz

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.
06-21-2012, 06:29 AM
jscheuer1

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
06-21-2012, 03:08 PM
oldmanInAz

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?
06-21-2012, 03:52 PM
oldmanInAz

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.
06-21-2012, 04:16 PM
jscheuer1

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.
06-21-2012, 04:22 PM
oldmanInAz

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.
06-21-2012, 04:44 PM
oldmanInAz

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
06-21-2012, 05:12 PM
jscheuer1

That's not what I meant. However, strict HTML rules state that spaces in a filename should be represented by %20 tokens when used as an href or src attribute. Ignoring this often will have no consequences, but when it does it can be hard to track down.

It's not a problem with the mp3's apparently because they're quoted strings sent to a function, all in javascript, no HTML involved.

What I meant though was that if the imported files's filename has a space in it, regardless if that space is represented by %20, my method will fail.

Like if 'list1960.html' were 'list 1960.html', then there would be a problem.

But yes, when using filenames in HTML for href and/or src attributes, and there are spaces in them, those should be represented in the HTML as %20 tokens.

I avoided that problem in my scheme by adding them via javascript. But, as I say it would still be a problem if the fetched file filename itself has a space in it
06-22-2012, 12:12 AM
oldmanInAz

Just one more nitpickin item for you to work on.
Numbers in the division ID name cause a 404.
#itemA is ok.
#item1 is not.
06-22-2012, 01:20 AM
jscheuer1

No, at least not in a way I can easily replicate.

For instance, if I change the id on the under construction image from 'under' to 'item1' and change the URL to fetch it to "1960-list.htm #item1", it works fine once the file with the id="under" is cleared from cache.

That may be the problem. To prevent that, one could add this code to the 'top' page after the external tag for jQuery:

Code:

<script type="text/javascript"> jQuery.ajaxSetup({ cache: false }); </script>

But once you get your external content page(s) setup to your satisfaction and published, you should remove it because it forces the browser and the server to fetch the page each time. If the external page isn't changing, that's a waste of time and bandwidth.

If you use a selector like #item1 and there's no element by that id in the imported content (either because it's just not there or because a previous version without that id is still in cache), you won't get a 404, but you won't get any content either.

If you're actually seeing a 404 error page, then most likely the external page's base URL itself is a 404 Not Found.

If there's some other problem with this that I've missed, and/or you want more help with it, please put up a demo of it so I can check it out.
06-22-2012, 01:46 AM
oldmanInAz

Thanks for the tip. Works fine now with numbers in the ID.

http://mroldies.net/Jan-4-1960.html
06-22-2012, 02:45 AM
oldmanInAz

Stranger and stranger it gets.
I've made up an entire page with working links for all the items.
Now when you click on a song, it eventually reports "file not found".
Click on them again. The second one shows up fine.
The first shows up with "file not found" and yet is playing?
click the close button and the tune conitinues.
This is driving me insane I tell ya doc. The question is, in which script is the problem?

Oh, only the first four have the tunes. the others are not posted yet.
06-22-2012, 01:58 PM
jscheuer1

I'm not having that problem with that (Jan-4-1960.html) page. I do notice you're moving around and renaming the mp3 files. When you do that, you have to make sure that you update them in the external page. Even then there could be an old copy of the page in the browser's cache.

I am noticing that it takes like forever to load in Opera. This seems to be related to the size of the external file and that it's loading all the instances of mroldies.net/audioplayer/player.swf before choosing the one you want and placing it in the slider.

This looks like it's happening in other browsers too, but the delay isn't nearly as noticeable.

I have a new version of the script that looks like it fixes that. It also uses a different method of passing the selector id, one which will be valid with any URL, is valid itself in HTML 5 and restores the link's ability to function as an ordinary link when javascript is not present - all things that had been lost in the last versions.

Instead of:

Code:

<a href="http://mroldies.net/list1960.html #item1" rel="ajaxpanel" >

You do it like:

Code:

<a href="http://mroldies.net/list1960.html" data-select="#item1" rel="ajaxpanel" >

I also fixed some inefficiencies and potential errors in the script itself.

The new script is:

http://home.comcast.net/~jscheuer1/s...depanel_sel.js

As you seem to be moving around the mp3 and perhaps other files, I'm not going to put up a live demo at this time. But I've tested it and it works.

As always, if you want more help:

Please include a link to the page on your site that contains the problematic code so we can check it out.
06-22-2012, 04:05 PM
jscheuer1

Another thing I noticed is that the external page is invalid - tons of closing </div> tags that have no corresponding opening <div> tags. This may be contributing to the load time problem and is causing some browsers to not render anything.
06-23-2012, 01:36 AM
oldmanInAz

I have now tested the page on IE9, opera 12 and seamonkey 2.
All work just fine.
Apparenty there is an issue with firefox 9 that is causing the havoc.

http://mroldies.net/Jan-4-1960.html
06-23-2012, 03:46 AM
jscheuer1

I have Firefox 12 but I think I might know what you mean.

Rather than guess though, could you just tell me?
06-23-2012, 04:15 AM
jscheuer1

Couldn't you just answer the question?

What is the problem in Firefox 9? If I had that browser, and assuming this isn't specific to your system, what exactly would I have to do to duplicate what you're experiencing?
06-23-2012, 04:18 AM
oldmanInAz

Ok I think I've got this problem resolved more or less.
On another forum someone is saying it is because firefox refuses to pay for a license. Since when do you pay for a license for a file extension that is in the public domain and freely used by zillions?
That person suggested I use OGG files.
06-23-2012, 04:34 AM
jscheuer1

If you're using Flash, it takes care of the file format for you. I'm familiar with the ogg/mp3 issue in Firefox. That only pertains to the raw file without a suitable player. As I say, Flash takes care of that for you.

Perhaps your Flash plugin isn't up to date. Perhaps it's something else. But it's not the mp3.

Also I noticed a problem with the external page:

Code:

. . . dth:200px;} body {margin:2em;} </style> </head> <body> <div style="display:none";> <div id="item1"> <p id="audioplayer_1a">Alte . . .

That semi-colon belongs inside the " mark. Or it can be skipped. But having it outside like that is invalid. Such a fine point generally doesn't matter. But when AJAX is involved, sometimes a tiny thing like that can cause some browsers big headaches.

Anyways, you still haven't told me what the problem is.

What is it?