contenteditable change background color after edit - javascript

I am trying to build a spreadsheet-like application and using a table <td> with a tag contenteditable = "true" and I want the background color of the cell to be changed after it was changed.
From my research I figured I would need javascript or jquery to do so, however I know very little of it. Where do I start? So far I have figured how to change color when the cell is being edited. thank you!
<td contenteditable="true" >
<style>
[contenteditable="true"]:focus {
background-color: yellow;
}
</style>
"Stuff"
</td>

So I see you figured out how to change color when the cell is being edited. Now to change the cell after its done being edited you can use the following example.
jQuery has a function called focusout which triggers when the element loses focus from the user. It will then add the class orange which will change the background to orange.
$( document ).ready(function() {
$("td").focusout(function(){
$(this).addClass("orange");
});
});
td[contenteditable="true"]:focus {
background-color: yellow;
}
.orange{
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td contenteditable="true" >"Stuff"</td>
</table>
Here is a fiddle to play with: https://jsfiddle.net/8zbrxwpz/

Use td[contenteditable="true"] selector, and add the table parent as well.
td[contenteditable="true"]:focus {
background-color: yellow;
}
<table>
<td contenteditable="true" >"Stuff"</td>
</table>
https://jsfiddle.net/kasyzytr/

Related

stuck with onclick tried google couldn't find answer

i need help getting this to work, tried everything google had to offer.. but still stuck. what i need it to do is load the value of (div id="availablecredits") to (div id="beta") on click. can any body help me out?
onclick="javascript:document.getElementById('beta').value=(javascript:document.getElementById('availablecredits').value)"
i also tried onclick="javascript:document.getElementById('beta').value=('#availablecredits')"
The property value is common for input elements like <input>, <select>, <textarea> and <button>
I think what you want is to copy a content of a <div> element to another div. If it's the case, use innerHTML instead of value.
Here is a snippet, just click on the gray area.
#div-two {
min-height: 20px;
background: #CCC;
}
<div id="div-one">
Hello this is #div-one
</div>
<div id="div-two" onclick="document.getElementById('div-two').innerHTML=document.getElementById('div-one').innerHTML"></div>
SNIPPET #2
You've defined a third <div> which you use as trigger but you can't click it if it's not visible, because it's height is 0. Specify some text inside it, then it's visible and the JS part work. Take a look at the snippet.
#getCredits {
background: #CCC;
}
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits" onclick="document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML">Click here to get available credits</div>
SNIPPET #3 - jQuery
$('#getCredits').click(function() {
$("#beta").html($('#availablecredits').html());
});;
#getCredits {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
Simple javascript function, change the ids in the function call to those of the elements in question.
<script>
function set_value( src,tgt ){
document.getElementById( tgt ).innerHTML=document.getElementById( src ).innerHTML;
}
</script>
<style>.p5{ display:block; padding:1rem; margin:1rem; border:1px solid black;}</style>
<div class='p5' id='src_div' onclick="set_value('src_div','tgt_div')">Weebles wobble but they don't fall down!</div>
<div class='p5' id='tgt_div'></div>
Or you can use a link to set the value
you should try to avoid writing inline event.try this:
<style>
#getCredits {
background: #CCC;
}
</style>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
<script>
document.getElementById('getCredits').addEventListener("click",function(){
document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML;
});
</script>
Why inline css and javascript are bad:http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
The .val() method is sometimes useful:
var input = $("#Input").val();

Change Cursor to Pointer and Make the text bold in <td> element

I have some question regarding html. I am using AJAX to process a element. But the problem is how do i make the text inside the td bold and change the cursor to pointer when hovering over the element. I tried onmouseover but it doesnt work.
my td element is this
<td id='buildingName$i' onclick='tdClick($i)'>".$row['PROJECTNAME']."</td>
thanks guys for your help
Why not just use CSS? You could easily do something like this:
td:hover {
font-weight: bold;
cursor: pointer;
}
Doing it using css is the best solution. Here is the jquery option if you need it.
$("#test").hover(function(event) {
$("#test").addClass("highlighted");
}, function(event) {
$("#test").removeClass("highlighted");
});
.highlighted {
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="test">HTML</td>
<td>Javascript</td>
</tr>
</table>
use CSS as described in other answer
remove the onclick from the TD and instead use unobtrusive delegation - for example in jQuery:
:
$(function() {
$("#tableContainer").on("click",".clickableTD",function(){
var idx = parseInt(this.id.replace("buildingName",""),10);
// here you do whatever you did in tdClick
});
});
assuming
<div id="tableContainer"></div>
and
<td id='buildingName$i' class='clickableTD'>".$row['PROJECTNAME']."</td>

Replace HTML content and revert on hover

I have a HTML table filled with short sentences in two colors.
I want to cover the text with bars of corresponding colors and, when each block is hovered, the content has to revert to its original HTML state.
I would like to do the following either with JS or CSS:
leave the default HTML table as-is
switch the original content via javascript to a sequence of ASCII 219 / &block / █
make it switch to "original" content when each block (e.g. "last week tonight with J.Oliver) is hovered.
Any help with this method, or a more efficient method, is appreciated. Thanks!
EDIT / a similar code might do it for me, the only thing i miss is the "original content" word:
div:hover span {display:**ORIGINAL CONTENT**}
div:hover:before {content:"&block;&block;&block;&block;&block;"}
You can get a similar effect with just CSS - set the same color and background on the cells, then switch to something readable on hover:
.red {
color: red;
background-color: red;
}
.blue {
color: blue;
background-color: blue;
}
.revealer:hover td {
color: black;
background-color: white;
}
<div class="revealer">
<table>
<tr>
<td class="red">One</td>
<td class="blue">Two</td>
</tr>
<tr>
<td class="red">Three</td>
<td class="blue">Four</td>
</tr>
</table>
</div>
If you include jQuery, this will do what you originally requested:
$(function(){
$('td').each(function(idx){
$(this).data().originaltext = $(this).text();
$(this).html(fill_with_blocks($(this).data().originaltext));
})
$('td').hover(function(){
$(this).html($(this).data().originaltext);
},
function(){
$(this).html(fill_with_blocks($(this).data().originaltext));
});
});
function fill_with_blocks(str) {
var blocks = '';
for(var i = 0;i<str.length;i++){
blocks += '█';
}
return blocks;
}

How to change the default highlight color of drop down in html from blue to some other color for <select><option> tag

How to change the default highlight color of drop down in HTML from blue to some other color for <select><option> tags, using some CSS properties or from Javascript?
The requirement is I have to use the <select> <option> tags only. I tried the code below, but it didn't work for me:
<html>
<head>
<title>Dropdown Colour</title>
<style type="text/css">
option:hover {
background:#C6C4BD;
}
</style>
</head>
<body>
<select>
<option>Shell</option>
<option>Cabbage</option>
<option>Beans</option>
<option>Cheese</option>
<option>Clock</option>
<option>Monkey</option>
</select>
</body>
</html>
try setting outline and/or border properties of select.
select{outline:1px solid green;border:1px solid black;}
Currently there is no way I know of that this can be accomplished using only CSS.
However, using jQuery I was able to achieve a similar effect.
Live Demo
Your dropdown changes because i have to set the size of the select element which makes it look like a list-box. Maybe somebody can improvise on this.
Here is the jQuery i used
$(document).ready(function (event) {
$('select').on('mouseenter', 'option', function (e) {
this.style.background = "limegreen";
});
$('select').on('mouseleave', 'option', function (e) {
this.style.background = "none";
});
});
Try to change like this, hope it may help you
select option{
background: red;
color: #fff;
outline:1px solid green;
}

jQuery addClass stopped working

For some reason jQuery.addClass has stoped working. I have no idea why.
Other stuff works though.
// Change row background color on click
jQuery('#rowList tr').live("click", function() {
alert(jQuery(this).attr('title')); // Just here for testing. This works
alert(jQuery(this).css('border','solid 1px red')); // Just here for testing. This works
jQuery(this).closest("tr").siblings().removeClass("selected");
jQuery(this).addClass("selected"); // NOT working
});
Any reason why this is not working? Here is my HTML:
<table id="rowList">
<tbody>
<tr title="My title 1" class="imageItem odd"> <td>some stuff</td></tr>
<tr title="My title 2" class="imageItem even"><td> some stuff here</td></tr>
</tbody>
</table>
You have a missing ) on the second alert:
alert(jQuery(this).css('border','solid 1px red'));
^
Once you fix that it works, you can test it here. As an aside, since you're on a <tr>, there's no need for the .closest("tr") call, you can remove it from the chain, something like this overall:
CSS:
.bordered { border: solid 1px red; }
Script:
jQuery('#rowList tr').live("click", function() {
alert(jQuery(this).attr('title'));
jQuery(this).addClass("bordered selected")
.siblings().removeClass("selected");
});​
You can give it a go here.
Because the way you've written it is the .addClass() adds the class to the td not the parent tr.
Unless the omission of closest('tr') was a typo?

Categories