I have found a few ways to to expose the collapsible accordion function in bootstrap, however I am unable to customise it in a way that only one panel-collapse is triggered when hovering the div.panel-heading > a element.
I am doing the following:
$('div.panel-heading a').hover(function () {
$('.panel-collapse').collapse('show');
}, function() {
$('.panel-collapse').collapse('hide');
});
}
But whenever I hover over the a element all panel-collapse elements open and close. How can I isolate each if they are not children of panel-heading?
Fiddle here: http://jsfiddle.net/Tupira/084z33g5/1/
Try this code:
$('div.panel-heading a').hover(function () {
$('.panel-collapse', $(this).closest('.panel')).collapse('show');
}, function() {
$('.panel-collapse', $(this).closest('.panel')).collapse('hide');
});
Related
I am trying to run a 4 column masonry isotope item inside a tab/accordion. I found that I will need to use the layout, to make the isotope work, when tab element is visible.
So I tried this;
jQuery(function ($) {
$('.tab_title').click(function(){
$('.iso-container').isotope({
itemSelector : '.iso-item',
layoutMode:'masonry',
masonry:{
columnWidth: 300
}
});
});
});
When I click the tab (.tab_title), isotope appears, but in one column, taking entire container width. How can I solve this?
To mention, I have tried $('.iso-container').isotope('layout') as well. This also shows one item taking entire width of the container.
I was able to solve it using:
$('.iso-container').isotope( 'reloadItems' ).isotope( { sortBy: 'original-order' } );
If in case, images are overlapping on each other, use imagesLoaded.
var $grid = $('.iso-container').imagesLoaded( function() {
$grid.isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
});
How do you make a button in Bootstrap 3 undepress automatically after being clicked?
To replicate my problem, make a page with some buttons, give them appropriate bootstrap classes (and include bootstrap):
<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">
Load the page and click on one of the buttons. It becomes depressed and highlighted until you click somewhere else on the page (using FF29 and chrome35beta).
Inspecting the input element while clicked and unclicked doesn't show any additional classes being attached and removed from it.
Here's an example of Bootstrap buttons staying depressed: http://jsfiddle.net/52VtD/5166/
In your example, the buttons do not stay depressed. They stay focused. If you want to see the difference, do the following:
Click and hold on a button.
Release. You will see that when you release the mouse the button's appearance changes slightly, because it is no longer pressed.
If you do not want your buttons to stay focused after being released you can instruct the browser to take the focus out of them whenever you release the mouse.
Example
This example uses jQuery but you can achieve the same effect with vanilla JavaScript.
$(".btn").mouseup(function(){
$(this).blur();
})
Fiddle
Or you can just use an anchor tag which can be styled exactly the same, but since it's not a form element it doesn't retain focus:
one.
See the Anchor element section here: http://getbootstrap.com/css/#buttons
The button remains focused. To remove this efficiently you can add this query code to your project.
$(document).ready(function () {
$(".btn").click(function(event) {
// Removes focus of the button.
$(this).blur();
});
});
This also works for anchor links
$(document).ready(function () {
$(".navbar-nav li a").click(function(event) {
// Removes focus of the anchor link.
$(this).blur();
});
});
My preference:
<button onmousedown="event.preventDefault()" class="btn">Calculate</button>
Or angular way:
function blurElemDirective() {
return {
restrict: 'E',
link: function (scope, element, attrs) {
element.bind('click', function () {
element.blur();
});
}
};
}
app.directive('button', blurElemDirective);
app.directive('_MORE_ELEMENT_', blurElemDirective);
Replace _MORE_ELEMENT_ with your others elements.
Or attribute way:
function blurElemDirective() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function () {
element.blur();
});
}
};
}
app.directive('blurMe', blurElemDirective);
Then add the attribute to your html element: blur-me
<button blur-me></button>
It's the browser's focus since it's a form element (input).
You can easily remove the focusing with a little css
input:focus {
outline: 0;
}
Here's the fiddle with your example: http://jsfiddle.net/52VtD/5167/
EDIT
Ah, I just saw now that the colour of the button itself changes too. Bootstrap changes the button of e.g. your btn-default button with this css:
.btn-default:focus {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
If you don't want this behaviour, just overwrite it with your css.
This has to do with the :active and :focus element states. You need to modify the styles for those states for these buttons. For example, for the default button:
.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #333;
background-color: #ccc;
border-color: #fff;
}
I have a cart on my website, I have maked a kind of graphic as image, that appear as bacground behind the cart when :hover.
But I was wondering how I can make this object fade/appear slowly on :hover, instead of instant as it is now.
I tried to copy the html and css from my website, but it looks bad in jsfiddle.
http://oliver.kaspertoxvig.dk/
I am not sure if this is the preferred way of doing it, but if you are using the jQuery library, this should do the trick:
$(function () {
$(".cart-css-class").hover(
function () {
// Fade in on hover
$(this).stop().animate({ "opacity": "1" }, "slow");
},
function () {
// Fade out when no longer hover
$(this).stop().animate({ "opacity": "0" }, "slow");
});
});
This assumes your element has the css class cart-css-class. To hide it on load, you should apply this CSS:
.cart-css-class {
opacity: 0;
}
I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.
It's on a Joomla site, and so we're using MooTools.
I'm having trouble getting the action of the click event to work. Any thoughts?
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display.getNext(); //HELP HERE PLEASE
});
});
Many thanks!!
Dan
Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display(accordion.previous + 1);
});
Working fiddle here: http://jsfiddle.net/9859J/
Im trying to setup so that when you hover over class .object1 -> in turn should reveal .obj_1 when you are not hovered on it, it should hide .obj_1. I may be a little off in my code, thanks for the help!.
$(document).ready(function() {
$(".obj_1 , .obj_2").hide();
});
$(".object1").hover(
function() { $(".obj_1").show(); },
function() { $(".obj_2").hide(); }
);
$(".object2").hover(
function() { $(".obj_2").show(); },
function() { $(".obj_1").hide(); }
);
Very simple it should be
$(document).ready(function() {
$(".obj_1 , .obj_2").hide();
});
$(".object1").hover(
function() { $(".obj_1").show(); },
function() { $(".obj_1").hide(); }
);
$(".object2").hover(
function() { $(".obj_2").show(); },
function() { $(".obj_2").hide(); }
);
The "hover" handler function signature is ( mouseInHandler, mouseOutHandler).
For object1 you want to show obj_1 on mouseIn, and hide it on mouseOut.
You don't need to reference obj_2 on object1 hover handlers.
Check out the fiddle I made here
FYI - the hover events act weird when you have complex inner content. ( for example, div within another div and so on ). I advise you to use "mouseenter" and "mouseleave"
UPDATING ANSWER AFTER REALIZING THIS IS A DROP DOWN MENU QUESTION
The drop down menu in CSS is a great example where "hover" won't suffice --> because the submenu disappears once you're not on the link anymore.. and that's not what we want.
It is important to note 3 things about drop down menus :
They can (?should?) be achieved purely with CSS
The HTML structure is important.
For example, consider the following structure instead :
<ul class="menu">
<li>
</li>
<li>
<ul class="menu">
<li>
</li>
</ul>
</li>
</ul>
This structure is recursive - you can have infinite levels of submenus - and the mouseenter/mouseleave on the "li" will hold since the submenu is part of the "li" item.
To see this in action have a look in my fiddle
Please also note that I removed the first "hide" from the onload code, and replaced it with css "display:none" - which resolves flickering on page load ( flickering means - first the submenu shows, and once the page loads, we hide it. )
A css solution would include a selector with "hover" on it ( yes, hover.. )
You can find plenty of blog posts about it while searching in google.
Here is the first one I found.