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.

Template Questions

Anybody used 'Innerfade' script in SilverStripe?


Reply

4 Posts   627 Views

Avatar
arthurdent

20 October 2011 at 3:49pm (Last edited: 20 October 2011 3:53pm), Community Member, 165 Posts

Hi all. Today's question is: Has anybody set up the InnerFade plugin (jQuery-JavaScript-Library) in a SilverStripe site? This is a very useful effect that gets around using Flash for a simple image slideshow. I set it up no probs in HTML CSS but I'm a bit stuck in SS...

www.medienfreunde.com/lab/innerfade

$ is not defined
[Break On This Error] $(document).ready(

... which is where it falls over and dies...

I've put the JavaScript component in the mysite/javascript directory and am using

<% require javascript(sapphire/thirdparty/jquery/jquery.js) %>
<% require javascript(mysite/javascript/jquery.js) %>
<% require javascript(mysite/javascript/jquery.innerfade.js) %>

... but these don't even appear in the parsed page now!

Any takers?

Avatar
arthurdent

20 October 2011 at 7:57pm Community Member, 165 Posts

According to Firebug this is the problem area... it's just I have no idea how to 'define' the 'args'

nodeName(object=[function()], callback=function(), args=undefined)jquery.js (line 22)
object = [function()]
callback = function()
args = undefined

Line 22

for(var i=0,length=object.length,value=object[0];i<length&&callback.call(value,i,value)!==false;value=object[++i]){}}return object;},prop:function(elem,value,type,i,name){if(jQuery.isFunction(value))value=value.call(elem,i);return value&&value.constructor==Number&&type=="curCSS"&&!exclude.test(name)?value+"px":value;},className:{add:function(elem,classNames){jQuery.each((classNames||"").split(/\s+/),function(i,className){if(elem.nodeType==1&&!jQuery.className.has(elem.className,className))elem.className+=(elem.className?" ":"")+className;});},remove:function(elem,classNames){if(elem.nodeType==1)elem.className=classNames!=undefined?jQuery.grep(elem.className.split(/\s+/),function(className){return!jQuery.className.has(classNames,className);}).join(" "):"";},has:function(elem,className){return jQuery.inArray(className,(elem.className||elem).toString().split(/\s+/))>-1;}},swap:function(elem,options,callback){var old={};for(var name in options){old[name]=elem.style[name];elem.style[name]=options[name];}callback.call(elem);for(var name in options)elem.style[name]=old[name];},css:function(elem,name,force){if(name=="width"||name=="height"){var val,props={position:"absolute",visibility:"hidden",display:"block"},which=name=="width"?["Left","Right"]:["Top","Bottom"];function getWH(){val=name=="width"?elem.offsetWidth:elem.offsetHeight;var padding=0,border=0;jQuery.each(which,function(){padding+=parseFloat(jQuery.curCSS(elem,"padding"+this,true))||0;border+=parseFloat(jQuery.curCSS(elem,"border"+this+"Width",true))||0;});val-=Math.round(padding+border);}if(jQuery(elem).is(":visible"))getWH();else

Avatar
Willr

20 October 2011 at 8:21pm Forum Moderator, 5511 Posts

<% require javascript(sapphire/thirdparty/jquery/jquery.js) %>
<% require javascript(mysite/javascript/jquery.js) %>

You should only include 1 version of jQuery. I recommend the sapphire version as then you'll seamlessy be able to integrate other modules like forum, user forms.

Avatar
arthurdent

20 October 2011 at 8:28pm Community Member, 165 Posts

Hi Will... Yes I had tried this as well, still getting the same error

$("ul#slideshow") is null
• $('ul#slideshow').innerfade({

For some reason when I use

<% require javascript(sapphire/thirdparty/jquery/jquery.js) %>

that script is not loaded when I view source?