I have a code of this:
$(".user-items").each(function() {
if ($(this).hasClass("don't know the code yet")) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
but I wanted it to work like this:
$(".user-items").each(function() {
if ($(this).hasClass(".people OR .photos OR .videos")) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
I wanted to randomize the 3 classes in every .each() loop and make all matched elements fadeIn/fadeOut
Note*: The "OR" inside .hasClass is just an interpretation of how I wanted it to work
People
Photo
Videos
...
...
...
lots of more .user-items classes with 3 given classes: .people, .photos, .videos
Thank you
You could use an array of classes then random() method to get every time a random class like :
var classes = ['photos', 'videos', 'people'];
$(".user-items").each(function() {
var random_class = classes[Math.floor((Math.random() * classes.length) + 0)];
console.log(random_class);
if ($(this).hasClass(random_class)) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
People
<br>
Photo
<br>
Videos
Related
I want to relate highlighted areas and links: square1-linkone; square2-linktwo; square3-linkthree; ...
The following code works, but is cumbersome and error-prone; is there any way to simplify it for many areas and links?
jQuery
$(function() {
$('.map').maphilight();
$('#linkone').mouseover(function() {
$('#square1').mouseover();
}).mouseout(function() {
$('#square1').mouseout();
});
$("#square1").on({
mouseover:function(){
$("#linkone").css("color","red");},
mouseout:function() {
$('#linkone').css("color","green");
}
});
$('#linktwo').mouseover(function() {
$('#square2').mouseover();
}).mouseout(function() {
$('#square2').mouseout();
});
$("#square2").on({
mouseover:function(){
$("#linktwo").css("color","red");},
mouseout:function() {
$('#linktwo').css("color","green");
}
});
$('#linkthree').mouseover(function() {
$('#square3').mouseover();
}).mouseout(function() {
$('#square3').mouseout();
});
$("#square3").on({
mouseover:function(){
$("#linkthree").css("color","red");},
mouseout:function() {
$('#linkthree').css("color","green");
}
});
$('#linkfour').mouseover(function() {
$('#square4').mouseover();
}).mouseout(function() {
$('#square4').mouseout();
});
$("#square4").on({
mouseover:function(){
$("#linkfour").css("color","red");},
mouseout:function() {
$('#linkfour').css("color","green");
}
});
});
You can use jQuery to find all all elements that has an Id that contains a specified string
$("[id*='link']")
Or you could give all elements that you would like to perform the same action on a class, and then find the elements by class instead
$(".colorgreen").css("color,"green")
Read more about selectors in the documentation api.jquery.com/category/selectors
I have a simple page which toggles the visibility of departments, with a nice icon to show whether or not it is visible.
I am using font-awesomes icons "fa-eye" and "fa-eye-slash"
Problem is when using addClass jquery ignores the second "-" making
$(this).addClass("fa-eye-slash")
Add the class "fa-eye".
Its very strange and i've never encountered something like this with jquery. Please can someone assist me on how to overcome/work around this.
heres the fiddle http://jsfiddle.net/m5cdpnhk/
Thanks
You have two if conditions which run one after the other.
If the first if runs, then one of the things it does is $(elm).addClass('fa-eye-slash');.
The second if condition is if ($(elm).hasClass("fa-eye-slash")) so if the first if runs then the second will always run.
You need an else statement.
$(elm).addClass('fa-eye-slash');
} else if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");
Add an else option (the problem is the two if without the else in this case)
$(".box-body ul li i").click(function () {
var elm = $(this);
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}else{
//if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
//}
}
});
or toggle the class
.red:before{
color:red
}
.green:before{
color:green;
}
$(".box-body ul li i").click(function () {
var elm = $(this);
$(elm).toggleClass("fa-eye").toggleClass("red");
$(elm).toggleClass("fa-eye-slash").togglesClass("green");
});
i don't know why your code don't work but try this :
$(".box-body ul li i").click(function () {
var elm = $(this);
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}else{
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
}
});
http://jsfiddle.net/m5cdpnhk/2/
You have done mistake.you have to place "else if" at second if condition.
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}
else if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
}
This is a continuation from this post - :visible selector issue
Anyway, I was wondering if there is a way to detect if a particular code segment is run until it is completed before running a new line of code.
For example,
if(filterVal == 'all') {
jQuery('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
jQuery('ul#portfolio li').each(function() {
if(!jQuery(this).hasClass(filterVal)) {
jQuery(this).fadeOut('normal').addClass('hidden');
} else {
jQuery(this).fadeIn('slow').removeClass('hidden');
}
});
}
What I want to do is make sure that all the list-item elements are successfully fadeIn(display:block) and fadeOut(display:none) successfully before triggering the jPages function to create pagination.
There's a parameter in .fadeIn() that takes care of that.
$('ul#portfolio li.hidden').fadeIn('slow', function()
{
// Fade has finished, continue here.
//
//
});
Give it a callback function. Try:
jQuery(this).fadeOut('normal', function(){
$(this).addClass('hidden');
})
If you have to do it many times, use:
jQuery('ul#portfolio li').each(function() {
if(!jQuery(this).hasClass(filterVal)) {
jQuery(this).addClass('hidden');
} else {
jQuery(this).removeClass('hidden');
}
});
$('ul#portfolio li.hidden').fadeOut('normal', function(){
//Finished
});
$('ul#portfolio li:not("hidden")').fadeIn('slow', function(){
//Finished
});
So I think I found out how to do it using .promise()
My code looks something like this:
jQuery('ul#portfolio li').promise().done(function()
{
jQuery('ul#portfolio li').each(function()
{
console.log(jQuery(this).attr('class') + '-' + jQuery(this).css('display'));
});
});
I'm trying to come up with the most basic example of making a JQuery slide show where you click on the current image you're viewing and you cycle through a gallery of photos. I know its probably not the most basic example, because if I want to add a new image I have to code more JQuery. Is there a more abstract approach where I don't have to code JQuery in terms of div id's and let classes take care of the work? Here is my JQuery
$(document).ready(function() {
$("#pic1").click(function() {
$("#pic1").hide();
$("#pic2").show();
});
$("#pic2").click(function() {
$("#pic2").hide();
$("#pic3").show();
});
$("#pic3").click(function() {
$("#pic3").hide();
$("#pic1").show();
});
});
The rest is here. http://jsfiddle.net/XjdTX/3/
Following code will as simple as you want,
$("#slideframe div").click(function() {
$(this).hide();
if ($(this).next().length > 0) {
$(this).next().show();
} else {
$("#slideframe div").first().show();
}
});
http://jsfiddle.net/XjdTX/5/
I'm puzzled about getting a simple toggle to work that should be fairly simple. I want the div to fade out when the opacity is 100 and fade in when it is 0. http://jsfiddle.net/mGdcm/8/
Javascript-
$('#toggleButton').click(function() {
if ($('#toggleSection').css("opacity") === 0) {
$('#toggleSection').fadeIn("slow");
}
else {
$('#toggleSection').fadeOut("slow");
}
return false;
});
HTML-
toggle
<div id="toggleSection" style="opacity:0;"> <p>Why isn't this working?</p></div>
You can just use the jQuery fadeToggle function.
$('#toggleButton').click(function() {
$("#toggleSection").fadeToggle("slow");
});
http://jsfiddle.net/mGdcm/16/
You need to set jQuery in your fiddle, not MooTools. :)
Also for fading back in, check that the css display property is equal to "none".
Fixed version for you at http://jsfiddle.net/mGdcm/14/.
You need to use jQuery, and the correct code using visible selector:
$('#toggleButton').click(function() {
if ($('#toggleSection:visible').length < 1) {
$('#toggleSection').fadeIn("slow");
}
else {
$('#toggleSection').fadeOut("slow");
}
return false;
});
Example
Example starting with not visible
Not a very good solution but it works :)
$('#toggleButton').click(function() {
console.log($('#toggleSection').css("opacity"));
if ($('#toggleSection').css("opacity") == 0) {
$('#toggleSection').fadeIn("slow", function(){
$('#toggleSection').css("opacity", 1);
});
}
else {
$('#toggleSection').fadeOut("slow", function(){
$('#toggleSection').css("opacity", 0);
});
}
return false;
});