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
Related
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
I have container, contain numbers of box images. when i mouseover the image hide box will appear on the image. but when i use this script all the box get open...
$(".conbx img").mouseover(function() {
$(".topics-active").show()
});
$(".conbx img").mouseout(function() {
$(".topics-active").hide()
});
jsfiddle.net/xqfv3fhq
You've to get the current elements siblings.
$(".conbx img").mouseover(function() {
$(this).siblings(".topics-active").show()
});
Demo: https://jsfiddle.net/tusharj/xqfv3fhq/1/
Optimizations
$(".conbx").on('mouseover', 'img', function() {
$(this).siblings(".topics-active").show()
}).on('mouseout', 'img', function() {
$(".topics-active").hide()
});
Alternatively, you can also use hover:
$(".conbx img").hover(function() {
$(this).siblings(".topics-active").show()
}, function() {
$(".topics-active").hide()
});
Use this
$(".conbx img").mouseover(function() {
$(this).next('.topics-active').show()
});
$(".conbx img").mouseout(function() {
$(this).next('.topics-active').hide()
});
use this
$(".conbx img").mouseover(function(){
$(this).closest('.fltlft').find(".topics-active").show();
});
$(".conbx img").mouseout(function(){
$(this).closest('.fltlft').find(".topics-active").hide();
});
DEMO HERE
or you can just use just css without need to jquery at all
.fltlft:hover .topics-active{
display: block;
}
DEMO HERE
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';
Below is a link to the code.
I need to be able to hover back and forth from "red" and "blk" with the functions changing the colour back and forth also. I believe it needs to be reset somehow?
http://jsfiddle.net/kAMG7/
$('#red').on('mouseover', function() {
$('#blue1').addClass("green");
});
$('#blk').on('mouseover', function() {
$('#blue1').addClass("black");
});
Thank you.
try
$('#red').on('mouseover', function() {
$('#blue1').addClass("green");
$('#blue1').removeClass("black");
});
$('#blk').on('mouseover', function() {
$('#blue1').addClass("black");
$('#blue1').removeClass("green");
});
$(document).ready(function()
{
$('#red').mouseover(function() {
$('#blue1').addClass("green");
});
});
$(document).ready(function()
{
$('#red').mouseout(function() {
$('#blue1').removeClass("green");
});
});
$("#red").hover(
function() {
$("#blue1").addClass("green");
},
function() {
$('#blue1').removeClass("green");
}
);
$("#blk").hover(
function() {
$("#blue1").addClass("black");
},
function() {
$('#blue1').removeClass("black");
}
);