How would I compact this jQuery drop down menu code? I know you can use the Superfish plugin for this, but I'm more interested in learning the programming skills on this one. I know it would involve changing the "#navabout" IDs to something like "#Nav1" and the dropdown IDs to match, like "#drop1" and then running an array, possibly?
$('#navabout').hover(
function () {
$('#dropabout').show();
},
function () {
$('#dropabout').hide();
});
$('#navnews').hover(
function () {
$('#dropnews').show();
},
function () {
$('#dropnews').hide();
});
$('#navgroups').hover(
function () {
$('#dropgroups').show();
},
function () {
$('#dropgroups').hide();
});
$('#navemployee').hover(
function () {
$('#dropemployee').show();
},
function () {
$('#dropemployee').hide();
});
$('#navtools').hover(
function () {
$('#droptools').show();
},
function () {
$('#droptools').hide();
});
assign a "menu" class to all your menus.
then do
$('.yourClass').hover(
function () {
$(this).show();
},
function () {
$(this).hide();
});
You can handle this without JavaScript. If the menu is running off the "Suckerfish" style and you don't need drop-downs on IE6 and below all you need to use is :hover.
#menu li:hover ul {
left: auto;
}
Related
How can I include a close button using jQuery UI toggle function?
$(".login").click(function () {
$(this).hide();
$("#myDiv").toggle("slide", {
direction: "left"
}, 500);
});
My jsFiddle
fiddle: http://jsfiddle.net/AtheistP3ace/TX55G/207/
$(".login, .close").click(function () {
$('.login').toggle();
$("#myDiv").toggle("slide", {
direction: "left"
}, 500);
});
Show/Hide click button after toggle: http://jsfiddle.net/AtheistP3ace/TX55G/208/
$(".login, .close").click(function () {
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () { $('.login').toggle(); });
});
If you want to hide the click prior to showing close and show the click after hiding close you can do this. Although I will point out using the visible/hidden selectors can be bad on performance but I was attempting to not make many changes to your code. You can do this without using them easily.
http://jsfiddle.net/AtheistP3ace/TX55G/209/
$(".login, .close").click(function () {
var hiding = $('.login:visible');
if (hiding.length == 1) {
$('.login:visible').toggle();
}
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () {
if (hiding.length == 0) {
$('.login').toggle();
}
});
});
This is the way I would do it instead of using those special selectors. I would use a class. http://jsfiddle.net/AtheistP3ace/TX55G/211/
CSS:
.hide {
display: none;
}
JS:
$(".login, .close").click(function () {
var login = $('.login');
var hiding = !login.hasClass('hide');
if (hiding) {
$('.login').addClass('hide');
}
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () {
if (!hiding) {
$('.login').removeClass('hide');
}
});
});
$(".login, .close").click(function () {
Demo
Using jquery plugin with mouse hide and show I am trying to create tool tip.I am facing two problem
Whether my code is correct for mouseout and mouseleave
When I am creating lot of tooltip it was not positioning correctly it was coming down actually it has to come to right side.
I have found so many from stack Overflow but nothing is working out.
Here is the jquery code
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function () {
$("#showtooltip").show();
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function () {
$("#showtooltip1").show();
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function () {
$("#showtooltip2").show();
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
Third mouse over was not working. I am trying to creating I think missed something.
Here is the jsbin Link
Kindly help me
Thanks & Regards
Mahadevan
Just add this css rules to your .tooltip class:
position: absolute;
top: 40px; /* define how much space from tooltip to the top
and this javascript:
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function (e) {
$("#showtooltip").show();
$("#showtooltip").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function (e) {
$("#showtooltip1").show();
$("#showtooltip1").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function (e) {
$("#showtooltip2").show();
$("#showtooltip2").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
I added only this line in javascript mouseenter function:
$("#showtooltip").css('left', e.pageX);
It sets the tooltip left coordinate, in case you have many items, the tooltip will show exactly beneath the hovered item.
Customization
If you want the tooltip right of the hovered item, you will need to add this css:
var rightMargin = 20; // or whatever fits your needs
$("#showtooltip").css('left', e.pageX + rightMargin);
and change your css top property above.
Update
Since this code of yours is very coupled and you asked for a better solution, here it is jQuery code:
$(document).ready(function() {
$(".tooltip").hide();
$(".help").on({
mouseenter: function (e) {
var tooltip = $(this).next(); tooltip.show();
tooltip.css('left', e.pageX + 20);
},
mouseleave: function () {
$(this).next().hide();
}
});
});
to work this, you gonna have to remove your coupled ids and instead add to every anchor tag class help.
the code simply checks if the user is hovering a link, and if so, then just show the next element after it, which happens to be the tooltip.
Here is a FIDDLE
Cheers
I am using this https://github.com/simontabor/jquery-toggles plugin to toggle an element on my page.
The plugin works fine on one item.
$('.toggle').toggles({
on: true,
text:{
on:'COMPLETE',
off:'INCOMPLETE'
}
});
$('.toggle').on('toggle', function (e, active) {
if(active) {
$(this).removeClass('off');
$(this).addClass('on');
} else {
$(this).removeClass('on');
$(this).addClass('off');
}
});
But I have 2 identical elements, one at the top and one at the bottom of the page.
I am trying to have both updated(toggle) at the same time. I tried just targeting the class but that did not work:
$('.toggle').toggles({
on: true,
text:{
on:'COMPLETE',
off:'INCOMPLETE'
}
});
$('.toggle').on('toggle', function (e, active) {
if(active) {
$('.toggle').removeClass('off');
$('.toggle').addClass('on');
} else {
$('.toggle').removeClass('on');
$('.toggle').addClass('off');
}
});
Any ideas?
I have tried using each but it does not quite work
http://giphy.com/gifs/3o85xxJ7f2fYakUzQs
try adding this line
$('.toggle').toggles(active);
into the .on event like this
$('.toggle').toggles({
on: true,
text:{
on:'COMPLETE',
off:'INCOMPLETE'
}
});
$(".toggle").on("toggle", function(e, active) {
$('.toggle').toggles(active);
if(active) {
$('.toggle').removeClass('off');
$('.toggle').addClass('on');
} else {
$('.toggle').removeClass('on');
$('.toggle').addClass('off');
}
});
You need to handle each element seperately:
$('.toggle').on('toggle', function (e, active) {
$.each($('.toggle'), function(index, element) {
if(element.hasClass('off')){
$('.toggle').removeClass('off');
$('.toggle').addClass('on');
}
if(element.hasClass('on')){
$('.toggle').removeClass('on');
$('.toggle').addClass('off');
}
});
});
I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.
You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();
if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});
use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)
You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/
document.getElementById("username").style.display='block';
is there any option to prevent slideUp() when hover its related div ?
$('#member1').hover(function () {
$("#memberdetails2").hide();
$("#memberdetails1").stop(true, true).slideDown();
}, function () {
$("#memberdetails1").stop(true, true).slideUp();
});
$('#memebr2').hover(function () {
$("#memberdetails1").hide();
$("#memberdetails2").stop(true, true).slideDown();
}, function () {
$("#memberdetails2").stop(true, true).slideUp();
});
DEMO http://jsfiddle.net/sweetmaanu/zDYyB/
Are you talking about something like this?
http://jsfiddle.net/zDYyB/2/
If you want the members detail to be always visible, remove
$('#company').on('mouseleave', function(e) {
$('.membersare').hide();
});