We Keep Coding

Event triggering when not hovering

I am hiding a div when user hover over one of the menu element. I am using this code for this purpose
jQuery("#menu-item-15").hover(function(){
jQuery(".bootom-menu").css("display", "none");
});
But i want to display bootom-menu div when user will not be hovering (un-hover) over this specific menu element.

This code is working for me finally. Here is the reference link from where i get idea about this. jquery un-hover
jQuery(function(){
jQuery("#menu-item-15").hover(function(){
jQuery(".bootom-menu").css("display", "none");
}, function(){
// change back
jQuery(".bootom-menu").css("display", "block");
});
});
This code is working perfectly for me.

Simply use CSS if you're targeting a child or next-sibling element
#menu-item-15:hover .bootom-menu{
display: none;
}

Just use toggle:
html
<div id='menu_element'>MENU ELEMENT</div><br><br><br><div id='bottom_menu'>BOTTOM MENU DIV</div>
css
#menu_element, #bottom_menu {
background: steelblue;
padding: 20px;
text-align: center;
color: white;
font-family: arial;
display: inline-block;
cursor: pointer;
}
Jquery
$("#menu_element").hover(function(){
$("#bottom_menu").toggle();
});
Result:

Hover function accepts functions to handle in/out events.
Example:
$('#element').hover(
function(){
/* hover handle */
}, function(){
/* un-hover handle */
}
);
Source: https://api.jquery.com/hover/

Possible ways of animating appendTo and prependTo in horizontal list

There is simple gallery plugin, and i'm wondering is there any ways to animate scrolling effect ( from left to right and vice versa) in this implementation of changing slides(using append in ul array, not margins)?
Below is the snippet, imagine that black border is your viewport.
function moveLeft() {
var last = $('ul li:last-child');
last.prependTo('ul');
};
function moveRight() {
var first = $('ul li:first-child');
first.appendTo('ul');
};
$('a.next').click(function (e) {
e.preventDefault();
moveRight();
});
$('a.prev').click(function (e) {
e.preventDefault();
moveLeft();
});
ul{
white-space:nowrap;
}
ul li{
display: inline-block;
margin: 15px;
}
.viewport{
position:absolute;
top: 15px;
left:100px;
width:100px;
height:50px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="viewport">
</div>
Previous
Next

Here's a solution, it works well enough, but there's definite improvements to be made. I made the ul { position: relative }, after prepending/appending the item immediately offset it's position using left or right css attributes, and then animated these values using jquery back to 0.
Moreover, its important that the previous animation queue is cleared with jquery.stop(), and that the left/right value is reset, depending on the attribute being animated.
I did some tweaking on the numbers to make it look right - if you modify its current size or styling, you will have to tweak the exact css values again, but the principle will be exactly the same. Hope this helps.
My fiddle: http://jsfiddle.net/Lmdk64a5/2/

JavaScript add and remove class function on click

Basically I have this problem. I have an accordion that toggles one heading open at a time and I am having a problem adding in the open/close image that sits to the right of the heading.
I have it so far so that once you click a heading it removes the 'open' image and toggles another class for the 'close' image. Now I need to basically swap out these classes again so that if you toggle another heading it removes the other image and goes back to the original.
Here is the code I am using.
JavaScript
<SCRIPT>
$("#accordion > li").click(function () {
$("#accordian li").removeClass("faq-header");
$(this).addClass("faq-header2");
if (false == $(this).next().is(':visible')) {
$('#accordion > ul').slideUp(250);
$('#accordion > ul').addClass('faq-header');
$(this).removeClass("faq-header");
}
$(this).next().slideToggle(300);
});
$('#accordion > ul:eq(0)').show();
</SCRIPT>
CSS
#accordion {
list-style: none;
margin-left:-38px;
}
#accordion ul:eq {
background-image:url(../img/faq-open.gif);
background-repeat:no-repeat;
background-position:right;
padding-right:20px;
}
#accordion li{
display: block;
background-color: #FFF;
font-weight: bold;
cursor: pointer;
}
.faq-header {
text-align:left;
background-image:url(../img/faq-close.gif);
background-repeat:no-repeat;
background-position:right;
margin-right:20px;
}
.faq-header2 {
text-align:left;
background-image:url(../img/faq-open.gif);
background-repeat:no-repeat;
background-position:right;
margin-right:20px;
}
#accordion ul {
list-style: none;
display: none;
}
#accordion ul li{
font-weight: normal;
cursor: auto;
background-color: #fff;
border-bottom:1px solid #999;
margin-left:-38px !important;
}
I have removed one class and added another class as you can see $("#accordian li").removeClass("faq-header"); and added the following $(this).addClass("faq-header2");
But I need to now remove .faq-header2 and add back .faq-header after it is no longer the section selected. It doesn't seem too hard to me but i just can't figure out how to code it. Should be a basic if function I would think...

The jQuery UI accordion is a well proven cross browser widget, and does images on open and close (by default on the left, but one change of CSS will put them on the right)
as per here
if you don't won't to use it, I would persue an option with toggleClass, here
EDIT
Thanks for posting your HTML, I didn't necessarily mean the whole page, just the HTML for you accordion functionality, but hey thats cool
First point though, your HTML seems a bit heavy for just doing an accordion. Its also not entirely valid to put a ul inside a ul (they tend to go inside li, as in a drop down menu style). Further more it doesn't seem to be much point in all those ul and li as each ul only has one li anyway, just seems like a lot more tags than you would really need. ul and li tend to come with a lot of default styling (bullet points, margins, padding, indents etc), which can mean a lot more CSS than need to make them display how you want. I would have gone with a simpler structure, makes it easier to write your jQuery. A bit more like this
<div id="accordion">
<h3>First header</h3>
<div>First content</div>
<h3>Second header</h3>
<div>Second content</div>
</div>
Anyway, that was just a comment from my experience. To your problem at hand, this worked for me
$("#accordion > li").click(function () {
var self = $(this);
self.next('ul').slideToggle(300, function () {
if ($(this).is(':visible')) {
self.removeClass('faq-header').addClass('faq-header2')
}
else {
self.removeClass('faq-header2').addClass('faq-header')
}
});
self.siblings().removeClass('faq-header2').addClass('faq-header').next('ul').slideUp(250);
});
toggleClass, although useful, in your circumstance as to how you want classes to be added and removed, may not be as useful as I would have thought

I think that toggle() function is a bit not intuitive. I usually use my pwn method replaceClass() to do as you want:
void replaceClass(Object classList, String surrogateClass, String classToReplace);
defined as follow
function replaceClass(elementClassList, firstClass, secondClass) {
if(elementClassList.contains(firstClass)){
{
elementClassList.remove(firstClass);
elementClassList.add(secondClass);
}
}

changing css background image in collapsible div using javascript/jQuery

I’m after a hand with a bit of JavaScript if possible, I’m working on a collapsible list using jQuery and want to change a background image in a css file dependent on the state of the list
This is the html for the div
<div class="collapse_div">
<div class="header_div">header text</div>
<div class="content_div">
Some text
</div>
<div class="header_div">another header</div>
<div class="content_div">
some more text
</div>
</div>
This is the .css that puts the image (expanded.gif) into the header div
.collapse_div{
margin: 0;
padding: 0;
width: 500px;
}
.header_div {
margin: 1px;
color: #000;
padding: 3px 10px;
cursor: pointer;
position: relative;
background: url(expanded.gif) no-repeat 95%;
background-color:#ccc;
}
.content_div {
padding: 5px 10px;
background-color:#fafafa;
}
And this is the javascript function that controls the expand/collapse when header_div is clicked
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".header_div").click(function()
{
jQuery(this).next(".content_div").slideToggle(500);
});
});
I’ve played around with adding code to the .click(function) to try and change the background css tag in .header_div to another file (collapse.gif) but I can’t get it to work, so I thought I’d ask the experts as my javascript is really rusty
At the moment the collapse/expand of the div works fine having the background image change on click would really make it look good

You can have a class with the requried background set and apply that class conditionally. Try this
CSS
.header_div_collapsed {
background: url(collapse.gif) no-repeat 95% !important;
}
JS
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".expand_div").click(function()
{
jQuery(this).next(".content_div").slideToggle(500, function(){
var $this = $(this);
if($this.is(':visible')){
$this.removeClass('header_div_collapsed');
}
else{
$this.addClass('header_div_collapsed');
}
});
});
});

Your script should be something like this,
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".expand_div").click(function()
{
var elm = jQuery( this );
jQuery(this).next(".content_div").slideToggle(500, function(){
if(jQuery(this).is(":visible"))
jQuery(elm).css({"background-image" : "collapse.gif"});
else
jQuery(elm).css({"background-image" : "expand.gif"});
});
});
});

thanks to both the suggestions post below I managed to get this to work
firstly I added a whole new css function as just defining the background didn't work
.expand_div_collapsed {
margin: 1px;
color: #000;
padding: 3px 10px;
cursor: pointer;
position: relative;
background: url(collapsed.gif) no-repeat 95%;
background-color:#ccc;
}
then the JS was changed to this
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".header_div").click(function()
{
var co = jQuery(this);
jQuery(this).next(".content_div").slideToggle(500, function(){
if(jQuery(this).is(':visible')){
jQuery(co).addClass('expand_div_collapsed');
}
else{
jQuery(co).removeClass('expand_div_collapsed');
}
});
});
});
the add and remove class calls had to be swapped around and I had to define the var co before the slideToggle call
but thanks to everyone who offered suggestions as I would have never got this to work otherwise

Transform CSS { ul li:hover a } in JQUERY .hover

I want to now if there's a way to transform this css properties in a jquery .hover, or control this by javascript to change the colour dynamically.
CSS:
ul li:hover a {
color: #FFF;
}
Can anyone Help ?
EDIT:
My problem is:
I have a drop down menu and i want that when I hover the menu the text color change and when I hover the submenu the hover state stays for both.
JQuery:
$("ul li").hover(function () {
$(this).stop().animate({ backgroundColor: "white"}, 500);
}, function () {
$(this).stop().animate({ backgroundColor: "black"}, 400);
});
To animate background color on hover in menu and submenu.
For example if the text are black I want to make the text white on hover. For this I use:(Submenu example, for menu change the selector of course)
$('ul.submenu li a').hover(function () {
$(this).css({color:'#FFFFFF'});
}, function () {
$(this).css({color:'#00FF00'});
});
All This works fine, but when I hover the submenu the menu returns to the original state(because the mouseleave is activated on hover out). All I want is that when I hover submenu the hover state in menu stays active as well.
I've tried many things but all give me problems, only thing that works is css, but I need to control the text colours dynamically too.
HTML Structure:
<ul class="menu">
<li>text</li>
<li>text
<ul class="submenu">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
<li>text</li>
</ul>

Please let me know if this is along the right track of what you're asking.
I haven't got it working fully, but give this a look and see if it helps:
my JSFiddle
Here's the code so far:
$(document).ready(function() {
var sm; // submenu
var delay = 500; // delay before applying changes
var tID; // timeout id
var color_on = '#fff'
, color_off = '#000';
var oPrev;
$('ul.menu > li > a').hover(
function() {
if (tID && $(this) === oPrev) {clearTimeout(tID);}
oPrev = $(this);
sm = $(this).next('.submenu');
if(sm){sm.stop(true, true).fadeIn('slow');}
},
function() {
if (tID) {clearTimeout(tID);}
tID = setTimeout(
function() {
sm.stop(true, true).fadeOut('slow');
}, delay);
}
);
$('.submenu > li > a').hover(
function() {
if (tID) {clearTimeout(tID);}
oPrev.css('color',color_on);
$(this).stop(true, true).fadeIn('slow');
},
function() {
if (tID) {clearTimeout(tID);}
sm = $(this);
tID = setTimeout(
function() {
oPrev.css('color','');
sm.closest('ul').stop(true, true).fadeOut('slow');
}, delay);
}
);
});
And CSS:
a
{
color : #000;
text-decoration : none;
}
a:hover
{
color : #fff;
}
ul li
{
background : orange;
border : 1px solid black;
display : inline-block;
padding : 0 1em;
vertical-align : top;
}
.menu
{
background : #ccc;
border : 1px solid black;
display : inline-block;
padding : .25em 1em;
vertical-align : top;
}
.submenu
{
border : 1px solid black;
border-width : 1px 0 0 0;
display : none;
}
.submenu li
{
background : red;
border-width : 0;
}
.submenu li a:hover
{
color : #fff;
}
Note: I'm not saying this is the best answer, nor is it a complete solution, but maybe something in here will assist someone in finding the correct solution.

$("ul li a").hover(function() {
$(this)
.data("color", $(this).css("color"))
.css("color", "#FFF");
}, function() {
$(this).css("color", $(this).data("color"));
});
$("ul li").hover(function() {
$(this).find("a")
.data("color", $(this).css("color"))
.css("color", "#FFF");
}, function() {
$(this).find("a").css("color", $(this).data("color"));
});
Update:
Assuming that the first selector (ul li a:hover) is superfluous, we can simplify the code considerably:
$("li").hover(function() {
$(this).find("a").css("color", "#FFF");
}, function() {
$(this).find("a").removeAttr("style");
});
This updated code should work also (under the condition that you don't have additional CSS code inside the style attribute of the ANCHOR elements).
Update:
An alternative solution would be this:
$("li").hover(function() {
$(this).toggleClass("hover", $(this).is(":hover"));
});
with this CSS code:
ul li.hover a {
color: #FFF;
}
I highly recommend this alternative solution!

$('li').hover(
function(){
$(this).css({color:'white'}); //mouseover
},
function(){
$(this).css({color:'black'}); // mouseout
}
);

Try this (now tested: http://jsfiddle.net/nathan/J7HLV/):
$('ul li a, ul li').hover(function () {
$(this).add($(this).children('a')).filter('a').css('color','#fff');
},function () {
$(this).add($(this).children('a')).filter('a').css('color','');
});

Sure, simply use the hover binding.
$("ul li a").bind("hover", function () {
$(this).css("color", "#FFF");
});
$("ul li").bind("hover", function () {
$(this).children("a").css("color", "#FFF");
});
Note that this code won't reset the CSS properties when you mouse out. To do that you would need to store the original color values.
It is probably worth it to set that a element to display: block so it expands to the entire parent li element. Then you only need to hover on one of them.

Bind a hover function for the li tag. Whenever mouseover/mouseout is on the <a> tag the event will bubble up to the <li>
$(function(){
$("ul li").hover(function(){
$(this).css("color", "#fff");
},function(){
$(this).css("color", "#000000");
});
});
See a working demo
If you can achieve the effect using CSS then why go for javascript solution.