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>
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 am trying to create a draggable element which will have a tail on its left side. When I will be dragging it on the right side the associated tail should dynamically expand making sure it is attached to the dragged element.
Here is the sample which I was trying:
$(function() {
$("#draggable").draggable({
axis: 'x',
containment: $('this').closest('#container'),
cursor: '-moz-grabbing'
});
});
#container{
height: 100px;
border: 1px solid black;
}
#draggable {
height: 100%;
width: 80px;
border:0.2px solid black;
}
#draggableTail {
height:0.1px;
width:100px;
margin-top:40px;
border:2px solid black;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id='container'>
<div id='draggableTail'>
</div>
<div id="draggable">
<div id="someContent">
<p>
HAVE A GOOD DAY
</p>
</div>
</div>
</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>
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")
});
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.
});