Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Stuck in a Javascript prison.....HELP


Go to End
Reply


13 Posts   4003 Views

Avatar
jigster

Community Member, 15 Posts

5 August 2009 at 9:58am

Hello please help me I am having difficulites creating a rotating image in my homepage

I'm trying to use the jQuery Cycle Lite Plugin in SilverStripe but always get the error "$("#slideshow) is null

1. put jquery.cycle.lite.js and jquery-1.3.2.js in mysite/javascript

2. in Homepage_Controller I have put

function init() {

      
   Requirements::javascript("../../../mysite/javascript/jquery-1.3.2.min.js");
   Requirements::javascript("../../../mysite/javascript/jquery.cycle.lite.js");
   
   
   
   parent::init();

3. in Homepage.ss I have included the following in the head of the document

<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#slideshow').cycle();
});
</script>

I have tried using the jQuery.noConflict (); code but this returns the error $ is not a function.

I have also used the following code :

jQuery(document).ready(function () {
jQuery('#slideshow').cycle();
});

but this returns the error
jQuery("#slideshow") is not a function,

I feel I have tried everything possible to get this to work but it will not, any help will be appreciated!

Avatar
jamesg

Community Member, 8 Posts

5 August 2009 at 4:51pm

Edited: 05/08/2009 4:56pm

I'm not entirely sure about this but have you tried switching the two lines:

<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.js"></script>

Around so that they're in this order:

<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>

It seems to me that jquery should be included before any jquery plugins.

Hope that helps.

Edit: Although looking at your requirement calls they are in the correct order... can you link to the site your having troubles on that might make things easier?

Avatar
banal

Community Member, 901 Posts

5 August 2009 at 6:13pm

I think the problem occurs, because you're including jQuery and the cycle plugin twice. Once in the init method, and a second time in your template source-code. Get rid of either one of those and load jQuery first (as jamesg pointed out).

Avatar
jigster

Community Member, 15 Posts

5 August 2009 at 11:57pm

Hi thanks for the advice, unfortunately it didnt work, I have attached the source code and if you could let me know if anything is wrong it would be greatly appreciated (as it is the error messgae $ ("#slideshow is null") is displayed in firebug.

The page can be found at

http://www.srmpromotions.com/

Thanks.

Attached Files
Avatar
jigster

Community Member, 15 Posts

5 August 2009 at 11:59pm

Hey thanks for replying, unfortunately it didnt wotk, I have attached the codes t this reply, if you can find any errors I will really appreciate it, thanks alot.

http://www.srmpromotions.com/

Attached Files
Avatar
banal

Community Member, 901 Posts

6 August 2009 at 2:14am

Umm.. It is null, because it doesn't exist? You don't have an element with id="slideshow" in your source. If you want to address items by class, use $(".slideshow"). #slideshow will find the element with the id slideshow

Avatar
jigster

Community Member, 15 Posts

6 August 2009 at 3:10am

Hi, I have followed your advice and modified the code accordingly (#'slideshow' to '.slideshow') but the same error message occurs, if I remove:

$(document).ready(function()

the error message turns to $('.slideshow').cycle is not a function...I am totally lost as to what is going wrong. I think I have tried pretty much everything! would there be any reason why it is not recognising the function?

Avatar
banal

Community Member, 901 Posts

6 August 2009 at 10:01am

Edited: 06/08/2009 10:03am

1) You still include jQuery and the cycle script twice on your page (http://www.srmpromotions.com/)
2) It won't work when the slideshow div is commented out, as in your page
3) I managed to make it work, by downloading your html source, removed the second jQuery and cycle script inclusion, un-commented the div (with class="slideshow") and added the following:

$(function(){
   $(".slideshow").cycle({fx: 'fade'});
});

/* // the above is equivalent to:
jQuery(document).ready(function(){
   jQuery(".slideshow").cycle({fx: 'fade'});
});
*/

/* // remove this old code, of course:
$(".slideshow").cycle({
   fx: 'fade'
});
*/

What you might want to do:
Get a basic understanding of jQuery (http://docs.jquery.com/Tutorials)
Fix your HTML! Invalid HTML may result in non-working or broken scripts.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.srmpromotions.com%2F

Go to Top