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>
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")
});
How can you type inside a contentEditable div outside of a child contentEditable div without retaining the child's class, and without changing contenteditable to false.
FIDDLE
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span>
</div>
Should be this:
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span> spaghetti
</div>
Not this:
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball spaghetti</span>
</div>
You should be able to click in the red box and type red.
<br><br>
<div class ="container" contenteditable="true">
<span class="meatball" id="meatball" contenteditable="true">meatball</span> spaghetti
</div>
<!-- will work with contenteditable="false" but then I can't type blue-->
css
#meatball{
border: 1px dashed blue;
color:blue;
padding: 0 30px 0 30px;
font-size:20px;
}
.container{
border: 1px dashed red;
color:red;
}
I changed a little bit of your code, maybe you can try this and I hope it helps you. :)
#meatball{
border: 1px dashed blue;
color:blue;
padding: 0 30px 0 30px;
font-size:20px;
position:absolute;
top: 0;
left: 0;
}
.wrapper{
position:relative;
}
.item{
line-height:30px;
min-height:30px;
}
.container{
border: 1px dashed red;
color:red;
padding-left: 150px;
}
<div class="wrapper">
<div class ="container item" contenteditable="true"></div>
<div class="meatball w_o_r_d_s item" id="meatball" contenteditable="true">meatball</div>
</div>
Like this, by adding an invisible character to trick the browser http://jsfiddle.net/bq6jQ/4/ . I also add an extra <span> to avoid a caret visual bug
I am currently using jquery slideonlyone function. I am having problems implementing an expanding/collapsing image(Plus.png)(Minus.png) change when clicked on. this is my jquery code.
<script type="text/javascript">
function slideonlyone(thechosenone) {
$('div[name|="newboxes2"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).find("img").attr({src:"Minus.png"}).slideDown(200);
}
else {
$(this).find("img").attr({src:"Plus.png"}).slideUp(600);
}
});
}</script>
<table><tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader1" href="javascript:slideonlyone('newboxes1');" ><img src="images/faq_cuts/Plus_Circle.png";/>slide this one only</a>
</div>
<div name="newboxes2" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader2" href="javascript:slideonlyone('newboxes2');" ><img src="images/faq_cuts/Plus_Circle.png";/>slide this one only</a>
</div>
You don't actually have any images in your html.
Also, you are using attr incorrectly. If you want to set the src of an image it would be .attr("src","Minus.png").
I urgently need to write a javascript code for drag and drop using dojo. Please provide me link containing the right code for the same. I just want the simple functionality that items from 1 container can be dropped to items to another container. Nothing decorative. I have goggled it but not getting it right .
Here's an example: if you want to drag and drop li's inside an ul you can do so like this:
HTML:
<ul id="list">
<li class="dojoDndItem">content</li>
<li class="dojoDndItem">content</li>
<li class="dojoDndItem">content</li>
</ul>
JavaScript:
dojo.require("dojo.dnd.Source");
dojo.addOnLoad(function(){
new dojo.dnd.Source("list");
});
That's it. Done. Here's a jsfiddle example: http://jsfiddle.net/xFcuB/
You can add all kinds of sugar to the while thing. Many many more info here: http://dojotoolkit.org/reference-guide/dojo/dnd.html#dojo-dnd
Here's an example: if you want to drag and drop from one container to another container:
HTML
<div dojoType="dojo.dnd.Source" id="listNode" class="container1">
<div dojoType="dojo.dnd.Source" class="dojoDndItem movableContainer">A container</div>
<div class="dojoDndItem">Item 1</div>
<div class="dojoDndItem">Item 2</div>
<div class="dojoDndItem">Item 3</div>
</div>
<br>
<div dojoType="dojo.dnd.Source" class="container1">
</div>
JavaScript
dojo.require("dojo.dnd.Source");
CSS
.dojoDndItem { padding:3px; }
.movableContainer { border: 1px solid #aaa; }
.movableContainer div { margin-left: 5em; }
.container1 { border-radius: 8pt 8pt 8pt 8pt; border:1px solid #aaa; padding: 1em 3em; cursor: pointer; }
.container2 {position:inherit;border-radius: 8pt 8pt 8pt 8pt; border:1px solid #aaa; padding: 1em 3em;cursor: pointer; }
#listNode { background: #ddd; }
And your are done.That's the magic.Here's a jsfiddle example: http://jsfiddle.net/V5yBs/
And I hope this is what you want. enjoy
Take a look at http://www.sitepen.com/blog/2011/12/05/dojo-drag-n-drop-redux/