I have some buttons( "ul.subjects li" ) and...
1. change buttons' background-images through mouseover actions
2. can be clicked one button at once.
So once clicked a button, others are cancelled.
I have two this button lists and switch contents by clicked items(subjects and ages).
I can switch background-images by changing "class" of (class="mat" to class="mat_c").
$(function(){
$(document).delegate("ul.subjects li a", "mouseover", function(){
$(this).data("imgc", $(this).attr("class"));
var regex = /_s/;
if (regex.test($(this).data("imgc")) == false ) {
$(this).attr("class", $(this).data("imgc")+"_c")
}
});
$(document).delegate("ul.subjects li a", "mouseout", function(){
$(this).attr("class", $(this).attr("class").replace(/_c/, ""));
});
});
<ul class="subjects">
<li><a id="mat" class="mat" href="/age=all/sub=mat/"></a>算数・数学</li>
<li><a id="soc" class="soc" href="/age=all/sub=soc/"></a>社会</li>
<li><a id="sci" class="sci" href="/age=all/sub=sci/"></a>理科</li>
<li><a id="eng" class="eng" href="/age=all/sub=eng/"></a>英語</li>
</ul>
While button-click action doesn't work right, trying to change attribute into class="..._s",
but immediately changed into class="..._c".
$(function(){
$(document).delegate("ul.subjects li a", "click", function(){
$("ul.subjects").html($("ul.subjects").html().replace(/_s/g, ""));
$(this).attr("class", $(this).attr("class").replace(/_c/, "_s"));
});
});
Maybe I should control the events or order of them...
and there should be more simple ways to do this. How should I figure this out?
As you can see it on http://jsfiddle.net/MsdGS/1/,
After you click the under list , mouseover action doesn't work right.
Clicked buttons' "class" should be changed to "..._s",
(class="mat" to class="mat_s")
but "..._s" immediately changed to "..._c".
Thanks,
The result (i've removed the href in the bottom ul list)
If i have understood your question correct this is what you need to change:
$(function(){
$("#course_tb").load("/age=all/sub=all/"+"#course_tb");
$(document).delegate("ul.subjects li a", "click", function(){
// iterate through `subjects`'s "a"
$("ul.subjects li a").each(function(index, el){
$(el).attr("class", $(el).attr("class").replace(/_s/g, ""));
});
//html($("ul.subjects").html().replace(/_s/g, ""));
// ...
return false;
} );
} );
Try to use hover to implement mouseover and mouseout, like
$("ul.subjects li a").hover(function() {
$(this).css("background-image", "www.google.com");
}, function() {
$(this).css("background-image", "www.google.com");
});
As you can see, just try to use css:background-image to directly change the background image. This would bypass your problem.
Hope this works for you.
.hover() API
Related
I am using this Wordpress theme, called ichiban.
I have made some custom menu items that links directly to sections on the same page. For these cases I would like the whole menu to un-toggle when the < li > item is clicked. This is the code I have been working on;
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$('.site-overlay-wrapper').hide();
});
});
For now, this code only hides the open menu, the menu button does not reset, and it is not possible to re-ope the menu. Please help me getting this code correct.
SOLUTION
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$("body").removeClass("overlay-open");
});
});
Thank you all :)
You can try using jQuery .toggle() method.
Change this line:
$('.site-overlay-wrapper').hide();
To:
$('.site-overlay-wrapper').toggle();
This help?
jQuery( document ).ready(function($) {
var t = true;
$('#menu-main li a').on("click", function(){
if(t===true){
$('.site-overlay-wrapper').hide();
t=false;
}
else{
$('.site-overlay-wrapper').show();
t=true;
}
});
});
Here is working example:
jQuery( document ).ready(function($) {
var t = true;
$('#button').on("click", function(){
if(t===true){
$('.show').hide();
$(this).text("SHOW");
t=false;
}
else{
$('.show').show();
$(this).text("HIDE");
t=true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button">CLICK</button>
<div class="show">HAPY NEW YEAR!!!</div>
You also can have a problem with $('#menu-main li a'). That a tag is wrong. You need to point click statemant to button class directly because you hide your menu on any a tag inside any li.
I am using following code to add line to my submenu :
$("li.mega-menu-megamenu a").hover(function(){
$( "<div class='remove'><hr /></div>" ).insertAfter("#mega-menu-primary-2 li:last-child" );
});
Its working perfectly fine.But the issue is that I want to remove that tag when there is no hover.
I have tried this : $("li.mega-menu-megamenu a").unbind('hover'); But by doing this, it will not add html tags at all.
How can I remove line when there is no hover on menu ?
You can use mouseout event for that
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").remove();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
});
Another possible solution is, instead of adding and removing the element you can just hide/show it.
$(document).ready(funnction() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
$(".remove").hide();
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").hide();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$(".remove").show();
});
});
I would opt for hide/show so you don't keep adding/removing from the DOM.
// Add the element to the DOM once and then hide it
var $removeElement = $( "<div class='remove'><hr /></div>" )
.insertAfter( "#mega-menu-primary-2 li:last-child" )
.hide();
// On mouseover we show the $removeElement and mouseout will hide it
$("li.mega-menu-megamenu a")
.hover(function(){ $removeElement.fadeIn(); },
function() { $removeElement.fadeOut(); }
);
I used fadeIn/fadeOut but you can use show/hide instead if prefered.
You can pass 2 functions to hover. Second will be called when mouse is exiting the element.
$("li.mega-menu-megamenu a").hover(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},
function() {
$(".remove").remove();
});
Another way:
$('li.mega-menu-megamenu a').on({
'mouseenter':function(){
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},'mouseleave':function(){
$(".remove").remove();
}
});
can you please tell me how to get alert of id when user click of submenu.
Actually I am adding submenu of button click with id"menu_tc_1","menu_tc_2".I want to click of submenu ? and show alert ?
http://jsfiddle.net/eHded/1553/
$(document).on('click',".menuClick",function(){
alert('jii'+this.id)
})
You need to listen to clicks on the menu elements, not the entire menu.
$(document).on('click',".menuClick a",function(e){
alert('jii'+$(this).parent().prop('id'))
})
You click on the a so find it's parent's id
http://jsfiddle.net/eHded/1565/
Try this:
$(document).on('click', ".menuClick ul li > a", function () {
alert('jii' + $(this).parent().attr('id'));
});
Assuming you want the child elements that are added to the menu when you click the add button.
Edit: to add a selected class to the parent li element:
$(document).on('click', ".menuClick ul li > a", function () {
$(this).parent().addClass('selected');
});
Try this instead
$(document).on('click',".menuClick li",function(e){
alert('jii'+this.id)
$(".menuClick li").removeClass("active");
$(this).addClass("active");
e.stopPropagation();
})
This will solve your issue.
Demo
Ok so my original question got answered and now my slide effect only happens when I click in anywhere in my div region..here is the code:
$(document).ready(function(){
$('#tabs').tabs();
$("#tabs").click(function() {
$(this).effect( "slide", "medium" );
});
});
Now I'm wondering what if somebody wants to copy text from one of my tab regions? Every single time they try to highlight, the tab will slide away. How do I make it so that the tab region only slides when the actualy tab ul is clicked?
Use combination of mousedown and mouseup:
Demo Fiddle
var down=0;
$(document).ready(function(){
$("#tabs").mousedown(function(event){
down=event.clientX+"||"+event.clientY;
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});
Updated code which prevent slidedown on right-click copy text:
Demo Fiddle 2
var down="||";
$(document).ready(function(){
$("#tabs").mousedown(function(event){
switch(event.which){
case 1:/*Left mouse button pressed*/
down=event.clientX+"||"+event.clientY;
break;
default:/*middle or right mouse button pressed*/
down="||";
}
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});
You can use the event capturing option on click method. By using that, you can get the element on which the mouse is clicked. And then you can use the target object as below,
$('#tabs').click(function(e){
if(e.target.nodeName == 'P') {
e.stopPropagation();
return;
}
$(this).effect( "slide", "medium" );
});
Hope it will help.
I want to make a menu, and change the class when clicking.
When i click on the "li" with no class="active", i want jquery to add a class on the empty <li> and remove it from the othes "li".
<li class="active">data</li>
<li>data 2</li>
can somebody help me ? :)
I think you mean this:
$('li > a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
// When we click on the LI
$("li").click(function(){
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
$(this).addClass("active");
}
});
$('li').click(function()
{
$('li', $(this).parent()).removeClass('active');
$(this).addClass('active');
}
$(window).load(function(){
page=window.location.pathname.split("/").pop();
menuChildren = $('a[href="' + page + '"]');
$(menuChildren).parent('li').addClass('active');
});
The above code will look up the url and pop out the last element (Which is the file name). Then it finds the anchor tag with href attribute which has the same value of the url then it puts an active class for its parent li tag
This should get you close.
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});