I have a little problem with this jquery code:
If I call the openMenu function, directly, it works, but inside the if it does not.
$(document).ready(function() {
function checkMenu() {
if($(this).find('ul').css('display') == 'none') {
openMenu();
} else {
closeMenu();
}
}
function openMenu() {
$(this).find('ul').css({display: "block"});
}
function closeMenu() {
$(this).find('ul').css({display: "none"});
}
$('ul li:has(ul)').click(checkMenu);
});
You could make it easy on yourself and use toggle()
$('ul li:has(ul)').click(function(){
$(this).find('ul').toggle();
});
http://api.jquery.com/toggle/
why don't you use .toggle() ? such as:
$(this).find('ul').toggle();
Also you can set the toggle speed either using slow, normal, fast:
$(this).find('ul').toggle('fast');
openMenu doesn't know what "this" is referring to. This should work...
$(document).ready(function() {
function checkMenu() {
var me = $(this);
if(me.find('ul').css('display') == 'none') {
openMenu(me);
} else {
closeMenu(me);
}
}
function openMenu(me) {
//this isn't defined..
me.find('ul').css({
display: "block"
});
}
function closeMenu(me) {
me.find('ul').css({
display: "none"
});
}
$('ul li:has(ul)').click(checkMenu);
});
But the others are right. The toggle function would work really well for something like this.
Related
Hello i want to check if a div has the class active.
the first item works, after that it stops. Can someone tell me how to fix this?
(Its a slider, so it has to work not on click.) It slides automatic.
http://i61.tinypic.com/28h2zb6.jpg
<script>
$(document).ready(function () {
if ($('#211').hasClass('item active')){
$('.vandaag').css("background-color", "blue");
console.log("werkt1!");}
else if ($('#218').hasClass('item active')){
$('.vandaag').css("background-color", "#005993");
console.log("werkt2!");}
else if ($('#219').hasClass('active')){
$('.vandaag').css("background-color", "#005993");
console.log("werkt3!");}
});
</script>
the number is the id of the image slider. and the .item .active is when the slide is active.
Greetz
Don't use else if, because it stops after the first block works.
Instead use if() { } blocks.
$(document).ready(function() {
if ($('#211').hasClass('item active')) {
$('.vandaag').css("background-color", "blue");
console.log("Works!");
}
if ($('#218').hasClass('item active')) {
$('.vandaag').css("background-color", "#005993");
console.log("works2!");
}
if ($('#219').hasClass('active')) {
$('.vandaag').css("background-color", "#005993");
console.log("works3!");
}
});
You do not need else condition if you want multiple conditions to be executed:
$(document).ready(function () {
if ($('#211').hasClass('item active')){
$('.vandaag').css("background-color", "blue");
console.log("Works!");}
if ($('#218').hasClass('item active')){
$('.vandaag').css("background-color", "#005993");
console.log("works2!");}
if ($('#219').hasClass('active')){
$('.vandaag').css("background-color", "#005993");
console.log("works3!");}
});
Ok, I have totally retooled my approach (thank you superUntitled) and am making progress... I have an unordered list that users can toggle and my only remaining issue is that when I expand some items, and then click "Show All Cities" not all of the arrows go in the same direction. All the arrows change, including the ones on the list items already expanded. Any suggestions on how to resolve this?
Here's my new Javascript:
$("#Names .airports").hide();
$("#Names .close").hide();
$('#Expand').click(function(){
$('h2').children(".close").toggle();
$('h2').children(".arrow-down").toggle();
if($(this).text() == 'Hide All Cities')
{
$(this).text('Show All Cities');
$('#Names .airports').slideUp('fast');
}
else
{
$(this).text('Hide All Cities');
$('#Names .airports').slideDown('fast');
}
});
$("#Names h2").addClass("state").click(function() {
$(this).parent().children(".airports").slideToggle('fast')
$(this).children(".close").toggle();
$(this).children(".arrow-down").toggle();
Here's the fiddle illustrating the remaining problem:
http://jsfiddle.net/d3pxx8ds/127/
Thanks in advance
Here's my old JavaScript (reference only now):
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');});
$('.stateNames ul').hide();
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
}
}
});
});
All i did was replace the order, i moved the .rotate to happen before the .toggle functions this would read the rotate first and subsequently do the toggle function thus setting the variable to 180 instead of waiting for the toggle to start, not allowing the variable to be set
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind : {
click : function() {
value += 180;
$(this).rotate(value)
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
if (value==180){
value=360;
}
else{
value=180;
}
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
I added the if statement and it works for one full go around but on the next toggle the arrow doesn't rotate hope that helps for now i will keep looking in to it
I wanna to fade and out my li elements with delay except the first-child.
Here is my jQuery
$(function(){
function fadeMyContent() {
$("#fff li:first").fadeIn(700).delay(2000).fadeOut(700,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
fadeMyContent();
});
Can anybody help me out with this?
JSFIDDLE
If I understood your question well then I think this can help you.
$(function(){
function fadeMyContent() {
$("#fff li").each(function(i, j){
if($(this).text() != "first"){
$("#fff li:first").fadeIn(700).delay(2000).fadeOut(700,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
});
}
fadeMyContent();
});
Just give it a try and let me know if this is what you wanted...
this counts the loops and allows you to change the fades on the first time through
$(function(){
var i = 0
function fadeMyContent() {
if (i == 0) {
$("#fff li:first").fadeIn(700).delay(1000).fadeOut(700,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
} else {
$("#fff li:first").fadeIn(700).delay(2000).fadeOut(700,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
i = 1
}
fadeMyContent();
});
here is the updated fiddle http://jsfiddle.net/r6oth6ak/5/
MY PROBLEM
jQuery(document).ready(function () {
if ($('input.pokazkontakt').prop(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
}
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Demo
2nd part of JS is working (toogle), but i want to check first if checkbox is checked and hide the div or show. Where is a problem?
Try this:
jQuery(document).ready(function () {
$('input.pokazkontakt').each(function(){
if ($(this).is(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
}
});
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Use your logic reversely when you set display:none and display:block.
Use .is to check for checked state.
Use .each to iterate all your checkboxes
DEMO
You can use .is()
if($('input.pokazkontakt').is(':checked'))
instead of if($('input.pokazkontakt').prop(':checked'))
Demo
I have this code for hiding\showing link depends on state of cBoxoverlay. But when i click to close this item(display:none), and then click again to show it(display:block) my link(#close-news) still not showing.
jQuery(document).click(function () {
if (jQuery("#cBoxOverlay").css("display", "none")) {
jQuery("#close-news").css("display", "none");
} else if (jQuery("#cBoxOverlay").css("display", "block")) {
jQuery("#close-news").css("display", "block");
Where did i make mistake?
try this - no need for if statements. You can just set the #close-news to whatever #cBoxOverLay is
$(document).click(function () {
$("#close-news").css("display", $("#cBoxOverlay").css('display'));
}
Use classes, does a cleaner job.
In case you don't want to use classes, try to use jQuery's toggle, which does basically exactly what you try to achieve: http://api.jquery.com/toggle/
Use is(":visible") to check if the element is visible, and then either show or hide...
jQuery(document).click(function () {
if (jQuery("#cBoxOverlay").is(":visible")) {
jQuery("#close-news").hide();
} else {
jQuery("#close-news").show();
}
});
You can try:
if ($("#cBoxOverlay").css("display") == "none") {
// ...
}
however you can use is method:
if ( $("#cBoxOverlay").is(':hidden')) {
// ...
}
$(document).click(function(){
if ($("#cBoxOverlay").is(":hidden")) { // if #cBoxOverlay is hidden
$("#close-news").hide() // hide the #close-news
} else if ($("#cBoxOverlay").is(":visible")) { // if #cBoxOverlay is visible
$("#close-news").show() // // show the #close-news
}
})
you can remove the the second condition and use else instead as when element is not hidden it is visible, of course.
Try this, based on #Raminson's answer:
$(document).click(function () {
if ($("#cBoxOverlay").is(':hidden')) {
$("#close-news").css("display", "none");
} else{
$("#close-news").css("display", "block");
May be give a try on this one, too:
$(document).click(function(){
$('#close-news').css('display', function(){return $('#cBoxOverlay').css('display');});
});