We Keep Coding

Animation not being made jquery (backgroundColor)

I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.

I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation

Adding hyperlinks to a javascript image array

I'm having a problem with a java carousel. The code is working fine on my page, but I want to add hyperlinks to the images, but I'm unsure how to achieve this. I've tried a few things, but its just caused the code to stop working, and the carousel to drop off the page.
As I say, its all working fine, but as soon as I alter the default code, it falters.
The code I have so far is:
<script type="text/javascript">
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['autumnpark.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.'], //["image_path", "optional description"]
['chime.jpg', '<h2>Wind Chime</h2>The bellweather of the sky, the chime speaks of impending turmoil.'],
['girlportrait.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
['redbench.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
</script>
Any help is appreciated....

Check out the source here:
http://home.comcast.net/~jscheuer1/side/bgcarousel/demo_linked.htm
Great example. Just add a link into the slide text, and use CSS to style it to the width and height 100% of the slide box.

Masonry & LazyLoad doesn't want to work together

I am setting up a site for a photographer. It should be built using the Bootstrap 3 framework, and he wants to have a masonry with over 400 images on one page. For this to work LazyLoad is a must. I have now spent several days trying to get LazyLoad to work with Desandros Masonry but with no success..
I've tried all of the examples that one finds googling, but most posts/sites/forums just redirects you, or have copied this stackoverflow answer:
Combining LazyLoad and Jquery Masonry
I've tried both methods but unfortunately I get nothing but grey hair..... :(
Here is a simplified live version of the page im working on:
http://nr.x10.mx
In this example I have added a fade-in on page-load, but left the LazyLoad out since I can get it to work.
And here you have a FIDDLE of the following
var container = document.querySelector('#ms-container');
imagesLoaded( container, function()
{
var msnry = new Masonry(container,
{ itemSelector: '.ms-item',
columnWidth: '.ms-item',});
});
You can also download the whole pack here, including the jquery.lazyload.js HERE
Any help would be highly appreciated
UPDATE
Here you can have 4 different examples of the different problems that occur.
I also found to my joy that the Bootstrap .img-responsive class is interfering with LazyLoad.
1 - Masonry without LazyLoad
2 - Masonry and Lazyload - Masonry breaks down and LazyLoad has no effect
3 - LazyLoad without Masonry - LazyLoad has no effect
4 - LazyLoad without Masonry and Bootsrap "img-responsive" removed
5 - Masonry & LazyLoad using first method of SO answer mentioned above
6 - Masonry & LazyLoad using second method of SO answer mentioned above Both of the last ones gives the following error: [Error] TypeError: 'undefined' is not a function (evaluating '$container.imagesLoaded')
global code (5.html, line 110)
Updated zip HERE
Again, any asisstance would be highly appreciated, thank you

I made your 5.html work by using the javascript files of the fiddle present on the SO link you posted, answered by Nathan Do. So you probably just had bad versions of the scripts.
The scripts linked on that page are: http://cdn.jsdelivr.net/masonry/2.1.08/jquery.masonry.min.js and http://cdn.jsdelivr.net/jquery.lazyload/1.8.4/jquery.lazyload.js
Here's your original fiddle updated with that page's method: http://jsfiddle.net/L9RLe/

In your case, though you are creating masonry and adding lazyload effect, the images get overlapped.
You need to follow steps as :
Create Dynamic HTML structure for images along with their respective aspect ratio height and width. Note: images should have the required attributes for applying lazy load effect i.e. class="lazy" data-original="actual image url" and src="dummy imageurl".
Apply lazy load effect.
Then create Masonry.
Lets have an example :
Suppose I am having a javascript array with some image related data as,
var gallery_itemList= [
{url: "images/example1.jpg", width:"1170", height:"460"},
{url: "images/example2.jpg", width:"800", height:"320"},
{url: "images/example3.jpg", width:"1200", height:"870"}];
And below prototype for creating dynamic html, applying lazyload effect and creating Masonry effect as :
var masonryGallery = {
gallery :'', // gallery to create
genarateGallery : function() {
// generate each item html
var inHTML="", i;
for(i=0;i<gallery_itemList.length;i++){
var iWidth, iHeight, fHeight=0;
iWidth=parseInt(gallery_itemList[i].width);
iHeight=parseInt(gallery_itemList[i].height);
fHeight = Math.round((iHeight*300)/iWidth);
inHTML+='<div class="item" style="height:'+fHeight+'px">';
inHTML+='<img class="lazy" src="images/loading.gif" data-original="'+gallery_itemList[i].url+'"/>';
inHTML+='</div>';
}
//add generated html to gallery
$(masonryGallery.gallery).append(inHTML);
},
applyLazyload : function(){
$("img.lazy").lazyload();
},
createMasonry : function(){
// create Masonry
$(masonryGallery.gallery).masonry({
columnWidth: 350,
itemSelector: '.item',
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
$(this).masonry('reload');
});
},
init : function(givenGallery) {
masonryGallery.gallery = givenGallery; // set gallery
masonryGallery.genarateGallery(); // generate gallery html
masonryGallery.applyLazyload(); // apply lazyload effect
masonryGallery.createMasonry(); // apply masonry effect
}
};
/* Gallery Intialisation */
(function(){masonryGallery.init('div#content');})();

If you have the problem images get overlapped, I found the solution at the site below, although it is in Japanese.
http://www.webdesignleaves.com/wp/jquery/1340/
The point is use following;
$('img.lazy').load(function(){ ... })
HTML
<div id="works_list">
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt="">
<p>title 1</p>
</div><!-- end of .work_item-->
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt="">
<p>title 2</p>
</div><!-- end of .work_item-->
....
</div><!-- end of #works_list -->
jQuery
$("img.lazy").lazyload({
effect: 'fadeIn',
effectspeed: 1000,
threshold: 200
});
$('img.lazy').load(function() {
masonry_update();
});
function masonry_update() {
var $works_list = $('#works_list');
$works_list.imagesLoaded(function(){
$works_list.masonry({
itemSelector: '.work_item',　
isFitWidth: true,　
columnWidth: 160
});
});
}

Just want to contribute my solution to this thorny problem.
Basically you need to call masonry's layout() function every time an image is lazyloaded, because that's when you know what it's dimensions are going to be. So you setup lazyload's load() function to call masonry.layout(). This can cause a new problem, because on your initial page load, all of your images will have a zero or near-zero height (depending on your css), and thus stack up in the top of the viewport. When you initialize lazyload, it will see all these images in the viewport, and try to load them all at once. This causes you to download tons of images, and even worse, calls masonry dozens or hundreds of times. Not very speedy.
My solution is to force a minimum height on unloaded images until they are lazyloaded. This restricts the number of images that will be found in the viewport initially, limiting the number of lazyload and masonry calls to a reasonable amount.
Once an image is loaded, you remove the .unloaded class in order to deconstrict the height and allow it to conform to the height of the image.
HTML
<div id="masonry-container">
<div class="masonry-item unloaded"><img class="lazy" data-original="image.jpg"></div>
<!-- Repeat as needed -->
</div>
CSS
.masonry-item {
width: 33.3%; // I'm doing a 3-column masonry layout
}
.unloaded {
min-height: 200px;
// set a minimum default height for image containers
// this prevents too many images from appearing in the viewport
// thus causing lazy load to load too many images at once
// we will use the lazyload .load() callback to remove this fixed
}
JS
$( document ).ready(function() {
// Initialize Masonry
var container = document.querySelector('#masonry-container');
var msnry = new Masonry( container, { transitionDuration: 0 } );
msnry.layout(); // run masonry for first time
function doMasonry() { msnry.layout(); } // gives us a function handler to call later with window.setTimeout()
// Initialize lazyload
$("img.lazy").lazyload({
effect : "fadeIn", // optional
load : function() {
$(this).parent().removeClass("unloaded"); // select the div containing the image and remove the "unloaded" class, thus deconstricting the min-height
window.setTimeout(doMasonry,100); // trigger masonry again with a 100 ms delay, if we do it too soon, the image may not have loaded, and masonry will layout with the wrong image dimensions (this might be a bit of a hacky way to do it)
}
});
});

jCarouselLite auto-scroll responsive changes

I'm using jcarousel lite to display an auto-scrolling carousel of brand logos on one of my sites. I tried to make it responsive (max 6 images on largest display) using the following javascript. The carousel works fine using the original code without me trying to modify how many images are visible.
<script>
function carouselLogic(){
if ($(window).width() > 959 ){
visible = 6;
changeCarousel(visible);
}
else if($(window).width() > 767){
visible = 4;
changeCarousel(visible);
}
else if($(window).width() > 599){
visible = 2;
changeCarousel(visible);
}
}
carouselLogic();
$(window).resize(function(){
carouselLogic();
});
/* original function for first page load
$(function() {
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: 6
});
});
*/
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: visible
});
}
</script>
Images appear inline with a 20px margin left/right.
This code is supposed to change the visible number of logos to ensure they still fit on the page with each responsive change.
The result is the carousels auto scroll goes all crazy. It bounces back and forth all over the place, and much quicker than the default.
Any suggestions on how to improve this code?

The original jCarouselLite has been forked here;
https://github.com/kswedberg/jquery-carousel-lite#responsive-carousels
It's not quite as Lite as it originally was but it has many more methods, and is touch screen scrollable and responsive. You can add the following options which are working for me;
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: true,
speed: 1000,
visible: visible,
autoWidth: true,
responsive: true
});
}
As pointed out here,
Run jCarouselLite again, after an AJAX request
You might want to end the original carousel as well in your carouselLogic() function
$(".logoCarousel").trigger("endCarousel");

This is old but in case it helps, i'm pretty sure you need to "reset" jcarousellite. Otherwise you are instantiating it again and again after each window resize.
To initialize it properly after it has already been initialized, you need to call a reset method. I don't remember the syntax off the top of my head, but if you search the jcarousellite.js source for "reset" you should find the correct syntax

Adding animation to this testimonial slider

I have created a slider using CSS3 to display my testimonials.. Now I need to add some animation to this slider using Jquery. But I dont have any idea how to use Jquery with this slider.. and what are the suitable plugin for this. So anybody can tell me How can I add an animation to this slider?
any ideas are greatly appreciated.
Thank you.
Here is a link to the slider code: jsfiddle.net/XJVYj/82

I think it will be very hard to find a Plugin that exactly matches your code. But I could code you the jQuery stuff for it. But then I would have two Questions.
How much of the CSS can I change? Or should it also still work without js activated?
Are you staying with a number of 3 items in the future? Or do you want to change the number of slides dynamically?
// EDIT
OK it works now. I know its not very elegant, but I dont wanted to change too much of your code. So I just had to edit two of your css selectors (I commented the old one out). You also wanna notice, that with this solution your old method still works when javascript is disabled.
The jQuery Code follows...
$("div.one").css({"left":0, "opacity":1});
$("div.two").css({"left":300, "opacity":1});
$("div.three").css({"left":600, "opacity":1});
$("input#first").click(function(){
$("div.one").animate({left:0},600);
$("div.two").animate({left:300},600);
$("div.three").animate({left:600},600);
});
$("input#second").click(function(){
$("div.one").animate({left:-300},600);
$("div.two").animate({left:0},600);
$("div.three").animate({left:300},600);
});
$("input#third").click(function(){
$("div.one").animate({left:-600},600);
$("div.two").animate({left:-300},600);
$("div.three").animate({left:0},600);
});​
jsfiddle.net/mYhEV/2/
Hope it helps.
PS: For a cleaner solution you would have to rethink a bit. One method would be to put all the sliders in a wrapper and just moving this wrapper instead of moving.

Try Using these:
Flex Slider
Timelinr
SmartGallery
Skitter

There is documentation literally right in the script file which has options you can use:
$.tiny.carousel = {
options: {
start: 1, // where should the carousel start?
display: 1, // how many blocks do you want to move at 1 time?
axis: 'x', // vertical or horizontal scroller? ( x || y ).
controls: true, // show left and right navigation buttons.
pager: false, // is there a page number navigation present?
interval: false, // move to another block on intervals.
intervaltime: 3000, // interval time in milliseconds.
rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
animation: true, // false is instant, true is animate.
duration: 1000, // how fast must the animation move in ms?
callback: null // function that executes after every move.
}
};
Secifcally: animation: true, // false is instant, true is animate.
Try setting the animation to true when you call the slider on your element (you provided no script code so I can't edit it for you.)
$('YOUR_SLIDERr').tinycarousel({ animation: true });​