J-Query cycle plugin

JavaScript
1

I’m making a site at bomamfg.com

I’m having some issues with the J-Query cycle plugin. It works in IE and Firefox, but I can’t get it to work in chrome. Any assistance would be greatly appreciated.

bomamfg.com/Materials.html (click the Recycled Glass link)

I have a feeling its something to do with the other Jquery I have running on the page as it works fine if it is run on its own separate page (wont see the images cycling through due to the linking being changed).

2

Gotcha, that makes sense.

3

I have cleaned up my code on my materials page, and have removed the slide show code from it, now, the slide show code is on the page that is being loaded.

It is still working in IE and FF, but is still failing in chrome. I thought this would work due to my scipt loading that page then showing it, so it should technically enable once the page (and hence the script) is fully loaded.

However, as usall, its still failing

I’m not sure if I stated this eariler, but if you hard code the page in the URL (http://bomamfg.com/Materials/RecycledGlass.html) the slide show works in chrome. I’m still leaning towards a conflict between the 2 scripts but have no idea how to test if thats the case or not.

4

I think your misunderstanding the problem, I’m wanting to get rid of the flash all together (all the other pages, the pewter, etc) all are using flash, while the recycled glass page is using the Jquery cycle (what i’m trying to change them all to)

So to say the other pages are “working” is not technically correct cause there different approaches.

5

Okay, now we’re getting somewhere.

Because the content is not on the page when the page loads, you cannot start the slideshow cycle process when the page loads.

Instead, because the content is added to the page when the menu button us clicked, you need the slideshow cycle to occur after that content has loaded.

The easiest way to do this is to use the jQuery live function, set perhaps to the load event for the slideshow.

Failing that, you can update the script the loads the content, to start the slideshow process too.

6

That’s just a warning. It’s something you’ll want to investigate later on, perhaps at our Server Management forum, but it doesn’t stop jQuery from working as per normal.

You have no gallery on the page until one of the links are clicked. Because the page has no gallery items when it loads, there will be zero elements found for the gallery, which is why you get that warning.

It’s not related to the problem that you’re facing, though you later on may want to make your script a little bit smarter so that the situation doesn’t occur. That would be for a different thread.

7

Well you should get some sleep! I’m off to work now but will be checking these forums diligently after! thank you for helping me!

8

Nor do I at this stage, but at nearly 6am local time I’m being a very naughty boy for staying up so late.

–
Paul Wilkins

9

Would placing


$('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});

Inside the load content function solve this issue?

Actually, shouldn’t having the above code on the sheet thats being loaded solve this problem?, as the function will be called when the page is loaded? This would logically make sense to me (even though I’m rather bad at JS). Plus I still don’t understand why it works in FF and IE lol

10

Then investigate why the nearly identical pages for Pewter, Crushed Marble, and Cold Cast Bronze work with no issue, yet the Recycled Glass one doesn’t.

Does Recycled Glass work when you replace it with one of the other pages?
Yes: there’s an issue with the content. No: the page can’t be found.

Remove parts of the now working (though wrong content) for Recycled Glass. Use the now-working page (though with wrong content) to find out what causes the gallery to work and to not work. Does it still work when you replace the heading? The information? Bring the original Recycled Glass headings and content in. Does it still work?

This is all a part of the debugging process, something which you will be doing a lot of the time when you’re a programmer.

11

Found this today after fixing a different error

Resource interpreted as script but transferred with MIME type text/html. jquery-1.4.2.js
[cycle] terminating; zero elements found by selector jquery.cycle.all.2.72.js:33

Not sure what to do about it though

12

Didn’t help at all

13

Yeah, you know that showNewContent function? That’s the one that runs once the new content on the page.

With an Ajax request, that showNewContent doesn’t actually occur until long after the script has completed.

The upshot of this is that your showNewContent function will need to contain the slideshow code, or perhaps for better encapsulation, the showNewContent should trigger at the end of it a separate function that does the slideshow stuff itself.

14

Hum… I believe I attempted to do this earlier however it failed, perhaps I did it incorrectly?

I took my

$(‘.slideshow’).cycle({
fx: ‘fade’ // choose your transition type, ex: fade, scrollUp, shuffle, etc…
});
});

and added it to my Css/materialNav.js like so



$(document).ready(function(){

//...........................................code above(same as this but different link

$('#recycled').click(function(){
        var toLoad = "Materials/RecycledGlass.html";      

        $('#retail').fadeOut('fast',loadContent);     
                                                                                   
         
        function loadContent() { 
            $('#retail').load(toLoad,'',showNewContent());
        }
        function showNewContent() {      
            $('#retail').fadeIn('normal');
        }
$('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
        return false;    
    });
//   ................ some more of the same for a different link
});
15

Thanks for the reply!

However I have already tried to remove the swf on all the pages, and see if it works then to no avail

16

hum. I havnet tried that. i’ll try that tonight.will post my results asap!

however now that i have put more thought into it. i have deleted the swf object on the materials page which elimited that error. but didn’t fix the cycle problem. will try your suggestion anyways

17

I’s complaining that it can’t find the swf objcet because the http://bomamfg.com/Materials/RecycledGlass.html page doesn’t have a swf object.

The other pages for Pewter, Crushed Marble, and Cold Cast Bronze do have an appropriate swf object, but the Recycled Glass page does not.

18

The other pages seem to work correctly because they have the swf object in them.

Have you tried ADDING the swf object to the Recycled Glass page, in the same way that it’s there for the other pages?

19

This is what the javascript console in chrome says.

see attach

20

anyone able to help with this?