I want to add background color to particular selected text from Text area into div?
var elem=document.getElementById("askQuestionDescription");
var start=elem.value.substring(0,elem.selectionStart);
var selection = elem.value.substring(elem.selectionStart,elem.selectionEnd);
var end=elem.value.substring(elem.selectionEnd,elem.length);
// alert(start + ","+selection+","+end);
document.getElementById("askQuestionCodePreview").innerHTML=start+selection+end;
I want to set background on selection portion only.
Why don't you use this to change the background color of the selected text?
http://www.quirksmode.org/css/selection.html
#askQuestionDescription::selection {
background:red;
color:white;
}
#askQuestionDescription::-moz-selection {
background:red;
color:white;
}
#askQuestionDescription::-webkit-selection {
background:red;
color:white;
}
Related
I am trying to make a chrome extension that finds the original background color of the pressed element.
I mean the background color that was before user hovered and the :hover selector (maybe) changed it.
I tried to use document.styleSheets but it gives me an error.
Example
window.addEventListener("click",function(e){
pressedElement = e.target;
console.log(window.getComputedStyle(pressedElement,null).backgroundColor);
//return blue but I want the background before hover changes (green,yellow,red in this case)
});
div{
height:100px;
width:100px;
}
div:hover{
background-color:blue !important;
}
<div style="background-color:green;">1</div>
<div style="background-color:yellow;">2</div>
<div style="background-color:red;">3</div>
window.getComputedStyle(pressedElement,null).backgroundColor return the current background color (blue in this case), but I want the background color before :hover changes (red, yellow or green in this case).
Just replace the element with itself, which forces the hover state to update, then calculate the style:
window.addEventListener("click",function(e){
const target = e.target;
target.parentNode.replaceChild(target, target)
const color = window.getComputedStyle(target,null).backgroundColor;
console.log(color);
return color;
});
div{
height:100px;
width:100px;
}
div:hover{
background-color:blue !important;
}
<div style="background-color:green;">1</div>
<div style="background-color:yellow;">2</div>
<div style="background-color:red;">3</div>
I have following code, I'm using to display my custom dialog box. But the the color of button is by default gray. How do I add background color and increase or decrease it's size or make it round in javascript.
document.getElementById('dialog-box-foot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
If, is this what you are looking for:
document.getElementById('dialog-box-foot').innerHTML = "<button class='mybtn' onclick=\"alert(\'ok\')\">OK</button>";
.mybtn{
background:#00f;
outline:none;
border:none;
padding:10px;
border-radius:3px;
color:#fff;
cursor:pointer;
}
.mybtn:hover{
background:#0f0;
}
.mybtn:active{
background:#f00;
}
<div id="dialog-box-foot"></div>
You need to edit the CSS of your element:
#dialog-box-foot {
background-color: #ee6e73; // Background color
border-radius: 4px; // Round
font-size: 16px; // Font size
}
Here you can find some example : https://www.w3schools.com/css/css3_buttons.asp
var elem = document.getElementById('dialog-box-foot')
//While inserting
elem.innerHTML = '<button style="background:yellow;height:30px;width:30px;border-radius:50%;" onclick="Alert.ok()">OK</button>';
//After inserting
var buttonelem = document.getElementById('buttonelem');
buttonelem.style.background = "aliceblue";
buttonelem.style.height = "50px";
buttonelem.style.width = "50px";
buttonelem.style.borderRadius = "50%";
<div id="dialog-box-foot"></div>
<button id="buttonelem">OK</button>
if you have multiple css style , you can try this .
get advantage of cssText property .
document.getElementById("dialog-box-foot").style.cssText = "background-color:#f00;left:10%;top:30%";
Using Javascript you can change the background color or size:
document.getElementById("mybutton").style.background='#000000';
// size
document.getElementById("mybutton").style.height='50px';
document.getElementById("mybutton").style.width='50px';
// radious
document.getElementById("mybutton").style.borderRadius = "25px";
When the page loads I want the page to be black and when you click it should change to white. I have the Javascript code to change it to white but I'm not sure how to change it to white only when you click.
#divMain {
position:absolute;
left:0px;
top:0px;
width:320px;
height:460px;
background-color:black;
Here I need to change background-color to white on click.
function body_load() {
document.getElementById('divMain').style.backgroundColor = "rgb(255,255,255)";}
Here is the Javascript function I use to change the background to white. How can I only have it change to white when I click?
Also, when the page loads the function body_load() is ran.
well add to the body tag:
<body onclick="body_load()">
if you want only divMain clickable:
var body_load = function() {
document.getElementById('divMain').style.backgroundColor = "rgb(255,255,255)";
}
window.onload = function(){
document.getElementById('divMain').onclick = body_onload;
}
I have a contentEditable DIV where I would like to replace any user typed URL (by matching the string with regular expression) with blue color text wrapped inside a span tag.
However, different browsers return different results. Besides, replacing the matched text with span puts cursor at the beginning of the text.
Here is the link: jsfiddle
CSS
.class{
position:relative;
outline:none;
border:5px solid #96C;
font-size:16px;
width:500px;
height:60px;
padding:0px 2px;
word-wrap:break-word;
}
HTML
<div class='class' id='div' contentEditable='true'></div>
JavaScript
var regExUrl = /https?:\/\/([\w\d-\.]+)?[\w\d-\.]+\.{1}[\w]{1,4}(\/{1})?([a-zA-Z0-9&-#_\+.~#?\/=]*)?/gi;
var div = document.getElementById('div');
div.onkeyup = function () {
if (div.innerHTML.match(regExUrl)) {
st = div.innerHTML.match(regExUrl);
div.innerHTML = div.innerHTML.replace(regExUrl, "<span style='color:blue;text-decoration:underline'>" + st[0] + "</span>");
}
}
How can I set the cursor at the end of the replaced text and continue typing with the default color (black)?
Not a direct answer but a suggestion of another way of achieving the same user experience in a simpler way:
http://jsbin.com/EZizIge/1/
var regExUrl = /https?:\/\/([\w\d-\.]+)?[\w\d-\.]+\.{1}[\w]{1,4}((\/{1})?)([a-zA-Z0-9&-#_\+.~#?\/=]*)?/gi;
var div = document.getElementById('div');
div.onkeyup = function(){
if(div.innerHTML.match(regExUrl)){
$("div").addClass("link");
} else {
$("div").removeClass("link");
}
}
With css:
.link{
text-decoration: underline;
color: blue;
}
I want to make a reusable function that enable me to easily cover or overlap an element such as select, textfield, input, div, table and etc with a semitransparent div to it's exact height and width.
I am able to get the element position and size:
$(element).height()
$(element).width()
$(element).offset().top
$(element).offset().left
However, how can I bind the element position and size with the div? If the element position or size change, so as the div will change. Any suggestion that how I can do it? Or, is there any existing jquery plugin for this? I believe this will be very useful for temporary disable an element from user interaction for operation such as ajax and etc.
Thanks.
You could create a function/plugin using the jQuery .wrap() function and the appropriate CSS for the overlay..
$.fn.overlay = function() {
return this.each(function(){
var $this = $(this);
var left = $this.offset().left;
var top = $this.offset().top;
var width = $this.outerWidth();
var height = $this.outerHeight();
$this.wrap("<div id='overlay'> </div>")
.css('opacity', '0.2')
.css('z-index', '2')
.css('background','gray');
});
};
Demo on Bootply: http://bootply.com/87132
This should work generically and be reusable.. not just for Bootstrap elements!
Like this
demo
css
div {
position:relative;
z-index:1;
height:200px;
width:400px;
background-color:green;
}
div div {
position:absolute;
z-index:2;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:black;
opacity:0.5;
}
div div input {
position:relative;
top:25px;
z-index:1;
}