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.
Related
I use this code to make bootstrap dropdown show when mouse hover
var bMobile; // true if in mobile mode
// Initiate event handlers
function init() {
"use strict";
// .navbar-toggle is only visible in mobile mode
bMobile = $('.navbar-toggle').is(':visible');
var oMenus = $('.navbar-nav .dropdown'),
nTimer;
if (bMobile) {
// Disable hover events for mobile
oMenus.off();
} else {
oMenus.on({
'mouseenter touchstart': function(){
event.preventDefault();
clearTimeout(nTimer);
oMenus.removeClass('open');
$(this).addClass('open');
},
'mouseleave': function() {
nTimer = setTimeout(function() {
oMenus.removeClass('open');
}, 500);
}
});
}
}
$(document).ready(function() {
// Your other code to run on DOM ready...
init();
});
$(window).resize(init);
I use this code to remove hover effect from small screens and work on big screens
How can make this code slide animation ?
and if there is code better than this code please add it in comment
I am bad in English, sorry :)
I recommend using the http://daneden.github.io/animate.css/ project, and adding the css class you want, i'll try to throw together a quick example
Here's a quick and dirty demo
$($(this).find(".dropdown-menu")[0]).addClass('bounceInUp animated');
http://jsfiddle.net/L8nz8zk2/1/
you would want to use something like this to handle the mouse events (no need for the $.on()):
http://api.jquery.com/hover/
so your code would look something like this.
$('CSS SELECTOR OF THE ITEM TO HOVER OVER').hover(function(){
$('CSS SELECTOR OF THE ITEM THAT NEEDS TO SLIDE DOWN').slideDown();
},function(){
$('CSS SELECTOR OF THE ITEM THAT NEEDS TO SLIDE UP').slideUp();
});
The Jquery animation of slideDown() and slideUp() is what you're looking for, and this combined with the .hover() jquery event handler should be able to give you what you need.
you can lose the .on() calls.
I have several linked photos that are set to be (opacity: 0.45) except on hover and when clicked (opacity:1). I also have a JQuery function listening for clicks, which will then change the css of the clicked photo to be (opacity:1) and the rest back to (opacity: 0.45). However once the function runs the hover effect is disabled somehow. Any ideas?
HTML:
<a class="img_thumbs"><img src="someimage.jpg"></a>
CSS:
.img_thumbs:hover {
opacity:1;
}
.img_thumbs {
opacity:0.45;
}
JQuery:
$('.img_thumbs').click(function(){
event.preventDefault();
$('.img_thumbs').css({'opacity': '0.45'});
$(this).css({'opacity': '1'});
}):
I have tried:
adding the JQuery .hover() effect in and outside of the function
changing the selectors, css, html to a.img_thumbs, individually and together
looking for where the code fails
That function also runs an AJAX call and several other listeners, but ive determined they do not have any adverse effects (commented them out), so the problem lies only in the code I've provided.
An alternate solution would also be gratefully accepted, Thanks in advance.
use this:
CSS:
.img_thumbs:hover {
opacity:1;
}
.active {
opacity:1 !important;
}
.img_thumbs {
opacity:0.45;
}
JS:
$('.img_thumbs').click(function(event){
event.preventDefault();
$('.img_thumbs').removeClass( "active" )
$(this).addClass( "active" );
});
The tips is use other active class, and add or remove this class, when click.
I have two buttons which im working with, I am trying to make a hover effect and when the user clicks on the button have a clicked event.
I have been playing around with a few jquery methods such as mouseover mouseout etc but still no luck. The idea is to get the hover to only work on elements that have not been selected already.
The issue with the code below is that once an button has been selected if the user hovers over the selected method it gets rid of its current state.
Is their a way of not getting rid of the current state once a button has been selected?
Thanks
$(".M").click(function(){
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
$(".F").css('color','#515B69');
$(".F").css('background-color','#fff');
});
$(".M").mouseover(function() {
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
});
$('.M').mouseleave(function(){
$(this).css('color','#515B69');
$(this).css('background-color','#fff');
});
$(".F").click(function(){
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
$(".M").css('color','#515B69');
$(".M").css('background-color','#fff');
});
$(".M").mouseover(function() {
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
});
$('.F').mouseleave(function(){
$(this).css('color','#515B69');
$(this).css('background-color','#fff');
});
I would recommend offloading a lot of these tasks with CSS
.M, .F {
background-color: #fff;
color: #515B69;
}
.M.active, .M:hover,
.F.active, .F:hover {
color: #fff;
background-color: #515B69;
}
And for your JS
$('.M, .F').on('click', function () {
$('.M, .F').removeClass('active');
$(this).addClass('active');
});
Set a variable in your click functions and then check it with if statements in your mouseover and mouseleave functions. For example:
var clicked = 0;
$(".F").click(function(){
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
$(".M").css('color','#515B69');
$(".M").css('background-color','#fff');
clicked = 1;
});
if (clicked > 0){
$(".F").mouseover(function() {
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
});
}
I'd prefer to use removeClass and addClass.
If You use removeClass without parameters, all classes will be removed from element. Then add Class, that You want. You can make it that way, for example:
$(selector).removeClass().addClass("your_class");
In that way, styles are seperated from scripts, which is always a good practice.
Try to rewrite Your code in that way. If You have any questions, just ask in a comment, I will update my answer :).
PS. Of course You must place "your_class" in style.css file :).
Best regards
I want to make a list of URLs that get highlighted when you click, the problem is only one link should be highlighted at any one time.
I'm able to get the reset button working. used removeAttr) - $("a").removeAttr("style") - (is there any negatives to doing it this way?)
But I can't get it to be only do one highlight at a time.
Could someone help me with an example code of making only one link highlighted at one time? Right now, it's possible to highlight multiple links.
I was able to make an example on Jsfiddle http://jsfiddle.net/M3vVw/3/
I'd recommend doing it this way: create a CSS rule and apply it to the element you click on, removing the same style from all links first.
jQuery
$("a").click(function () {
$('a').removeClass('back');
$(this).addClass('back');
});
$("#btn").click(function () {
$("a").removeClass("back")
});
CSS
.back {
background-color: #ff3fff;
}
jsFiddle example
I'd suggest using addClass() (as adeneo already suggested), but if you must use attr():
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').attr('style', '');
});
JS Fiddle demo.
Or:
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').removeAttr('style');
});
JS Fiddle demo.
Do remember that using attr()/removeAttr() is incredibly destructive and requires much more work and maintenance (you have to explicitly restructure the CSS of each of the styled element's properties every time); addClass()/removeClass() is far more efficient, since it contains all the styling externally, where it's easy to add/remove that styling to the element when needed.
References:
addClass().
attr().
closest().
css().
find().
removeAttr().
siblings().
You can use this:
$("a").click(function()
{
$(this).css("backgroundColor", "#ff3fff");
$("a").not($(this)).removeAttr("style");
});
$("#btn").click(function(){
$("a").removeAttr("style")
});
LIVE DEMO
CSS:
a.active{
background:#ff3fff;
}
jQuery:
function removeActive(){
$("a").removeClass("active");
}
$("a").click(function( e ){
e.preventDefault();
removeActive();
$(this).addClass("active");
});
$("#btn").click(removeActive);
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.)