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.
});
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 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")
});
.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
Here is my code:
$('button').on('click', function(){
$('div').html('<p>something new!</p>').fadeIn(1000);
});
div{
border: 1px solid gray;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>something<p>
</div>
<br>
<button>change div's value</button>
As you see, I've used fadeIn() to make replacing-value-operation smoothly. But still replacement happens quickly. How can I apply an effect on it?
You can add .hide() before change html:
$('button').on('click', function(){
$('.d').hide().html('<p>something new!</p>').fadeIn(1000);
});
div{
border: 1px solid gray;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d">
<p>something<p>
</div>
<br>
<button>change div's value</button>
Just hide it before fading in:
$('div').hide().html('<p>something new!</p>').fadeIn(1000);
Something like this ?
$('button').on('click', function(){
var replacingDiv = $('div.replace');
$(replacingDiv).fadeOut(500);
setTimeout(function(){
$(replacingDiv).html('changed').fadeIn(1000);
}, 500);
});
div{
border: 1px solid gray;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="replace">
<p>something<p>
</div>
<br>
<button>change div's value</button>
In this picture from the google calculators input you can see the right side parantheses not placed, but marked, I wonder how I can place a gray-transparent string in at the end of an input field in HTML?
You can achieve it by using div instead of input box.
And give the div appear like a textbox.
HTML
<div id='container'>
<div id='start'>(((((((((((</div>
<div id='end'>)))))))))))</div>
</div>
CSS
#container {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
display: inline-block;
}
#start {
display: inline-block;
color: rgba(0, 0, 0, 1);
}
#end {
display: inline-block;
color: rgba(0, 0, 0, 0.4);
}
Output fiddle.
To make the div's editable; you can use the contenteditable boolean values. Here's how the HTML will look:
<div id='container' contenteditable>
<div id='start'>(((((((((((</div>
<div id='end' contenteditable="false">)))))))))))</div>
</div>
And another fiddle.
To do this, you have to use the contenteditable attribut and a little bit of Javascript :
<div style="text-align: right; font: 20px Arial; outline: none; border: 1px solid #BBB; padding: 5px;" contenteditable="true">
</div>
<script>
document.getElementsByTagName('div')[0].onkeypress = function(e){
if (e.which == 40){
this.innerHTML = '(<span style="color: #CCC">)</span>';
}
return false;
}
</script>
I hope I could help you.
Here is working example of what you need..
html
<div class="input">
<p class="text"></p>
<p class="extra"></p>
</div>
javascript
$(function(){
$("div.input").click(function(){
$(document).keypress(function(e){
var char = String.fromCharCode(e.which);
$("div.input .text").append(char);
if(e.keyCode==40) {
$("div.input .extra").append("<span class='gray'>)</span>");
}
if(e.keyCode==41) {
$("div.input .extra").text("");
}
});
});
});
css
.input{
width:500px;
height:30px;
border:1px solid black;
}
.gray{
color:#CCCCCC;
}
p{
display:inline;}
jsfiddle demo