On click change p to texarea field - javascript

I have a paragraph and I want to change it to textarea on click. Not with some extra button but with direct click on paragraph itself and after editing with a click outside of currently textarea back to paragraph using javascript or jquery. Any suggestions? Thanks!

Here is my input.
I have used contenteditable attribute to toggle the editing of the div.
$(document).on('click', function(e) {
$('.textarea').attr('contentEditable', false);
});
$('.textarea').on('click', function(e) {
$(this).attr('contentEditable', true);
e.stopPropagation();
});
.textarea {
border: 1px solid;
}
[contenteditable="true"] {
border: 2px solid red;
}
span {
background: grey;
padding: 1.25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textarea" contenteditable="false">
Hello World. This is a super awesome paragraph that you can edit using <span>contenteditable</span> attribute on click.
</div>

Try the below code to solve your problem:
$('#myDiv').click(function(e){
$('p').contents().unwrap().wrap('<textarea/>');
e.stopPropagation()
});
$('#myBdy').click(function(){
$('textarea').contents().unwrap().wrap('<p/>');
});
#myDiv {
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="myBdy">
<div id="myDiv">
<p id="myP">Hi</p>
</div>
</body>

Related

how to show border of clicked div only?

I need a help in this jquery or javascript problem. I have many divs with some particular ids and onclick that div the border should get changed and onclick another div with different id the border of that div again get changed like previous div but border of previous div get removed.
<style>
.mydiv {
width:100px;
height:100px;
background-color:yellow;
float:left;
margin:10px;
}
.active{
border: 10px solid black;
}
</style>
<div class="mydiv">A</div>
<div class="mydiv">B</div>
<div class="mydiv">C</div>
<script>
$(".mydiv").click(function(){
$(".mydiv").removeClass('active');
$(this).addClass('active');
});
</script>
Look at the snippet below to see my attempt. What it does is once you click on a div with the class clickable the code removes the border class from the previous div, adds the border class to the newly clicked div and updates the prevDiv.
I prefer this method because where other people use $('div').css('border', 'none'); to remove all the borders from every div, this code only removes the border from the previously clicked div. Thus allowing you to have (non clickable) divs with a predefined border/border class.
let prevDiv;
$(".clickable").click(function(){
$(prevDiv).removeClass('border');
$(this).addClass('border');
prevDiv = $(this);
});
.clickable {
width:100px;
height:100px;
margin: 10px;
display: inline-block;
margin-right: 25px;
}
.border {
border: 5px solid black;
}
#firstID {
background-color: red;
}
#secondID {
background-color: orange;
}
#thirdID {
background-color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickable" id="firstID">Placeholder text</div>
<div class="clickable" id="secondID">Placeholder text</div>
<div class="clickable" id="thirdID">Placeholder text</div>
$(".mydiv").click(function(){
$(this).css('border','10px solid black');
});
.mydiv
{
width:100px;
height:100px;
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
</head>
<body>
<div class="mydiv">ABCD</div>
</body>
</html>
you can write in java script -
let yourDivIds =["your_div1","your_div2"]; // specify all your div ids
function removeGlowingDivs() { // this will remove class from other div's
yourDivIds.forEach(item=>{
document.getElementById(divID).removeClass('your_class_name');
})
}
// add this on click event on all div's
function highlightDiv(divID) { // this will add class
removeGlowingDivs();
document.getElementById(divID).addClass('your_class_name');
}
$('div').click(function(){
$('div').css('border', 'none');
$(this).css('border', '1px solid black');
});
NOTE: Replace the $(div) with the relevant parent element's ID or class.
Try this:
// The class div class is the div tag if you want and Id replace
// Replace the . with a #
$(".the_div_class").click(()=>{
$(".the_div_class").addClass("the_border_class");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How can I prevent my focusout function from firing if focus moves to one particular element?

Trying to figure out how to keep the DIV from fading when you click on it. I just want the DIV to fade after you click off anywhere else on the screen, everywhere but the actual "testdiv" and the input field. Skills aren't that strong with javascript, so any help would be appreciated. Thanks.
$(document).ready(function(){
$('.showdiv').focus(function(){
$('.testdiv').fadeIn(1000);
}).focusout(function(){
$('.testdiv').fadeOut(1000);
});
});
body {
padding: 50px
}
.showdiv {
width: 100%;
height: 30px;
padding:10px}
.testdiv{
display:none;
margin-top:0;
width:auto;
background-color: #efefef;
padding: 20px;
font: 12px Arial, san serif;}
*:focus{
outline:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" class="showdiv" Placeholder="Search by Keyword"/>
<div class="testdiv">
<input type="checkbox"> Search only open source materials
</div>
Here is a JSFiddle example.
I'm not in love with this because it could be confusing to the user, but it works. It doesn't work if you tab to the checkbox.
$('.showdiv').focus(function() {
$('.testdiv').fadeIn(1000);
}).focusout(function() {
$('.testdiv').fadeOut(1000);
});
$('.testdiv input').change(function() {
$('.testdiv').stop(); // end animation on the faded element
$('.showdiv').focus(); // return focus to reinstate the focusout handler
});
Demo

contentEditable set caret inside a particular element

I am unable to set caret into the first <p> in the contentEditable <div>.
I have seen this solution but its for before or after the element. How do I get it into an element?
Here is what I have so far:
$('#content').on('click', function(){
if($('#placeholder').length > 0)
$('#placeholder').removeAttr('id').text('').focus();
});
#content{
border: 1px solid black;
min-height: 100px;
padding: 20px;
}
#placeholder{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content' contentEditable=true>
<p id='placeholder'>placeholder</p>
</div>
It clears the placeholder and doesnt set the caret at all.
How do I fix this?
The problem you have is that you p element has no content and so has 0px height. Watching the console you can see that contenteditable often add a <br> when clicking on it, you can do the same here and you'll have your caret.
$('#content').on('click', function(){
if($('#placeholder').length > 0)
$('#placeholder').removeAttr('id').html('<br>').focus();
});
#content{
border: 1px solid black;
min-height: 100px;
padding: 20px;
}
#placeholder{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content' contentEditable=true>
<p id='placeholder'>placeholder</p>
</div>
Before you read any further please address to Range (MDN) and getSelection (MDN).
This is a working fiddle.
Code inside the fiddle is very self-explainatory, but what I found interesting was: let's say we have
<p id='paragraph'>I want to focus on this text</p>
then we do (as expected):
var p = $('#paragraph');
range.selectNode(p[0]);
This is actually going to put caret (roughly speaking) before <p>, but we need to get inside <p>.
Surprisingly...
var p = $('#paragraph');
var textInsideP = p.childNodes[0]; // the text inside p counts as a ChildNode
range.selectNode(textInsideP);
Boom.

I change background color of button with jquery click function

I change background color of a button using the jQuery click function, but I want to do this without jQuery. How can I use it only with CSS? Here are my codes and jsfiddle demo below.
.colorButton{
background: blue;
color: white;
cursor: pointer;
}
<div class="buttons">
<button class="colorButton">Click me</button>
</div>
<script>
$(document).ready(function () {
$('.colorButton').click(function (){
$(this).css("background","yellow");
});
});
</script>
http://jsfiddle.net/myyhs84b/
.colorButton{
background:blue;
color:white;
cursor:pointer;
}
.colorButton:focus{
background:yellow;
}
<button class="colorButton">Click me</button>
[EDIT] okay, now pure CSS
You can do this with CSS:
.colorButton:active,
.colorButton:focus{
background:yellow;
}
But on outside click it remain the same. Because you have to add a new class or have to implement the existing code that apply the inline style to your DOM element.
The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.
CSS
.colorButton{
background:blue;
color:white;
cursor:pointer;
}
.colorButton:focus{
background: yellow;
}
HTML
<div class="buttons">
<button class="colorButton">Click me</button>
</div>
Fiddle here
FYI
focus
Using checkbox/radio CSS hack, this could be a solution: {please don't, handling click should be done in javascript anyway}
HTML:
<div class="buttons">
<input id="rd_btn" type="radio" />
<button class="colorButton">
<label for="rd_btn">Click me</label>
</button>
</div>
CSS:
.colorButton {
background:blue;
color:white;
cursor:pointer;
}
.colorButton {
padding: 0;
}
.colorButton label {
display: block;
padding: 2px;
}
#rd_btn {
display: none;
}
#rd_btn:checked + button {
background: yellow;
}
-jsFiddle-
Since there is no click event in HTML and CSS, you can use functionality of pseudo class :checked to change something.
Just style the label as some button, than bind some click functionality in jquery.
Take a look at this exaples:
http://www.paulund.co.uk/create-flat-checkboxes
Or :active pseudo class. Example here:
http://www.paulund.co.uk/create-a-css-3d-push-button
I don't think you can do this only with CSS as there isn't anything like a "clicked" property.
Maybe :active or :hover will fit your needs.
.colorButton1:active
{
background: green;
}
.colorButton2:hover
{
background: blue;
}
http://jsfiddle.net/qbjsnp42/
The closest thing you could do is using :active or :focus but the first will only should work while you are pressing the button while the second will only work unless you don't press anywhere else
what you can do is defining a class in your CSS and then via JS add the class on click

How do I change the text of a div when I hover over a button?

What I have:
8 numbered boxes in a row.
I'm not allowed to use jQuery.
What I want to do:
When the user hovers a numbered box, text changes dynamically inside a div element depending on which box is being hovered on.
Example:
If user hovers over Box 1, the text inside the div element says "Hello"
If user hovers over Box 2, the text inside the div element (same as before) says "World"
Edit: the closest I have is text changing if the user clicks on a button: http://jsfiddle.net/pVN2a/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BluePad</title>
<style type="text/css">
#button1 {
background-color:red;
display:inline-block;
}
#button2 {
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="button1">
Click 1
</div>
<div id="button2">
Click 2
</div>
<div id="textResults">
Click on a button to change text
</div>
<script>
// when #button1 is clicked...
document.getElementById("button1").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Hello World";
});
// when #button2 is clicked...
document.getElementById("button2").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Just Clicked #button2";
});
</script>
</body>
</html>
Am I supposed to use .onMouseEvent in conjunction with some sort of event listener? Sorry, I'm totally new to this. :(
Edited to fit OP's request to change content of a singular box based on hover of other boxes. Using the general sibling combinator, we can select a div with the class results when a box is hovered.
JSFiddle Demo
HTML
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="results"></div>
</div>
CSS
.box1, .box2 { display: inline-block; width: 100px; height: 100px; background: #ccc; }
.results {
width: 250px;
height: 100px;
background: #ccc;
margin-top: 4px;
}
.box1:hover ~ div.results:before {
cursor: pointer;
content: "Hello";
}
.box2:hover ~ div.results:before {
cursor: pointer;
content: "World";
}
Using the General Sibling Combinator.
How about using onmouseover, that's not jQuery.

Categories