Develop Reference

Stop banner on mouseover

I have created a banner on my site, but I can't make the banner stop on mouseover. I just tried mouseover and hover with jQuery. I expect to stop the banner on mouseover
function mostrarBanner(indice) {
clearInterval(executar);
$('.carousel-banner .item-carousel').css({
'opacity': '0',
'z-index': '0'
});
$('.carousel-banner .item-carousel').eq(banner).css({
'opacity': '1',
'z-index': '1'
});
executar = setInterval(function() {
$('.carousel-banner .next').trigger('click');
}, 1000);
$('#banner').hover(function() {
console.log("DENTRO");
}, function() {
console.log("FORA");
});
}
var executar = setInterval(function() {
$('.carousel-banner .next').trigger('click');
}, 1000);
var banner = 0;
mostrarBanner(banner);

So either you need to cancel the interval and recreate it or you can just use a variable to not call the code.
var paused = false
executar = setInterval(function() {
if (paused) return
$('.carousel-banner .next').trigger('click');
}, 1000);
$('#banner').hover(function() {
paused = true
}, function() {
paused = false
});

Jquery Flexslider with Sliding effect

jQuery(document).ready(function ($) {
$('.flexslider.wsc_banner4519').each(function () {
var _this = this;
$('.slides > li', this).hide();
$(this).flexslider($.extend({}, {
animation: 'fade',
slideshow: false,
slideshowSpeed: 7000,
pagination: true,
directionNav: false,
animationDuration: 600
}, {
before: function (slider) {
var descs = $(_this).next('.descriptions').find('article');
if (slider.animatingTo != slider.currentSlide && descs.length >= slider.slides.length) {
descs.filter(':visible').fadeOut(slider.vars.animationDuration / 2, function () {
descs.eq(slider.animatingTo).fadeIn(slider.vars.animationDuration / 2);
});
}
}
})).hover(function () {
$('.flex-direction-nav', this).stop(true).fadeTo(100, 1);
}, function () {
$('.flex-direction-nav', this).stop(true).fadeTo(100, 0);
});
});
});
I am using flexslider(converted to double slider).Here both have fade-out effect.
I want image to be fade out and text to be sliding.
http://demo2.websitescreative.com/responsive/Features/sliderwithtext.aspx
Like this demo I have done. I want to change this into the effect I described above.
PLEASE Help.

JQuery Carousel Delay on Animate Left

If you consider the following Pen: http://codepen.io/jhealey5/pen/Lqyhu - And click the Left/Right buttons, you should see that while left works fine, there's a slight delay on the right one.
I understand there's a little more happening with the right button, it's having to move it before it animates, but is there any way to alleviate the problem? Other than purposely delaying the left animation that is.
And any other improvements are a bonus.
jQuery code:
var $left = $('#left'),
$right = $('#right'),
$images = $('.items img'),
isAnimating = 0;
$left.on('click', function(){
if (isAnimating) {
return false;
} else {
var $item = $('.items img:eq(0)');
$item.velocity({'margin-left': '-100%'}, 400, 'easeOut', function(){
$(this).appendTo('.items .wrapper').css('margin-left', 0);
});
isAnimating = 0;
}
});
$right.on('click', function(){
if (isAnimating) {
return false;
} else {
isAnimating = 1;
var $item = $('.items img:eq(0)'),
$lastItem = $('.items img:eq('+($images.length-1)+')');
$lastItem.prependTo('.items .wrapper').css('margin-left', '-100%').velocity({
'margin-left': 0
}, 350, 'easeOut');
isAnimating = 0;
}
});
Cheers.

Instead of using "-100%" try to do it in px.
$imgWidth = $images.width(); // Add this variable
$left.on('click', function(){
if (isAnimating) {
return false;
} else {
var $item = $('.items img:eq(0)');
$item.velocity({'margin-left': -$imgWidth},
400, 'easeOut', function(){
$(this).appendTo('.items .wrapper').css('margin-left', 0);
});
isAnimating = 0;
}
});
$right.on('click', function(){
if (isAnimating) {
return false;
} else {
var $lastItem = $('.items img:eq('+($images.length-1)+')');
$lastItem.prependTo('.items .wrapper')
.css('margin-left', -$imgWidth).velocity({
'margin-left': 0
}, 400, 'easeOut');
isAnimating = 0;
}
});

The integer in the second variable of the velocity function needs to be decreased to speed this up.
Try for example changing 350 to 100 to see the response rate increase.

Jquery file not loading

I am a bit confused... I can load a javascript file when its above another jquery file in the tag however when its below other jquery files it doesn't load.
When I put it above the jquery.min.js file its loads fine but when its below it fails to load.
Im thinking there is something wrong with my jquery file.. but not sure what!
My Javascript file is:
/* =======================================================================================================================================*/
// gallery slider
/* =======================================================================================================================================*/
$(document).ready(function () {
$('.project').mouseover(function ()
{
$(this).children('.cover').animate(
{
height: "172px"
});
$(this).children('.title').animate(
{
bottom: '-25px', height: "100px"
});
});
$('.project').mouseleave(function ()
{
$(this).children('.cover').animate(
{
height: "17px"
});
$(this).children('.title').animate(
{
bottom: "0px", height: "20px"
});
});
});
/* =======================================================================================================================================*/
// Top Contact Area
/* =======================================================================================================================================*/
$(window).load(function () {
$("#contactArea").css('height', '0px');
$(".contact-hurry a").toggle(
function () {
$(this).text('Quick Contact Hide / Close [-]')
$("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'})
$("body").addClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
},
function () {
$(this).text('Quick Contact Show / Open [+]')
$("body").removeClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
$("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'})
}
);
});
/* =======================================================================================================================================*/
// Mega Menu $("#contactArea").css('height', '0px');
/* =======================================================================================================================================*/
$(document).ready(function () {
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 150;
//Calculate row
$(this).find("ul.floating").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});
} else { //If row does not exist...
$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});
}
}
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 100, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};
$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);
jQuery(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 0 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// run the effect
$( "#effect" ).toggle( selectedEffect, options, 500 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
/* =======================================================================================================================================*/
// faqs
/* =======================================================================================================================================*/
$(document).ready(function(){
$("#faqs tr:odd").addClass("odd");
$("#faqs tr:not(.odd)").hide();
$("#faqs tr:first-child").show();
$("#faqs tr.odd").click(function(){
$(this).next("tr").toggle('fast');
$(this).find(".arrow").toggleClass("up");
});
});
/* =======================================================================================================================================*/
// Portfolio slider
/* =======================================================================================================================================*/
/*
$(document).ready(function() {
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
if(index < $('#bigPic img').length){
var indexImage = $('#bigPic img')[index]
if(currentImage){
if(currentImage != indexImage ){
$(currentImage).css('z-index',2);
clearTimeout(myTimer);
$(currentImage).fadeOut(250, function() {
myTimer = setTimeout("showNext()", 3900);
$(this).css({'display':'none','z-index':1})
});
}
}
$(indexImage).css({'display':'block', 'opacity':1});
currentImage = indexImage;
currentIndex = index;
$('#thumbs li').removeClass('active');
$($('#thumbs li')[index]).addClass('active');
}
}
function showNext(){
var len = $('#bigPic img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}
var myTimer;
$(document).ready(function() {
myTimer = setTimeout("showNext()", 3000);
showNext(); //loads first image
});
});
*/
$("#foo2").carouFredSel({
circular: false,
infinite: false,
auto : false,
scroll : {
items : "page"
},
prev : {
button : "#foo2_prev",
key : "left"
},
next : {
button : "#foo2_next",
key : "right"
},
pagination : "#foo2_pag"
});
});

I am not sure what you actually mean, but I give it a shot.
If you include the jquery library before script files that uses jquery, those will succeed.
A script that uses jquery must have the symbols $ and jQuery defined and javascript runs the file sequentially from top to bottom.
That is why including jquery must be done before everything else.

How do I call this function that's within a jquery plugin?

I'm using a jquery plugin on my page, vTicker, "for easy and simple vertical news automatic scrolling". I'm using it in combination with an rss jquery plugin. It's working fine, but I need to create a button that will do a manual scroll. Can anyone tell me how to do this? I'm guessing I need to call the moveUp function from the vTicker file, but because of the way the function is created, as well as how the vticker itself is created, I'm not really sure how to do it.
I create my vTicker like this:
$('#ticker1').rssfeed(uRL).ajaxStop(function() {
$('#ticker1 div.rssBody').vTicker();
})
And here is the vTicker code:
/*
* Tadas Juozapaitis ( kasp3rito#gmail.com )
*/
(function($){
$.fn.vTicker = function(options) {
var defaults = {
speed: 700,
pause: 15000,
showItems: 3,
animation: '',
mousePause: true,
isPaused: false
};
var options = $.extend(defaults, options);
moveUp = function(obj2, height){
if(options.isPaused)
return;
var obj = obj2.children('ul');
var iframe = $('#iFrame2');
first = obj.children('li:first').clone(true);
second = obj.children('li:odd:first').clone(true);
iframe.attr('src', (second.children('h4').children('a').attr("href")));
obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
$(this).children('li:first').remove();
$(this).css('top', '0px');
});
if(options.animation == 'fade')
{
obj.children('li:first').fadeOut(options.speed);
obj.children('li:last').hide().fadeIn(options.speed);
}
first.appendTo(obj);
};
return this.each(function() {
var obj = $(this);
var maxHeight = 0;
obj.css({overflow: 'hidden', position: 'relative'})
.children('ul').css({position: 'absolute', margin: 0, padding: 0})
.children('li').css({margin: 0, padding: 0});
obj.children('ul').children('li').each(function(){
if($(this).height() > maxHeight)
{
maxHeight = $(this).height();
}
});
obj.children('ul').children('li').each(function(){
$(this).height(maxHeight);
});
obj.height(maxHeight * options.showItems);
var interval = setInterval(function(){ moveUp(obj, maxHeight); }, options.pause);
if(options.mousePause)
{
obj.bind("mouseenter",function(){
options.isPaused = true;
}).bind("mouseleave",function(){
options.isPaused = false;
});
}
});
};
})(jQuery);
Thanks for reading.

The short answer is, you can't. The moveUp function is totally isolated within the scope of the plugin, and you cannot call it directly.
To modify the plugin so that you can manually scroll, add this just before the line return this.each(function() {:
$.fn.extend({
vTickerMoveUp: function() {
var obj = $(this);
var maxHeight = 0;
obj.children('ul').children('li').each(function(){
if($(this).height() > maxHeight) maxHeight = $(this).height();
});
moveUp(obj, maxHeight);
}
});
Then, to scroll, do this:
var ticker = $('#ticker1 div.rssBody').vTicker();
ticker.vTickerMoveUp();

Since the moveup declaration is missing a var that means moveup() would be statically defined as a property of window (ie, global) once vTicker has been called. And thus I would think you could call moveup() from anywhere after that.