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);
});
Related
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 face some issues in window scroll function in if...else
It only go in through SCROLL END 1.
Anyone can tell me where I'm doing wrong or suggest me to make it better. Thanks a lot
$(window).scroll(function () {
var scrollend = 1250;
var second_scrollend = 4500;
if ($(window).scrollTop() + $(window).height() >= scrollend) {
console.log("SCROLL END 1");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': '10px', 'width': '300px' });
} else if ($(window).scrollTop() + $(window).height() >= second_scrollend) {
console.log("SCROLL END 2");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': marginbottom + 'px', 'width': '300px' });
} else {
$("#sidepanel").css({ 'position': 'relative', 'bottom': '0px', 'width': 'auto' });
}
});
change your variable value
var scrollend = 4500;
var second_scrollend = 1250;
Why we change the value
Your first codition always true because if $(window).scrollTop() + $(window).height() is greater than 1250 it is always true
Other Way change the sequence of condition
if ($(window).scrollTop() + $(window).height() >= second_scrollend) {
console.log("SCROLL END 2");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': marginbottom + 'px', 'width': '300px' });
}
else if ($(window).scrollTop() + $(window).height() >= scrollend) {
console.log("SCROLL END 1");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': '10px', 'width': '300px' });
}
else {
$("#sidepanel").css({ 'position': 'relative', 'bottom': '0px', 'width': 'auto' });
}
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);
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 found this content expand/collapse jQuery plugin. I want to add fade-in effect to this plugin when I click on the EXPAND button.
How do I do this?
$(document).ready(function () {
var maxlines = 15;
var lineheight = 15; // line height in 'px'
var maxheight = (maxlines * lineheight);
var allowedExtraLines = 3;
var showText = "EXPAND";
var hideText = "CLOSE";
$('.ranking').each(function () {
var text = $(this);
if (text.height() > maxheight + allowedExtraLines * lineheight) {
text.css({ 'overflow': 'hidden', 'line-height': lineheight + 'px', 'height': maxheight + 'px' });
var link = $('' + showText + '');
link.click(function (event) {
event.preventDefault();
if (text.css('height') == 'auto') {
$(this).html(showText);
text.css('height', maxheight + 'px');
} else {
//$(this).remove();
$(this).html(hideText);
text.css('height', 'auto');
}
});
var linkDiv = $('<div></div>');
linkDiv.append(link);
$(this).after(linkDiv);
}
});
});
within the link.click function, you can do
text.animate({ opacity: 1.00 }, 600);
i think it'd go after text.css('height', 'auto'); in the else block. you'll probably have to reset the opacity to 0 somehow in the if block too.
for reference: http://api.jquery.com/animate/
edit: better yet, http://api.jquery.com/fadeIn/
so
text.fadeIn();