Develop Reference

How To Fix Inconsistent Javascript Code That Fades In/Out Sections On My Page

I am using code that I found in a javascript fiddle project that fades various #divID's in and out of the page based upon in-page navigation used by the viewer.
The Problem I am having is that each button fades in/out the content inconsistently. btn-one will fade old content out smoothly and fade in new content smoothly which is exactly what I desire. Buttons two and four will hard-drop old content and fade in new content. Button three will fade out old content but hard-cut in new content.
I would like them all to behave the same. If possible I would also like to be able to control the type and duration of each animation that divs utilize.
I've tried direct copy/paste of the fiddle code into my project and it has worked with two divs. Maybe the problem lies in creating additional divs? But this raises further questions because adding more div's into the fiddle itself works just fine.
$('#btn-one').click(function(e) {
$('#reviews, #aboutus').fadeOut('slow', function() {
$('#splash').fadeIn('slow');
});
});
$('#btn-two').click(function(e) {
$('#splash, #aboutus').fadeOut('slow', function() {
$('#reviews').fadeIn('slow');
});
});
$('#btn-three').click(function(e) {
$('#splash, #reviews').fadeOut('slow', function() {
$('#aboutus').fadeIn('slow');
});
});
$('#btn-four').click(function(e) {
$('#splash, #reviews, #aboutus').fadeOut('slow', function() {
$('#even').fadeIn('slow');
});
});
I would be very much open to one of two outcomes:
A solution to the existing code to make things work.
An altogether new code solution that would provide better results.
I appreciate any help you can give. Thank you.

If you want more control, try using CSS transitions. You can mimic the fadeIn/Out() functionality by setting up classes like this:
.fade {
opacity: 1;
transition: .3s;
}
.fade-out {
opacity: 0;
}
.hidden {
display: none;
}
Then initialize all your buttons with a .toggle-btn class, and initialize the divs with the .fade class, and on all but the one you want to show include the .fade-out and .hidden classes (this will start those out hidden). Then attach an event listener (just one to the document, don't need individual ones for each button) like so
const toggleBtns = {one: 'splash', two: 'reviews', three: 'aboutUs', four: 'even'}
document.addEventListener('click', e => {
// this line cancels the event if it's not a button we want
if (!e.target.classList.contains('toggle-btn')) return;
// grab the element(s) we want to hide
const toFade = $('.fade:not(.fade-out)');
// add an event listener for the CSS transition that removes after firing
toFade.one('transitionend', function(tansitionEvent) {
toFade.addClass('hidden')
});
// apply the class which will start the transition
toFade.addClass('fade-out');
// remove the invisibility classes from your target element, starting that transition
$(`#${toggleBtns[e.target.id.split('-')[1]]}`).removeClass('fade-out hidden');
}
I've never used transitionend with JQuery, but I assume it works. It looks like you want your buttons to only show one thing and hide everything else, so I put the associated div IDs in an object. Then I grab that with toggleBtns[e.target.id.split('-')[1]]. You maintain the pattern of btn-number for the button IDs, so I'm using split() to grab the number, then passing the result of that as the key into the toggleBtns object.

Foundation 5 Accordion - Transition Speed?

I am using Foundation 5 Accordions on a Website. They work but I want to change the transition speed. Currently when you click they instantly hide one and show the other. I would prefer they transition vs instantly appearing.
I tried CSS but it didn't work:
.accordion dd > a{
transition: all .5s;
}
Note: I am omitted vendor prefixes.
How do I get these to transition smoothly?
If I can do it with pure CSS this is preferred, otherwise JS will work but I am unsure how?

Lynda, I appreciated your code, in foundation 5, the panel stays visible after the second closing. Seems to be caused by jQuery adding style attributes from sliding. I edited it to fix the issue.
$(".accordion").on("click", "dd", function (event) {
if($(this).hasClass('active')){
$("dd.active").removeClass('active').find(".content").slideUp("fast");
}
else {
$("dd.active").removeClass('active').find(".content").slideUp("fast");
$(this).addClass('active').find(".content").slideToggle("fast");
}
});

As it turns out JS is the way to do this:
$(function() {
$(".accordion").on("click", "dd:not(.active)", function (event) {
$("dd.active").removeClass('active').find(".content").slideUp("fast");
$(this).addClass('active').find(".content").slideToggle("fast");
});
});

You can use this structure:
$(function() {
$(".accordion").on("click", "dd", function (event) {
$("div.active").slideUp(100).removeClass('.active');
$(this).find(".content").slideDown(100).addClass('active');
})
});
Its work correctly.

Here's a solution that is a bit more in-depth with jQuery, as well as utilizing .eq() to specifically target only the first (position 0) a element clicked through all of the li elements. Theoretically, this should work if you add the multi_expand configuration as well, because it only targets the first a element.
$(".accordion li").on("click", "a:eq(0)", function (event) {
var li_parent = $(this).parent();
if (li_parent.hasClass('active')) {
$(".accordion li div.content:visible").slideToggle("normal");
} else {
$(".accordion li div.content:visible").slideToggle("normal");
$(this).parent().find(".content").slideToggle("normal");
}
});
Credit goes to Nemanja Andrejevic on the Foundation forums. Note: this is using the Foundation 5.5 markup. If you're using previous versions, just replace all uses of li with dd.

Stop style HOVER behaviour with jQuery?

I have a div with style.
This style
body .d:hover
{
background-color:red;
}
But I want (if possible) that Jquery will stop this hover behaviour.
I tried with
$(".d").hover(function () { return false;});
$(".d").mouseenter(function () { return false;});
nothing helped.
any help ?
here is the JSBIN ( I want that after pressing the button - nothing will happen when hovering.)

If you want to stop this behavior constantly, you may remove the stylesheet rule, according to W3C wiki:
function stop(m) {
$.each(document.styleSheets, function(i, sheet) {
$.each(sheet.rules, function(i, rule) {
if (new RegExp(m + "\\s*:hover").test(rule.selectorText)) {
sheet.deleteRule(i);
} // TODO: improve RegExp
});
});
}
stop(".d");
If you want to change the state without removing, there is an option to change styleSheet.disabled property, in case you have the :hover rule set in a separate stylesheet.
Note, that I'm not sure about the compatibility issues here, it should be determined additionally.
DEMO: http://jsbin.com/akunew/10/edit

Add a new definition to your CSS:
.d.no-hover:hover {
background-color: black;
}
Now you can just add the no-hover class to the elements which should no longer have a hover effect:
$(obj).addClass('no-hover');

May be this kind of trick: http://jsbin.com/akunew/14/edit
<div style="border:solid 1px red;height:100px;width:100px;" class="d"> </div>
<input type="button" value="stop this hover" onclick="stop()" id="btn"/>
remove the class:
function stop(){
$(".d").addClass('e').removeClass('d');
}

When you calling onclick="stop(this)" it will get input as your $(obj), not your element .d.
EDIT There is no javascript solution to remove :hover

based on ur JSBIN example. below code will work
function stop(obj)
{
$(obj).hover(function () {
$(this).css('background-color','white');
return false;});
$(obj).mouseenter(function () {
$(this).css('background-color','white');
return false;});
$('body').append('<style>body div.d:hover {background-color:transparent !important}</style>');
}
u have overwrite :hover css of that particular element

CSS
.d:hover
{
background-color:Red;
}
.noClass
{
background-color:none;
}
JavaScript
function stop()
{
$(".d").addClass('noClass').removeClass('d');
}

I use a trick- when i am on hover onto an element (and click something inside that HOVERed element), then you can use this javascript method to cancel that hover css:
document.getElementById('sarchevi').className='active';
//on mouse move, remove class
(function(){
var moved = false
window.onmousemove = function(e)
{ if(!moved){ moved = true; document.getElementById('sarchevi').className ='a'; } }
})()

I know this question is four years old, but future visitors should know about the modern approach to this particular problem.
You can use a simple solution that (at its core) uses a CSS property and is supported by all browsers except IE < 11.
$('.d').css('pointer-events', 'none');
You might as well just copy this specific class from Bootstrap:
.disabled {
pointer-events: none;
}
And then apply it via jQuery:
$('.d').addClass('disabled');
Keep in mind, however, that this CSS property prevents the element from capturing any DOM events (such as hover, but also click, etc.)

Changing color with jquery removes hover color?

So i have:
#selection_menu .secondary_options button:hover { color: #000066; }
and it works great on my site..
When one of these buttons is clicked, however, i run a javascript function that contains:
$('button').css("color","#FFFFFF");
if(!$sameTile)
$($tileSelector).css("color","#000066");
So that when the button is clicked, the highlight color sticks when the mouse is moved away.
The problem i am having is that after this is run for the first time, the buttons stop changing color when highlighting. How can i get around this? Or is this normal behavior?
I am trying to add a class and i can't get it to work: http://jsfiddle.net/sUKkb/1/
Some more of my code:
index: http://pastebin.com/7gYu9YG8
css: http://pastebin.com/Jz1bvzrr
Or this might be more helpful: http://staging.easyzag.com/style.css
view-source:http://staging.easyzag.com/index.php?section=drink

The issue here is that your jQuery is adding an inline style which will override the rule from your CSS. The other issue is $('button').css('color','#000666') is going to apply inline styles to ALL buttons.
I would suggest adding a rule in your CSS for the defaults and the sticky state like this:
button { color:#fff }
button:hover { color:#fff }
.sticky-state { color:#000066 }
Then in your jQuery you do this instead of what you're doing:
`$(/*add your selector here*/).addClass('.sticky-state');

I believe this is (generally) what you're after:
jsFiddle: http://jsfiddle.net/sUKkb/5/
HTML:
<button class="not-sticky">Hello</button>
JS:
$('button').on('click', function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
Note, this does require a relatively new version of jQuery (1.7+). You could also use:
$('button').live('click', function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
or
$('button').click(function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
for older versions of jQuery.

you can do it without jquery if that's giving you trouble.
add an onmouseover and an onmouseout handler for the hover effect and add an onclick that first cancels the onmousover and onmouseout and then sets the desired color.

Try this;
in your CSS;
.new_class{
color:#000066
}
in your JS
$('button').css("color","#FFFFFF");
if(!$sameTile){
$($tileSelector).removeClass()('.your_previous_class');
$($tileSelector).addClass('.new_class');
}
or you may try
$($tileSelector).css({ 'color':'#000066' });
here is the fiddle http://jsfiddle.net/sUKkb/2/ (without class)
and this one http://jsfiddle.net/sUKkb/3/ (with class)
and this one http://jsfiddle.net/sUKkb/4/ using ID instead of class to make buttons unique
And I think, what you want is a toggle solution like the fiddle below;
http://jsfiddle.net/sUKkb/7/

Returning jQuery click function css change back

I have this jQuery call for a dropdown. On click, the background image of an inner container changes its background image. How do I change the background image for the inner container back?
$(document).ready(function () {
$('#listH1').click(function () {
$('#content1').slideToggle('medium');
$(".span").css("background-image","url(carrow.png)");
});
});

I suggest using toggleClass():
CSS
.yourNewBackground {
background-image: url(carrow.png);
}
JavaScript
$(document).ready(function () {
$('#listH1').click(function () {
$('#content1').slideToggle('medium');
$(".span").toggleClass("yourNewBackground");
});
});
EDIT
Here's a working fiddle. A couple things to note:
When working with a fiddle, make sure you select the appropriate framework. You had MooTools selected (the default), instead of jQuery.
toggleClass() wasn't working because of the span class. Adding !important to the toggleDown class was all that was needed.

If the background is set in a style sheetfile, you can just delete the custom style-attribute you created there:
$(".span").css('background-image', '');