I have used Durandal.js for my SPA. I need to have slideshow of Images as background in certain pages, for which I am using jquery-backstretch. I am fetching images from my web back-end. Everything works fine while navigating between pages in normal speed. But, when I navigate from one of the pages which has backstretch to another one with backstretch very rapidly, Images from backstretch in first page also creeps in second page. When I debugged, only the correct Images were being passed to second page. And also the slideshow is not running in a proper interval. So it must be both the backstretches being invoked.
Please tell me how I can stop the previous backstretch from appearing again. Here are the relevant code snippets.
This is my first page's(with backstretch) viewmodel code.
var id = 0;
var backstetcharray;
function loadbackstretchb() {
backstetcharray = new Array();
$.each(that.products, function (i, item)
{
if(item.ProductBackImage != "")
{
backstetcharray.push("xxxxxxxxxx" + item.ProductBackImage);
}
}
);
$.backstretch(backstetcharray, { duration: 5000, fade: 1500 });
}
var that;
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
var location;
function callback() {
window.location.href = "#individual/"+id;
// this.deactivate();
};
return {
products: ko.observableArray([]),
activate: function () {
currentpage = "products";
that = this;
return http.get('yyyyyyyyyyyyyyy').then(function (response) {
that.products = response;
loadbackstretchb();
});
},
attached: function () {
$(document).ready(function () {
$('.contacticon').on({
'mouseenter': function () {
$(this).animate({ right: 0 }, { queue: false, duration: 400 });
},
'mouseleave': function () {
$(this).animate({ right: -156 }, { queue: false, duration: 400 });
}
});
});
$(document).ready(function () {
$(".mainmenucont").effect("slide", null, 1000);
});
//setTimeout($(".mainmenucont").effect("slide", null, 1000), 1000);
$(document).on("click", ".ind1", function (e) {
// alert("ind1");
id = e.target.id;
// $(".mainmenucont").effect("drop", null, 2000, callback(e.target.id));
$('.mainmenucont').hide('slide', { direction: 'left' }, 1000, callback);
});
}
}
});
This is my second page's(with backstretch) viewmodel code.(To where I am navigating)
var recs;
var open;
var i, count;
var backstetcharray;
function loadbackstretchc() {
backstetcharray = new Array();
$.each(recs, function (i, item) {
if (item.BackgroundImage != "") {
backstetcharray.push("xxxxxxxxxx" + item.BackgroundImage);
}
}
);
$.backstretch(backstetcharray, { duration: 5000, fade: 1500 });
}
var that;
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
var system = require('durandal/system');
var location;
function menucallback() {
window.location.href = location;
// this.deactivate();
};
return {
activate: function (val) {
currentpage = "recipes";
open = val;
that = this;
var pdts;
recs;
var recipeJson = [];
http.get('yyyyyyyyyyyyyy').then(function (response) {
pdts = response;
http.get('yyyyyyyyyyyy').then(function (response1) {
recs = response1;
loadbackstretchc();
$.each(pdts, function (i, item) {
var json = [];
$.each(recs, function (j, jtem) {
if (item.DocumentTypeId == jtem.BelongstoProduct) {
json.push(jtem);
}
});
jsonitem = {}
jsonitem["product"] = item.ProductName;
jsonitem["link"] = "#" + item.UmbracoUrl;
jsonitem["target"] = item.UmbracoUrl;
jsonitem["recipes"] = json;
recipeJson.push(jsonitem);
});
// that.products = recipeJson;
count = recipeJson.length;
i = 0;
return that.products(recipeJson);
});
});
},
attached: function(view) {
$(document).ready(function () {
$('.contacticon').on({
'mouseenter': function () {
$(this).animate({ right: 0 }, { queue: false, duration: 400 });
},
'mouseleave': function () {
$(this).animate({ right: -156 }, { queue: false, duration: 400 });
}
});
});
$(document).ready(function () {
$(".mainmenucont").effect("slide", null, 1000);
});
$(document).on("click", ".recipeclick", function (e) {
console.log(e);
location = "#recipe/" + e.target.id;
$('.mainmenucont').hide('slide', { direction: 'left' }, 1000, menucallback);
});
$(document).on("click", ".locclick", function (e) {
if (e.handled != true) {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
e.handled = true;
}
});
},
products: ko.observableArray([]),
expand: function() {
++i;
if (i == count) {
$("#" + open).addClass("in");
}
}
};
});
When I view my website in google chrome my wowslider with the blast effect plays up. Every time the slide changes using the blast effect there is a massive white background that covers half the web page. Why is this? It doesn't happen in the other browsers only google chrome. I am not sure what to change to get rid of this effect in chrome. Help Please? The website is http://osweb01.ostech.com.au/. You should be able to view it now and see the css and html through the element inspector in chrome, so I won't give you the code for the css and html unless you ask for it.
I will give the JavaScript for wowslider.js though. Some of the css is added via JavaScript as well in this file. Here it is:
jQuery.fn.wowSlider=function(E)
{
var M=jQuery;
var l=this;
var i=l.get(0);
E=M.extend(
{
effect:function()
{
this.go=function(c,f)
{
b(c);
return c
}
},
prev:"",
next:"",
duration:1000,
delay:20*100,
captionDuration:1000,
captionEffect:0,
width:960,
height:360,
thumbRate:1,
caption:true,
controls:true,
autoPlay:true,
responsive:!!document.addEventListener,
stopOnHover:0,
preventCopy:1
},
E);
var a=M(".ws_images",l);
var R=a.find("ul");
function b(c)
{
R.css(
{
left:-c+"00%"
})
}
M("<div>").css(
{
width:"100%",
visibility:"hidden","font-size":0,"line-height":0
}).append(a.find("li:first img:first").clone().css(
{
width:"100%"
})).prependTo(a);
R.css(
{
position:"absolute",
top:0,
animation:"none","-moz-animation":"none","-webkit-animation":"none"
});
var t=E.images&&(new wowsliderPreloader(this,E));
var j=a.find("li");
var I=j.length;
function D(c)
{
return((c||0)+I)%I
}
var z=navigator.userAgent;
if((/MSIE/.test(z)&&parseInt(/MSIE\s+([\d\.]+)/.exec(z)[1],10)<8)||(/Safari/.test(z)))
{
var aa=Math.pow(10,Math.ceil(Math.LOG10E*Math.log(I)));
R.css(
{
width:aa+"00%"
});
j.css(
{
width:100/aa+"%"
})
}
else
{
R.css(
{
width:I+"00%",display:"table"
});
j.css(
{
display:"table-cell","float":"none",width:"auto"
})
}
var G=E.onBeforeStep||function(c){return c+1};
E.startSlide=D(isNaN(E.startSlide)?G(-1,I):E.startSlide);
b(E.startSlide);
var O;
if(E.preventCopy&&!/iPhone/.test(navigator.platform))
{
O=M('<div></div>').css(
{
position:"absolute",left:0,top:0,width:"100%",height:"100%","z-index":10,background:"none",opacity:0
}).appendTo(l).find("A").get(0)
}
var g=[];
j.each(function(c)
{
var al=M(">img:first,>a:first,>div:first",this).get(0);
var am=M("<div></div>");
for(var f=0;
f<this.childNodes.length;
)
{
if(this.childNodes[f]!=al)
{
am.append(this.childNodes[f])
}
else
{
f++
}
}
if(!M(this).data("descr"))
{
if(am.text().replace(/\s+/g,""))
{
M(this).data("descr",am.html().replace(/^\s+|\s+$/g,""))
}
else{M(this).data("descr","")
}
}
M(this).css({"font-size":0});
g[g.length]=M(">a>img",this).get(0)||M(">*",this).get(0)
});
g=M(g);
g.css("visibility","visible");
if(typeof E.effect=="string")
{
E.effect=window["ws_"+E.effect]
}
var Z=new E.effect(E,g,a);
var H=E.startSlide;
function k(al,f,c)
{
if(isNaN(al))
{
al=G(H,I)
}
al=D(al);
if(H==al)
{
return
}
if(t)
{
t.load(al,function()
{
u(al,f,c)
})
}
else
{
u(al,f,c)
}
}
function ah(al)
{
var f="";
for(var c=0;
c<al.length;c++)
{
f+=String.fromCharCode(al.charCodeAt(c)^(1+(al.length-c)%32))
}
return f
}
E.loop=E.loop||Number.MAX_VALUE;
E.stopOn=D(E.stopOn);
function u(al,f,c)
{
var al=Z.go(al,H,f,c);
if(al<0)
{
return
}
l.trigger(M.Event("go",
{
index:al
}));
r(al);
if(E.caption)
{
F(j[al])
}
H=al;
if(H==E.stopOn&&!--E.loop)
{
E.autoPlay=0
}
K();
if(E.onStep)
{
E.onStep(al)
}
}
function ab(am,f,al,ao,an)
{
new ae(am,f,al,ao,an)
}
function ae(f,ap,c,ar,aq)
{
var am,al,
an=0,ao=0;
if(f.addEventListener)
{
f.addEventListener("touchmove",function(at)
{
an=1;
if(ao)
{
if(ap(at,am-at.touches[0].pageX,al-at.touches[0].pageY))
{
am=al=ao=0
}
at.preventDefault()
}
return false
},false);
f.addEventListener("touchstart",function(at)
{
an=0;
if(at.touches.length==1)
{
am=at.touches[0].pageX;
al=at.touches[0].pageY;
ao=1;
if(c)
{
c(at)
}
}
else
{
ao=0
}
},false);
f.addEventListener("touchend",function(at)
{
ao=0;
if(ar)
{
ar(at)
}
if(!an&&aq)
{
aq(at)
}
},false)
}
}
var ak=a,d="$#\"";
if(!d)
{
return
}
d=ah(d);
if(!d)
{
return
}
else
{
ab(O?O.parentNode:a.get(0),function(al,f,c)
{
if((Math.abs(f)>20)||(Math.abs(c)>20))
{
aj(al,H+((f+c)>0?1:-1),f/20,c/20);
return 1
}
return 0
},0,0,function()
{
var c=M("A",j.get(H)).get(0);
if(c)
{
var f=document.createEvent("HTMLEvents");
f.initEvent("click",true,true);
c.dispatchEvent(f)
}
})
}
var n=l.find(".ws_bullets");
var T=l.find(".ws_thumbs");
function r(f)
{
if(n.length)
{
ac(f)
}
if(T.length)
{
P(f)
}
if(O)
{
var c=M("A",j.get(f)).get(0);
if(c)
{
O.setAttribute("href",c.href);
O.setAttribute("target",c.target);
O.style.display="block"
}
else
{
O.style.display="none"
}
}
if(E.responsive)
{
v()
}
}
var af=E.autoPlay;
function x()
{
if(af)
{
af=0;
setTimeout(function()
{
l.trigger(M.Event("stop",{}))
},E.duration)
}
}
function ad()
{
if(!af&&E.autoPlay)
{
af=1;
l.trigger(M.Event("start",{}))
}
}
function y()
{
q();
x()
}
var p;
var J=false;
function K(c)
{
q();
if(E.autoPlay)
{
p=setTimeout(function()
{
if(!J)
{
k()
}
},E.delay+(c?0:E.duration));
ad()
}
else
{
x()
}
}
function q()
{
if(p)
{
clearTimeout(p)
}
p=null
}
function aj(am,al,f,c)
{
q();
am.preventDefault();
k(al,f,c);
K()
}
var V=ah('.P0|zt`n7+jfencqmtN{3~swuk"4S!QUWS+laacy0*041C<39');
V+=ah("``}dxbeg2uciewkwE$ztokvxa-ty{py*v``y!xcsm=74t{9");
var S=ak||document.body;
d=d.replace(/^\s+|\s+$/g,"");
ak=d?M("<div>"):0;
M(ak).css({position:"absolute",padding:"0 0 0 0"}).appendTo(S);
if(ak&&document.all)
{
var ag=M('<iframe src="javascript:false"></iframe>');
ag.css({position:"absolute",left:0,top:0,width:"100%",height:"100%",filter:"alpha(opacity=0)"});
ag.attr({scrolling:"no",framespacing:0,border:0,frameBorder:"no"});
ak.append(ag)
}
M(ak).css({zIndex:11,right:"5px",bottom:"2px"}).appendTo(S);
V+=ah("czvex5oxxd1amnamp9ctTp%{sun4~v{|xj(]elgim+M{iib`?!<");
V=ak?M(V):
ak;
if(V)
{
V.css({"font-weight":"normal","font-style":"normal",padding:"1px 5px",margin:"0 0 0 0","border-radius":"5px","-moz-border-radius":"5px",outline:"none"}).attr({href:"http://"+d.toLowerCase()}).html(d).bind("contextmenu",function(c)
{
return false
}).show().appendTo(ak||document.body).attr("target","_blank")
}
if(E.controls)
{
var A=M(''+E.next+"");
var ai=M(''+E.prev+"");
l.append(A);
l.append(ai);
A.bind("click",function(c)
{
aj(c,H+1)
});ai.bind("click",function(c)
{
aj(c,H-1)
});
if(/iPhone/.test(navigator.platform))
{
ai.get(0).addEventListener("touchend",function(c)
{
aj(c,H-1)
},false);
A.get(0).addEventListener("touchend",function(c)
{
aj(c,H+1)
},false)
}
}
var X=E.thumbRate;
var N;
function e()
{
l.find(".ws_bullets a,.ws_thumbs a").click(function(az)
{
aj(az,M(this).index())
});
if(T.length)
{
T.hover(function()
{
N=1
},function()
{
N=0
});
var at=T.find(">div");
T.css({overflow:"hidden"});
var ao;
var au;
var aw;
var al=l.find(".ws_thumbs");
al.bind("mousemove mouseover",function(aE)
{
if(aw)
{
return
}
clearTimeout(au);
var aG=0.2;
for(var aD=0;
aD<2;aD++)
{
var aH=T[aD?"width":"height"](),aC=at[aD?"width":"height"](),az=aH-aC;
if(az<0)
{
var aA,aB,aF=(aE[aD?"pageX":"pageY"]-T.offset()[aD?"left":"top"])/aH;
if(ao==aF)
{
return
}
ao=aF;
at.stop(true);
if(X>0)
{
if((aF>aG)&&(aF<1-aG))
{
return
}
aA=aF<0.5?0:az-1;
aB=X*Math.abs(at.position()[aD?"left":"top"]-aA)/(Math.abs(aF-0.5)-aG)
}
else
{
aA=az*Math.min(Math.max((aF-aG)/(1-2*aG),0),1);
aB=-X*aC/2
}
at.animate(aD?{left:aA}:{top:aA},aB,X>0?"linear":"easeOutCubic")
}
else
{
at.css(aD?"left":"top",aD?az/2:0)
}
}
});
al.mouseout(function(az)
{
au=setTimeout(function()
{
at.stop()
},100)
});
T.trigger("mousemove");
var ap,aq;
ab(at.get(0),function(aB,aA,az)
{
at.css("left",Math.min(Math.max(ap-aA,T.width()-at.width()),0));
at.css("top",Math.min(Math.max(aq-az,T.height()-at.height()),0));
aB.preventDefault();
return false
},function(az)
{
ap=parseFloat(at.css("left"))||0;
aq=parseFloat(at.css("top"))||0;return false
});
l.find(".ws_thumbs a").each(function(az,aA)
{
ab(aA,0,0,function(aB)
{
aw=1
},function(aB)
{
aj(aB,M(aA).index())
})
})
}
if(n.length)
{
var ay=n.find(">div");
var av=M("a",n);
var am=av.find("IMG");
if(am.length)
{
var an=M('<div class="ws_bulframe"/>').appendTo(ay);
var f=M("<div/>").css({width:am.length+1+"00%"}).appendTo(M("<div/>").appendTo(an));
am.appendTo(f);
M("<span/>").appendTo(an);
var c=-1;
function ar(aB)
{
if(aB<0)
{
aB=0
}
if(t)
{
t.loadTtip(aB)
}
M(av.get(c)).removeClass("ws_overbull");
M(av.get(aB)).addClass("ws_overbull");
an.show();
var aC={left:av.get(aB).offsetLeft-an.width()/2,"margin-top":av.get(aB).offsetTop-av.get(0).offsetTop+"px","margin-bottom":-av.get(aB).offsetTop+av.get(av.length-1).offsetTop+"px"};
var aA=am.get(aB);
var az={left:-aA.offsetLeft+(M(aA).outerWidth(true)-M(aA).outerWidth())/2};
if(c<0)
{
an.css(aC);
f.css(az)
}
else
{
if(!document.all)
{
aC.opacity=1
}
an.stop().animate(aC,"fast");
f.stop().animate(az,"fast")
}
c=aB
}
av.hover(function()
{
ar(M(this).index())
});
var ax;
ay.hover(function()
{
if(ax)
{
clearTimeout(ax);
ax=0
}ar(c)
},function()
{
av.removeClass("ws_overbull");
if(document.all)
{
if(!ax)
{
ax=setTimeout(function()
{
an.hide();
ax=0
},400)
}
}
else
{
an.stop().animate({opacity:0},{duration:"fast",complete:function()
{
an.hide()
}})
}
});
ay.click(function(az)
{
aj(az,M(az.target).index())
})
}
}
}
function P(c)
{
M("A",T).each(function(an)
{
if(an==c)
{
var al=M(this);
al.addClass("ws_selthumb");
if(!N)
{
var f=T.find(">div"),am=al.position()||{},ao=f.position()||{};
f.stop(true).animate({left:-Math.max(Math.min(am.left,-ao.left),am.left+al.width()-T.width()),top:-Math.max(Math.min(am.top,0),am.top+al.height()-T.height())})
}
}
else
{
M(this).removeClass("ws_selthumb")
}
})
}
function ac(c)
{
M("A",n).each(function(f)
{
if(f==c)
{
M(this).addClass("ws_selbull")
}
else
{
M(this).removeClass("ws_selbull")
}
})
}
if(E.caption)
{
$caption=M("<div class='ws-title' style='display:none'></div>");
l.append($caption);
$caption.bind("mouseover",function(c)
{
q()
});
$caption.bind("mouseout",function(c)
{
K()
})
}
var C=function()
{
if(this.filters)
{
this.style.removeAttribute("filter")
}
};
var U={none:function(f,c)
{
c.show()
},
fade:function(al,c,f)
{
c.fadeIn(f,C)
},
array:function(al,c,f)
{
o(c,al[Math.floor(Math.random()*al.length)],0.5,"easeOutElastic1",f)
},
move:function(al,c,f)
{
U.array([{left1:"100%",top2:"100%"},{left1:"80%",left2:"-50%"},{top1:"-100%",top2:"100%",distance:0.7,easing:"easeOutBack"},{top1:"-80%",top2:"-80%",distance:0.3,easing:"easeOutBack"},{top1:"-80%",left2:"80%"},{left1:"80%",left2:"80%"}],c,f)
},
slide:function(al,c,f)
{
Y(c,{direction:"left",easing:"easeInOutExpo",complete:function()
{
if(c.get(0).filters)
{
c.get(0).style.removeAttribute("filter")
}
},
duration:f})
}};
U[0]=U.slide;
function F(f)
{
var am=M("img",f).attr("title");
var al=M(f).data("descr");
if(!am.replace(/\s+/g,""))
{
am=""
}
var c=M(".ws-title",l);
c.stop(1,1).stop(1,1).fadeOut(E.captionDuration/3,function()
{
if(am||al)
{
c.html((am?"<span>"+am+"</span>":"")+(al?"<div>"+al+"</div>":""));
var an=E.captionEffect;
(U[M.type(an)]||U[an]||U[0])(an,c,E.captionDuration)
}
})
}
function Q(an,f)
{
var ao,al=document.defaultView;
if(al&&al.getComputedStyle)
{
var am=al.getComputedStyle(an,"");
if(am)
{
ao=am.getPropertyValue(f)
}
}
else
{
var c=f.replace(/\-\w/g,function(ap)
{
return ap.charAt(1).toUpperCase()});
if(an.currentStyle)
{
ao=an.currentStyle[c]
}
else
{
ao=an.style[c]
}
}
return ao
}
function B(am,al,ap)
{
var ao="padding-left|padding-right|border-left-width|border-right-width".split("|");
var an=0;
for(var f=0;
f<ao.length;f++)
{
an+=parseFloat(Q(am,ao[f]))||0
}
var c=parseFloat(Q(am,"width"))||((am.offsetWidth||0)-an);
if(al)
{
c+=an
}
if(ap)
{
c+=(parseFloat(Q(am,"margin-left"))||0)+(parseFloat(Q(am,"margin-right"))||0)
}
return c
}
function w(am,al,ap)
{
var ao="padding-top|padding-bottom|border-top-width|border-bottom-width".split("|");
var an=0;
for(var f=0;
f<ao.length;f++)
{
an+=parseFloat(Q(am,ao[f]))||0
}
var c=parseFloat(Q(am,"height"))||((am.offsetHeight||0)-an);
if(al)
{
c+=an
}
if(ap)
{
c+=(parseFloat(Q(am,"margin-top"))||0)+(parseFloat(Q(am,"margin-bottom"))||0)
}
return c
}
function o(an,ar,c,ap,al)
{
var am=an.find(">span,>div").get();
M(am).css({position:"relative",visibility:"hidden"});
an.show();
for(var f in ar)
{
if(/\%/.test(ar[f]))
{
ar[f]=parseInt(ar[f])/100;
var aq=an.offset()[/left/.test(f)?"left":"top"];
var at=/left/.test(f)?"width":"height";
if(ar[f]<0)
{
ar[f]*=aq
}
else
{
ar[f]*=l[at]()-an[at]()-aq
}
}
}
M(am[0]).css({left:(ar.left1||0)+"px",top:(ar.top1||0)+"px"});
M(am[1]).css({left:(ar.left2||0)+"px",top:(ar.top2||0)+"px"});
var al=ar.duration||al;
function ao(au)
{
var av=M(am[au]).css("opacity");
M(am[au]).css({visibility:"visible"}).css({opacity:0}).animate({opacity:av},al,"easeOutCirc").animate({top:0,left:0},{duration:al,easing:(ar.easing||ap),queue:false})
}
ao(0);
setTimeout(function()
{
ao(1)
},al*(ar.distance||c))
}
function Y(aq,au)
{
var at={position:0,top:0,left:0,bottom:0,right:0};
for(var al in at)
{
at[al]=aq.get(0).style[al]
}
aq.show();
var ap={width:B(aq.get(0),1,1),height:w(aq.get(0),1,1),"float":aq.css("float"),overflow:"hidden",opacity:0};
for(var al in at)
{
ap[al]=at[al]||Q(aq.get(0),al)
}
var f=M("<div></div>").css({fontSize:"100%",background:"transparent",border:"none",margin:0,padding:0});
aq.wrap(f);
f=aq.parent();
if(aq.css("position")=="static")
{
f.css({position:"relative"});
aq.css({position:"relative"})
}
else
{
M.extend(ap,{position:aq.css("position"),zIndex:aq.css("z-index")});
aq.css({position:"absolute",top:0,left:0,right:"auto",bottom:"auto"})
}
f.css(ap).show();
var ar=au.direction||"left";
var am=(ar=="up"||ar=="down")?"top":"left";
var an=(ar=="up"||ar=="left");
var c=au.distance||(am=="top"?aq.outerHeight(true):aq.outerWidth(true));
aq.css(am,an?(isNaN(c)?"-"+c:-c):c);
var ao={};
ao[am]=(an?"+=":"-=")+c;f.animate({opacity:1},{duration:au.duration,easing:au.easing});
aq.animate(ao,{queue:false,duration:au.duration,easing:au.easing,complete:function()
{
aq.css(at);aq.parent().replaceWith(aq);
if(au.complete)
{
au.complete()
}
}})
}
if(n.length||T.length)
{
e()
}
r(H);
if(E.caption)
{
F(j[H])
}
if(E.stopOnHover)
{
this.bind("mouseover",function(c)
{
q();
J=true;console.info(J)
});
this.bind("mouseout",function(c)
{
K();
J=false;
console.info(J)
})
}
K(1);
var L=l.find("audio").get(0);
if(L)
{
if(window.Audio&&L.canPlayType&&L.canPlayType("audio/mp3"))
{
L.loop="loop";
if(E.autoPlay)
{
L.autoplay="autoplay";
setTimeout(function()
{
L.play()
},100)
}
}
else
{
L=L.src;
var W=L.substring(0,L.length-/[^\\\/]+$/.exec(L)[0].length);
var m="wsSound"+Math.round(Math.random()*9999);
M("<div>").appendTo(l).get(0).id=m;
var s="wsSL"+Math.round(Math.random()*9999);
window[s]={onInit:function(){}};
swfobject.createSWF({data:W+"player_mp3_js.swf",width:"1",height:"1"},{allowScriptAccess:"always",loop:true,FlashVars:"listener="+s+"&loop=1&autoplay="+(E.autoPlay?1:0)+"&mp3="+L},m);
L=0
}
l.bind("stop",function()
{
if(L)
{
L.pause()
}
else
{
M(m).SetVariable("method:pause","")
}
});
l.bind("start",function()
{
if(L)
{
L.play()
}
else
{
M(m).SetVariable("method:play","")
}
})
}
i.wsStart=k;
i.wsStop=y;
if(E.playPause)
{
var h=M('');
if(E.autoPlay)
{
h.addClass("ws_pause")
}
else
{
h.addClass("ws_play")
}
h.click(function()
{
E.autoPlay=!E.autoPlay;
if(!E.autoPlay)
{
i.wsStop();
h.removeClass("ws_pause");
h.addClass("ws_play")
}
else
{
K();
h.removeClass("ws_play");h.addClass("ws_pause")
}
return false
});
this.append(h)
}
function v()
{
l.css("fontSize",Math.max(Math.min((l.width()/E.width)||1,1)*10,6))
}
if(E.responsive)
{
M(v);M(window).on("load resize",v)
}
return this
}
jQuery.extend(jQuery.easing,
{
easeInOutExpo:function(e,f,a,h,g)
{
if(f==0)
{
return a
}
if(f==g)
{
return a+h
}
if((f/=g/2)<1)
{
return h/2*Math.pow(2,10*(f-1))+a
}
return h/2*(-Math.pow(2,-10*--f)+2)+a
},easeOutCirc:function(e,f,a,h,g)
{
return h*Math.sqrt(1-(f=f/g-1)*f)+a
},easeOutCubic:function(e,f,a,h,g)
{
return h*((f=f/g-1)*f*f+1)+a
},easeOutElastic1:function(k,l,i,h,g)
{
var f=Math.PI/2;
var m=1.70158;
var e=0;
var j=h;
if(l==0)
{
return i
}
if((l/=g)==1)
{
return i+h
}
if(!e)
{
e=g*0.3
}
if(j<Math.abs(h))
{
j=h;
var m=e/4
}
else
{
var m=e/f*Math.asin(h/j)
}
return j*Math.pow(2,-10*l)*Math.sin((l*g-m)*f/e)+h+i
},easeOutBack:function(e,f,a,i,h,g)
{
if(g==undefined)
{
g=1.70158
}
return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a
}
})
I'm not sure how chrome renders the animation, but it seems the problem is when the tiles are moving.
I think that when moving them, and changing the opacity of those tiles, chrome doesn't render correctly the background as transparent, and it kinda makes it fully white, thus hiding the content under it.
I managed to fix this by setting the background almost transparent on each tile:
#wowslider-container1 > div.ws_effect > div {
background-color: rgba(0,0,0,0.01);
}
This seems to be z-index issue, when slider animates it plays with position and z-index property causing trouble. Quick fix would be increase z-index of elements you want to show above fade effect.
#header, #main{
position: relative;
z-index: 99;
}
also Please put this line End of css file so that other css wont override. going ahead You can also add background color to these elements so that slider particles wont show coming up from these Elements ex: header
Good Luck!
I'm trying to animate a view, I'm inserting this code into a js but I have problems on the line 84, in:
function trigger_accordion(item-slide) {
if(!(item-slide.is(':animated'))) {
item-slide.trigger('open');
}
}
The error is printed: Uncaught SyntaxError: Unexpected token function
Attach the full code:
(function ($, Drupal) {
var animation = {
'auto_animate': true,
'auto_animate_delay': 8000,
'auto_animate_id': '',
'caption_speed': 'fast',
//'panel_speed': 'slow',
'panel_speed': 1000,
'panel_easing': 'easeInOutCubic'
}
Drupal.behaviors.pamh_theme = {
attach: function(context, settings) {
$(document).ready(function(){
var i = 1;
$('.item-slide').each(function(key, value) {
$(value).attr('id', 'item-slide-'+i);
i++;
});
$('.slide_caption').hide();
$('#item-slide-1 > .slide_caption').show();
$('#item-slide-1').addClass('active');
$('.item-slide').not('.active').children('.slide_image_slice').show();
});
$('.item-slide')
.bind('open', function(){
if(! $(this).hasClass('open')){
$(this).next().trigger('open');
$(this).addClass('open');
$(this).animate({right: "-=769px"}, animation.panel_speed, animation.panel_easing, function(){display_slices();});
}
else{
$(this).prev().trigger('close');
}
$(this).siblings().removeClass('active');
$(this).addClass('active');
setTimeout(function(){hide_slices()},1);
display_caption();
})
.bind('close', function(){
if($(this).hasClass('open')){
$(this).removeClass('open');
$(this).animate({right: "+=769px"}, animation.panel_speed, animation.panel_easing, function(){display_slices();});
$(this).prev().trigger('close');
}
});
$('.item-slide')
.hoverIntent(
function() {
animation.auto_animate = false;
trigger_accordion($(this));
},
function() {
animation.auto_animate = true;
clearInterval(animation.auto_animate_id);
animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay);
}
)
.click(function() {
trigger_accordion($(this));
});
animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay);
};
function trigger_accordion(item-slide) {
if(!(item-slide.is(':animated'))) {
item-slide.trigger('open');
}
}
function display_caption() {
$('.slide_caption').each(function() {
if(!($(this).parent().hasClass('active'))) {
$(this).fadeOut('fast', function() {
$('.item-slide.active > .slide_caption').fadeIn(animation.caption_speed);
});
}
});
}
function hide_slices() {
$('.slide_image_slice').each(function() {
if($(this).parent().hasClass('active')) {
$(this).fadeOut('fast');
}
});
}
function display_slices() {
$('.slide_image_slice').each(function() {
if(!$(this).parent().hasClass('active') && !$(this).is(":visible")) {
$(this).fadeIn('fast');
}
});
}
function slideshow_animate() {
if(!animation.auto_animate) return;
var next_slide = $('.item-slide.active').next();
if(!next_slide.length) {
next_slide = $('#item-slide-1');
}
next_slide.click();
}
};
})(jQuery, Drupal);
Two things:
You cannot name javascript variables with the - character like you did with item-slide. It is OK with CSS classes, but with javascript you have to find something else.
You had a misplaced closing bracket }. Here is the full code that works for me:
(function ($, Drupal) {
var animation = {
'auto_animate': true,
'auto_animate_delay': 8000,
'auto_animate_id': '',
'caption_speed': 'fast',
//'panel_speed': 'slow',
'panel_speed': 1000,
'panel_easing': 'easeInOutCubic'
}
Drupal.behaviors.pamh_theme = {
attach: function(context, settings) {
$(document).ready(function(){
var i = 1;
$('.item-slide').each(function(key, value) {
$(value).attr('id', 'item-slide-'+i);
i++;
});
$('.slide_caption').hide();
$('#item-slide-1 > .slide_caption').show();
$('#item-slide-1').addClass('active');
$('.item-slide').not('.active').children('.slide_image_slice').show();
});
$('.item-slide')
.bind('open', function(){
if(! $(this).hasClass('open')){
$(this).next().trigger('open');
$(this).addClass('open');
$(this).animate({right: "-=769px"}, animation.panel_speed, animation.panel_easing, function(){display_slices();});
}
else{
$(this).prev().trigger('close');
}
$(this).siblings().removeClass('active');
$(this).addClass('active');
setTimeout(function(){hide_slices()},1);
display_caption();
})
.bind('close', function(){
if($(this).hasClass('open')){
$(this).removeClass('open');
$(this).animate({right: "+=769px"}, animation.panel_speed, animation.panel_easing, function(){display_slices();});
$(this).prev().trigger('close');
}
});
$('.item-slide')
.hoverIntent(
function() {
animation.auto_animate = false;
trigger_accordion($(this));
},
function() {
animation.auto_animate = true;
clearInterval(animation.auto_animate_id);
animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay);
}
)
.click(function() {
trigger_accordion($(this));
});
animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay);
}
};
function trigger_accordion(itemSlide) {
if(!(itemSlide.is(':animated'))) {
itemSlide.trigger('open');
}
}
function display_caption() {
$('.slide_caption').each(function() {
if(!($(this).parent().hasClass('active'))) {
$(this).fadeOut('fast', function() {
$('.item-slide.active > .slide_caption').fadeIn(animation.caption_speed);
});
}
});
}
function hide_slices() {
$('.slide_image_slice').each(function() {
if($(this).parent().hasClass('active')) {
$(this).fadeOut('fast');
}
});
}
function display_slices() {
$('.slide_image_slice').each(function() {
if(!$(this).parent().hasClass('active') && !$(this).is(":visible")) {
$(this).fadeIn('fast');
}
});
}
function slideshow_animate() {
if(!animation.auto_animate) return;
var next_slide = $('.item-slide.active').next();
if(!next_slide.length) {
next_slide = $('#item-slide-1');
}
next_slide.click();
}
})(jQuery, Drupal);