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/

Wordpress SideOffer Closing on body click

This is the jQuery code written on the php file of the plugin. IT is working fine now but i want it to close when some one clicks outside of the panel.
Here is the javascript code :
<script type="text/javascript">
jQuery(document).ready(function($) {
/* SideOffer Sidebar Functionality */
$("#sideoffer").toggle(
function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_out'); ?>px" }, "slow"); },
function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow"); }
);
/* SideOffer .hd-sideoffer click function */
$(".sideoffer").click(function(){ $("#sideoffer").click(); });
/* SideOffer aLlow clicks on content box */
$("#sideoffer .box").click(function(event){ event.stopPropagation(); });
});</script>
Kindly help.

What you'll want to do is add this into the ready function
What it does is adding a delegated event on the document to trigger when anything that is not #sideoffer is cclicked and then hide #sideoffer.
$(document).on('click', ':not(#sideoffer)', function(){
$('#sideoffer').hide()
});

You'll need to capture the click event for everything other than your original click, which I guess is #sideoffer?
$('body').click(function(event) {
if (!$(event.target).closest('#sideoffer').length) {
$('#sideoffer').animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow");
};
});

try to use javascript
$('body').click(function(event) {
var target = event.target;
/* do something when getting element you are currently click on*/
}
Here is example, http://api.jquery.com/event.target/

Fade in and fade out text at the same location

I want to write a code which can toggle two sentences fading in and fading out. But I want to toggle the sentences at the same location ie one text fades and the other starts coming in place of the first. In this case the sentences occur one below the other. Is there any way I can do this as in html content always comes one below the other.
This is the jquery script.
<script>
$(document).ready(function(){
$(function(){
$("#hide1").hide();
while(1)
{
$("#hide2").fadeOut(3000);
$("#hide1").fadeIn(3000);
$("#hide1").fadeOut(3000);
$("#hide2").fadeIn(3000);
}
});
});
</script>
Html
<p id="hide1"> Hide 1 <p>
<p id="hide2"> Hide 2 <p>

Demo
Try like this make the queue and animate
$("#hide1").hide();
function hide1() {
$("#hide2").fadeIn(3000);
$("#hide2").fadeOut(3000, hide2);
}
function hide2() {
$("#hide1").fadeIn(3000);
$("#hide1").fadeOut(3000, hide1);
}
hide1();
OR Chaining
$("#hide1").hide();
function hide1() {
$("#hide2").fadeIn(3000).fadeOut(3000, hide2);
}
function hide2() {
$("#hide1").fadeIn(3000).fadeOut(3000, hide1);
}
hide1();
This code would react dynamically, and it does not need any changes even if you want to apply this effect for more than two p elements
$("p").hide();
function test(elem) {
elem.fadeIn(1000, function () {
elem.fadeOut(1000, function () {
test(elem.next('p').length ? elem.next('p') : $('p:first'));
});
});
}
test($('p:first'));
DEMO

Try this:
setInterval(function () {
$('#hide1').fadeOut(1000, function () {
var $this = $(this);
$this.text($this.text() == 'Hide 2' ? 'Hide 1' : 'Hide 2');
$this.fadeIn(1000);
});
}, 3000);
Toggle the text within the setInterval function.
Fiddle Demo

Use a single paragraph tag and toggle the text within it while you try to fade it in and out.
$(document).ready(function(){
$(function(){
window.setInterval(function() {
$("#hideorshow").fadeToggle(1000, "linear", function() {
$("#hideorshow").text($("#hideorshow").text() === "Hide 1" ? "Hide 2" : "Hide 1");
$("#hideorshow").fadeToggle(1000, "linear");
});
}, 2000);
});
});
Also, I would suggest you use fadeToggle() instead of fadeIn() and fadeOut().
Here is a working JSFiddle demo.

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;
});
});

hover out function

jQuery("#markets_served").hover(function(){
jQuery.data(document.body, "ms_height", jQuery(this).height());
if(jQuery.data(document.body, "ms_height") == 35) {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
}
});
jQuery("#btn_ms_close").hover(function(){
jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
jQuery("#markets_served").stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery(this).css("display","none");
});
Problem with hovering out. It wont work. It wont hover out when the mouse is out of the content that appears on hover.
http://uscc.dreamscapesdesigners.net/ - example at the bottom " Markets Covered"

Take a look at the hover declaration on the jQuery site. You can specify a handler for the mouseover and mouseout event in one swoop. No need to calculate heights or bind another handler to a new div that appears.
$("#markets_served").hover(
function () {
//do this when over
},
function () {
//do this when out
}
);

Use is like:
$('#el').hover(function(e) { /* hover; */ }, function(e) { /* unhover */ });
here is documentation

Or simplier without data:
jQuery("#markets_served").hover(function() {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
}, function() {
jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","none");
});

When mouse comes in you increase the height of the div but you dont reset it when mouse is outside the div hence the issue.
You should do something like this:
jQuery("#markets_served").hover(
function(){
jQuery.data(document.body, "ms_height", jQuery(this).height());
if(jQuery.data(document.body, "ms_height") == 35) {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
} ,
function(){
jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","none");
}
});