I am creating a messaging inbox and would like to have the selected message (div) change colour when selected. I have done this but I am not sure how to set the div back to the original colour once another message (div) is selected. This is what I have so far but each message will get the selected class.
<script>
function getmessage(str) {
$('#mb'+str).removeClass('Message-Background');
$('#mb'+str).addClass('Message-Background-Selected');
// alert('#mb'+str);
// var lastmb = $('#mb'+str);
$('#mt'+str).removeClass('Message-Title');
$('#mt'+str).addClass('Message-Title-Selected');
//var lastmr = $('#mt'+str);
$('#mprev'+str).removeClass('Message-Text');
$('#mprev'+str).addClass('Message-Text-Selected');
}
</script>
<div id="mb1" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt1" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 1
</div>
<div id="mprev1" class="Message-Text" style="float:left;">
Message 1
</div>
</div>
<div id="mb2" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt2" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 2
</div>
<div id="mprev2" class="Message-Text" style="float:left;">
Message 2
</div>
</div>
<div id="mb3" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt3" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 3
</div>
<div id="mprev3" class="Message-Text" style="float:left;">
Message 3
</div>
</div>
Just make a function:
$("div").click(function() {
$("div").removeClass('Message-Text-Selected');
$(this).addClass('Message-Text-Selected');
});
You can also use toggleClass
http://api.jquery.com/toggleClass/
JSFiddle:
http://jsfiddle.net/hwgTr/
Since you want to change multiple elements I would set the click on the ".message-background" and toggle a class there that effects all of the css within it.
Javascript:
$(".message-background").click(function() {
$(".message-background").removeClass('Message-Background-Selected');
$(this).addClass('Message-Background-Selected');
});
Now the elements within the message-background can just inherit the selected state from it.
CSS:
.Message-Background-Selected {
border:1px solid red;
}
.Message-Background-Selected .Message-Title {
color:red;
}
.Message-Background-Selected .Message-Text {
color:red;
}
Could be done like this too:
$("div").click(function() {
$(this).addClass('message-selected').siblings().removeClass('message-selected');
});
Related
<div id="container">
<span id="hp"> add class here</span>
<span id="hp"> Do not add class here</span>
</div>
$("#container").on("click", function() {
code here
});
how do I click on the container then it adds a class="hero" to the first span with id in it? there are similar questions but not targeting the id. Thank you so much!
There are multiple ways of doing it .Below have mentioned couple of options
//Using find & eq
$("#container").on("click", function() {
$(this).find('span').eq(0).addClass('myClass')
});
//Using first-child psuedo selector
$("#container").on("click", function() {
$(this).find(':first-child').addClass('myClassRed')
});
//using children & first pusedo selector
$("#container").on("click", function() {
$(this).children(":first").addClass('myClassBrown')
});
.myClass {
color: green;
}
.myClassRed {
color: red;
}
.myClassBrown {
color: brown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<span> add class here</span>
<span> Do not add class here</span>
</div>
Try this:
$("#container").on("click", function() {
$(this).find('span:first').addClass('hero');
});
But yes, as pointed out in comments, IDs of the elements in an HTML page should be unique to avoid any unwanted bugs.
$(document).ready(function() {
$('.container').click(function(event) {
$(".container").parent().find('p').removeClass("color");
$(event.target).addClass("color");
});
});
.color{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p id="hp1"> add class here</p>
<p id="hp2"> Do not add class here</P>
</div>
id have to be unique so i changed first span id from hp to hp1
<div id="container">
<span id="hp1"> add class here</span></br>
<span id="hp"> Do not add class here</span>
</div>
<script>
$("#container").on("click", function() {
$("#hp1").addClass("hero");
});
</script>
I have a problem and I need your help. I have several links (in <aside>) leading to several different menus (in <section>). On click over the link, only the relevant div in <section> is shown, the rest are hidden. This part is ok and working. What is not working is when I click over an image:
the current div (.menu) in <section> should be hidden;
the same picture (with bigger size) should be shown;
when you click once again over the big image, the big image should disappear and the current div in .menu (the one that was hidden on the first step) should appear one more time. Sort of toggling between content.
So if I click on a picture on the "second div" content, the same picture with bigger size should be show (the "second div" content should be hidden) and when I click once again over the big picture it should disappear and the "second div" content to be returned.
I tried with toggle() but had no success. Either I did not use it correctly, or it is not suitable for my case. This is where I managed to reach to.
I will really appreaciate your support - how to show only the hidden div, not all hidden div's. Right now, when you click on the big image it did not show the hidden div.
$(window).on("load", function() {
$("div.menu:first-child").show();
});
$(".nav a").on("click", function() {
$("div.menu").fadeOut(30);
var targetDiv = $(this).attr("data-rel");
setTimeout(function() {
$("#" + targetDiv).fadeIn(30);
}, 30);
});
var pictures = $(".img-1, .img-2").on("click", function() {
$("div.menu:active").addClass("hidden");
//how to reach out only the current, active div (not all div's in .menu)?
$(".menu").hide();
var par = $("section")
.prepend("<div></div>")
.append("<img id='pic' src='" + this.src + "'>");
var removePictures = $("#pic").on("click", function() {
$(this).hide();
$(".hidden").show();
});
});
.menu {
width: 100%;
display: none;
}
.menu:first-child {
display: block;
}
.row {
display: inline-block;
width: 100%;
}
.img-1,
.img-2 {
width: 120px;
height: auto;
}
<!doctype html>
<html>
<head>
</head>
<body>
<aside>
<ul class="nav">
<li>To first div
</li>
<li>To second div
</li>
<li>To third div
</li>
</ul>
</aside>
<section>
<div class="menu" id="content1">
<h3>First Div</h3>
<div class="present">
<div class="row">
<div>
<p>Blah-blah-blah. This is the first div.</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>Blah-blah-blah. This is the first div.</p>
</div>
</div>
</div>
</div>
<div class="menu" id="content2">
<h3>Second Div</h3>
<div class="present">
<div class="row">
<div>
<p>
Blah-blah-blah. This is the second div.
</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>
Blah-blah-blah. Yjis is the second div.
</p>
</div>
</div>
</div>
</div>
<div class="menu" id="content3">
<h3>Third Div</h3>
<div class="present">
<div class="row">
<div>
<p>
Blah-blah-blah. This is the third div.
</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>
Blah-blah-blah. This is the third div.
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>
Sorry for the ugly sketch and pictures - it is only to get an idea what it should look like....
In general, it's poor form to ask on Stack Overflow how to code for a specific behavior. However, that takes some understanding of the libraries you're using, and what you are trying to achieve. Hopefully, my answer will help you better articulate and form your questions in the future.
Here's a fiddle for you: https://jsfiddle.net/hwd4b0ag/
In particular, I've modified your last click listener:
var pictures = $(".img-1, .img-2").on("click", function() {
var parentDiv = $(this).closest('div.menu').hide();
var blownUpPic = $("<img>").attr({
id: 'pic',
src: this.src,
'data-parent': parentDiv.attr('id')
})
.appendTo("section")
.on('click', function() {
$('#' + $(this).attr('data-parent')).show();
$(this).remove();
});
});
Now, let's review it!
First,
var parentDiv = $(this).closest('div.menu').hide();
In a jQuery listener, the this variable stores the current javascript DOM element that is the recipient of the event listener. In your case, it refers to an element that matches ".img-1, .img-2".
.closest(selector) will traverse up the DOM (including the current element) and find the first matching element for the provided selector. In this case, it finds your container div with class menu. Then we hide that div and save a reference to it in a variable.
Next, we create a full-sized version of the picture and assign it some attributes:
var blownUpPic = $("<img>").attr({
id: 'pic',
src: this.src,
'data-parent': parentDiv.attr('id')
})
We set the data-parent attribute to the id of our container div, so we have a reference back to it later.
We then add our image to the DOM:
.appendTo("section")
And declare a new click listener for it:
.on('click', function() {
$('#' + $(this).attr('data-parent')).show();
$(this).remove();
});
With $(this).attr('data-parent') we use the reference to our container div that we assigned earlier, and then retrieve that element by its id. We unhide the container div and remove the full-sized image.
All done!
There are better ways to code this, but I think this is a good next step for you that's analogous to your current code.
I have two matching div that are siblings, they each have 2 images in them. I have one image showing in each sibling div by default and the other hidden. I then have a control to click to hide the current image and show the other.
My problem is that only the images in the first div are updating, the images in the second div are not changed.
I'm being fairly generic in my traversal, not a lot of specific classes, and I need to keep it that way.
Feels like I'm missing something really simple or maybe I'm not understanding how .eq() works in some way that limits the change to the first ".images" div?
How can I fix this to have the images in both divs change at the same time?
My html is is basically:
<div class="main">
<div class="image-group">
<h2> Title </h2>
<div class="color-selection">
<img alt="Black and Red" title="Black and Red">
<img alt="Black and Matte Black" title="Black and Matte Black">
</div>
<div class="images">
<img style="display: inline;">
<img style="display: none;">
</div>
<div class="images">
<img style="display: inline;">
<img style="display: none;">
</div>
</div><!--end image group -->
<div class="image-swap">
<i class="js-profile current">View 1</i>
<i class="js-angle">View 2</i>
</div>
</div><--/end main -->
And the jquery:
$(document).on("click" , ".js-profile" , function(){
var itemImage = $(this).parent().prev().find(".images img");
$(itemImage).eq(1).fadeOut(200);
$(itemImage).eq(0).fadeIn(200);
$(this).addClass("current");
$(this).next().removeClass("current");
return false;
})
$(document).on("click" , ".js-angle" , function(){
var itemImage = $(this).parent().prev().find("images img");
$(itemImage).eq(0).fadeOut(200);
$(itemImage).eq(1).fadeIn(200);
$(this).addClass("current");
$(this).prev().removeClass("current");
return false;
})
Firstly, you have some naming issues:
var bikeImage = $(this).parent().prev().find("images img");
$(itemImage).eq(0).fadeOut(200);
It should be
var itemImage = $(this).parent().prev().find(".images img");
$(itemImage).eq(0).fadeOut(200);
Let's asume that's due to posting it there and concentrate on the main problem.
$(this).parent().prev().find(".images img");
This returns a set of four images, always, not some 2x2 matrix, so
$(itemImage).eq(0).fadeOut(200);
$(itemImage).eq(1).fadeIn(200);
This part always targets the first set of images, as they have indexes 0 and 1, the other two images have indexes 2 and 3. So yes, eq does something else than you expect because your selection is different than what you might think.
Simple solution would be to filter then like this
$(itemImage).filter(':first-child').fadeOut(200);
$(itemImage).filter(':last-child').fadeIn(200);
This again takes a set of 4 images but doesn't limit the query to index 0 or 1 but rather to first-child, so it gets first image of both subset.
... maybe I'm not understanding how .eq() works in some way that limits the change to the first ".images" div?
You are correct. Please refer to the documentation for .eq():
Reduce the set of matched elements to the one at the specified index.
This means you are only selecting the first image element in the jQuery collection, not the first element in each div.
To resolve this you should use the :nth-child() pseudo-selector as follows:
$(itemImage).filter(':nth-child(1)').fadeOut(200);
$(itemImage).filter(':nth-child(2)').fadeIn(200);
According to the jQuery documentation for :first-child, it can also be used in place of :nth-child(1).
itemImage will be an array of count 4
by eq(0) and eq(1) you are targeting only img tag in your first div
For the second div it should be eq(2) and eq(3)
Also there is a scope issue for var itemImage This variable is not accessible in the event handler $(document).on("click" , ".js-angle" , function(){...}
The below code should work for you.
$(document).on("click" , ".js-profile" , function(){
var itemImage = $(this).parent().prev().find(".images:first img"); // this line is updated
$(itemImage).eq(1).fadeOut(200);
$(itemImage).eq(0).fadeIn(200);
$(this).addClass("current");
$(this).next().removeClass("current");
return false;
})
$(document).on("click" , ".js-angle" , function(){
var bikeImage = $(this).parent().prev().find("images:nth-child(2) img"); // this line is updated
$(bikeImage).eq(0).fadeOut(200); // itemImage changed to bikeImage
$(bikeImage).eq(1).fadeIn(200); // itemImage changed to bikeImage
$(this).addClass("current");
$(this).prev().removeClass("current");
return false;
})
Try this
$(document).on("click" , ".js-profile" , function(){
var itemImage = $(this).parent().prev().find(".images");
itemImage.each(function(){
$(this).find('img').eq(1).fadeOut(200);
});
itemImage.each(function(){
$(this).find('img').eq(0).fadeIn(200);
});
$(this).addClass("current");
$(this).next().removeClass("current");
return false;
})
$(document).on("click" , ".js-angle" , function(){
var itemImage = $(this).parent().prev().find(".images");
itemImage.each(function(){
$(this).find('img').eq(0).fadeOut(200);
});
itemImage.each(function(){
$(this).find('img').eq(1).fadeIn(200);
});
$(this).addClass("current");
$(this).prev().removeClass("current");
return false;
})
.images img:first-child{
width:100px;
height:100px;
background:#ccc;
}
.images img{
width:100px;
height:100px;
background:#f00;
}
.image-swap{
padding:5px;
}
.image-swap i{
padding:5px;
margin:5px;
border:1px solid #ccc;
cursor:pointer;
}
.image-swap i:hover{
background:#000;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="image-group">
<h2> Title </h2>
<div class="color-selection">
<img alt="Black and Red" title="Black and Red">
<img alt="Black and Matte Black" title="Black and Matte Black">
</div>
<div class="images">
<img style="display: inline;">
<img style="display: none;">
</div>
<div class="images">
<img style="display: inline;">
<img style="display: none;">
</div>
</div><!--end image group -->
<div class="image-swap">
<i class="js-profile current">View 1</i>
<i class="js-angle">View 2</i>
</div>
</div>
Hope this Helps..
Basically I am trying to make a minimize/maximize div with jquery animation. I have a wrapper div named leftFilterBox. In leftFilterBox, there is another div to wrap all the contents named filterContent. So when I minimized the window, the filterContent should be collapse and the leftFilterBox will be shifted down at the same time when filterContent is collapse with jquery animation. Same goes to maximize. Here is my html code:
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'><img class='minMaxFilterBox' src='img/minimizeFilterWindow.png' onClick='minimizeFilterWindow();' />
<img class='minMaxFilterBox' src='img/maximizeFilterWindow.png' onClick='maximizeFilterWindow();' />
<img class='closeFilterBox' onclick='closeLeftFilterBox();' alt='close' src='img/closeFilterWindow.png' /></div></div><br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span><hr width='85%'></div>
</div>
And my CSS:
#filterWindowNav {
float:right;
}
.minMaxFilterBox, .closeFilterBox {
width: 28px;
height: 28px;
cursor: pointer;
}
And my JavaScript:
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
}
Here is my jsFiddle link: Fiddle
Currently, my code is just collapsing the filterWindow by setting specific some css such as height and top. I wonder is it possible to use some jquery animation like slideUp() or slideDown() for enhcnacement because I tried it, but it does not work.
Thanks in advance.
Hmm, I couldn't get your code to work, but I organized it and added some click events to call your functions. I also added a background color to show the maximize effect is happening as it wasn't as obvious.
Updated fiddle demo
$('#minimize').click(function(){
minimizeFilterWindow();
});
$('#maximize').click(function(){
maximizeFilterWindow();
});
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
$('#leftFilterBox').css('background-color', '#000');
}
And, the updated HTML
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'>
<img id='minimize' src='img/minimizeFilterWindow.png' />
<img id='maximize' src='img/maximizeFilterWindow.png' />
<img id='close' alt='close' src='img/closeFilterWindow.png' />
</div>
</div>
<br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span>
<hr width='85%' />
</div>
</div>
How to Animate/Highlight the Div before hide, when click on desired Div?
Here is my JS DEMO:
http://jsfiddle.net/L7tK3/17/
I want to animate or highlight the Clicked or Selected Div first and then its should hide.
Here is the HTML :
<div id="response_1" class="container">
<span id="1" class="hide_content">
Click Here To Hide First Div
</span>
</div>
<br>
<div id="response_2" class="container">
<span id="2" class="hide_content">
Click Here To Hide Second Div
</span>
</div>
<br>
<div id="response_3" class="container">
<span id="3" class="hide_content">
Click Here To Hide Third Div
</span>
</div>
Here is CSS:
.container{
border:#666666 solid 1px;
padding:4px;
}
Here is JS:
$('.hide_content').click(function ()
{
var current_number = $(this).attr("id");
$('#response_'+current_number).hide();
});
jsFiddle Demo
$('.hide_content').click(function () {
$(this).closest(".container").animate({ "background-color": "yellow" }, 500, "linear").
delay().fadeOut(500)
});
Animating the background color requires the jQuery.Color plugin (or jQuery UI).
A quick google search instantly led me here:
http://api.jquery.com/hide/
.hide( duration [, easing ] [, complete ] )
Come on.