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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Template Questions /

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

Anybody used 'Innerfade' script in SilverStripe?


Go to End


4 Posts   999 Views

Avatar
mhdesign

Community Member, 216 Posts

20 October 2011 at 3:49pm

Edited: 20/10/2011 3:53pm

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
mhdesign

Community Member, 216 Posts

20 October 2011 at 7:57pm

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

Forum Moderator, 5523 Posts

20 October 2011 at 8:21pm

<% 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
mhdesign

Community Member, 216 Posts

20 October 2011 at 8:28pm

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?