Given the following html for a type of blog post editor:
<div class="entry">
<div class="title" contenteditable="true">
<h2>Title goes here</h2>
</div>
<div class="content" contenteditable="true">
<p>content goes here</p>
</div>
</div>
I'm trying to use jquery to select the .title and .content divs to attach unique event handlers to each.
$('[contenteditable]').on(...);
works for both but
$('[contenteditable] .title').on(...);
or
$('.title').attr('contenteditable', 'true').on(...);
both don't work to select the specific contenteditable block.
You could use the attribute selector in CSS .title[contenteditable="true"].
jsFiddle example
.title[contenteditable="true"] {
background: red;
}
In jQuery: $('.title[contenteditable]').css("background","red")
jsFiddle example
For the first example you have to remove the space between the attribute selector and the class selector, as a space implies descendance.
$('[contenteditable].title').on("click", function(){
$(this).css('color', 'orange');
});
Example: http://jsfiddle.net/2Bsk4/
Related
I have a editor using HTML 5 tag contenteditable, there i'm using span inside contenteditable, when i remove all text then span also removed but i want span should not be removed, how to prevent it?
My Code:--
$('#editor').keyup(function(){
$('#spanText').text($(this).find('span').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true" id="editor"><span>This is my text</span></div>
<br><br><hr>
<div id="spanText"></div>
I think there is no straightforward way to achieve that.
You can check the text length of the element to restore the element back.
Demo:
$('#editor').keyup(function(){
if(!$(this).text().length){
$(this).html('<span> </span>');
}
$('#spanText').text($(this).find('span').text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div contenteditable="true" id="editor"><span>This is my text</span></div>
</div>
<hr>
<div id="spanText"></div>
Move the contenteditable property to the span
<div>
<span contenteditable="true" id="editor">This is my text</span>
</div>
How can I select element in this HTML using jquery selectors.
<div class = 'divOne">
</div>
<div class = 'divTwo">
<h3>Title</h3>
</div>
$('.divOne').siblings('.divTwo').children('h3')
$(".divOne") to perform jquery functions on first div
$(".divTwo") to perform jquery functions on second div
$("h3") to perform jquery functions on header element
It's pretty simple to select the h3 element.
But you have to fix your HTML first. While, when writing HTML5, in general it's possible to use single-quotes. But, you have to use them at the start and the end of the value like this: <div class='divOne' /> or <div class="divOne" />
$('.divTwo > h3').css('border', '1px solid red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divOne">
</div>
<div class="divTwo">
<h3>Title</h3>
</div>
You could use the jQuery selector and select h3 with $('h3'). But maybe you have more than one h3-tags in your code.
In that case you could give the h3 a class and select the class with the selector.
Example:
<div class = "divOne">
</div>
<div class = "divTwo">
<h3>Title</h3>
</div>
In this case use: $('h3');
OR
<div class = "divOne">
</div>
<div class = "divTwo">
<h3 class="myClass">Title</h3>
</div>
And in this case you use $('.myClass');
-----------
In the above I explained how you could select an h3-tag, but it does work with all elements ofcourse ;)
I also noticed that you use single quotes and double quotes in your HTML ('divOne")
Do not use both for a single attribute. Just "divOne" or 'divOne'.
I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.
HTML
<div class="row well">
<div class="artistAlbumInfo well col-md-6 ">
<h3><span id="artist"></span> - <span id="track"></span></h3>
<img src="" id="art" class="albumArt">
</div>
<div class="col-md-6">
<h3 id="album"></h3>
<h4>Playstate <p id="playState"></p></h4>
<h4>Position <p id="position"></p></h4>
</div>
</div>
JQuery
$(document).ready(function() {
$('.row .well').hide();
});
http://jsfiddle.net/375c8v2a/1/
Any ideas?
You don't need a space between classes if you want to hide only those with both classes
$('.row.well').hide();
To do either or add a comma
$('.row, .well').hide();
What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant combinator.
To seelct the element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
That means "an element with class row and class well".
$('.row').hide();
please remove second class
From what I've read on the comments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:
$('.well').hide();
Click here to see a example on jsFiddle
I have an anchor tag inside which I append some divs through jQuery. I want that the 'hyperlink' effect of the parent <a> tag should not appear in the appended child elements.
How can we achieve this with jQuery or in some other way.
Here is the fiddle of what I want.
UPDATE:
Most of the answers tell how to remove the click effect. Isn't there something that can prevent every default behavior of anchor tag from child elements?
FIDDLE
Ok. Here is some sample HTML
<a href="google.com" id="first">
<div>
<p>Blah</p>
</div>
<div>
<p>Blah</p>
</div>
<div>
<p>Blah</p>
</div>
</a>
<a href="google.com" id="second">
<div>
<p>Blah 2</p>
</div>
<div>
<p>Blah 2</p>
</div>
<div>
<p>Blah 2</p>
</div>
</a>
This CSS will remove the underscore, change the font color and the cursor
div{
display: inline;
}
#second{
text-decoration: none;
color: #000;
cursor: default;
}
The jquery removes the click event from the children
$('#second').children().each(function(){
$(this).click(function(e){
e.preventDefault();
});
});
Update: Further to your comments, what you are trying to do is complicated and kind of weird. You say for some reason you have to wrap the divs in an achor tag but not have them inherit the properties. You will have to make some trade-off. The trick is to remove the 'href' from the a tag. You would not have to write any jQuery/javascript for this. As a matter of fact you don't even need any CSS then. Essentially, remove all the css and jquery from the above and remove the href from the second a.
FIDDLE
You can use the :first-child Selector. Look at http://api.jquery.com/first-child-selector/
You can remove underline with CSS:
a div {
text-decoration: none
}
To stop anchor from following its href attribute you need to bind a handler to click event which returns false. In jQuery you can achieve it this way:
$('a div').on('click', function() {
// do whatever you want to do here
return false;
});
I edited selectors (added div) after you provided jsfiddle. Still, there is one more thing. According to your fiddle I assume you didn't want "Something" to be wrapped with div.
It should look like this: jsfiddle
You should add an eventlistener to your anchors and prevent the default behaviour:
document.getElementsByTagName("a")[0].addEventListener("click", function(e){
if(e.target.tagName=="DIV") e.preventDefault();
});
For instance I have this code:
$('.note .exit').click(function() {
$('.note').fadeOut();
});
And on my HTML there are two instances of .exit and .note. As in:
<div class="note">
<img src="images/exit.png" class="exit"/>
<p>Some text.</p>
</div>
<div class="note">
<img src="images/exit.png" class="exit"/>
<p>Some other text.</p>
</div>
The problem is when I click the close button (exit image) of one .note, the other .note also closes. How do I revise the code so that it only applies to that particular .note class that I am closing?
Use .closest() [docs] to get the closest ancestor that matches a selector:
$('.note .exit').click(function() {
$(this).closest('.note').fadeOut();
});
Given your structure, you could also use .parent() [docs].
Use $(this).parent().fadeOut() ... this will be the .exit on which the click happened.
Try this :
$('.note .exit').click(function() {
$(this).closest('.note').fadeOut();
});