I have build a slider using jQuery which works fine except a small issue.
The slider moves quickly before the present one complete its move.
Especially the second and third slide move have the issue
Does any one have solution or alternative to fix this issue ?
$.fx.speeds._default = 1000;
function slider(container) {
var currPg = null,
firstPg = null;
container.find('> *').each(function (idx, pg) {
pg = $(pg);
var o = {
testimonial: pg.find('> .testimonial'),
thumb: pg.find('> .testimonial-thumb'),
pg: pg
};
o.pg.css({
position: 'absolute',
width: '100%',
height: '100%',
});
if (idx > 0) {
o.pg.css({
opacity: 0,
'z-index': -1
});
o.testimonial.css({
'margin-left': '100%'
});
o.thumb.css({
'bottom': '-100%'
});
} else {
firstPg = o;
}
o.prev = currPg;
if (currPg) {
currPg.next = o;
}
currPg = o;
});
firstPg.prev = currPg;
currPg.next = firstPg;
currPg = firstPg;
this.advance = function advance(duration) {
console.log("advance!", this);
var dur = duration || $.fx.speeds._default;
var dur2 = Math.ceil(dur / 2);
var dh = container.height();
var dw = container.width();
var nextPg = currPg.next;
nextPg.pg.css({
opacity: 1,
'z-index': null
});
var _pg = currPg;
currPg.testimonial.stop().animate({
'margin-left': -dw
}, dur, function () {
_pg.pg.css({
opacity: 0,
'z-index': -1
});
_pg = null;
});
nextPg.testimonial.stop()
.css({
'margin-left': dh
})
.animate({
'margin-left': 0
}, dur);
currPg.thumb.stop().animate({
'bottom': -dh
}, dur2, function () {
nextPg.thumb.stop()
.css({
'bottom': -dh
})
.animate({
'bottom': 0
}, dur2);
nextPg = null;
});
currPg = nextPg;
}
}
var s = new slider($('#banner'));
function scheduleNext() {
setTimeout(function () {
s.advance();
scheduleNext();
}, 5000);
}
scheduleNext();
Demo http://jsfiddle.net/sweetmaanu/Pn2UB/13/
You're setting the margin-left to the containers height at this point. Fixing this seemed to fix it for me.
nextPg.testimonial.stop()
.css({
'margin-left': dh
})
.animate({
'margin-left': 0
}, dur);
should be
nextPg.testimonial.stop()
.css({
'margin-left': dw
})
.animate({
'margin-left': 0
}, dur);
Related
I am trying to append the imgclone to the another div called fa-shopping-bag however the append doesn't work and what happens is it overlaps the screens
$('.add').on('click', function () {
$('html,body').animate({scrollTop: 0}, 1000);
var cart = $('.fa-shopping-bag');
var imgtodrag = $('#product-images > div > ul.slides > li.flex-active-slide > img:nth-child(1)');
if (imgtodrag) {
var imgclone = imgtodrag.clone()
.offset({
top: imgtodrag.offset().top + 250,
left: imgtodrag.offset().left
})
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('.fa-shopping-bag'))
.animate({
'top': 0,
'right': 0,
'width': 50,
'height': 50
}, 3000, 'easeInOutExpo');
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach()
});
}
});
Hey all I am new at jQuery plugins and therefore am unsure how to go about adding a destroy and reset (where I can bring it back) to this plugin I am currently using for tooltips.
The JS code is this:
/**
* This is a simple jQuery plugin that make nice tooltips.
*
* #class ssTooltips
* #author Jacek Berbecki
*/
;(function($) {
'use strict';
$.ssTooltips = {version: '1.0.0'};
$.fn.ssTooltips = function(element, options) {
// set tooltip options
var settings = $.extend({
bgColor: '#333',
txtColor: '#f2f2f2',
maxWidth: 200,
borderRadius: 3,
fontSize: 12
}, options);
// get elements
var elements = $(element);
// start tooltip engine when elements exists
if(elements && elements.length > 0) {
// cteare tootlip element
var tooltipWrapper = $('<div id="tooltip-wrapper"></div>'),
tooltipBox = $('<div id="tooltip-box"></div>'),
tooltipArrow = $('<div id="tooltip-arrow"></div>');
// set tooltop element styles
tooltipWrapper.css({
'display': 'none',
'position': 'absolute',
'opacity': '0.95'
});
tooltipBox.css({
'background': settings.bgColor,
'padding': '5px 15px',
'color': settings.txtColor,
'border-radius': settings.borderRadius + 'px',
'box-shadow': '0 2px 6px -1px rgba(0,0,0,0.3)',
'max-width': settings.maxWidth + 'px',
'font-size': settings.fontSize + 'px'
});
tooltipArrow.css({
'width': '10px',
'height': '10px',
'background': settings.bgColor,
'position': 'absolute',
'left': '16px',
'bottom': '-4px',
'transform': 'rotate(45deg)'
});
// append tooltop to document
tooltipBox.appendTo(tooltipWrapper);
tooltipArrow.appendTo(tooltipWrapper);
$('body').append(tooltipWrapper);
// fire tooltip mouse actions
elements.each(function(index, element) {
var $this = $(this),
dataTxt = $this.attr('data-tooltip');
$this.removeAttr('title');
$this.on({
mousemove: function(event) {
tooltipWrapper
.css({
'left': event.pageX - 20,
'bottom': ($( window ).height() - event.pageY + 20)
})
},
mouseenter: function(event) {
tooltipWrapper
.hide()
.fadeIn('fast');
tooltipBox
.empty()
.html(dataTxt);
},
mouseleave: function(event) {
tooltipWrapper
.stop()
.fadeOut('fast');
}
})
});
} else {
return false;
}
}
}(jQuery));
And as you may see, there is no destroy, delete, etc in there.
The purpose to all of this is for me to disable the tooltips on the page until I press a button to show them then if I pressed the button again, they would get destroyed again.
I see a few examples of the destroy function found here:
destroy: function() {
this._destroy(); //or this.delete; depends on jQuery version
this.element.unbind( this.eventNamespace )
this.bindings.unbind( this.eventNamespace );
//this.hoverable.removeClass( "hover state" );
//this.focusable.removeClass( "focus state" );
}
But am unsure how to implement it in the current code. Same with Destory.
And help would be great!
I got it!
/**
* This is a simple jQuery plugin that make nice tooltips.
*
* #class ssTooltips
* #author Jacek Berbecki
*/
; (function ($) {
'use strict';
$.ssTooltips = { version: '1.0.0' };
$.fn.ssTooltips = function (element, options) {
// set tooltip options
var settings = $.extend({
bgColor: '#333',
txtColor: '#f2f2f2',
maxWidth: 200,
borderRadius: 3,
fontSize: 12
}, options);
// get elements
var elements = $(element);
// start tooltip engine when elements exists
if (elements && elements.length > 0) {
// cteare tootlip element
var tooltipWrapper = $('<div id="tooltip-wrapper"></div>'),
tooltipBox = $('<div id="tooltip-box"></div>'),
tooltipArrow = $('<div id="tooltip-arrow"></div>');
// set tooltop element styles
tooltipWrapper.css({
'display': 'none',
'position': 'absolute',
'opacity': '0.95',
'z-index': 8
});
tooltipBox.css({
'background': settings.bgColor,
'padding': '5px 15px',
'color': settings.txtColor,
'border-radius': settings.borderRadius + 'px',
'box-shadow': '0 2px 6px -1px rgba(0,0,0,0.3)',
'max-width': settings.maxWidth + 'px',
'font-size': settings.fontSize + 'px'
});
tooltipArrow.css({
'width': '10px',
'height': '10px',
'background': settings.bgColor,
'position': 'absolute',
'left': '16px',
'bottom': '-4px',
'transform': 'rotate(45deg)'
});
// append tooltop to document
tooltipBox.appendTo(tooltipWrapper);
tooltipArrow.appendTo(tooltipWrapper);
$('body').append(tooltipWrapper);
// fire tooltip mouse actions
elements.each(function (index, element) {
var $this = $(this),
dataTxt = $this.attr('data-tooltip');
$this.removeAttr('title');
$this.on({
mousemove: function (event) {
tooltipWrapper
.css({
'left': event.pageX - 20,
'bottom': ($(window).height() - event.pageY + 20)
})
},
mouseenter: function (event) {
tooltipWrapper
.hide()
.fadeIn('fast');
tooltipBox
.empty()
.html(dataTxt);
},
mouseleave: function (event) {
tooltipWrapper
.stop()
.fadeOut('fast');
},
mousedown: function (event) {
tooltipWrapper
.stop()
.fadeOut('fast');
}
})
});
$.fn.ssTooltips.destroy = function () {
$('#tooltip-wrapper').remove();
}
$.fn.ssTooltips.reset = function () {
$(document).ssTooltips('.tips', {
//Controls the tooltips for examples for text/select boxes
bgColor: settings.bgColor,
txtColor: settings.txtColor,
maxWidth: settings.maxWidth,
borderRadius: settings.borderRadius,
fontSize: settings.fontSize
});
}
} else {
return false;
}
}
}(jQuery));
I created $.fn.ssTooltips.destroy and $.fn.ssTooltips.reset and I am calling them like so:
$('#tool_destory').on('click', function (e) {
//Destory the tool tips
$('#tooltip-wrapper').ssTooltips.destroy();
});
$('#tool_addback').on('click', function (e) {
//Add tool tips
$('#tooltip-wrapper').ssTooltips.reset();
});
I'm trying to write jQuery plugin for making accordion.
All items inside the container need to reduce their width so all items could be shown on one line.
On item hover, rest of the items should reduce width so it the hover item could be shown at its original width.
The error occurs when trying to initial set the items: the last item disappears.
the math is:
slider-width / all-items-width
and then:
each-item * (slider-width / all-items-width)
What am I calculating wrong?
jQuery(function($) {
$.fn.shadeAccordion = function(elmwrap, sliderH) {
var $this = $(this), //get the slider countiner
SlideR = $this,
SliderWidth = SlideR.width(), // slider should inherit parent witdth
thumbA = SlideR.find('a'), // images should wrap with a tag
thumbMOunt = thumbA.length, // count the number of images
thumbImg = thumbA.find('img'); // find acctual imgaes
var imgaesWidth = 0;
thumbImg.each(function(index, el) {
imgaesWidth += $(el).width();
});
console.log(imgaesWidth);
var margineach = SliderWidth / imgaesWidth;
console.log(margineach);
//some CSS Settigns
SlideR.find(elmwrap).css({
'transition': 'width .2s ease-in',
'height': sliderH,
'overflow': 'hidden',
'position': 'static'
}).find('img').css({
height: sliderH,
width: 'auto',
'position': 'relative',
'max-width': 'none'
});;
$.fn.HoverAnimation = function(SliderWidth) {
var $this = $(this), //get the specific hoverd container
imgWid = $this.data('orginalwidht'), //actual image width for this cont
sliderWidthAfterOpen = SliderWidth - imgWid,
thumbImgSibDiv = $this.siblings(elmwrap);
var sibImgaesWidth = 0;
thumbImgSibDiv.each(function(index, el) {
sibImgaesWidth += $(el).width();
});
var margineachOpend = sliderWidthAfterOpen / sibImgaesWidth;
$this.addClass('active').width(imgWid).css('opacity', '1');
thumbImgSibDiv.addClass('inactive').each(function() {
var thisW = $(this).width();
$(this).width(thisW * margineachOpend).css('opacity', '0.4');
});
}; //End of mouse over
$.fn.LeaveAnimation = function(SliderWidth) {
var $this = $(this),
imgWid = $this.data('editedwidth');
$this.removeClass('active').width(imgWid);
SlideR.find(elmwrap).css('opacity', '0.4').not('.active').removeClass('inactive').each(function() {
$(this).width($(this).data('editedwidth'));
}); //End of Each change Margin
}; //End of mouseleave
widhtS = 0;
// adjust new width and declare animation when hover
SlideR.find(elmwrap).each(function(idx, el) {
var imgW = $(el).find('img').width();
$(el).width(Math.round(imgW * margineach)); //change images width so they will super fit to the slider
$(el).attr('data-orginalwidht', imgW).attr('data-editedwidth', Math.round(imgW * margineach)).find('img').css({
margin: '0',
padding: '0'
});
$(el).css({
'margin': 0,
'clear': 'none',
'padding': 0
}); //change images width so they will super fit to the slider
widhtS += Math.round(imgW * margineach);
console.log(Math.round(widhtS));
})
.mouseover(function() {
$(this).HoverAnimation(SliderWidth)
})
.mouseleave(function() {
$(this).LeaveAnimation(SliderWidth)
});
}
});
heres a demo: https://jsfiddle.net/12345/8zd9nmvf/23/
the issue was CSS - i was calculating all images width before their width became auto.
so i moved css properties up before the calculation and it fixed:
//some CSS Settigns
SlideR.find(elmwrap).css({
'transition': 'width .2s ease-in',
'height': sliderH,
'overflow': 'hidden',
'position': 'static'
}).find('img').css({
height: sliderH,
width: 'auto',
'position': 'relative',
'max-width': 'none'
});
var imgaesWidth = 0;
thumbImg.each(function(index, el) {
imgaesWidth += $(el).width();
});
var margineach = SliderWidth / imgaesWidth;
Has anyone set up a nivo slider to pan each image (aka Ken Burns effect)? I'm trying to implement it and it's kinda tricky!
Actually, I got my implementation working!
I have a panning function loop.. something like this:
function ken_burns_loop(el) {
$(el)
.animate({
'background-position-x': '40%',
'background-position-y': '60%'
}, 8000, 'linear')
.animate({
'background-position-x': '30%',
'background-position-y': '40%'
}, 8000, 'linear')
.animate({
'background-position-x': '70%',
'background-position-y': '70%'
}, 8000, 'linear', function() { ken_burns_loop(el); });
}
And I'm initializing nivo slider like this:
$('#welcome-slider').nivoSlider({
effect: 'fade',
slices: 1,
directionNav: false,
afterChange: function() {
$('#welcome-slider, .nivo-slice').stop(true);
ken_burns_loop('#welcome-slider, .nivo-slice');
}
});
ken_burns_loop('#welcome-slider, .nivo-slice');
I'm still working out some problems with positioning.
Source & Demo
Add this to your JS:
if(currentEffect === 'kenburns'){
createZoom(slider, settings, vars);
zoom = $('.nivo-zoom:last', slider);
var delta = (8 + Math.random() * 2) / 100;
var neww = zoom.width() * (1 + delta);
var newh = zoom.height() * (1 + delta);
var x = delta * zoom.width(); //Math.random()*(neww-zoom.width());
var y = delta * zoom.height(); //Math.random()*(newh-zoom.height());
var zoomdir = Math.round(Math.random() * 4);
zoom.animate({ opacity:'1.0'}, {easing:'linear',duration:settings.pauseTime*2/3});
if(zoomdir == 1) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',left: '-'+x+'px',top: '-'+y+'px'},{easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else if(zoomdir == 2) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',right: '-'+x+'px',top: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else if(zoomdir == 3) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',right: '-'+x+'px',bottom: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',left: '-'+x+'px',bottom: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
}
if($('.nivo-zoom', slider).length > 2) $('.nivo-zoom:first', slider).remove();
}
I've found some javascript code that layers photos on top of each other when you click on them.
Rather than having to click I'd like the function to automatically run every 5 seconds. How can I change this event to a timed one:
$('a#nextImage, #image img').click(function(event){
Full code below. Thanks
$(document).ready(function() {
$('#description').css({ 'display': 'block' });
$('#image img').hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); }
);
$('a#nextImage, #image img').click(function(event) {
event.preventDefault();
$('#description p:first-child').css({ 'visibility': 'hidden' });
if($('#image img.current').next().length) {
$('#image img.current').removeClass('current').next().fadeIn('normal').addClass('current').css({ 'position': 'absolute' });
}
else{
$('#image img').removeClass('current').css({ 'display': 'none' });
$('#image img:first-child').fadeIn('normal').addClass('current').css({ 'position': 'absolute' });
}
if($('#image img.current').width() >= ($('#page').width() - 100)) {
xPos = 170;
}
else {
do {
xPos = 120 + (Math.floor(Math.random() * ($('#page').width() - 100)));
} while(xPos + $('#image img.current').width() > $('#page').width());
}
if($('#image img.current').height() >= 300) {
yPos = 0;
}
else{
do {
yPos = Math.floor(Math.random() * 300);
} while(yPos + $('#image img.current').height() > 300);
}
$('#image img.current').css({ 'left' :xPos, 'top' :yPos });
});
});
I'd try setInterval function. It runs something every N milliseconds. It looks like:
setInterval(function() {
alert('5 seconds over!');
}, 5000);
$(document).ready(function() {
$('#description').css({ 'display': 'block' });
$('#image img').hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); }
);
setInterval(function() {
$('#description p:first-child').css({ 'visibility': 'hidden' });
if($('#image img.current').next().length) {
$('#image img.current').removeClass('current').next().fadeIn('normal').addClass('current').css({ 'position': 'absolute' });
}
else{
$('#image img').removeClass('current').css({ 'display': 'none' });
$('#image img:first-child').fadeIn('normal').addClass('current').css({ 'position': 'absolute' });
}
if($('#image img.current').width() >= ($('#page').width() - 100)) {
xPos = 170;
}
else {
do {
xPos = 120 + (Math.floor(Math.random() * ($('#page').width() - 100)));
} while(xPos + $('#image img.current').width() > $('#page').width());
}
if($('#image img.current').height() >= 300) {
yPos = 0;
}
else{
do {
yPos = Math.floor(Math.random() * 300);
} while(yPos + $('#image img.current').height() > 300);
}
$('#image img.current').css({ 'left' :xPos, 'top' :yPos });
}, 5000);
});