21278 Posts in 5728 Topics by 2599 members
| Go to End | ||
| Author | Topic: | 3084 Views |
-
Re: Stuck in a Javascript prison.....HELP
7 August 2009 at 4:49am
Hi thanks for your help I have managed to get it working! I did what you advised and also included:
<script type="text/javascript" src="mysite/javascript/jquery.js"</script>
as well as:
<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>in the body of the page and now it works perfectly! Thanks again!!
-
Re: Stuck in a Javascript prison.....HELP
7 August 2009 at 6:36pm
Well. One jQuery should be enough. Either:
<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>or
<script type="text/javascript" src="mysite/javascript/jquery.js"</script>
<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script> -
Re: Stuck in a Javascript prison.....HELP
7 October 2009 at 5:51pm Last edited: 24 October 2009 5:06pm
I'm trying to do the exact same thing jigster did, but with no luck.
I even grabbed his example files to see where he was putting his code. Still no luck.
I got a static example working just fine with the jquery js files.
But no matter what I try in Silverstripe I can't get the images to rotate, I just get the first image static.
I've managed to get the js includes in the head along with the function banal wrote. I'm guessing my problem lies in the Requirements:: calls that initialize the js files. By viewing the source code from my browser everything is there that's in my working example, the only difference is it being within the SS framework.
Any help would be greatly appreciated.
-
Re: Stuck in a Javascript prison.....HELP
24 October 2009 at 5:20pm Last edited: 24 October 2009 5:31pm
Just as a follow up to this in case any one else has trouble with jQuery and the Cycle.lite, I finally got it working.
It seems it was a conflict between jQuery and prototype over the $ shortcut for calling jQuery.
I had to change Banal's code snippet
$(function(){
$("#slideshow").cycle({fx: 'fade'});
});to this
jQuery(document).ready(function() {
jQuery("#slideshow").cycle({fx: 'fade'});
});That got rid of the conflict between jQuery and prototype js libraries. Just a quick mention of that the "Q" in jQuery is capital. On a *nix system this will not work if that's lowercase as *nix is case sensitive. Don't ask how long it took me to figure that one out.
So my working code ended up being...:
In mysite/code/HomePage.php file I added this
class HomePage_Controller extends Page_Controller {
public function init() {
parent::init();Requirements::javascript("mysite/javascript/jquery-1.3.2.min.js");
Requirements::javascript("mysite/javascript/jquery.cycle.lite.js");
}
}And in my themes/Blackcandy/templates/HomePage.ss file I added this at the bottom -
<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#slideshow").cycle({fx: 'fade'});
});</script>
Then in the CMS for the Home page I added the following HTML
<div id="slideshow">
<a href="link1/"><img src="assets/image1.jpg" /></a>
<a href="link2/"><img src="assets/image2.jpg" /></a>
<a href="link3/"><img src="assets/image3.jpg" /></a>
</div>Hopefully that helps someone out. The trick was to use Firebug to debug the javascript using the console.
I also found a really cool link for working with jQuery along the way: http://encosia.com/2009/09/21/updated-see-how-i-used-firebug-to-learn-jquery/
-
Re: Stuck in a Javascript prison.....HELP
24 October 2009 at 10:54pm
Hi
Glad you resolved you issue. Just as an addition: It's usually good practice to wrap your jQuery stuff in a closure, like this:
;(function($) {
// all your jQuery code here. eg:
$(function(){
// on document ready stuff here.
});
})(jQuery);The red colored wrapper makes sure, that the dollar sign maps to the jQuery function, even when there are other libs. The $(function(){ ... }); call is a shorthand version of $(document).ready(function(){ ... });
Here's some more info regarding SilverStripe and jQuery: http://doc.silverstripe.org/doku.php?id=jquery
| 3084 Views | ||
| Go to Top |
