Question

I have this jQuery plugin called Easy Slider which I’m implementing on this site which displays featured content in animated slide format.

If you visit the site, you’ll see there’s a basic implementation on the home page, and a little more tweaked version on the Rods page. On the Rods page it’s just that I’m using 11 instances of the actual slider.

The thing was originally built for just one instance, but the multiple slides functionality was added in a later version. So all was working well on the homepage until today. Today I implemented the 11 instances on the Rods page (using it to show off gallery style images of the client’s product). In order to implement multiple instances, I had to give each slide container a name with a unique ID, and then pass parameters to alter the jQuery generated “previous” and “next” button markup also.

The markup is something like this:

<div id="slider-1">
    <ul>
        <li><img src="/img/rod.jpg" /></li>
        <li><img src="/img/rod.jpg" /></li>
        <li><img src="/img/rod.jpg" /></li>
    <ul>
</div>

And then the script generates two <span> elements after each slide div that look like this:

<span id="nextBtn"><a href="#">next</a></span>
<span id="prevBtn"><a href="#">previous</a></span>    

It has been really finicky to say the least. I’m nearly pulling my hair out over this because what’s happening just doesn’t make any sense to me.

Here’s some of the craziness I’ve been experiencing…

• Implemented the multiple slides and after some style tweaking I got everything looking and working properly in Firefox; Went to check it in Chrome, where I had an older version of the page up and upon refresh none of my scripts were executing. Went back to FF and upon refresh the scripts in that browser were not executing, although I had not updated the code at all between the refreshes. Further, I checked my error console and there were no errors listed.
• Went back to my code and double checked by looking at my local copy and the live server copy to compare, no differences. So refreshed a few times and cleared the cache and still nothing. Then walked away from my computer to hit the head, came back, refreshed and the jQ scripts were running again! (BTW, not only the EasySlide scripts being affected, but also a script I have immediately after the footer to fade in/out the nav rollover).
• Refreshed in Chrome again, and this time I’m getting a strange behavior where the containing div has an inline height being applied that I’m not sure where it originates. Strangely enough, it looks different between browsers, too. In Chrome, it looks like: height:21px; for each one of the items. In Firefox, it looks like height:271px for the first slide in the list, and height:0px for every other slide in the list. No clue where this is coming from or why. Although, now that I’m writting this, I’m wondering if it’s an issue with my markup where I had to use <div> inside an <ul>?
• Finally, most recently I refreshed again on each browser (and checked also from my Macbook) and again the scripts are not executing.

Perhaps there are just so many issues that I can’t identify what is happening here. I would greatly appreciate another perspective if you can tell…

1. What are you seeing – just one static image for each Rod posting, or a set of sliding images with left/right wooden triangle buttons beside?
2. Why on earth would the scripts be intermittently failing like this?
3. Are the image windows all showing up full height on your browser? If not, are you seeing that inline style and where is coming from.

Sorry for the extensive length here and if much of this comes from simple lack of experience with javascript. I consider myself advanced with HTML & CSS, but very much a beginner with JS. So any relevant input is greatly appreciated.

Answer 1

I see single images on both pages and some errors from PHP trying to fetch content from Twitter at the bottom, seemingly ending the page prematurely. Perhaps you have invocation code for the script somewhere at the bottom of the page, that isn’t getting run because the script bombs out?

Any time you make a connection to an external resource you should be prepared for it to fail, and use checking and/or exception-catching at each step to ensure that if it does fail, it doesn’t bomb your whole script.

Perhaps the Twitter connection is failing because you’re making a new connection to them for every single hit to your pages? That can easily generate the kind of request flooding that many service operators would consider abusive. Twitter may be deliberately blocking or throttling access from your server for this reason.

Both to avoid hitting their server so much, and to improve the speed of your page generation in general, you should limit the number of requests you make to Twitter, so you only fetch new information every so often, and store a cached version in the database to return otherwise.