I try to select a div which has a specific html. Look at my example:
$("#clickMe").click(function(){
$("div:contains('heinrich')").css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
jsFiddle: https://jsfiddle.net/fj1brnv8/2/
However, the parent div's color also changes.
Is there a way to only select the element itself, I am not allowed to use ID's.
Better mention the className in the selector $("div .normal:contains('heinrich')")
$("#clickMe").click(function(){
$("div .normal:contains('heinrich')").css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
In your exable should be different selector:
$("#masterdiv > div:contains('heinrich')")
Just change the root selector.
UPDATE
Select every div and use the filter method.
Clone the div you're filtering, select all the children (nested divs), remove them then "come back" to the parent cloned div and retrieve the text.
Having the text, compare the contents with the text you're searching.
$("#clickMe").click(function(){
$("div").filter(function(idx, val) {
return /heinrich/gi.test($(this).clone().children().remove().end().text());
}).css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
This should do
$("#clickMe").click(function(){
$("#masterdiv div:contains('heinrich')").css("background-color", "limegreen")
});
Since you didn't want to use ids I can suggest you to try this.
$('div > div:contains(heinrich)').css("background-color", "limegreen")
Working Fiddle: https://jsfiddle.net/g50cfqzw/
Try this
$("#clickMe").click(function(){
var html_trg="heinrich";
$('.normal').each(function(i,u){
var divtxt=$(u).html();
divtxt=$.trim(divtxt);
if(divtxt==html_trg){
$(u).css("background-color", "limegreen");
}
});
});
try this it will work
$("#clickMe").click(function(){
$("div#masterdiv").find('div.normal:contains(heinrich)').css("background-color", "limegreen")
});
Related
I want to switch between 2 div's so that when I click on one of them its border and header became red and I want the other div goes off. so its be like a choice between them I don't know where I'm doing it wrong I add (IF) so I can make it happen but it is not working pls help me.
$(".container").on("click" , function(){
$(this).toggleClass("active");
$(".header", this).toggleClass("active2");
if ($(".box1").hasClass("active")) {
$(".box2").removeClass("active");
$("h2", ".box2").removeClass("active2");
}if ($(".box2").hasClass("active")) {
$(".box1").removeClass("active");
$("h2", ".box1").removeClass("active2");
}
});
body{
padding: 3em;
}
.box1, .box2{
padding: 2em;
border: 1px solid silver;
margin-top: 2em;
}
.active{
border-color: red;
}
.active2{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container box1">
<h2 class="header">Boys</h2>
<hr>
<p>Benjamin</p>
<p>David</p>
</div>
<div class="container box2">
<h2 class="header">Girls</h2>
<hr>
<p>Sara</p>
<p>Tania</p>
</div>
You don't need to many code to do this work. Add .active to clicked element and remove class from sibling of it.
$(".container").on("click", function() {
$(this).toggleClass("active").siblings().removeClass("active");
});
body{padding: 3em}
.box1, .box2{
padding: 2em;
border: 1px solid silver;
margin-top: 2em;
}
.active {border-color: red}
.active .header{color: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container box1">
<h2 class="header">Boys</h2>
<hr>
<p>Benjamin</p>
<p>David</p>
</div>
<div class="container box2">
<h2 class="header">Girls</h2>
<hr>
<p>Sara</p>
<p>Tania</p>
</div>
I have the following to add a class with js:
$('.image-container img:first').addClass('active');
$('.image-container img:last').addClass('left');
.active { border: 1px solid red; }
.left { border: 1px solid blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='image-container'>
<img src="/img.png" alt="xga-1">
<br>
<img src="/img2.png" alt="xga-1">
</div>
When I add the class active or left dynamically, it also add the class to the <br> tags in between the images. How I prevent the code to do that and only add the class to the images inside image-container?
Hey you can use the "not" function in JQuery to accomplish this
http://api.jquery.com/not/
$('.image-container img:first').not("br").addClass('active');
$('.image-container img:last').not("br").addClass('left');
Although that is odd that that is happening at all but this should at least rule out whether or not this bit of code is the cause.
$('.image-container img').first().addClass('active');
$('.image-container img').last().addClass('left');
.active { border: 1px solid red; }
.left { border: 1px solid blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='image-container'>
<img src="/img.png" alt="xga-1">
<br>
<img src="/img2.png" alt="xga-1">
</div>
.buttons,
.weChangeColor {
width: 50%;
height: 100%;
float: left;
}
.weChangeColor p {
background: red;
border: 1px solid;
}
.toggleColor {
background: green;
}
<div class="buttons">
<p>FirstLink</p>
<p>SecondLink</p>
<p>ThirdLink</p>
</div>
<div class="weChangeColor">
<p>FirstPara</p>
<p>SecondPara</p>
<p>ThirdPara</p>
</div>
In the code above, What I want is that, when first link is clicked, first p should change background to green .
When second link is clicked, second p should change background to green, and so on.
Basically linking same elements of different classes having same index.
I NEED THE JAVASCRIPT CODE REQUIRED TO ACHIEVE THIS.
How can I achieve this result ?
Jquery is more than welcome.
You can use the jQuery index() and eq() functions.
Here is an example:
$(".buttons p").click(function(){
$(".weChangeColor p").eq($(this).index()).toggleClass("toggleColor");
$(this).toggleClass("toggleColor");
});
.buttons,
.weChangeColor {
width: 50%;
height: 100%;
float: left;
}
.weChangeColor p {
background: red;
border: 1px solid;
}
p.toggleColor {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<p>FirstLink</p>
<p>SecondLink</p>
<p>ThirdLink</p>
</div>
<div class="weChangeColor">
<p>FirstPara</p>
<p>SecondPara</p>
<p>ThirdPara</p>
</div>
Please check the code might solve your issue
Thanks
jQuery('.buttons p').click(function(){
var ClickedElemenet = jQuery(this).index();
var GetElement = jQuery('.weChangeColor p').get(ClickedElemenet);
jQuery(GetElement).toggleClass('toggleColor');
});
.buttons,
.weChangeColor {
width: 50%;
height: 100%;
float: left;
}
.weChangeColor p {
background: red;
border: 1px solid;
}
.toggleColor {
background: green !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<p>FirstLink</p>
<p>SecondLink</p>
<p>ThirdLink</p>
</div>
<div class="weChangeColor">
<p>FirstPara</p>
<p>SecondPara</p>
<p>ThirdPara</p>
</div>
For pure CSS solution you can use pseudo class :target and target p by giving id to each p
Like this:
.buttons,
.weChangeColor {
width: 50%;
height: 100%;
float: left;
}
:target {
background: green;
}
<div class="buttons">
<p>FirstLink</p>
<p>SecondLink</p>
<p>ThirdLink</p>
</div>
<div class="weChangeColor">
<p id="p1">FirstPara</p>
<p id="p2">SecondPara</p>
<p id="p3">ThirdPara</p>
</div>
Try to make it in js with jQuery like this :
jQuery('.buttons p').click(function(){
jQuery('.weChangeColor p').eq($(this).index()).toggleClass('toggleColor');
});
.buttons,
.weChangeColor {
width: 50%;
height: 100%;
float: left;
}
.weChangeColor p {
background: red;
border: 1px solid;
}
.weChangeColor p.toggleColor {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<p>FirstLink</p>
<p>SecondLink</p>
<p>ThirdLink</p>
</div>
<div class="weChangeColor">
<p>FirstPara</p>
<p>SecondPara</p>
<p>ThirdPara</p>
</div>
Or make it with class or id or data
I have two divs side by side within a parent div - the left div will contain text, while the right div will contain an image, and on button click, the right div can expand, or reduce back to its original width.
<style>
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
float: left;
}
.left{
width: 60%;
float: left;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
float: right;
}
</style>
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>
javascript to expand/reduce the div:
$("#button1").click(function(){
var inputValue=$("#button1").attr('value');
if(inputValue=="Expand")
{
$(".right").animate({width:"60%"});
$("#button1").attr('value','Reduce');
}
else if(inputValue=="Reduce")
{
$(".right").animate({width:"38%"});
$("#button1").attr('value','Expand');
}
});
Right now, when I increase the width of the right div, it slides underneath the left div. But what I want is for the left div to reduce in size accordingly, and take on the remaining width available within the parent, with left and right div remaining side by side.
JSFiddle
My css is weak, and I'm guessing this is something I can do in css, without having to use javascript to resize the left div too. Suggestions appreciated as always.
Your left div just wasn't being updated with the correct size so your container was more than 100%. I've fixed it here:
$("#button1").click(function(){
var inputValue=$("#button1").attr('value');
if(inputValue=="Expand")
{
$(".right").animate({width:"60%"});
$(".left").animate({width:"38%"});
$("#button1").attr('value','Reduce');
}
else if(inputValue=="Reduce")
{
$(".right").animate({width:"38%"});
$(".left").animate({width:"60%"});
$("#button1").attr('value','Expand');
}
});
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
float: left;
}
.left{
width: 60%;
float: left;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>
not really good myself, but maybe something like http://jsfiddle.net/fd9pos8m/ ? not smooth though
<div style="padding:2px; width:500px; background: #FFFFFF ">
<div class="left" style="float:left; width:50%; background: #ff0000 ">Left Content</div>
<div class="right" style="margin-left:52%; width:38%; background: #000000 ">Right</div>
<div style="clear:both"></div>
<input type="button" id="button1" value="expand">
</div>
<script>
$('#button1').click(function(){
var val = $(this).val();
if(val == 'expand') {
$('.right').animate({width:'60%'});
$(this).val('reduce');
} else {
$('.right').animate({width:'38%'});
$(this).val('expand');
}
});
</script>
Here try this does this work? http://jsfiddle.net/CFNUJ/917/ the #right-bg { is staying to the #left-bg
the first is using just css
How about using css flexbox? You don't have to worry about that .left or .right jumps down when there's no enough space for them, it just handles that situation for you.
Do remember to check the browser support for flexbox though.
I only tweaked the css:
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
display: flex;
}
.left{
width: 60%;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
}
jsfiddle
http://jsfiddle.net/sen3t6vk/74/
i have three different divs red, blue, green and yellow. red contains an input box. am trying to hide yellow if the input box in red is clicked(focus)
HTML
<div class="red">
<form>
<input class="s" placeholder="Search">
</form>
</div>
<div class="blue"> blue </div>
<div class="green"> green </div>
<div class="yellow"> yellow </div>
CSS
.red, .blue, .green, .yellow
{
padding: 10px;
border: 1px solid #f00;
}
.red{
background: red;
}
.blue{
background: blue;
}
.green{
background: green;
}
.yellow{
background: yellow;
}
.s:focus{
border: 1px solid black;
}
.s:focus + yellow{
display: none;
}
Fiddle Here
It is fairly easy to do it with jquery;
(function() {
$('.red input').on({
click: function() { // maybe you'd prefer on focus?
$('.yellow').fadeOut();
}
})
})();
Try this
$(function(){
$(".s").on("focus",function()
{
$(".yellow").hide();
});
$(".s").on("blur",function()
{
$(".yellow").show();
});
});
.red, .blue, .green, .yellow
{
padding: 10px;
border: 1px solid #f00;
}
.red{
background: red;
}
.blue{
background: blue;
}
.green{
background: green;
}
.yellow{
background: yellow;
}
.s:focus{
border: 1px solid black;
}
.s:focus + yellow{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
<form>
<input class="s" placeholder="Search">
</form>
</div>
<div class="blue"> top </div>
<div class="green"> middle </div>
<div class="yellow"> bottom </div>
The other answers will work. Here's a fiddle form if you prefer that.
$(document).ready(function() {
$(".red input").focus(function() {
$(".yellow").hide();
});
});
http://jsfiddle.net/8acwjf3o/1/
You have to use jQuery .focus() function for this
$( "#search" ).focus(function() {
$( ".yellow" ).hide();
});
See this fiddle
The + selector in CSS only works with adjacent elements. In this case, you'd want to use javascript. JQuery makes it particularly easy:
$('.s').focus(function() {
$('.yellow').hide();
}). blur(function() {
$('.yellow').show();
});
Here's the revised JSFiddle: http://jsfiddle.net/w10cw8tc/
$(function(){
$('.s').focus(function() {
$('.yellow').hide();
}). blur(function() {
$('.yellow').show();
});
});
.red, .blue, .green, .yellow {
padding: 10px;
border: 1px solid #f00;
}
.red{
background: red;
}
.blue{
background: blue;
}
.green{
background: green;
}
.yellow{
background: yellow;
}
.s:focus{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
<form>
<input class="s" placeholder="Search" />
</form>
</div>
<div class="blue"> top </div>
<div class="green"> middle </div>
<div class="yellow"> bottom </div>
Using jQuery:
$('#search').on('focus', function () {
$('#yellow').hide('fast');
});
.colored {
padding: 10px;
border: 1px solid #f00;
}
#red {
background: red;
}
#blue {
background: blue;
}
#green {
background: green;
}
#yellow {
background: yellow;
}
.s:focus {
border: 1px solid black;
}
.s:focus + yellow {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colored" id="red">
<form>
<input id="search" placeholder="Search" />
</form>
</div>
<div class="colored" id="blue">blue</div>
<div class="colored" id="green">green</div>
<div class="colored" id="yellow">yellow</div>
In your CSS
.s:focus + yellow{
display: none;
}
There are a couple of things which are wrong with this style, first would be a typo where you are missing '.' before 'yellow' class name for selection. Second; as there is no '.yellow' element adjacent to 'input.s' element, this style will never be applied. Reverse child to parent selector are not defined in CSS (yet!).
var input = document.querySelectorAll(".s")[0];
input.addEventListener("focus", function () {
var yellow = document.querySelectorAll(".yellow")[0];
yellow.style.display = "none";
});
or jQuery way :
$(".s").focus(function () {
$(".yellow").hide();//You can use .hide() or .fadeOut() or .slideUp() or .slideDown() methods.
});