Hello everyone I need a simple help i.e. I want to set the background transparent in the function search over the internet but my issued was not resolved. Here is the variable defaultBgColor : '#e5e5e5' which i want it as transparent/none or reset here is the function code var settings = { animMouseenter : { 'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1}, 'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1}, 'icon' : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1} }, animMouseleave : { 'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1}, 'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1}, 'icon' : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1} }, boxAnimSpeed : 300, defaultTextColor : '#001e35', [B]defaultBgColor : '#e5e5e5'[/B] }; Code (markup):
What will happen if you comment this line //defaultBgColor : '#e5e5e5' or keeping the value blank defaultBgColor : '' Can you try and tell
I already tried but nothing happend I want to set the default backgournd color to transparent but getting white color when i set it to transparent please check the line 26 ( defaultBgColor: '#e5e5e5') and 143 ( backgroundColor: settings.defaultBgColor ) of my code and please fix it for me please thanksss (function($) { var methods = { init : function( options ) { if( this.length ) { var settings = { // configuration for the mouseenter event animMouseenter : { 'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1}, 'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1}, 'icon' : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1} }, // configuration for the mouseleave event animMouseleave : { 'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1}, 'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1}, 'icon' : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1} }, // speed for the item bg color animation boxAnimSpeed : 300, // default text color (same defined in the css) defaultTextColor : '#001e35', // default bg color (same defined in the css) defaultBgColor : '#e5e5e5' }; return this.each(function() { // if options exist, lets merge them with our default settings if ( options ) { $.extend( settings, options ); } var $el = $(this), // the menu items $menuItems = $el.children('li'), // save max delay time for mouseleave anim parameters maxdelay = Math.max( settings.animMouseleave['mText'].speed + settings.animMouseleave['mText'].delay , settings.animMouseleave['sText'].speed + settings.animMouseleave['sText'].delay , settings.animMouseleave['icon'].speed + settings.animMouseleave['icon'].delay ), // timeout for the mouseenter event // lets us move the mouse quickly over the items, // without triggering the mouseenter event t_mouseenter; // save default top values for the moving elements: // the elements that animate inside each menu item $menuItems.find('.sti-item').each(function() { var $el = $(this); $el.data('deftop', $el.position().top); }); // ************** Events ************* // mouseenter event for each menu item $menuItems.bind('mouseenter', function(e) { clearTimeout(t_mouseenter); var $item = $(this), $wrapper = $item.children('a'), wrapper_h = $wrapper.height(), // the elements that animate inside this menu item $movingItems= $wrapper.find('.sti-item'), // the color that the texts will have on hover hovercolor = $item.data('hovercolor'); t_mouseenter = setTimeout(function() { // indicates the item is on hover state $item.addClass('sti-current'); $movingItems.each(function(i) { var $item = $(this), item_sti_type = $item.data('type'), speed = settings.animMouseenter[item_sti_type].speed, easing = settings.animMouseenter[item_sti_type].easing, delay = settings.animMouseenter[item_sti_type].delay, dir = settings.animMouseenter[item_sti_type].dir, // if dir is 1 the item moves downwards // if -1 then upwards style = {'top' : -dir * wrapper_h + 'px'}; if( item_sti_type === 'icon' ) { // this sets another bg image for the icon style.backgroundPosition = 'bottom left'; } else { style.color = hovercolor; } // we hide the icon, move it up or down, and then show it $item.hide().css(style).show(); clearTimeout($item.data('time_anim')); $item.data('time_anim', setTimeout(function() { // now animate each item to its default tops // each item will animate with a delay specified in the options $item.stop(true) .animate({top : $item.data('deftop') + 'px'}, speed, easing); }, delay) ); }); // animate the bg color of the item $wrapper.stop(true).animate({ backgroundColor: settings.defaultTextColor }, settings.boxAnimSpeed ); }, 100); }) // mouseleave event for each menu item .bind('mouseleave', function(e) { clearTimeout(t_mouseenter); var $item = $(this), $wrapper = $item.children('a'), wrapper_h = $wrapper.height(), $movingItems= $wrapper.find('.sti-item'); if(!$item.hasClass('sti-current')) return false; $item.removeClass('sti-current'); $movingItems.each(function(i) { var $item = $(this), item_sti_type = $item.data('type'), speed = settings.animMouseleave[item_sti_type].speed, easing = settings.animMouseleave[item_sti_type].easing, delay = settings.animMouseleave[item_sti_type].delay, dir = settings.animMouseleave[item_sti_type].dir; clearTimeout($item.data('time_anim')); setTimeout(function() { $item.stop(true).animate({'top' : -dir * wrapper_h + 'px'}, speed, easing, function() { if( delay + speed === maxdelay ) { $wrapper.stop(true).animate({ backgroundColor: settings.defaultBgColor }, settings.boxAnimSpeed ); $movingItems.each(function(i) { var $el = $(this), style = {'top' : $el.data('deftop') + 'px'}; if( $el.data('type') === 'icon' ) { style.backgroundPosition = 'top left'; } else { style.color = settings.defaultTextColor; } $el.hide().css(style).show(); }); } }); }, delay); }); }); }); } } }; $.fn.iconmenu = function(method) { if ( methods[method] ) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'Method ' + method + ' does not exist on jQuery.iconmenu' ); } }; })(jQuery); Code (markup):
Try replacing the lines at 142-144. I haven't tested it myself though! // animate the bg color of the item $wrapper.stop(true).animate({ "background-color": "transparent" }, settings.boxAnimSpeed ); Code (markup):
You're probably getting the color of it's container -- do you have it live? Poke around at it with firebug or dragonfly to figure out what element the white is coming from, it could be something else in your CSS. you change both those lines to 'transparent' you SHOULD be getting transparency... if you are not, it's probably something around/under the input causing your headaches. But again, this is why snippets don't give us enough of the picture, and results in a nasty case of "this is why we can't help you". Though that much dicking around with style in javascript looks an awful lot like using js to do CSS' job, but that's par for the course when "jquery for nothing" is involved.
Okay, but is there any way to use verticale gredient colors as a backgoround if so the what will be the solution