I've been looking around the documentation to try find a way to easily activate the select menu on hover, and not only on click.
Unfortunately, I cannot seem to find the way to do it (if it exists), and was hoping someone could point me in the right direction?
Here is a plnk,
http://plnkr.co/edit/GTeyWfOp9aTd1B0Be0Hs?p=preview
Thanks all
Try this:
$("#myselect").next(".select2").mouseenter(function() {
$("#myselect").select2("open");
});
$(document).on("mouseleave", ".select2-container", function(e) {
if ($(e.toElement || e.relatedTarget).closest(".select2-container").length == 0) {
$("#myselect").select2("close");
}
});
My generic solution to open and close select2 on mouseenter and mouseleave
$(document).on('mouseenter', '.select2-container', function(e) {
$(this).prev("select").select2("open");
});
$(document).on('mouseleave', '.select2-container .select2-dropdown', function(e) {
var selectId = $(this).find("ul").attr('id').replace("select2-", "").replace("-results", "");
$("#"+selectId).select2("close");
});
Related
On clicking .cart-contents-toggle the #cartplus-dropdown div should slide down and at the same time slide up without clicking on it a second time. Here is the URL where this is implemented: Website Link
jQuery(document).ready(function() {
jQuery('#cartplus-dropdown').hide();
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').slideToggle();
});
});
Please use the updated code below and let me know if you have any issue or query.
jQuery(document).ready(function() {
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').toggle();
jQuery('#cartplus-dropdown').slideToggle();
});
});
Hope this may be helpful to you.
Tried this and working now
jQuery('.c-btn').mouseenter(function(e) {
jQuery('.cartplus-dropdown').slideDown();
e.stopPropagation();
});
jQuery('.c-btn').mouseleave(function(e) {
jQuery('.cartplus-dropdown').slideUp();
e.stopPropagation();
});
http://emperor.graphics/
As you'll probably be able to tell by my JavaScript, I am no expert. I cobbled this together from multiple sources and it mostly works, but there are two frustrations I'm having:
On mobile, the menu does not always close when you tap outside it.
Clicking the menu icon itself does not close the menu.
$(function() {
$('.dropdown-toggle').click(function(){
$(this).next('.dropdown').addClass("nav-open");
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') &&
!$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').removeClass("nav-open");
}
});
});
Any help is greatly appreciated!
Maybe you want this?
$(function() {
var toggle = ".dropdown-toggle";
$(toggle).on("click", function(){
$(this).next('.dropdown').toggleClass("nav-open");
});
$(document).click(function(e) {
var target = $(e.target);
if (!target.is(toggle) && !target.parent().is(toggle)) {
$(".dropdown").removeClass("nav-open");
}
});
});
I'm trying to do something like submenu on input click and close it on losing focus with jQuery.
Only accomplished using mouseup like this:
$(document).mouseup(function (e){
var container = $(".container");
if (!container.is(e.target)
&& container.has(e.target).length === 0
&& !$(".input").is(e.target))
{
$('.submenu').removeClass('submenu');
}
});
here is my results:
http://jsfiddle.net/Lwfhbdmp/8/
this works OK, but I think it's too complex and maybe there is a simpler solution for this?
Please help.
jsFiddle demo
A cleaner solution:
$(function(){
var $submenu,
contHov = 1,
$container = $('.container').hover(function(){ contHov^=1; }); // Tog flag on hover
$(document).on('mouseup keyup', function( e ){
if(contHov||e.which==27) $submenu.removeClass("submenu");
});
$(".input").on("click", function(e){
$submenu = $(this).closest("div").toggleClass('submenu');
});
// That's it. From now on, whenever you desire to
// reference to the currently active 'submenu'
// simply use the $submenu variable:
$(".btn-inside").on("click", function(){
alert("Clicked");
$submenu.removeClass("submenu");
});
});
...and you can even use ESC to close the $submenu
How to close-hide DIV clicking outside of it (but not inside)
I'm trying to add/remove .css('overflow-y','hidden') onclick, Which I did. The problem appears when I try to remove that css, also onclick. But this time, user needs to click on another element.
Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still overflow-y styling and because of it I can't scroll my page.
So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.
Thanks!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>
Put your css in a class and use jquery's .toggleClass() to show/hide the overflow.
Here's a simplified example: http://jsbin.com/towiyaqa/1/
You can use like this:
$button.on('click', function(e) {
$html.css('overflow-y','hidden' ? 'scroll' : 'hidden');
e.preventDefault();
})
Here is solution for problem:
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$('.note').delay(10000).fadeOut('slow');
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
console.log("overflow-y: hidden added");
}
});
$('#myModal').on('hidden.bs.modal', function () {
// do something…
console.log("fires myModal");
$html.css('overflow-y','scroll');
});
});
</script>
I have a tooltip that shows on the mouseenter event and hides on the mouseout event. Sometimes, not always, when the mouse moves within the image for the tooltip the tooltip flickers. How can i prevent this happening? Is there a better way to do this?
Here is my code:
$('#home_pic').mouseenter(function() {
$('#home_tip').show();
});
$('#home_pic').mouseout(function() {
$('#home_tip').hide();
});
Use mouseleave instead of mouseout()
$('#home_pic').mouseleave(function() {
$('#home_tip').hide();
});
Or use .hover
$('#home_pic').hover(function() {
$('#home_tip').hide();
},function() {
$('#home_tip').show();
});
You can use the toggle() function for this, it accepts a boolean to set the state, so something like:
$('#home_pic').on('mouseenter mouseleave', function(e) {
$('#home_tip').toggle(e.type==='mouseenter');
});
FIDDLE
Try mouseleave instead of mouseout like this:
http://jsfiddle.net/tncbbthositg/dWKfX/
You need to write your mouseenter and mouseleave functions in a proper way, something like below:
$('#home_pic').mouseenter(function() {
$("#home_pic").show();
},mouseleave(function() {
$("#home_pic").hide();
}));
Note: Code Not tested to work.
you can also try something like this if the tooltip runs over the home pic - I've used very similar code to pop up bubbles on a image map
$('#research_area').mouseover(function() {
$('img#research').css('display', 'block');
runthis();
});
function runthis () {
if ( $('img#research').css('display') == 'block') {
$('img#research').mouseleave(function() {
$(this).css('display', 'none');
});
}
http://www.karpresources.com/