I'm struggling here to solve this.
http://jsfiddle.net/yhcqfy44/
The animation is supposed to automaticaly scroll top relative to <span> height each time when the scroll bar appears.
I have write this but with no luck:
var hheight = $('<span>').height();
var i = 0;
var blackposition;
var square = $('<span></span>').first();
var endless = setInterval(function() {
if (i % 4 == 0) {
blackposition = Math.floor(4 * Math.random());
}
var math = (blackposition == (i % 4)) ? 0 : 1;
square.clone().addClass('color_' + math).text((math < 1) ? 'even' + i : 'odd' + i).appendTo('#container');
i++;
$('body,html').animate({
scrollTop: '+=' + hheight + 'px'
}, 1000, 'linear')
}, 500);
$(window).on('scroll', function() {
if ($("span").offset().top + $("span").height() < $(window).scrollTop()) {
$("span").slice(0, 4).remove();
};
});
Is there a solution for doing this ?
You are providing a string for the scrollTop property, and JavaScript is just going to treat that as a string and not an operator, apart from that I don't think you can have an operator there so I would try something like this scrollTop: $(document).height() + 'px' I think that does what you want it to, take a look at this http://jsfiddle.net/yxbj0fen/2/
Basically that just scrolls to the bottom of the document, but you can replace that with another container (e.g. a div)
i try to display from svg ,layers according to numbers set from an interval.I have 2 random numbers (left and right) set to display from interval (10,99) both.That works good,but, i need to display layer 1(banane1) from svg if left || right belongs to interval (10,20) , then if left || right belongs to interval (20,30) to display layer 2(banane2) from svg and so on untill left || right belongs to interval (90,99) to display layer 9(banane9). There are 9 intervals and 9 layers from svg to display. Code i wrote looks like :
FIDDLE: http://jsfiddle.net/r68Bg/
for(var i = 0; i < 2; i++){
panouri = document.getElementById('panou' + i);
svgDoc = panouri.contentDocument;
}
where panou0 and panou1 are 2 svg that has layers 2 numbers where i display later random numbers set from intervals and 9 layers each with different content which must be displayed according to random numbers.
function randomIntFromInterval(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
};
function conditions(){
left = randomIntFromInterval(10,99);
right = randomIntFromInterval(10,99);
for(var i = 0; i < 2; i++){
ecuations.push(left, right);
randoms = document.getElementById("panou" + i).contentDocument;
numere = randoms.getElementById("number");
numere.textContent = ecuations[i];
}
};
where i add into my svg (panou0 and panou1) randoms numbers from set intervals.
function setBananeState(state)
{
for(var i = 1; i < 10; i++){
svgItem = svgDoc.getElementById("banane" + i);
svgItem.setAttribute("display", "none");
svgItem = svgDoc.getElementById(state);
svgItem.setAttribute("display", "inline");
}
};
function getBanane(){
if(left || right >= 30 && left || right <= 40){
bananeState = "banane3";
setBananeState(bananeState);
}
};
Here i have all layers from svgs which contains bananas to display according to random number given and a function getBanane() which has condition to display layer1 (banane1 by id from svg) if random number is from interval (10,20).Unfortunately this doesnt work...and i must have 8 more condition to display layers from svg if random numbers are from different interval
This isn't going to work:
if(left || right == randomIntFromInterval(10,20)){
What you are doing here is a ORing left with right which will give you a boolean which you are then comparing to randomIntFromInterval. I think what you are trying to do is this:
var interval = randomIntFromInterval(10,20);
if (left == interval || right == interval) {
EDIT: Okay you changed your question. So now this:
if(left || right >= 30 && left || right <= 40){
Is not right, you can't write an if statement like that in javascript, or in most (probably all) programming languages. You can't say "if a or b is greater than x", like you would in normal English speech because it's ambiguous. You have to explicitly say "if (a is greater than x) or (b is greater than x)". So your if statement above needs to become:
if ((left >= 30 || right >=30) && (left <= 40 || right <= 40)) {
Although I'm not sure this is exactly what you want either. Because here if left==0 and right==41, then this statement would be true. I think you want either left or right to be in the interval, so your best check would be:
if ((left >= 30 && left <= 40) || (right >= 30 && right <= 40)) {
I am doing a little carousel with a pager. The carousel displays elements 6 by 6 and I have 36 elements to display. I have a next and previous button. The first elements displayed are [0, 6]. If I press the previous button and there is no previous elements (eg I am on the first page), it should wrap around and go to the end. The same applies for the last elements and the next button.
My code looks like this:
$('#img_prev').click(function (e) {
# change this line so it wraps around
imgIndex = (imgIndex - 6) % 36;
alert(imgIndex)
refreshImages(imgIndex);
e.preventDefault();
return false;
});
$('#img_next').click(function (e) {
imgIndex = (imgIndex + 6) % 36;
refreshImages(imgIndex);
e.preventDefault();
return false;
});
And it fails miserably because -6 % 36 is -6 and not 30. I could handle it with if (index < 0) ... but I would prefer a condition with a modulo that best capture the wrapping behavior.
How can I get this to wrap around (see 2nd line) ?
One possible solution would be with this answer:
function mod(x, m) {
return (x%m + m)%m;
}
$('#img_prev').click(function (e) {
# this line has been changed, now it wraps around
imgIndex = mod(imgIndex - 6, 36);
...
You could try this:
var maxElements = 36;
$('#img_prev').click(function (e) {
// change this line so it wraps around
imgIndex = (maxElements - 1) - (imgIndex % maxElements);
alert(imgIndex)
refreshImages(imgIndex);
e.preventDefault();
return false;
});
$('#img_next').click(function (e) {
imgIndex = (imgIndex % maxElements);
refreshImages(imgIndex);
e.preventDefault();
return false;
});
Here's a fiddle showing the output of:
(imgIndex % maxElements)
and
(maxElements - 1) - (imgIndex % maxElements);
$("#team").css("background-color","blue");
I'd like to turn the background colour of id:team to blue however I would only like to turn it this colour for 4 seconds.
How do I do this?
I've Googled around but I couldn't find anything regarding changing css for a given time frame.
Also, a fading out/in from/to the previous settings would be a nice touch.
If you want it to only appear blue for 4 seconds you could do:
var element = $( "#team" );
var oldColor = element.css( "background-color" );
element.animate( { "background-color": "blue" } )
.delay( 4000 )
.animate( { "background-color": oldColor } );
You need jQuery UI to .animate(), otherwise you can just use .css().
You have to use the timer feature:
setTimeout(function() {
$('#team').css('background-color', 'whatever');
}, 4000);
The second argument is a count in milliseconds of how long you'd like to wait before the first argument (a function) is called.
There's no built-in ability to say "go back to what it was before"; you'll have to remember the old value in your own code.
If you do not want to use the jQuery UI plugin (perhaps due to its size) then you could do the animating manually.
See the following code working in a jsFiddle.
function animblue(selector, from, to, step) {
var
target = $('#target'),
color = from,
next;
next = function () {
var hex = (Math.floor(color) < 16 ? '0' : '') + Math.floor(color).toString(16);
target.css('background-color', '#' + hex + hex + 'ff');
color += step;
if (!((color < from && color < to) || (color > from && color > to))) {
setTimeout(next, 10);
}
};
next();
}
$('#action').on('click', function () {
animblue('#target', 255, 0, -255 / 16);
window.setTimeout(function () {
animblue('#target', 0, 255, 255 / 16);
}, 4000);
});
I've been given a cut down subset of the jQuery lib one of the key features I'm missing is the .effect functions. I do however have .animate. I was wondering if anyone would have any ideas how I could go about reproducing the animation functions.
I am particularly consious of making this only a few lines as I need to keep the code size down. Which is why the jquery lib is as small as it is and doesnt have the effects functions.
TLDR - I'm trying to replace
$("#"+id_string).effect( "shake", {}, "fast" );
With something using .animate within jQuery.
So far I have something like this ..
jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
this.each(function() {
$(this).css("position","relative");
for (var x=1; x<=intShakes; x++) {
$(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
.animate({left:intDistance}, ((intDuration/intShakes)/2))
.animate({left:0}, (((intDuration/intShakes)/4)));
}
});
return this;
};
I like #phpslightly solution so much, I keep using it. So here it is updated to basic jquery plugin form which will return your element
jQuery.fn.shake = function(interval,distance,times){
interval = typeof interval == "undefined" ? 100 : interval;
distance = typeof distance == "undefined" ? 10 : distance;
times = typeof times == "undefined" ? 3 : times;
var jTarget = $(this);
jTarget.css('position','relative');
for(var iter=0;iter<(times+1);iter++){
jTarget.animate({ left: ((iter%2==0 ? distance : distance*-1))}, interval);
}
return jTarget.animate({ left: 0},interval);
}
You would then use it like a regular plugin:
$("#your-element").shake(100,10,3);
Or use the default values (100, 10, 3):
$("#your-element").shake();
It's actually already implemented this way under the covers, you can see exactly how in jquery.effects.shake.js, if you wanted to copy only that functionality you can.
Another approach to think about: if you're using multiple effects, I'd recommend downloading jQuery UI with only the effects you want. For this effect, without copying the functionality yourself, you would just need jquery.effects.core.js and jquery.effects.shake.js.
This is probably irrelevant now but I've ported jQ UI's shake effect as a standalone jQuery plugin. All you need is jQuery and it will work exactly like the one provided in jQ UI.
For those who want to use the effect without actually bloating their project with unnecessary jQ UI core files.
$('#element').shake({...});
It can be found here with instruction: https://github.com/ninty9notout/jquery-shake
Thought I'd leave this here for future reference.
This is a more clean and smooth way to do the animation.
jQuery.fn.shake = function(shakes, distance, duration) {
if(shakes > 0) {
this.each(function() {
var $el = $(this);
var left = $el.css('left');
$el.animate({left: "-=" + distance}, duration, function(){
$el.animate({left: "+=" + distance * 2}, duration, function() {
$el.animate({left: left}, duration, function() {
$el.shake(shakes-1, distance, duration); });});
});
});
}
return this;
};
I don't understand all the complexity being thrown into reproducing the shake effect with solely animate. Here's my solution in just a couple lines.
function shake(div,interval=100,distance=10,times=4){
$(div).css('position','relative');
for(var iter=0;iter<(times+1);iter++){
$(div).animate({ left: ((iter%2==0 ? distance : distance*-1))}, interval);
}//for
$(div).animate({ left: 0},interval);
}//shake
EDIT: Updated code to return element to original position. Still believe this is the lightest and best solution to the problem.
I wrote some time ago a few simple jquery animations:
https://github.com/yckart/jquery-custom-animations
/**
* #param {number} times - The number of shakes
* #param {number} duration - The speed amount
* #param {string} easing - The easing method
* #param {function} complete - A callback function
*/
jQuery.fn.shake =
jQuery.fn.wiggle = function (times, duration, easing, complete) {
var self = this;
if (times > 0) {
this.animate({
marginLeft: times-- % 2 === 0 ? -15 : 15
}, duration, easing, function () {
self.wiggle(times, duration, easing, complete);
});
} else {
this.animate({
marginLeft: 0
}, duration, easing, function () {
if (jQuery.isFunction(complete)) {
complete();
}
});
}
return this;
};
This is not perfect, but functional
// Example: $('#<% =ButtonTest.ClientID %>').myshake(3, 120, 3, false);
jQuery.fn.myshake = function (steps, duration, amount, vertical) {
var s = steps || 3;
var d = duration || 120;
var a = amount || 3;
var v = vertical || false;
this.css('position', 'relative');
var cur = parseInt(this.css(v ? "top" : "left"), 10);
if (isNaN(cur))
cur = 0;
var ds = d / s;
if (v) {
for (i = 0; i < s; i++)
this.animate({ "top": cur + a + "px" }, ds).animate({ "top": cur - a + "px" }, ds);
this.animate({ "top": cur }, 20);
}
else {
for (i = 0; i < s; i++)
this.animate({ "left": cur + a }, ds).animate({ "left": cur - a + "px" }, ds);
this.animate({ "left": cur }, 20);
}
return this;
}
Based on #el producer solution, I added some multiply logic and make it look like a random shake.
jQuery.fn.shake = function (interval, distance, times) {
interval = typeof interval == "undefined" ? 100 : interval;
distance = typeof distance == "undefined" ? 10 : distance;
times = typeof times == "undefined" ? 3 : times;
var jTarget = $(this);
jTarget.css('position', 'relative');
for (var iter = 0; iter < (times + 1) ; iter++) {
jTarget.animate({ top: ((iter % 2 == 0 ? distance * Math.random() : distance * Math.random() * -1)), left: ((iter % 2 == 0 ? distance * Math.random() : distance * Math.random() * -1)) }, interval);
}
return jTarget.animate({ top: 0 , left: 0 }, interval);
}
Position had to be absolute on my side, so I changed it to:
jQuery.fn.shake = function(interval, distance, times) {
interval = typeof interval == "undefined" ? 100 : interval;
distance = typeof distance == "undefined" ? 10 : distance;
times = typeof times == "undefined" ? 3 : times;
var jTarget = $(this);
for (var iter=0;iter<(times+1);iter++) {
jTarget.animate({ 'padding-left': ((iter%2==0 ? distance : distance*-1))}, interval);
}
return jTarget.animate({ 'padding-left': 0 } ,interval);
}