Popup should close when i clicked anywhere Jquery - javascript

I'm really new on Jquery and I have this code that I'm playing with. I can't find where is the script in this code that lets you close the popup anywhere. If none what and where should I put the code.
(function($) {
var ie6 = (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 && parseInt(jQuery.browser.version, 10) > 4);
if ($.proxy === undefined)
{
$.extend({
proxy: function( fn, thisObject ) {
if ( fn )
{
proxy = function() { return fn.apply( thisObject || this, arguments ); };
};
return proxy;
}
});
};
$.extend( jQuery.easing,
{
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
});
$.extend($.expr[':'], {
value: function(a) {
return $(a).val();
}
});
$.extend({
MsgBoxObject: {
defaults : {
name : 'jquery-msgbox',
zIndex : 10000,
width : 400,
height : 310,
background : '#FFFFFF',
modal : true,
overlay : {
'background-color' : '#000000',
'opacity' : 0.5
},
showDuration : 200,
closeDuration : 100,
moveDuration : 500,
shake : {
'distance' : 10,
'duration' : 100,
'transition' : 'easeOutBack',
'loops' : 2
},
emergefrom : 'top'
},
options : {},
esqueleto : {
msgbox : [],
wrapper : [],
form : [],
buttons : []
},
visible : false,
i : 0,
animation : false,
overlay : {
create: function(options) {
this.options = options;
this.element = $('<div id="'+new Date().getTime()+'"></div>');
this.element.css($.extend({}, {
'position' : 'fixed',
'top' : 0,
'left' : 0,
'opacity' : 0,
'display' : 'none',
'z-index' : this.options.zIndex
}, this.options.style));
this.element.click( $.proxy(function(event) {
if (this.options.hideOnClick)
{
if ($.isFunction(this.options.callback))
{
this.options.callback();
}
else
{
this.hide();
}
}
event.preventDefault();
}, this));
this.hidden = true;
this.inject();
return this;
},
inject: function() {
this.target = $(document.body);
this.target.append(this.element);
if(ie6)
{
this.element.css({'position': 'absolute'});
var zIndex = parseInt(this.element.css('zIndex'));
if (!zIndex)
{
zIndex = 1;
var pos = this.element.css('position');
if (pos == 'static' || !pos)
{
this.element.css({'position': 'relative'});
}
this.element.css({'zIndex': zIndex});
}
zIndex = (!!(this.options.zIndex || this.options.zIndex === 0) && zIndex > this.options.zIndex) ? this.options.zIndex : zIndex - 1;
if (zIndex < 0)
{
zIndex = 1;
}
this.shim = $('<iframe id="IF_'+new Date().getTime()+'" scrolling="no" frameborder=0 src=""></div>');
this.shim.css({
zIndex : zIndex,
position : 'absolute',
top : 0,
left : 0,
border : 'none',
width : 0,
height : 0,
opacity : 0
});
this.shim.insertAfter(this.element);
$('html, body').css({
'height' : '100%',
'width' : '100%',
'margin-left' : 0,
'margin-right': 0
});
}
},
resize: function(x, y) {
this.element.css({ 'height': 0, 'width': 0 });
if (this.shim) this.shim.css({ 'height': 0, 'width': 0 });
var win = { x: $(document).width(), y: $(document).height() };
this.element.css({
'width' : '100%',
'height' : y ? y : win.y
});
if (this.shim)
{
this.shim.css({ 'height': 0, 'width': 0 });
this.shim.css({
'position': 'absolute',
'left' : 0,
'top' : 0,
'width' : this.element.width(),
'height' : y ? y : win.y
});
}
return this;
},
show: function() {
if (!this.hidden) return this;
if (this.transition) this.transition.stop();
this.target.bind('resize', $.proxy(this.resize, this));
this.resize();
if (this.shim) this.shim.css({'display': 'block'});
this.hidden = false;
this.transition = this.element.fadeIn(this.options.showDuration, $.proxy(function(){
this.element.trigger('show');
}, this));
return this;
},
hide: function() {
if (this.hidden) return this;
if (this.transition) this.transition.stop();
this.target.unbind('resize');
if (this.shim) this.shim.css({'display': 'none'});
this.hidden = true;
this.transition = this.element.fadeOut(this.options.closeDuration, $.proxy(function(){
this.element.trigger('hide');
this.element.css({ 'height': 0, 'width': 0 });
}, this));
return this;
}
},
create: function() {
this.options = $.extend(true, this.defaults, this.options);
this.overlay.create({
style : this.options.overlay,
hideOnClick : !this.options.modal,
zIndex : this.options.zIndex-1,
showDuration : this.options.showDuration,
closeDuration : this.options.closeDuration
});
this.esqueleto.msgbox = $('<div class="'+this.options.name+'"></div>');
this.esqueleto.msgbox.css({
'display' : 'none',
'position' : 'absolute',
'top' : 0,
'left' : 0,
'width' : this.options.width,
'height' : this.options.height,
'z-index' : this.options.zIndex,
'word-wrap' : 'break-word',
'-moz-box-shadow' : '0 0 15px rgba(0, 0, 0, 0.5)',
'-webkit-box-shadow' : '0 0 15px rgba(0, 0, 0, 0.5)',
'box-shadow' : '0 0 15px rgba(0, 0, 0, 0.5)',
'-moz-border-radius' : '6px',
'-webkit-border-radius' : '6px',
'border-radius' : '6px',
'background-color' : this.options.background
});
this.esqueleto.wrapper = $('<div class="'+this.options.name+'-wrapper"></div>');
this.esqueleto.msgbox.append(this.esqueleto.wrapper);
this.esqueleto.form = $('<form action="'+this.options.formaction+'" method="post"></form>');
this.esqueleto.wrapper.append(this.esqueleto.form);
this.esqueleto.wrapper.css({
height : (ie6 ? 80 : 'auto'),
'min-height' : 80,
'zoom' : 1
});
$('body').append(this.esqueleto.msgbox);
this.addevents();
return this.esqueleto.msgbox;
},
addevents: function() {
$(window).bind('resize', $.proxy(function() {
if (this.visible)
{
this.overlay.resize();
this.moveBox();
}
}, this));
$(window).bind('scroll', $.proxy(function() {
if (this.visible)
{
this.moveBox();
}
}, this));
this.esqueleto.msgbox.bind('keydown', $.proxy(function(event) {
if (event.keyCode == 27)
{
this.close(false);
}
}, this));
// heredamos los eventos, desde el overlay (Events inherited from the overlay):
this.overlay.element.bind('show', $.proxy(function() { $(this).triggerHandler('show'); }, this));
this.overlay.element.bind('hide', $.proxy(function() { $(this).triggerHandler('close'); }, this));
},
show: function(txt, options, callback) {
var types = ['alert', 'info', 'error', 'prompt', 'confirm'];
this.esqueleto.msgbox.queue(this.options.name, $.proxy(function( next ) {
options = $.extend(true, {
type : 'alert',
form : {
'active' : false
}
}, options || {});
if (typeof options.buttons === "undefined")
{
if (options.type == 'confirm' || options.type == 'prompt')
{
var buttons = [
{type: 'cancel', value: 'Cancel'}
];
}
}
else
{
var buttons = options.buttons;
};
this.callback = $.isFunction(callback) ? callback : function(e) {};
this.esqueleto.buttons = $('<div class="'+this.options.name+'-buttons"></div>');
this.esqueleto.form.append(this.esqueleto.buttons);
if (options.type != 'prompt')
{
$.each(buttons, $.proxy(function(i, button) {
if (button.type == 'cancel')
{
this.esqueleto.buttons.append($('<button type="button">'+button.value+'</button>').bind('click', $.proxy(function(e) { this.close(false); e.preventDefault(); }, this)));
}
}, this));
}
this.esqueleto.form.prepend(txt);
$.each(types, $.proxy(function(i, e) {
this.esqueleto.wrapper.removeClass(this.options.name+'-'+e);
}, this));
this.esqueleto.wrapper.addClass(this.options.name+'-'+options.type);
this.moveBox(); // set initial position
this.visible = true;
this.overlay.show();
this.esqueleto.msgbox.css({
display : 'block',
left : ( ($(document).width() - this.options.width) / 2)
});
this.moveBox();
setTimeout($.proxy(function() { var b = $('input, button', this.esqueleto.msgbox); if (b.length) { b.get(0).focus();} }, this), this.options.moveDuration);
}, this));
this.i++;
if (this.i==1)
{
this.esqueleto.msgbox.dequeue(this.options.name);
}
},
moveBox: function() {
var size = { x: $(window).width(), y: $(window).height() };
var scroll = { x: $(window).scrollLeft(), y: $(window).scrollTop() };
var height = this.esqueleto.msgbox.outerHeight();
var y = 0;
var x = 0;
// vertically center
y = scroll.x + ((size.x - this.options.width) / 2);
if (this.options.emergefrom == "bottom")
{
x = (scroll.y + size.y + 80);
}
else // top
{
x = (scroll.y - height) - 80;
}
if (this.visible)
{
if (this.animation)
{
this.animation.stop;
}
this.animation = this.esqueleto.msgbox.animate({
left : y,
top : scroll.y + ((size.y - height) / 2)
}, {
duration : this.options.moveDuration,
queue : false,
easing : 'easeOutBack'
});
}
},
close: function(param) {
this.esqueleto.msgbox.css({
display : 'none',
top : 0
});
this.visible = false;
if ($.isFunction(this.callback))
{
this.callback.apply(this, $.makeArray(param));
}
setTimeout($.proxy(function() {
this.i--;
this.esqueleto.msgbox.dequeue(this.options.name);
}, this), this.options.closeDuration);
if (this.i==1)
{
this.overlay.hide();
}
this.moveBox();
this.esqueleto.form.empty();
},
},
msgbox: function(txt, options, callback) {
if (typeof txt == "object")
{
$.MsgBoxObject.config(txt);
}
else
{
return $.MsgBoxObject.show(txt, options, callback);
}
}
});
$(function() {
if (parseFloat($.fn.jquery) > 1.2) {
$.MsgBoxObject.create();
} else {
throw "The jQuery version that was loaded is too old. MsgBox requires jQuery 1.3+";
}
});
})(jQuery);
Every tips and help will be appreciated. Thank you in advance!

this is the method this plugin is using to hide.
hide: function() {
if (this.hidden) return this;
if (this.transition) this.transition.stop();
this.target.unbind('resize');
if (this.shim) this.shim.css({'display': 'none'});
this.hidden = true;
this.transition = this.element.fadeOut(this.options.closeDuration, $.proxy(function(){
this.element.trigger('hide');
this.element.css({ 'height': 0, 'width': 0 });
}, this));
return this;
}
And this is the place where using this function:
this.element.click( $.proxy(function(event) {
if (this.options.hideOnClick)
{
if ($.isFunction(this.options.callback))
{
this.options.callback();
}
else
{
this.hide();
}
}
event.preventDefault();
}, this));
this.hidden = true;
this.inject();
return this;
},
So according to this when you click on the overlay popup will hide using this.hide() method.

Related

How to preload css called in JS

How do I preload the css in the following code? I have updated my code with Denis suggestions, but it did not work. Now the pages are not finding css at all. I might be missing something since I do not have much about js. Am i missing something? Thanks again Denis, for your suggestion.
This is a free template that i downloaded somewhere. Its quite lite and solves my pbn needs while keeping the site blazing fast. But I have never seen a html template calling css from a js before. I know how to preload files in html, but no clue what would be the proper attribute for it to be used in a js. This can get me the 100 page score i have been trying for long. Any of JS masters help will be much appreciated.
(function($) {
const item = {
reset: 'full',
breakpoints: {
global: { range: '*', rel: 'preload', href: 'css/style.css', containers: 1400, grid: { gutters: 50 } },
wide: { range: '-1680', rel: 'preload', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
normal: { range: '-1280', rel: 'preload', href: 'css/style-normal.css', containers: 960, lockViewport: true },
narrow: { range: '-980', rel: 'preload', href: 'css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
narrower: { range: '-840', rel: 'preload', href: 'css/style-narrower.css', grid: { gutters: 20, collapse: 1 } },
mobile: { range: '-640', rel: 'preload', href: 'css/style-mobile.css', grid: { gutters: 15, collapse: 2 } }
}
}
Object.keys(item.breakpoints).forEach(key=>{
var res = document.createElement("link");
res.rel = item.breakpoints[key].rel;
res.as = "style";
res.href = item.breakpoints[key].href;
document.head.appendChild(res)
})
}
}, {
layers: {
layers: {
navPanel: {
animation: 'pushX',
breakpoints: 'narrower',
clickToClose: true,
height: '100%',
hidden: true,
html: '<div data-action="navList" data-args="nav"></div>',
orientation: 'vertical',
position: 'top-left',
side: 'left',
width: 275
},
titleBar: {
breakpoints: 'narrower',
height: 44,
html: '<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span><span class="title" data-action="copyHTML" data-args="logo"></span>',
position: 'top-left',
side: 'top',
width: '100%'
}
}
}
});
$(function() {
var $window = $(window);
// Forms (IE<10).
var $form = $('form');
if ($form.length > 0) {
$form.find('.form-button-submit')
.on('click', function() {
$(this).parents('form').submit();
return false;
});
if (skel.vars.IEVersion < 10) {
$.fn.n33_formerize=function(){var _fakes=new Array(),_form = $(this);_form.find('input[type=text],textarea').each(function() { var e = $(this); if (e.val() == '' || e.val() == e.attr('placeholder')) { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).blur(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).focus(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); _form.find('input[type=password]').each(function() { var e = $(this); var x = $($('<div>').append(e.clone()).remove().html().replace(/type="password"/i, 'type="text"').replace(/type=password/i, 'type=text')); if (e.attr('id') != '') x.attr('id', e.attr('id') + '_fakeformerizefield'); if (e.attr('name') != '') x.attr('name', e.attr('name') + '_fakeformerizefield'); x.addClass('formerize-placeholder').val(x.attr('placeholder')).insertAfter(e); if (e.val() == '') e.hide(); else x.hide(); e.blur(function(event) { event.preventDefault(); var e = $(this); var x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } }); x.focus(function(event) { event.preventDefault(); var x = $(this); var e = x.parent().find('input[name=' + x.attr('name').replace('_fakeformerizefield', '') + ']'); x.hide(); e.show().focus(); }); x.keypress(function(event) { event.preventDefault(); x.val(''); }); }); _form.submit(function() { $(this).find('input[type=text],input[type=password],textarea').each(function(event) { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) e.attr('name', ''); if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); }).bind("reset", function(event) { event.preventDefault(); $(this).find('select').val($('option:first').val()); $(this).find('input,textarea').each(function() { var e = $(this); var x; e.removeClass('formerize-placeholder'); switch (this.type) { case 'submit': case 'reset': break; case 'password': e.val(e.attr('defaultValue')); x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } else { e.show(); x.hide(); } break; case 'checkbox': case 'radio': e.attr('checked', e.attr('defaultValue')); break; case 'text': case 'textarea': e.val(e.attr('defaultValue')); if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } break; default: e.val(e.attr('defaultValue')); break; } }); window.setTimeout(function() { for (x in _fakes) _fakes[x].trigger('formerize_sync'); }, 10); }); return _form; };
$form.n33_formerize();
}
}
// Dropdowns.
$('#nav > ul').dropotron({
offsetY: -15,
hoverDelay: 0
});
});
})(jQuery);
You can use Object.keys for get array of breakpoints item, then you can appendChild to document.head
So, write code like this:
const item = {
reset: 'full',
breakpoints: {
global: { range: '*', rel: 'preload', href: 'css/style.css', containers: 1400, grid: { gutters: 50 } },
wide: { range: '-1680', rel: 'preload', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
normal: { range: '-1280', rel: 'preload', href: 'css/style-normal.css', containers: 960, lockViewport: true },
narrow: { range: '-980', rel: 'preload', href: 'css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
narrower: { range: '-840', rel: 'preload', href: 'css/style-narrower.css', grid: { gutters: 20, collapse: 1 } },
mobile: { range: '-640', rel: 'preload', href: 'css/style-mobile.css', grid: { gutters: 15, collapse: 2 } }
}
}
Object.keys(item.breakpoints).forEach(key=>{
var res = document.createElement("link");
res.rel = item.breakpoints[key].rel;
res.as = "style";
res.href = item.breakpoints[key].href;
document.head.appendChild(res)
})
See in playground: https://jsfiddle.net/denisstukalov/3euofv17/#&togetherjs=RqKywyBFh0

Insert href link in the button in js plugin

I ask for your help to insert two destination links in the buttons inside a confirmation popup plugin.
There are two buttons in the plugin A and B I wish there was a href link for both.
I hope you can help me.
Place the code:
$( "#demo2" ).on( "click", function() {
$cw({
title: '✓',
content: 'testo',
theme: 'light',
okay: {
text: 'BOTTONE A',
action: function() { console.log('Clicked okay button'); }
},
cancel: {
text: 'BOTTONE B',
action: function() { console.log('Clicked cancel button'); }
}
});
});
if ( typeof jQuery === 'undefined' ) { throw new Error('jQuery is not loaded.'); }
(function($, window){
$.confirm = function( opt ) {
$('<div/>', { class: 'cw-wrapper ' + opt['theme'] || 'dark' })
.css({ left: ($(window).width() - 460) / 2 + 'px' })
.append($('<div/>', { class: 'cw-header', text: opt['title'] || '' }))
.append($('<div/>', { class: 'cw-content', text: opt['content'] || '' }))
.append($('<div/>', { class: 'cw-button blue', text: opt['okay']['text'] || 'Yes' }).click(function() {
$('#cw-screencover').click(); (typeof opt['okay']['action'] === 'function' ? opt['okay']['action'] : function(){})(); }))
.append($('<div/>', { class: 'cw-button', text: opt['cancel']['text'] || 'No' }).click(function() {
$('#cw-screencover').click(); (typeof opt['cancel']['action'] === 'function' ? opt['cancel']['action'] : function(){})(); }))
.animate({ top: '70px', opacity: '1.0' }, 900)
.appendTo( $('body')
.append($('<div/>', { id: 'cw-screencover' })
.animate({ opacity: '1.0' }, 900)
.click(function() {
$('.cw-wrapper').animate({ top: '-300px', opacity: '0.0' }, 900, function() { $(this).remove(); });
$(this).animate({ opacity: '0.0' }, 900, function() { $(this).remove(); });
}))
);
}
window.$cw = $.confirm;
})(jQuery, window);

Activity indicator in Titanium not working

I want to show an activity indicator in my screen using Titanium but it is not showing me any result. It is not showing any progress sign.
Here is my code:
var actInd = Titanium.UI.createActivityIndicator();
actInd.message = 'Please wait...';
//message will only shows in android.
var self = Ti.UI.createWindow({
title : "About",
navBarHidden : false,
barColor : "#50b849",
backgroundColor : "#2d2d2d",
});
self.add(actInd);
actInd.show();
self.orientationModes = [Titanium.UI.PORTRAIT];
var text = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory + "info.txt").read();
var infoText = Ti.UI.createTextArea({
width : "100%",
height : "100%",
color : "#fff",
backgroundColor : "#2d2d2d",
value : text,
editable : false,
scrollable : false,
font : {
fontWeight : 'bold',
fontSize : 20,
fontFamily : 'Helvetica Neue'
},
textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
autoLink : Ti.UI.AUTODETECT_LINK
});
infoText.addEventListener("click", function() {
Ti.Platform.openURL("http://tellusanotherone.org/c2p");
});
var scrollView = Ti.UI.createScrollView({
width : "100%",
height : "100%",
verticalBounce : true,
scrollType : "vertical",
});
scrollView.add(infoText);
self.add(infoText);
return self;
Thanks in advance.
Just create file (lib/indicator.js) and add the following code int it
function createIndicatorWindow(args) {
var width = 180,
height = 50;
var args = args || {};
var top = args.top || 140;
var text = args.text || 'Loading ...';
var win = Titanium.UI.createWindow({
height: height,
width: width,
top: top,
borderRadius: 10,
touchEnabled: false,
backgroundColor: '#000',
opacity: 0.6
});
var view = Ti.UI.createView({
width: Ti.UI.SIZE,
height: Ti.UI.FILL,
center: { x: (width/2), y: (height/2) },
layout: 'horizontal'
});
var style;
if (Ti.Platform.name === 'iPhone OS') {
style = Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN;
} else {
style = Ti.UI.ActivityIndicatorStyle.DARK;
}
var activityIndicator = Ti.UI.createActivityIndicator({
style : style,
height : Ti.UI.FILL,
width : 30
});
var label = Titanium.UI.createLabel({
left: 10,
width: Ti.UI.FILL,
height: Ti.UI.FILL,
text: text,
color: '#fff',
font: { fontFamily: 'Helvetica Neue', fontSize: 16, fontWeight: 'bold' }
});
view.add(activityIndicator);
view.add(label);
win.add(view);
function openIndicator() {
win.open();
activityIndicator.show();
}
win.openIndicator = openIndicator;
function closeIndicator() {
activityIndicator.hide();
win.close();
}
win.closeIndicator = closeIndicator;
return win;
}
// Public interface
exports.createIndicatorWindow = createIndicatorWindow
Use in your code like this
var uie = require('lib/indicator');
var indicator = uie.createIndicatorWindow();
someViewObject.addEventListener('click', function(e) {
indicator.openIndicator();
setTimeout(function() {
// Do the work that takes a while
// and requires an activity indicator
indicator.closeIndicator();
},0);
});

Adding easing to image pan

I am using some JavaScript and jQuery (with the easing plugin) to create a virtual tour; really just a long image that can pan left and right. I have found this which is perfect for the cause: http://jsfiddle.net/MvRdD/1/. Is there a way to add easing to the animation?
http://jsfiddle.net/ARTsinn/MvRdD/890/
$(document).ready(function() {
$.getScript("https://raw.github.com/danro/easing-js/master/easing.min.js");
var animateTime = 10,
offsetStep = 5,
scrollWrapper = $('#wrap');
//event handling for buttons "left", "right"
var aktiv;
$('.bttL, .bttR').mousedown(function(e) {
if (e.target.className === 'bttR') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '+=' + 20
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
} else if (e.target.className === 'bttL') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '-=' + 20
}, {
duration: 1200,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
}
}).mouseup(function() {
window.clearInterval(aktiv);
});
scrollWrapper.mousedown(function(event) {
$(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function(event) {
$(this).data('down', false);
}).mousemove(function(event) {
if ($(this).data('down')) {
$(this).stop(false, true).animate({
scrollLeft: $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}
}).mousewheel(function(event, delta) {
$(this).stop(false, true).animate({
scrollLeft: '-=' + delta * 60
}, {
duration: 400,
queue: false,
easing: 'easeOutCirc'
});
event.preventDefault();
}).css({
'overflow': 'hidden',
'cursor': '-moz-grab'
});
});

Turn JQuery cycle z-indexs in negative values

Jquery cycle works with z-index and opacity to update the current image
z-indexes are: 1,2,3,4,...
and i need -1,-2,-3,-4,-5,... (negative)
This is the only piece of code ive seen here http://toniweb.us/gm/js/cycle.js related with z-index
$.fn.cycle.transitions = {
fade: function($cont, $slides, opts) {
$slides.not(':eq(0)').hide();
opts.cssBefore = { opacity: 0, display: 'block' };
opts.cssAfter = { display: 'none' };
opts.animOut = { opacity: 0 };
opts.animIn = { opacity: 1 };
},
fadeout: function($cont, $slides, opts) {
opts.before.push(function(curr,next,opts,fwd) {
$(curr).css('zIndex',opts.slideCount + (fwd === true ? 1 : 0));
$(next).css('zIndex',opts.slideCount + (fwd === true ? 0 : 1));
});
$slides.not(':eq(0)').hide();
opts.cssBefore = { opacity: 1, display: 'block', zIndex: 1 };
opts.cssAfter = { display: 'none', zIndex: 0 };
opts.animOut = { opacity: 0 };
}
};
i tried to change the + by - but it seems to keep working the same way..
$.fn.cycle.transitions = {
fade: function($cont, $slides, opts) {
$slides.not(':eq(0)').hide();
opts.cssBefore = { opacity: 0, display: 'block' };
opts.cssAfter = { display: 'none' };
opts.animOut = { opacity: 0 };
opts.animIn = { opacity: 1 };
},
fadeout: function($cont, $slides, opts) {
opts.before.push(function(curr,next,opts,fwd) {
$(curr).css('zIndex',opts.slideCount - (fwd === true ? 1 : 0));
$(next).css('zIndex',opts.slideCount - (fwd === true ? 0 : 1));
});
$slides.not(':eq(0)').hide();
opts.cssBefore = { opacity: 1, display: 'block', zIndex: -1 };
opts.cssAfter = { display: 'none', zIndex: 0 };
opts.animOut = { opacity: 0 };
}
};
any idea how?
btw
$(curr).css('zIndex',opts.slideCount - (fwd === true ? 1 : 0));
this means opts.slideCount-1 if fwd==true and opts.slideCount+1 if false, right?
Try changing it to:
$(curr).css('zIndex', '-' + (opts.slideCount + (fwd === true ? 1 : 0)));
$(next).css('zIndex', '-' + (opts.slideCount + (fwd === true ? 0 : 1)));

Categories