We Keep Coding

skip visible items from animating using JS

I'm using waypoints to have fadeIn animation when the user scrolled down, and it worked. But as you can see, during the onload, there's a fadeIn too for the first few visible items.
How to not to have that? since I binded all .card to way[point.
My js
$(function() {
var waypoints = $('.card').waypoint(function (direction) {
$(this).addClass("animated fadeIn");
}, {
offset: '90%'
});
});
DEMO : http://jsfiddle.net/ghx49d7x/

Not sure if its exactly what you want, but you can add a variable to indicate if the page has loaded or not and only add fadeIn if it has:
$(function () {
var pageLoaded = false;
var waypoints = $('.card').waypoint(function (direction) {
$(this).addClass("animated"
+ (pageLoaded ? " fadeIn" : ""));
}, {
offset: '90%'
});
pageLoaded = true;
});
Updated Fiddle: http://jsfiddle.net/ghx49d7x/3/

Unable to input text in an input field (in a fancy box popup)

for some reason I can't input text in my newsletter input field now that I display it in a fancybox popup window. Any idea what the issue is and how to fix this? See http://jsfiddle.net/6G8YR/
Many thanks,
function openFancybox() {
setTimeout( function() {$('#newspopup').trigger('click'); },1000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: 0.0001 });
$('#newspopup').fancybox({
helpers : {
overlay : {
css : {
'background' : 'rgba(58, 42, 45, 0.3)'
}
}
}
});
});
$(document).on('click', function(e) {
if(e.target === $('.visitwebsitebtn')[0]) {
$.fancybox.close();
}
});

Ok I figured out the problem, but only ran into other kinds of issues. The problem is that, there is an event that exists that causes your fancybox to refresh everytime someone happens to click on it.
This is why you are unable to write anything in the input. I have a temporary solution that is really ugly but it works.
$('#email').on('click', function(e){
e.stopPropagation();
});
Upon clicking the email input, your fancybox won't refersh. I tried applying this to your #newspopup but it blocs $('#newspopup').trigger('click'); so your fancybox never opens at the start.
Here is a Demo
Additional information:
I've worked with fancybox plugin before and I've never encountered this problem. You might want to think of adding options to your fancybox.. for example add this line :
'type':'iframe',
I would have tried on jsfiddle, but unfortunately they don't allow it, it seems.

You can optimize your code and get rid of unnecessary click events and triggers (so you won't need unnecessary e.stopPropagation() methods either) like :
function openFancybox() {
setTimeout(function () {
$.fancybox('#newspopup', {
modal: true, // this prevents fancybox to close unless close unless ".visitwebsitebtn" is clicked
helpers: {
overlay: {
css: {
'background': 'rgba(58, 42, 45, 0.3)'
}
}
},
afterShow: function () {
// enables a way to close fancybox
$(".visitwebsitebtn").on("click", function () {
$.fancybox.close()
});
}
});
}, 1000);
};
$(document).ready(function () {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', {
expires: 7
});
});
See JSFIDDLE

Zozo tabs and ajax request

I have zozo tabs script and i want make ajax request at change tabs.
Here is my preview
Animation doesn't work here- i don't now why, but you can see javascript code:
$(document).ready(function () {
checkOrientation("vertical");
var onSelect = function(event, item) {
console.log("Selected tab text: " + item.tab.text()); alert('dsadsa');
};
var tabbedNav = $("#tabbed-nav").zozoTabs({
orientation: "vertical",
animation: { duration: 200 },
defaultTab: "tab1",
effects: "slideD",
easing: "easeOutQuad",
select: onSelect
});
$("#ddl-orientation").bind("change", function (e) {
var orientation = $(this).val();
checkOrientation(orientation);
tabbedNav.data('zozoTabs').setOptions({ "orientation": orientation });
});
$("#ddl-position").bind("change", function (e) {
tabbedNav.data('zozoTabs').setOptions({ "position": $(this).val() });
});
function checkOrientation(orientation) {
jQuery('#ddl-position').children('option[data-orientation="h"]').attr('disabled', !(orientation === "horizontal"));
}
});
Apparently this animation is easy to use in ajax.
here is documentation
I don't know well javascript and i don't have idea what i must do.
Could you show me where i must put code to active ajax ? simple alert message will by ok : ) I will be grateful too, if you tell me how return ajax request to content tab.

function onSelect(event,item)
{
if(item.tab.text() == 'some tab name')
{
alert("i can rollerblade");
}
}

I have used 'select' attribute of zozo tabs but it never worked for me.
But I have found an alternative for it
Put a class or id in li.
$("li#123").live("click", function(e){
if($(this).text() == 'some tab name')
{
alert("i can rollerblade");
$.ajax({
..........
});
}
}

Delay animation until other animation is complete (sliding content(

I have this code which animates between divs sliding out. If an item is clicked, it's relevant content slides out. If another item is clicked, the current content slides back in and the new content slides out.
However,
var lastClicked = null;
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
for (var i=0; i<animateClasses.length; i++) {
(function(animCls) {
$('.each-brew.'+animCls).toggle(function() {
if (lastClicked && lastClicked != this) {
// animate it back
$(lastClicked).trigger('click');
}
lastClicked = this;
$('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000).css('position','inherit');
}, function() {
$('.each-brew-content.'+animCls)
.animate({ left: '-33.3333%' }, 1000, function() { $(this).hide()}) // hide the element in the animation on-complete callback
.css('position','relative');
});
})(animateClasses[i]); // self calling anonymous function
}
However, the content sliding out once the already open content slides back is sliding out too quickly - it needs to wait until the content has fully slided back in before it slides out. Is this possible?
Here's a link to what I'm currently working on to get an idea (http://goo.gl/s8Tl6).
Cheers in advance,
R

Here's my take on it as a drop-in replacement with no markup changes. You want one of three things to happen when a menu item is clicked:
if the clicked item is currently showing, hide it
if something else is showing, hide it, then show the current item's content
if nothing is showing, show the current item's content
var lastClicked = null;
// here lastClicked points to the currently visible content
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
for (var i=0; i<animateClasses.length; i++) {
(function(animCls) {
$('.each-brew.'+animCls).click(function(event){
if(lastClicked && lastClicked == animCls){
// if the lastClicked is `this` then just hide the content
$('.each-brew-content.'+animCls).animate(
{ left: '-33.3333%' }, 1000,
function() {
$(this).hide();
}).css('position','relative');
lastClicked = null;
}else{
if(lastClicked){
// if something else is lastClicked, hide it,
//then trigger a click on the new target
$('.each-brew-content.'+lastClicked).animate(
{ left: '-33.3333%' }, 1000,
function() {
$(this).hide();
$(event.target).trigger('click');
}).css('position','relative');
lastClicked = null;
}else{
// if there is no currently visible div,
// show our content
$('.each-brew-content.'+animCls).show()
.animate({ left: '0' }, 1000)
.css('position','relative');
lastClicked = animCls;
}
}
});
})(animateClasses[i]); // self calling anonymous function
}

Well, I'm pretty sure there are other more easy possibilities and I didn't have much time but here is a working jsfiddle: http://jsfiddle.net/uaNKz/
Basicly you use the callback function to wait until the animation is complete. In this special case it's the complete: function(){...}
$("document").ready(function(){
$('#ale').click(function(){
if ($('div').hasClass('toggled')){
$('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){
$('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');}
}).removeClass('toggled');
}else{
$('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');
}
});
$('#bramling').click(function(){
if ($('div').hasClass('toggled')){
$('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){
$('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');}
}).removeClass('toggled');
}else{
$('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');
}
});
});
I give a toggled class if a div is expanded. Since the animation on your page seems to be pretty much broken I think this would be a better way to do this. But remember: my code isn't really good. Just fast and it can be refactored. It's working tho..

Rather than using toggles, bind an on "click" handler to your ".each-brew" divs. In the handler, first hide content divs and then show the appropriate content when that animation completes. You can do that with either a promise or a callback. Something like this...
$(".each-brew").on("click", function (event) {
$(".each-brew-content").show().animate({ left: "0" }, 1000, function() {
// Get the brew name from the class list.
// This assumes that the brew is the second class in the list, as in your markup.
var brew = event.currentTarget.className.split(/\s+/)[1];
$(".each-brew-content." + brew).animate({ left: "-33.3333%" }, 1000, function() { $(this).hide(); });
});
});

I think an event and observer would do the trick for you.
set up the callback function on completion of your animation to fire an event.
the listener would first listen for any animation event and after that event is triggered listen for the completion event. when the completion event is fired execute the initial animation event.run method (or whatever you would want to call it)
Within the listener
on newanimationeventtriger(new_anim) wait for x seconds (to eliminate infinite loop poss) while if this lastevent triggers done == true{
new_anim.run();
}

Javascript or jQuery slide to element

When a user clicks on the "Contact Me" button, i want the screen to slide to the #contact element, however cannot figure out how to do it. I've tried various different snippets of code and tried to tailor it to my needs, but nothing seems to work.
The site is here; http://dombracher.com/
Simply want the screen to slide to the div mentioned above, rather than quickly snap to it.
Thanks in advance.

$(document).ready(function() {
$("a[href^='#']").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}

You can animate window scroll by yourself
$(".menu2").click(function(){
$(document.body).animate({
"scrollTop": $("#contact").offset().top
}, 2000, "swing"); // animation time and easing
return false; // preventing default jump
});
Fiddle: http://jsfiddle.net/M8JE2/
Or use jquery plugin like http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html to make any/all local links work with animation.

Here it is , scrolls to the bottom of the page since your contact form is there:
jQuery(function () {
jQuery('#nav1 li.menu2').click(function (e) {
jQuery("html, body").stop().animate({
scrollTop: jQuery(document).height()
}, 1000);
e.preventDefault();
return false;
});
});