We Keep Coding

changing class of li dynamically after hovering

Hi I was wondering if there was anyway to dynamically change the class of a list when you hover over it. Here is my code and fiddle. When I hover over the li I want it to change the class. and on mouseout I want it to change back to original.
$('.navi > li').on("mouseover", function () {
($(this)).removeClass('.navi').addClass('.navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});
http://jsfiddle.net/Samfr/8/

I think hover might be a little better for what you are doing.
http://api.jquery.com/hover/
Also, I'm not too clear on what you are asking but one of the examples on the above hover documentation page seems to describe something similar.
$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);

You had an extra period when adding and removing the class. Those should only be used to select the elements not change the class name.
$('.navi > li').on("mouseover", function () {
($(this)).removeClass('navi').addClass('navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});

try this:
define a new class, for example dinamic-li
$('.dinamic-li').on("mouseenter", function () {
$(this).addclass('navi');
$(this).removeclass('navi2');
});
$('.dinamic-li').on("mouseleave", function () {
$(this).addclass('navi2');
$(this).removeclass('navi');
});

Will this work?
JSFiddle
Jquery:
$('.navi > li').on("mouseover", function () {
$('.hover-name', this).show();
$(this).attr('class', 'red');
}).on("mouseout", function() {
$('.hover-name').hide();
$(this).attr('class', '');
});

there is my solution:
$('.navi > li').on("mouseover", function () {
$(this).addClass('active').siblings().removeClass(active);
$('.hover-name', this).show();
}).on("mouseout", function() {
if( $(this).hasClass('active'))
$(this).removeClass('active');
$('.hover-name').hide();
});
Working fiddle

Why not use a CSS solution, it's much easier:
.hover-name { display: none; }
.navi li:hover .hover-name { display: block; }
Check your updated Fiddle

http://jsfiddle.net/Samfr/14/
This is that what u mean...
$('.navi > li').on("mouseover", function () {
$(this).removeClass('navi').addClass('navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
$(this).removeClass('navi2').addClass('navi');
});
When you hover a link the color will be red and when you mouseout the color will reset.
That way you can see how the script works!

JavaScript slide menu toggle

I am trying to create a toggle because for some reason the toggle function is not working.
this works as expected. it basically does the animation an a couple of css call then swaps classes for the next function call.
$(document).ready(function() {
$(".m-menu").click( function(){
if ($('.mobile-menu').hasClass("menu") ) {
$(".mobile-menu").animate({left: '0'}, 500);
$(".mobile-menu-bg").animate({left: '0'}, 500);
$(".menu-close").css('display','inline');
$(".menu-open").css('display','none');
$( '.m-menu' ).removeClass( "m-menu" ).addClass("m-menu2");
}
});
});
The next function looks like this, which is suppose to execute if the class is there, then switch back to the original class. What am I doing wrong here?
$(document).ready(function() {
$(".m-menu2").click( function(event){
event.preventDefault();
if ($('.mobile-menu').hasClass("menu") ) {
$(".mobile-menu").animate({left: '-200'}, 500);
$(".mobile-menu-bg").animate({left: '-2000'}, 500);
$(".menu-close").css('display','none');
$(".menu-open").css('display','inline');
$('.m-menu2').removeClass( "m-menu2" ).addClass("m-menu");
}
});
});

How to call functions in Javascript / jquery

I have got two functions :
function startgame() {
"some code"
}
function return() {
"some other code"
}
1) how to run functions here :
$( "#start" ).on('click', function() {
/*I need my startgame function to run when the button is clicked*/
});
$( "#clear" ).on('click', function(){
/*I need my return function to run in here*/
});
2) Second question is what is the best way to call my functions in this code :
$( "#check" ).on('click', function() {
if ( $.inArray ( newword, words ) > -1 ) {
/*here I need to run my return function*/;
} else {
g = g+6;//adds points
/*and here I need to run my startgame function*/;
}
});
Thanks !

return is a reserved keyword. So i changed function name to return_val
JSFiddle Demo
function startgame() {
alert("startgame");
}
function return_val() {
alert("return");
}
$("#start").on('click', startgame);
$("#clear").on('click',return_val);

$( "#start" ).on('click', function() {
startgame();
});
$( "#clear" ).on('click', function(){
return_function()
});
you can't call a retun as a function name , the simple answer for your question is just to call the function whenever you want using Function_Name();

If you know how to create a function, you must know how to use or call them unless you had copied them elsewhere. In JQUERY you can call function with the function name followed by () and if that function accept params then put them inside () like
$( "#start" ).on('click', function() {
startgame();
});
$( "#clear" ).on('click', function(){
return_function()
});
You can also do
$( "#start" ).on('click', startgame());
$( "#clear" ).on('click', return_function());
It depends on how you need them.
Hope it helps!

jQuery stops working after

I have a page which relies heavily on CSS3 animations. I am in the process of creating a script that will be the fallback that will work for those browsers that do not have CSS3 animations (looking at you IE...). I created the following script that will do the basic of what I need:
var $j = jQuery.noConflict();
$j(document).ready(function() {
//Hide All Elements to Fade Them In
$j(".frame-1, .frame-2, .frame-3, .frame-4, #tile-wrap, #copyright").addClass("hide", function() {
//Change Color of "Frames"
$j(".frame-1, .frame-2, .frame-3, .frame-4").addClass("color", function() {
//Frame 1
$j(".frame-1").fadeIn("slow", function() {
$j('.frame-1').delay(3000).fadeOut('slow', function() {
//Frame 2
$j(".frame-2").fadeIn("slow", function() {
$j('.frame-2').delay(3000).fadeOut('slow', function() {
//Frame 3
$j(".frame-3").fadeIn("slow", function() {
$j('.frame-3').delay(3000).fadeOut('slow', function() {
//Frame 4
$j(".frame-4").fadeIn("slow", function() {
$j('.frame-4').delay(3000).fadeOut('slow', function() {
//Tile
$j('#tile-wrap').fadeIn('slow');
});
});
});
});
});
});
});
});
});
});
});​
The first part of the script works without issue (adding the class of .hide). But nothing after that fires or works. I am stuck because no errors are seen and I assume I have an error in my script.
Here is a fiddle of the script with the rest of the code.
Note: I am not very knowledgeable of writing JS and welcome any ways to improve the script, please provide examples.
FIDDLE NOTE Firebug shows a couple errors when running the fiddle. These errors are only on the Fiddle page and I believe are related to the jsFiddle not my code or page.
What I am attempting to Achieve
What I want is for each item (as listed by class or id) is to fade them in then fade them out after a delay then fade in the last div and it stays.

This will work, http://jsfiddle.net/VNfT2/2/. There is no callback for addclass. Having said that. AHHH!!!!!! This is NOT the right way to do it. Hint: When you see more than 10 }); in a row, stop and take a deep breath. :)
Edit: There are hundreds of plugins to do this (google for jquery slideshow). But, if you want to do it manually...look at this: fiddle: http://jsfiddle.net/VNfT2/5/

See http://jsfiddle.net/VNfT2/4/
var $j = jQuery.noConflict();
$j(document).ready(function() {
//Hide All Elements
$j(".frame-1, .frame-2, .frame-3, .frame-4, #tile-wrap, #copyright")
.addClass("hide")
//Change Color of "Frames"
.addClass("color");
//Frame 1
$j(".frame-1").fadeIn("slow", function() {
$j(this).delay(3000).fadeOut('slow', function() {
//Frame 2
$j(".frame-2").fadeIn("slow", function() {
$j(this).delay(3000).fadeOut('slow', function() {
//Frame 3
$j(".frame-3").fadeIn("slow", function() {
$j(this).delay(3000).fadeOut('slow', function() {
//Frame 4
$j(".frame-4").fadeIn("slow", function() {
$j(this).delay(3000).fadeOut('slow', function() {
//Tile
$j(this).fadeIn('slow');
});
});
});
});
});
});
});
});
});
As I said im my comment, you can call addClass with a string (the class) or with a function which return the class. But you can't do it with a string and a function... See api.jquery.com/addClass
And in your callback functions you should use $(this), it's faster because this way you don't search the element again.

The problem that your callbacks aren't called since they're supplied as the second argument.
addClass( className )
Description: Adds the specified class(es) to each of the set of matched elements.
.addClass( className )
.addClass( function(index, currentClass) )
Here are some tips:
1)
Try to only have 1 nested/callback function inside another function.
Refer to tip 4, then function fadeElementsInThenOut for an example.
2)
Don't repeat lookups.
Old code:
// Let's forget about the callbacks for now
$j(".frame-1, .frame-2, .frame-3, .frame-4, #tile-wrap, #copyright").addClass("hide");
$j(".frame-1, .frame-2, .frame-3, .frame-4").addClass("color");
New Code:
$j(".frame-1, .frame-2, .frame-3, .frame-4").addClass("color hide");
$j("#tile-wrap, #copyright").addClass("color");
3)
Use $(this) to reference the same element within a callback.
Old Code:
$j(".frame-4").fadeIn("slow", function () {
$j('.frame-4').delay(3000).fadeOut('slow', function () {
//...
});
});
New Code:
$j(".frame-4").fadeIn("slow", function () {
$j(this).delay(3000).fadeOut('slow', function () {
//...
});
});
4)
Don't use a callback if you don't have to.
Old Code:
$j(".frame-4").fadeIn("slow", function () {
$j(this).delay(3000).fadeOut('slow', function () {
//...
});
});
New Code:
$j(".frame-4").fadeIn("slow").delay(3000).fadeOut('slow', function () {
//...
});
Here's your code rewritten to fix the problems.
var $j = jQuery.noConflict();
$j(function () {
var frames = [ ".frame-4", ".frame-3", ".frame-2", ".frame-1" ];
var fadeElementsInThenOut = function( els, lastCallback ){
var el = els.pop();
if( el ){
$j(el).fadeIn("slow").delay(3000).fadeOut('slow', function(){
fadeElementsInThenOut( els, lastCallback );
});
}else{
lastCallback();
}
};
$j( frames.join( ", " ) ).addClass("color hide");
$j("#tile-wrap, #copyright").addClass("color");
fadeElementsInThenOut( frames, function(){
$j('#tile-wrap').fadeIn('slow');
});
});

mouseOut effect with a mask

The following code produces a mask on a web page when hovering over a menu, my question is how do I edit this code to make the mask go away with mouseout event? As it sits now I have to click for the mask to go away. Any help is appreciated.
<script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
});
</script>

$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
$("#menuwrapper").mouseout(function() {
$(this).hide();
});
});

Or more succinctly:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).hide(); } // opposite of expose() function
);

If you are using the expose library, you can setup the event like this:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).unexpose(); } // opposite of expose() function
);