recently I'm trying to make a hoverable login menu and what I want is that when the user clicks one of the inputs(id or password inputs) then make hoverable menu appear until the user clicks outside of the element.
So, it might be a little complicated to understand so here is an example here:
https://www.superonline.net
As ye can see, if you hover "Giriş" in the header, login box appears and when you unhover it disapears. What's more, when you click one of the inputs in the box then you can only disappear login box by clicking outside of the box, wonder how to do that.
You should be able to solve it with JQuery, when you hover the element to show, you're gonna have to fake a hover/focus with Jquery. Here's a code I had found to prevent this for a search bar. It's EXACTLY the same logic.
$('.top-search-bar').blur(function() {
if(mousedownHappened){
$('.top-search-bar').focus();
mousedownHappened = false;
}
else{
$('.top-search-bar').removeClass('top-sb-nb');
$('.input-results').removeClass('r-displayed');
}
});
var mousedownHappened = false;
$('.input-results').mousedown(function() {
mousedownHappened = true;
});
Related
I have a button which opens a menu. When the user selects the button the menu opens and the button is 'pressed' i.e blue colored
when the user makes a selection from the menu the menu closes and the button is unpressed.
if the user selects the button and then instead of choosing an item they click outside of the button, the menu closes and buttonis again unpressed.
my issue is: when i open the menu using the button i should be able to reclick on the button and close it. except when i reclick it opens it again.
i think i need to add something to the press event i have but not sure what. i tried adding event.stopPropogation() to the press but it returned not
a function.
$(document).click(function() {
this._button.setPressed(false);
}.bind(this));
this._button = new ToggleButton({
press: function(event) {
if (this._button.getPressed()) {
menu.open(
false,
this.getFocusDomRef(),
this.getDomRef()
);
} else {
menu.close();
}
}.bind(this)
}).addStyleClass("oButton");
I would suggest a solution. You would see whether it is good for you.
You can create a layer element after pressed the button. Then, the z-index of the menu is the highest and then the layer element is higher than the background.
You can add a click event to the layer. if the layer is clicked, close the menu.
Im making a store in shopify, and have set up the navbar as a dropdown.
Clicking the nav links will only make it display or hide the drop down, but what i need is for it to, on the first click, display, then clicking the parent will follow the link.(for instance,my home item drops down, but i can't actually get home, and need it as a drop down item.)
HeaderView.prototype.events = {
"click .main-nav .dropdown > a": "toggleMenu",
};
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
e.preventDefault();
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(e.target).closest(".dropdown-nav").length) {
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");}
};
Obviously the e.preventDefault is stopping the link from working, but I'm not sure how to make it give an active class on the first click, then allow the link to be followed when the drop down is visible. It works with hover, but then won't work on touch devices.
Any help/suggestions would be appreciated, thanks.
You only need to call e.preventDefault() when you are doing the first click. Otherwise it is, like you said, preventing it from working.
Try this instead:
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(e.target).closest(".dropdown-nav").length) {
e.preventDefault();
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");
}
};
Thanks for the response, I was going along the same line of thought and wound up with a simple, "if the class is active prevent default" type statement.
if (!this.$(".dropdown").hasClass("active")){
e.preventDefault();
So basically, if the drop down shows, allow the link, if isn't showing, prevent it;
thus keeping the top level as a link if it's drop down is 'open'.
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(".dropdown").hasClass("active")){
e.preventDefault();
if (!this.$(e.target).closest(".dropdown-nav").length) {
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");}
}
};
I almost got my function to work but I'm missing some ingredient.
I have 3 boxes with their own toggle open close button.
I have an Open All / Close All button that detects the number of open boxes, and switches its text label from 'Open All' to 'Close All' when all 3 boxes are open.
It works fine, except if you start out by clicking on the (red) Open All button after loading the page — and then manually close each individual box — and toggle them open again. Then the red Open / Close all button doesn't detect the opened boxes, and its text label doesn't switch from Open All to Close All.
I know it's unlikely that anyone would use the system this way, but I just want to understand why it stops detecting the number of open boxes.
http://codepen.io/StrengthandFreedom/pen/Yyemqa
// Open/close all boxes
$('.show-hide').on('click', function(){
event.preventDefault();
$('.box').siblings().toggleClass('is-visible',
$('.box').length != $('.box.is-visible').length);
$('.open-all').toggleClass('hide-text');
$('.close-all').toggleClass('show-text');
});
// Toggle boxes individually
$('.toggle-button').on('click', function(){
$(this).next('.box').toggleClass('is-visible');
// Count number of open (visible) boxes
var numOfVisible = $('.is-visible').length;
// if open boxes equal 3, switch button label
if (numOfVisible === 3) {
$('.open-all').addClass('hide-text');
$('.close-all').addClass('show-text');
}
// otherwise do the opposite
else {
$('.open-all').removeClass('hide-text');
$('.close-all').removeClass('show-text');
}
});
Can someone point me in the right direction? :-)
I think you just need to use
var numOfVisible = $('.box.is-visible').length;
instead of
var numOfVisible = $('.is-visible').length;
DEMO
Here is my solution:
http://codepen.io/anon/pen/epMJRz
This is the change on jquery code i made to make it work:
$('.show-hide').on('click', function(event){
event.preventDefault();
$('.toggle-button').trigger('click');
});
Had to refork it to resolve a bug now its perfect
So this is what i want, take a look jsfiddle for example, I want 3 boxes and when you hover over them another box appears that goes away when you hover away from that box or main box but not when your mouse is in between them the empty space.
Once you click the new box the box remains there until:
user clicks anywhere else.
or an close text is clicked
http://jsfiddle.net/T5QHn/4/ Updated
var menu = $('.menu'), body = $('body');
menu.children('.box').hide();
body.click(hideIt);
menu.hover(showIt,hideIt);
menu.click(keepIt);
function showIt() {
$(this).children('.box').stop().fadeIn();
}
function keepIt() {
//something efficent and not illogical..
}
function hideIt() {
//i have a feeling this depends on keepIt and insn't just inverse of showIt
$(this).children('.box').stop().fadeOut();
}
use mouseenter and mouseleave on the parent, instead of hover.
Apply the click to hide all boxes to the body, then, on the containers put a click handler with event.stopPropagation
Updated fiddle: http://jsfiddle.net/moagrius/fsPd3/1/
I have a grid of buttons in my code where the user clicks on the word "click here" and the grid of buttons would be displayed. This uses jquery, what I want to know is that does anyone know a way so that the user can click on a text box and what happens is that the grid of buttons appear and if the user clicks on a button or clicks away from the grid, the grid disappear again. In other words I want it to work exactly how the Jquery datepicker works (to see the datepciker jquery please click here
To see my code then it is in jsfiddle, click here
Try this:
UPDATED
$('#showGrid').click(function(e) {
if ($('#gridone').css("display") == "table") {
$('#gridone').hide();
}
else {
$('#gridone').css("display", "table");
}
e.stopPropagation();
});
$("body").click(function() {
$('#gridone').hide();
});
$('#gridone input').click(function(){
$('.box INPUT').val($('.box INPUT').val() + $(this).val() );
$('#gridone').hide();
});
Example fiddle