So I am trying to basically create a div that slides out using transforms, as those work best in Chrome. I'm using a plugin called Animo.js that uses .css classes to animate using jquery, but I can't seem to get my code right. I'd rather not use class toggles or jquery toggles of any sort.
Code example
$(document).ready(function()
var $hTog = 0
$('#home').click(function()
{
if( $hTog.val() == 0)
{
$('#hSlider').animo({animation: 'hGrow', iterate: 1, duration: 10, keep: true, timing: 'linear'});
$hTog.val() == 1;
};
else
{
$('#hSlider').animo({animation: 'hShrink', iterate: 1, duration: 10, keep: true, timing: 'linear'});
$hTog.val() == 0;
};
})
})
Thanks in advance guys.
There are several things you can do in your code try this:
$(document).ready(function(){ // the '{' not there add this
var $hTog = 0;
$('#home').click(function(){
if( $hTog == 0){
$('#hSlider').animo({animation: 'hGrow', iterate: 1, duration: 10, keep: true, timing: 'linear'});
$hTog = 1;
}else{
$('#hSlider').animo({animation: 'hShrink', iterate: 1, duration: 10, keep: true, timing: 'linear'});
$hTog = 0;
}
});
});
Remove .val() from the if conditions.
Remove the ; from the closing of if condition and else part too.
Also after the .animo() method runs update the value of var with removing .val() and you don't need == to update the values.
You are referencing .val(), but you assigned $hTog the value 0, without properties. Try this:
$(document).ready(function() {
var hTog = 0
$('#home').click(function() {
if (hTog === 0) {
$('#hSlider').animo({animation: 'hGrow', iterate: 1, duration: 10, keep: true, timing: 'linear'});
hTog = 1;
}
else {
$('#hSlider').animo({animation: 'hShrink', iterate: 1, duration: 10, keep: true, timing: 'linear'});
hTog = 0;
}
});
});
Related
I have two variables index_1 and index_2 of different function and I have to compare that. Is that correct method or I can something else
Currently, I am not satisfied with this code for comparison because every time i get same value:
$(document).ready(function(){
var index_1 = '';
var index_2 = '';
$('#spin-now').click(function(){
$(".spin-box-1").jCarouselLite({
auto: 200,
speed: 200,
visible: 1,
vertical: true,
easing: "easeOutBounce",
afterEnd: function(a) {
var index_1 = $(a[0]).index();
store_index_1(index_1);
}
});
$(".spin-box-2").jCarouselLite({
auto: 225,
speed: 225,
visible: 1,
vertical: true,
easing: "easeOutBounce",
afterEnd: function(a) {
var index_2 = $(a[0]).index();
store_index_1(index_2);
}
});
});
function store_index_1(x){
data_index_1 = x;
data_index_2 = data_index_1 ;
if(data_index_2 == data_index_1){
//alert('same');
}
else{
alert('different');
}
console.log('outside'+''+data_index_1+''+data_index_2);
}
//console.log(data_index_1);
});
(I think this should be a comment, but I don't have enough reputation)
You defined 2 global variables, so if you're going to use them, then save your first index of .spin-box-1 in index_1 and .spin-box-2 in index_2, and then call a 'compare' function (your store_index_1).
$(document).ready(function(){
var index_1 = '';
var index_2 = '';
$('#spin-now').click(function(){
$(".spin-box-1").jCarouselLite({
auto: 200,
speed: 200,
visible: 1,
vertical: true,
easing: "easeOutBounce",
afterEnd: function(a) {
index_1 = $(a[0]).index(); //index_1 is your global
}
});
$(".spin-box-2").jCarouselLite({
auto: 225,
speed: 225,
visible: 1,
vertical: true,
easing: "easeOutBounce",
afterEnd: function(a) {
index_2 = $(a[0]).index(); //index_2 is your global
}
});
compare(); //index_1 and index2 should be set by this line.
});
function compare(){
if(index_1 == index_2){
alert('same');
}
else{
alert('different');
}
console.log('outside'+''+index_1+''+index_2);
}
//rest of your code
});
The thing with your store_index_1(x) function is that it will always be true because you are comparing 2 equal values:
data_index_2 = data_index_1 ;
if(data_index_2 == data_index_1)
That's kind of nonsense so i'm confused about what are you trying to do.
And again, sorry for the 'answer' 'cause I can't comment yet.
I am trying to generate multiple jQuery Dialogs within a loop. Funny thing is, if I hardcode the dialogs in the function(), like #dialog1.dialog({...}) and #dialog2.dialog({...}) and so on it works!
But if I generate these functions in a loop it doesn't work!!!
Here is an exemplary code:
<div id=object><div>
<script type="text/javascript">
var array =['1','2','3','4','5','6','7','8'];
$(document).ready(function () {
for(var i = 0; i < 7 ; i++) {
$( "#dialog"+array[i]).dialog({
autoOpen: false,
width: "auto",
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
}
});
$( "#opener"+array[i]).click(function() {
$( "#dialog"+array[i]).dialog( "open" );
});
}
});
for(var i = 0; i < 7 ; i++) {
$("#object").append("<button id=\opener"+array[i]+">Details</button> ");
$("#object").append("<div class=\"dialog\" id=\"dialog"+array[i]+"\"title=\"Details\"></div>");
};
</script> `
It would be very kind if someone could help me!
Include the below code in document ready function
for(var i = 0; i < 7 ; i++) {
$("#object").append("<button id=\opener"+array[i]+">Details</button> ");
$("#object").append("<div class=\"dialog\" id=\"dialog"+array[i]+"\"title=\"Details\"></div>");
}
You need to swap your loops over. At the moment you are trying to access #dialogX elements before they exist in the DOM. In fact, you can combine both loops into one, which creates the button and dialog elements and then instatiates the dialog.
var array =['1','2','3','4','5','6','7','8'];
$(document).ready(function () {
for (var i = 0; i < array.length; i++) {
var $dialog = $('<div />', {
class: 'dialog',
id: 'dialog' + array[i],
title: 'Details'
}).dialog({
autoOpen: false,
width: "auto",
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
}
});
var $button = $('<button />', {
id: 'opener' + array[i],
text: 'Details'
}).click(function () {
$("#dialog" + array[i]).dialog("open");
});
$("#object").append($button, $dialog);
}
});
First question from me! I have search for possible ways to do this function that i want but could not find anything that helped me out..
I´m new at javascript and working with this as base:
http://jsfiddle.net/danieltulp/gz5gN/42/
When i adjust the Price-slider, i want to se what price in numbers that i´m searching for.
ex. search from 123$ - 900$
And the same with quality.
I´m also trying to make each slider have different min-max and values, is that possible?
$(function() {
var options = {
range: true,
min: 0,
max: 250,
step: 1,
values: [0, 250],
change: function(event, ui) {
var minP = $("#price").slider("values", 0);
var maxP = $("#price").slider("values", 1);
var minQ = $("#quality").slider("values", 0);
var maxQ = $("#quality").slider("values", 1);
showProducts(minP, maxP, minQ, maxQ);
}
};
2 functions are needed. One for each slider's onChange event. After each onChange function execution min and max values for each slider should be updated based on the calculation results. showProducts() will work in its current form.
This UX feels too complicated. Have you considered representing your data filtering somehow else?
This is how i solved it!
fiddle found here: http://jsfiddle.net/5PAa7/28/
i put it in to two variables instead of two functions.
function showProductsP(minP, maxP) {
$(".product-box").filter(function() {
var price = parseInt($(this).data("price"), 10);
if(price >= minP && price <= maxP){
$(this).show();
} else {
$(this).hide();
}
});
$(function() {
var options = {
range: true,
min: 0,
max: 900,
step: 5,
values: [0, 900],
slide: function(event, ui) {
var minP = $("#slider-price").slider("values", 0);
var maxP = $("#slider-price").slider("values", 1);
var minL = $("#slider-length").slider("values", 0);
var maxL = $("#slider-length").slider("values", 1);
$(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
showProducts(minP, maxP, minL, maxL);
}
};
var options_length = {
range: true,
min: 0,
max: 60,
step: 1,
values: [0, 60],
slide: function(event, ui) {
var minP = $("#slider-price").slider("values", 0);
var maxP = $("#slider-price").slider("values", 1);
var minL = $("#slider-length").slider("values", 0);
var maxL = $("#slider-length").slider("values", 1);
$(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
showProducts(minP, maxP, minL, maxL);
}
};
I have some JavaScript that loads a stack of separate elements based on their class name. However, I'd like to add a 1second delay on each, so they all appear one after another.
So i1 loads first then a second later i2 loads and so on...
How do I achieve this with my code?
<script>
jQuery(function($){
var i1 = $(".one"),
i2 = $(".two"),
i3 = $(".three");
i4 = $(".four");
i5 = $(".five");
i6 = $(".six");
$('.field').animate( {
marginTop:"0"
},600, function () {
i1.animate({
"opacity": 1
}),
i2.animate({
"opacity": 1
}),
i3.animate({
"opacity": 1
}),
i4.animate({
"opacity": 1
})
i5.animate({
"opacity": 1
}),
i6.animate({
"opacity": 1
}, 500);
});
});
</script>
Many thanks for any help with this :)
You can try this way:-
Html
<div class="one slide">1</div> <!-- give some common class all these-->
<div class="two slide">2</div>
<div class="three slide">3</div>
<div class="four slide">4</div>
<div class="five slide">5</div>
JS
var all = $('.slide').get(); //Get all the element to slide into an array.
function animate() {
var elem = all.shift(); //Remove the top element from the array
//animate it
$(elem).animate({
"opacity": 1
}, function () {
if (all.length > 0)
window.setTimeout(animate, 1000); //set the time out after the delay of 1 sec for next element to animate.
});
}
animate();
Demo
For each element, set animate function inside the callback of animate method of the previous element.
$('.field').animate({
marginTop: "0"
}, 600, function () {
i1.animate({
"opacity": 1
}, function () {
i2.animate({
"opacity": 1
},etc...);
Without leaking variables and having to add a new class, you can loop through the found elements and use setTimeout to delay time until the next. For example:
$(document).ready(function () {
var i1 = $(".one"),
i2 = $(".two"),
i3 = $(".three"),
i4 = $(".four"),
i5 = $(".five"),
i6 = $(".six"),
iterator = function () {
var arr = Array.prototype.slice.call(arguments, 0),
len = arr.length,
iterate = function (index) {
if (index === len) {
return;
}
arr[index].animate({
opacity: 1
}, 600, function () {
setTimeout(function () {
iterate(++index);
}, 1000);
});
};
iterate(0);
};
iterator(i1, i2, i3, i4, i5, i6);
});
DEMO: http://jsfiddle.net/FbGwQ/2/
Try using jQuery .delay(), it allows you to delay the execution of functions that follow it in the queue.
http://api.jquery.com/delay/
UPDATED:
Working jsFiddle Example: http://jsfiddle.net/DylanNunns/su8jp/2/
jQuery(function ($) {
var i1 = $(".one"),
i2 = $(".two"),
i3 = $(".three");
i4 = $(".four");
i5 = $(".five");
i6 = $(".six");
$('.field').animate({
marginTop: "0"
}, 600, function () {
i1.delay(1000).animate({
"opacity": 1
}),
i2.delay(2000).animate({
"opacity": 1
}),
i3.delay(3000).animate({
"opacity": 1
}),
i4.delay(4000).animate({
"opacity": 1
}),
i5.delay(5000).animate({
"opacity": 1
}),
i6.delay(6000).animate({
"opacity": 1
});
});
});
I like to use jQuery's each method along with delay to help out with this because it gives you the index of an element which you can use to set the delay.
jQuery(function () {
var animation_items = [
".one", ".two", ".three", ".four", ".five", ".six"
];
$.each(animation_items, function(index, item) {
$(item).delay(index * 1000).animate({
opacity: 1
}, 500);
});
});
You also get the added bonus of it working with a specific class instead of specifying them all separately. This makes everything more general and easier to maintain. You can simply add another div to your HTML without having to edit the JavaScript.
<div class="fade_in"></div>
<div class="fade_in"></div>
<div class="fade_in"></div>
jQuery(function () {
var delay = 1000;
$('.fade_in').each(function(index, item) {
$(item).delay(index * 1000).animate({
opacity: 1
}, 500);
});
});
Here's a demo
I think I'd rather use a bit of recursion and use the callbacks for a cleaner implementation (in my mind ..)
var oneByOne = function($el) {
$el.fadeIn(600, function() {
if (!$el.next().length == 0)
oneByOne($el.next());
});
};
$first = $('#one-by-one').children().first();
oneByOne($first);
http://jsfiddle.net/mikecmpbll/sbwMx/
Alternatively, still using recursion but working with the array of items instead:
var oneByOne = function(arr) {
$el = $(arr.shift());
$el.fadeIn(600, function() {
if (!$el.next().length == 0)
oneByOne(arr);
});
};
arr = $("#one-by-one").children().get();
oneByOne(arr);
http://jsfiddle.net/mikecmpbll/sbwMx/1/
I'm using this script on my tumblr page, which gives posts different random text colors:
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;}
$(function() {
$(".post").each(function() {
$(this).css("color", get_random_color());
}); });
The thing is the script isn't working for elements loaded with infinite scrolling. Can anyone help me rewrite this code? I don't know how to write javascript sadly.
Take a look at your blog's main.js script. You can call your custom function when you grab the new elements from another page. This is my proposed revision of your main.js file.
$(window).load(function () {
var $wall = $('#content');
$wall.imagesLoaded(function () {
$wall.masonry({
itemSelector: '.post',
isAnimated: false
});
});
$wall.infinitescroll({
navSelector: '#pagination',
nextSelector: '#pagination li a.pagination_nextlink',
itemSelector: '.post',
loadingImg: "http://static.tumblr.com/kwz90l7/bIdlst7ub/transparent.png",
loadingText: " ",
donetext: " ",
bufferPx: 100,
debug: false,
errorCallback: function () {
$('#infscr-loading').animate({
opacity: .8
}, 2000).fadeOut('normal');
}
}, function (newElements) {
var $newElems = $(newElements);
$newElems.hide();
$newElems.each(function(value){
value.css("color", get_random_color());
});
$newElems.imagesLoaded(function () {
$wall.masonry('appended', $newElems, {
isAnimated: false,
animationOptions: {
duration: 900,
easing: 'linear',
queue: false
}
}, function () {
$newElems.fadeIn('slow');
});
});
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
deeplinking: false,
default_width: 600,
default_height: 550,
allow_resize: true,
});
});
});
$('#content').show(500);
});
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
What I've done is add your get_random_color function and called it from within the Infinite Scroll call to add a custom color to each of the elements in $newElems so really, all I've done is taken your code and integrated it differently than what you were trying to do, which wasn't working. This should, theoretically, work. If it doesn't or you have questions, let me know.