We Keep Coding

wow.js and fullpage.js animation firing on BOTH scroll into / out of viewport

I have an issue with Wow.js and Fullpage.js. I've managed to get them working together, here is the script:
$(document).ready(function() {
$('#fullpage').fullpage({
'navigation': true,
'navigationPosition': 'right',
scrollBar: true,
onLeave: function() {
new WOW().init();
}
});
//methods
$.fn.fullpage.setAllowScrolling(true);
});
<img class="portfolio-image wow animated fadeInLeft" data-wow-iteration="1">
I have the data iteration set to 1, which prevents it from repeating.
Here is the site where you can see the effect in action
lancewalkerdesign.com
However, when i scroll into one of my viewports (each section on my front page is a full screen section with ul nav dots.) the animation fires. When I scroll down, the animation fires AGAIN as the scroller scrolls to the next section.
I would prefer to only see this animation once upon entering the viewport, whether scrolling down or up into it, not again as it's leaving.
Any ideas?

Why do you initialise wow in the onLeave callback?
You probably only have to do it once on page load.
Try initialising it only once in the afterRender callback:
$(document).ready(function() {
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'right',
scrollBar: true,
afterRender: function() {
new WOW().init();
}
});
//methods
$.fn.fullpage.setAllowScrolling(true);
});

Flexslider in tabbed panel gets messed up after browser window resize

I have two Flexsliders inside two different panels of a javascript tabbed panel. It loads perfectly fine. However, if I resize my browser window by either turning my iPhone from portrait to landscape or resizing the window on my Macbook Pro, the Flexsliders often get messed up. This doesn't happen all the time but it will happen eventually if I keep resizing my browser window. You can see it easiest by turning an iPhone from portrait to landscape and then clicking on the other tab containing the other Flexslider as described below.
The two Flexsliders are in the first two tabs, "Commonweath & Council" and "Transmission Gallery." If the panel is open to Commonwealth & Council and I resize my browser window, the Flexslider will adjust accordingly and will be fine in the open panel. However, after I finish resizing my browser window, and click on the other tab that contains the second Flexslider (in this case, Transmission Gallery), that Flexslider will often be messed up. The main slider container will be larger and the image inside is oversized and cropped. Or in some cases, the main slider turns into a carousel slider like the one below it. Or the image in the main slider is off-centered. But then if I click outside of the browser window on my Macbook Pro and click back on the browser window, it will pop back into the correct display. On my iPhone, I would have to refresh the webpage to make it display correctly.
I'm thinking it has to do with the Flexslider in the other tab, which is not open, not being able to read the window size change and scale correctly? Though sometimes it works fine and sometimes it doesn't, so maybe it's a bug with Flexslider? But for sure it will happen the second or third time I resize the window or turn my iPhone from portrait to landscape.
http://jmoon.net/projects/phoenixrising/phoenixrising_p1.html

I ended up using Tweaky.com to fix my Flexslider issue. Below is the correct script to account for browser window resizing.
<script defer src="../../scripts/jquery.flexslider.js"></script>
<script>
$(document).ready(function() {
$('div#Panels').tabs({
active: 2,
collapsible: false,
activate: function(event, ui) {
switch (ui.newPanel.index()) {
case 0:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
//-----------------
$(window).resize();
//-----------------
break;
case 1:
$('#carousel2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider2'
});
$('#slider2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel2"
});
//-----------------
$(window).resize();
//-----------------
break;
}
}
});
})
</script>
<script type="text/javascript">
$(function() {
$('#slider').hover(function() {
$('.flex-caption').fadeToggle();
});
$('#slider2').hover(function() {
$('.flex-caption').fadeToggle();
});
});
</script>

Nivo slider not working properly at first time sometimes

I have a website. Some pages have a slider, others not. I have this issue with nivo slider. Sometimes, can't figure out when, the slider isn't loading, so no image is shown. If you click again the same page, the slider is loading correctly and everything works fine. The problem is not standard, you have to try it many times by navigating to all pages. Please check it out, spend 1-2 minutes by visiting from the menu bar all pages so you can see the problem. The problem is more often with chrome - IE.
The link is here http://www.secureshop.gr/POOL/citycars/website
Thank you in advance.

Perhaps load your script for Nivo at the BASE of the body to ensure it doesn't run in the head and cause any sort of timeout issues.
As soon as the DOM understands that there is an img, it will continue, and that image will load in the meantime while it progresses down the rest of your HTML. Perhaps all of the imgs aren't downloading, hence the Nivo Slider not rendering it properly.
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script>
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: true, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: '', // Prev directionNav text
nextText: '', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
</script>
</body>

How can I run masonry after nivo slider is loaded?

I try to run masonry after the nivo slider has loaded so that masonry adjusts for the image captions which I have below the images in the slider.
I tried this code, but masonry breaks when I add container.masonry();
var container = $('#container');
$('.slider').nivoSlider({
effect: 'sliceDown',
directionNav: false,
pauseTime: 7000,
afterLoad: function() {
container.masonry();
}
});

Check this ,
http://www.metaphorcreations.com/nivo-slider-and-custom-links/
$("body").live("hover",function(){
container.masonry();
});
Run masonry inside hover function of body or page top parent element..this is an small trick, it will solve this problem

Parsing JSON Encoded values as strings, booleans, etc

I have a JSON encoded object that has been localized and ultimately will fill-in a JS file for options. The expected output of the options are (the defaults and the explanation of the "type" it is looking for):
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "fade", //String: Select your animation type, "fade" or "slide"
slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationDuration: 600, //Integer: Set the speed of animations, in milliseconds
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: false, //Boolean: Allow slider navigating via mousewheel
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
randomize: false, //Boolean: Randomize slide order
slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
My current HTML output of the JSON encoded object is:
/*<![
CDATA[
*/varflexslider_vars=[
];flexslider_vars={
"js_animation": "fade",
"js_slide_direction": "horizontal",
"js_slideshow": "1",
"js_slideshow_speed": "7000",
"js_animation_duration": "600",
"js_direction_nav": "1",
"js_control_nav": "1",
"js_keyboard_nav": "1",
"js_mousewheel": null,
"js_prev_text": "Prevous",
"js_next_text": "Next",
"js_pause_play": null,
"js_pause_text": "Pause",
"js_play_text": "Play",
"js_randomize": null,
"js_slide_start": "0",
"js_animation_loop": "1",
"js_pause_on_action": "1",
"js_pause_on_hover": null,
"js_controls_container": "",
"js_manual_controls": "",
"js_start_function": "function(){}",
"js_before_function": "function(){}",
"js_after_function": "function(){}",
"js_end_function": "function(){}"
};/*
]
]>*/
and this is how I am currently (and unsucessfully) adding in those options to the JS file:
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: flexslider_vars.js_animation, //String: Select your animation type, "fade" or "slide"
slideDirection: flexslider_vars.js_slide_direction, //String: Select the sliding direction, "horizontal" or "vertical"
slideshow: flexslider_vars.js_slideshow, //Boolean: Animate slider automatically
slideshowSpeed: flexslider_vars.js_slideshow_speed, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationDuration: flexslider_vars.js_animation_duration, //Integer: Set the speed of animations, in milliseconds
directionNav: flexslider_vars.js_direction_nav, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: flexslider_vars.js_control_nav, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboardNav: flexslider_vars.js_keyboard_navjs_mousewheel, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: flexslider_vars.js_mousewheel, //Boolean: Allow slider navigating via mousewheel
prevText: flexslider_vars.js_prev_text, //String: Set the text for the "previous" directionNav item
nextText: flexslider_vars.js_next_text, //String: Set the text for the "next" directionNav item
pausePlay: flexslider_vars.js_pause_play, //Boolean: Create pause/play dynamic element
pauseText: flexslider_vars.js_pause_text, //String: Set the text for the "pause" pausePlay item
playText: flexslider_vars.js_play_text, //String: Set the text for the "play" pausePlay item
randomize: flexslider_vars.js_randomize, //Boolean: Randomize slide order
slideToStart: flexslider_vars.js_slide_start, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
animationLoop: flexslider_vars.js_animation_loop, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
pauseOnAction: flexslider_vars.js_pause_on_action, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: flexslider_vars.js_pause_on_hover, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: flexslider_vars.js_controls_container, //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: flexslider_vars.js_manual_controls, //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
start: flexslider_vars.js_start_function, //Callback: function(slider) - Fires when the slider loads the first slide
before: flexslider_vars.js_before_function, //Callback: function(slider) - Fires asynchronously with each slider animation
after: flexslider_vars.js_after_function, //Callback: function(slider) - Fires after each slider animation completes
end: flexslider_vars.js_end_function //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
So - the issue is not calling the options themselves (that seems to work fine), it's altering the actual output (a string, boolean, integer, etc) based on the needed values of the JS file, because as of right now, it's doing diddly squat because of it. I'd appreciate any nudges in the right direction. Thanks!