jQuery Tools Tabs Custom Animation - javascript

I''m using this library in my project : jQuery Tools Tabs, and from what I've read I can make my custom effect instead of having the default one.
I decided to have an effect like this one : Demo . And I found something that could be similar, but I'm having trouble implementing it.
$.tools.tabs.addEffect("subFade", function(tabIndex, done) {
var conf = this.getConf(),
speed = conf.fadeOutSpeed,
panes = this.getPanes();
var $tab = this.getCurrentTab();
if($tab.hasClass("current")){//Going AWAY from the tab, do hide animation (before the tab is hidden)
$(".tabs-tab").animate({"left" : "0px"}, 300, function(){//I was sliding it behind the tabs when not in use, replace with your own animation
panes.hide();
panes.eq(tabIndex).fadeIn(200, done);
console.log("Done done");
//This is then end of the chain - my animation, hide all then fade in new tab.
});
} else {//going away from any other tab
panes.hide();
panes.eq(tabIndex).fadeIn(200, done);
}
$tab = this.getTabs().eq(tabIndex);
if($tab.hasClass("current")){//Going to my special tab.
$(".tabs-tab").animate({"left" : "-160px"}, 300);//Sliding it out
}
// the supplied callback must be called after the effect has finished its job
done.call();
});
The above is what I have been trying but without success. So I was wondering if someone knows what I'm doing wrong and how can I make that custom effect behave like the demo ?

I have made a content slider similar to your example (however it does Not have FadeIn/Out functionality), but maybe with some modification of my code you can make that effect.Fiddle here
My full code:
$(document).ready(function() {
$('.slides div:not(:first)').hide();
$('.slides div:first').addClass('active');
//Put .active width in var
var activeWidth = $(".active").outerWidth();
$('.control p:first').addClass('current');
$('.control p').click(function() {
/*store P index inside var*/
var Pindex = $(this).index();
/* Store the slides in var*/
var slidePosition=$('.wrapper .slides div');
/* check if ACTIVE slide has GREATER index than clicked P TAG (CONTROLS)*/
if($(".wrapper .slides div.active").index() > $('.wrapper .slides div').eq(Pindex).index()) {
/*Show the slide equal to clicked P-TAG(CONTROLS)*/
slidePosition.eq(Pindex).show();
/*Add class "current" to the clicked control*/
$(this).addClass('current').prevAll('.current').removeClass('current');
$(this).nextAll('.current').removeClass('current');
$(".active").removeClass("active");
$(".slides").css({"margin-left":-activeWidth});
/*Start animation...*/
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
slidePosition.eq(Pindex).addClass("active");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
});
}
if($('.slides').is(':animated')) {
return false;
}
if($(this).is($(".current"))) {
return false;
}
if($(".wrapper .slides div.active").index() < $('.wrapper .slides div').eq(Pindex).index()) {
slidePosition.eq(Pindex).show();
$(this).addClass('current').prevAll('.current').removeClass('current');
$(this).nextAll('.current').removeClass('current');
$(".active").removeClass("active");
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
slidePosition.eq(Pindex).addClass("active");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
});
}
});
$(".left").click(function() {
if($('.slides').is(':animated')) {
return false;
}
if($(".active").prev().length===0) {
//alert("no prev");
$(".active").nextAll().clone().insertBefore(".active");
$(".active").removeClass("active").prev().addClass("active");
$(".active").show();
$(".slides").css({"margin-left":-activeWidth});
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
$(".active").next().insertBefore($(".slides div:first")).hide();
var activeIndex = $(".active").index();
$(".active").nextAll().remove();
$(".current").removeClass("current");
//alert(activeIndex)
$(".control p").eq(activeIndex).addClass("current");
});
}
else{
$(".active").removeClass("active").prev().addClass("active");
$(".active").show();
$(".slides").css({"margin-left":-activeWidth});
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
var activeIndex = $(".active").index();
$(".active").prevAll().hide();
$(".active").nextAll().hide();
$(".current").removeClass("current");
$(".control p").eq(activeIndex).addClass("current");
});
}
});
$(".right").click(function() {
if($('.slides').is(':animated')) {
return false;
}
if($(".active").next().length===0) {
//alert("no next")
$(".slides div:first").nextAll(':not(.active)').clone().insertAfter(".active");
$(".slides div:first").insertAfter(".active");
$(".active").removeClass("active").next().addClass("active");
$(".active").show();
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
$(".active").prev().hide().insertAfter(".slides div:last");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().remove();
$(".current").removeClass("current");
var activeIndex = $(".active").index();
$(".control p").eq(activeIndex).addClass("current");
});
}
else{
$(".active").removeClass("active").next().addClass("active");
$(".active").show();
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
$(".current").removeClass("current");
var activeIndex = $(".active").index();
$(".control p").eq(activeIndex).addClass("current");
});
}
});
});

Related

jquery .hover() with else if statement

I want to put a little delay for onmouseout event for a group of sub items in a drop down menu. But I don't want to use css transitions.
I set it with .hover() and setTimeout method but I wanted to put it only for a specific elements in menu - in this case just for sub items so I used if else statement for them. I have no idea why this if else statement does't work.
Here is my javascript code:
var selectors =
{
element: '.main-menu li:has(ul)'
}
var opacityWorkaround = function ($element, value) {
$element.css('opacity', value);
};
var getAnimationValues = function (visible) {
var result = {
visibility: visible
};
result.opacity = visible === 'visible' ? 1 : 0;
};
var mouseActionHandler = function ($element, visible, opacityValue) {
$element
.stop()
.css("visibility", 'visible')
.animate(getAnimationValues(visible),
3000,
function () {
$(this).css("visibility", visible);
opacityWorkaround($(this), opacityValue);
});
};
var onMouseIn = function () {
var $submenu = $(this).children("ul:first");
if ($submenu) {
mouseActionHandler($submenu, 'visible', 1);
}
};
var onMouseOut = function () {
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($submenu) {
mouseActionHandler($submenu, 'hidden', 0);
} else if ($global) {
setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}
};
$(selectors.element).hover(onMouseIn, onMouseOut);
I put 1500ms delay and the $global variable is referring to sub items in menu that I want to make disapear with that delay. I wanted to achieve this when user move mouse cursor out of 'some items >' tab.
Here is my fiddle example.
http://jsfiddle.net/PNz9F/1/
Thanks in advance for any help!
In the example you have in your question $submenu always has a value so the else if statement is never run. You can check for a class instead.
var timeout;
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($(this).hasClass('menu-item')) {
mouseActionHandler($submenu, 'hidden', 0);
mouseActionHandler($global, 'hidden', 0);
clearTimeout(timeout);
} else if ($(this).hasClass('global')) {
timeout = setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}
you should be able to just use the :hover selector in your code to check whether the user is hovering over the element or not and run code accordingly

Whats the simplest way to these 4 buttons?

I want to make 4 buttons that are:
when you click on it,the one chosen, its background-image changed, the other 3 remain the original background image unless user hover it ,while user hover the buttons it changes its background-image .
If I only use :hover, or :active,after clicked,the background image will revert to original when I release mouse,or just moved away mouse, if I use click function, after it changed background image it cannot be revert or have to type a long piece codes to control it.What is the simplest way to make these 4 buttons?
I tried this: abit clumsy, I have :hover in css, but it is actually missing the hover effect for this code
$s_btn_1.on('click',function() {
if (chosen!=1){
chosen = 1;
console.log('chosen');
$.get("services_1.php", function(data){
// $service_box.html(data);
});
return_default();
$folder1.css('background',"url('images/services/btn1_hover.png')");
$folder1.css('background-size',"100% 100%");
}
});
$s_btn_2.on('click',function() {
if (chosen!=2){
chosen = 2;
console.log('chosen');
$.get("services_2.php", function(data){
// $service_box.html(data);
});
return_default();
$folder2.css('background',"url('images/services/btn2_hover.png')");
$folder2.css('background-size',"100% 100%");
}
});
$s_btn_3.on('click',function() {
if (chosen!=3){
chosen = 3;
return_default();
$folder3.css('background',"url('images/services/btn3_hover.png')");
$folder3.css('background-size',"100% 100%");
}
});
$s_btn_4.on('click',function() {
if (chosen!=4){
chosen = 4;
return_default();
$folder4.css('background',"url('images/services/btn4_hover.png')");
$folder4.css('background-size',"100% 100%");
}
});
//$("#service_btn").addClass(".folder1_hover");
function return_default(){
$folder1.css('background-image',"url('images/services/btn1.png')");
$folder2.css('background-image',"url('images/services/btn2.png')");
$folder3.css('background-image',"url('images/services/btn3.png')");
$folder4.css('background-image',"url('images/services/btn4.png')");
$folder1.css('background-size',"100% 100%");
$folder2.css('background-size',"100% 100%");
$folder3.css('background-size',"100% 100%");
$folder4.css('background-size',"100% 100%");
}
});
I just finished my aim so I post my code here, I think it is the simplest way,and clear
$(document).ready(function() {
var btns = {
'bg_o' : ['images/services/btn1.png','images/services/btn2.png','images/services/btn3.png','images/services/btn4.png'],
'bg_h' : ['images/services/btn1_hover.png','images/services/btn2_hover.png','images/services/btn3_hover.png','images/services/btn4_hover.png'],
'$all_btn' : $('.all_btn'),
'$folders':[$('#folder1'),$('#folder2'),$('#folder3'),$('#folder4')],
'folders_status':new Array('inactive','inactive','inactive','inactive')
,jquery_func : function(){
btns.$all_btn.each(function(){
$(this).click(function(){
for(i=0;i<4;i++){
var imageurl_o = new Array();
imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};
btns.$folders[i].css(imageurl_o[i]);
btns.folders_status[i]='inactive';
}
for(i=0;i<4;i++){
var myparent = btns.$folders[i].parent();
if($(this).attr('class') == myparent.attr('class')){
var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
btns.$folders[i].css(imageurl_h);
btns.folders_status[i]='active';
}
}
});
$(this).mouseover(function(){
for(i=0;i<4;i++){
var imageurl_o = new Array();
imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};
if(btns.folders_status[i]=='inactive')
btns.$folders[i].css(imageurl_o[i]);
}
for(i=0;i<4;i++){
var myparent = btns.$folders[i].parent();
if($(this).attr('class') == myparent.attr('class')){
var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
btns.$folders[i].css(imageurl_h);
}
}
});
});
}
}
btns.jquery_func();
});

jQuery toggleClass with direction and animation

I've followed a tutorial to add to my site a fixed header after scroll and the logo of the site appear on the fixed part.
That works, the code:
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
nav_container.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='down');
logo.toggleClass('logo_sticky', direction=='down');
if (direction == 'down')
nav_container.css({ 'height' : nav.outerHeight() });
else
nav_container.css({ 'height' : 'auto' });
});
});
How can I add a delay with fade-in to the logo, so it doesn't appear suddenly?
Versions I've tried:
logo.toggleClass('logo_sticky', direction=='down').delay(500).fadeIn('slow');
logo.delay(500).toggleClass('logo_sticky', direction=='down').fadeIn('slow');
(before the toggleClass)
logo.delay(500).fadeIn('slow')
logo.toggleClass('logo_sticky', direction=='down');
(after the toggleClass)
logo.toggleClass('logo_sticky', direction=='down');
logo.delay(500).fadeIn('slow')
To be honest I've tried every single combination that came to my mind lol
new version that I'm trying that don't work either:
$(function() {
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
$.waypoints.settings.scrollThrottle = 30;
nav_container.waypoint({
handler: function(event, direction) {
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
nav.addClass('sticky', direction=='down').stop();
logo.css({"visibility":"visible"}).fadeIn("slow");
}
else{
nav_container.css({ 'height':'auto' });
nav.removeClass('sticky', direction=='down').stop();
logo.css({"visibility":"hidden"});
}
},
offset: function() {
return (0);
}
});
});
but if I instead of fadeIn put toggle it animes the change but in a bad direction (the img appear and then toggle to disapear)
thanks
http://api.jquery.com/delay/
http://api.jquery.com/fadein/
use $(yourLogoSelector).delay(delayAmount).fadeIn();
here is proof that it works http://jsfiddle.net/6d8cf/
It seems like the fadeIn only works if you don't have the css the property visibility: hidden, but display:none...
you can do a element.hide(); and then element.fadeIn().
since the hide() changes the layout of the page because it eliminates the item from it this is the solution I came across:
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
$.waypoints.settings.scrollThrottle = 30;
nav_container.waypoint({
handler: function(event, direction) {
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
nav.addClass('sticky', direction=='down').stop();
logo.css('opacity',0).animate({opacity:1}, 1000);
}
else{
nav_container.css({ 'height':'auto' });
nav.removeClass('sticky', direction=='down').stop();
logo.css('opacity',1).animate({opacity:0}, 1000);
}
},
offset: function() {
return (0);
}
});
});

swap backstretch image when changing active div

I'm using Backstretch jQuery plugin to create full screen background images, but have a 1 page scrolling website and would like to change the background image depending on whichever content div is active.
There are multiple ways to scroll to each panel on the site, including directional buttons, clicking on the panel, and selecting link from nab menu, so would need to be able to call this function in different places.
Currently the site adds a class 'active' to whichever div has been selected for CSS styling, and then scrolls to that location. Effectively, I would need to change the path to $.backstretch("http://example.com/assets/image.jpg"); when the active panel changes. I would like to run a function along with that to swap the background image to specific path for some panels, else to select a random image from a small array when not one of the specific panels.
My instinct would be to use a switch statement, but need to request help.
It is a WordPress site and the panels are output dynamically, so I cannot hard code this is; it needs to work in relation the id and hash tags in the same way as the active panel selection is currently working.
My JS code, as it currently stands, is below. I'm not very competent with JS so I appreciate there are probably more efficient ways to arrange this code, but my current skill level with it limits me there.
Many thanks for any help you can offer.
jQuery(function( $ ){
$.easing.elasout = function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
};
$.backstretch("http://example.com/assets/image.jpg");
$('#content').scrollTo( 0 );
$.scrollTo( 0 );
$('.menu a').click(function(e){
e.preventDefault();
var link = e.target;
link.blur();
if( link.title )
$(this).parent().find('span.message').text(link.title);
});
// clicking from menu
$('.menu a').click(function(){
$target = $(this.hash);
$.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
});
//clicking on a panel
$('.panel').click(function(){
$target = $(this);
$.scrollTo( $target, 1000, { easing:'elasout', offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
});
// click on up button
$('#verticals a.up').click(function(){
if ( $('div.panel.active').prev('div.panel').length){
$target = $('div.panel.active').prev();
$.scrollTo( $target, 500, {offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
}
else {
return false;
}
});
// click on down button
$('#verticals a.down').click(function(){
if ( $('div.panel.active').next('div.panel').length){
$target = $('div.panel.active').next();
$.scrollTo( $target, 500, {offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
}
else {
return false;
}
});
// click on right button
$('#horizontals a.right').click(function(){
if ( $('div.panel.active').parent().next('div.col').length){
$target = $('div.panel.active').parent().next('div.col').children('div:nth-child(1)');
$.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
}
else {
return false;
}
});
// click on left button
$('#horizontals a.left').click(function(){
if ( $('div.panel.active').parent().prev('div.col').length){
$target = $('div.panel.active').parent().prev('div.col').children('div:nth-child(1)');
$.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
}
else {
return false;
}
});
$(document).ready(function(){
$('.menu li').hover(
function () {
$('ul', this).slideDown(200);
$('ul', this).parent().addClass('active');
},
function () {
$('ul', this).slideUp(200);
$('ul', this).parent().removeClass('active');
}
);
$('.panel').tinyscrollbar();
$("#key-facts").fadeTransition();
});
});
Got there eventually. Here it is for anyone who finds this in search of solace:
var a = [
['115', 'filename.jpg'],
['148', 'filename.jpg'],
['150', 'filename.jpg'],
['153', 'filename.jpg'],
['155', 'filename.jpg'],
['157', 'filename.jpg']
// ... etc, continue as required
]
function setBackground(id){
 for (var i = 0; i < a.length; i++){
  if (a[i][0] == id){
   $.backstretch('http://insert base URL here' + a[i][1]);
   return;
  }
 }
var aRandom = [
'filename.jpg',
'filename.jpg'
]
// array of images for id with undefined image to be randomly selected from
var b = aRandom[Math.floor(Math.random()*aRandom.length)];
 $.backstretch('http://insert base URL here' + b);
}

Jquery image fade - losing mouse over effects

I try to do this image effects: http://coverdesign.ro/teste/lore/ but sometimes when the mouse move from one object to another it lose the hover state;
I use this js script:
$(function () {
$('div.fade').hover(function() {
fade = $('> div', this);
nume = $(this).attr('id');
$("."+nume).addClass("mselect");
if (fade.is(':animated')) {
fade.stop().fadeTo(250, 1);
} else {
fade.fadeIn(1000);
}
}, function () {
/* var fade = $('> div', this);
var nume = $(this).attr('id');*/
$("."+nume).removeClass("mselect");
if (fade.is(':animated')) {
fade.stop().fadeTo(250, 0);
} else {
fade.fadeOut(500);
}
});
$('#menu a').hover(function() {
var nume = $(this).attr('class');
var fade = $('#'+nume+' > div');
//$("."+nume).addClass("mselect");
if (fade.is(':animated')) {
fade.stop().fadeTo(250, 1);
} else {
fade.fadeIn(2000);
}
}, function () {
var nume = $(this).attr('class');
var fade = $('#'+nume+' > div');
if (fade.is(':animated')) {
fade.stop().fadeTo(2000, 0);
} else {
fade.fadeOut(2000);
}
});
});
What actually happens is, sometimes when the mouse is moved from the cat to the phone, the hover does not get activated. If you play around with the page you will realise that the color change of the cat and the phone, sometimes does not happen due to hover state being lost.
I guess this line of code
$('div.fade').hover(function() {
is causing a problem in identifying the proper div. You could try uniquely identifying each menu item/image and handle it accordingly.

Categories