Changin a div border with javascript - javascript

I have created a div programaticaly using.
var Element;
Element = document.createElement('div');
Now I want to change the right and bottom border to "#CCCCCC 1px solid".
I don't want to use a library for this and using CSS classes is not possible.

element.style.borderRight = element.style.borderBottom = "#CCCCCC 1px solid";

Element.setAttribute("style", "bottom-right: #CCCCCC 1px solid"); ?

Related

Applying css to a javascript variable

I want to add color and border to a javascript variable using css. Below is my code;
var msg = "OK"; //i want this to colored and bordered with green.
msg = "Conflict"; // i want this to be colored and bordered with red.
I tried another answer from other questions but it doesn't seem to work with me.
If you're just trying to add styles to a JavaScript variable you can't do that, and I don't understand what you would hope to achieve by doing that.
I am therefore going to assume you want to add styles to an html element that you have extracted as a JavaScript variable like so
let msgElement = document.getElementById('msg')
let msg = "OK"
msgElement.innerHTML = msg
In this case, you can add styles to the element like so
msgElement.style.color = "red"
msgElement.style.border = "2px solid red"
In your example, when you change the value of msg to "Conflict", you are doing just that - changing it. You can't have two separate values held by the same variable.
As one of the comments says, this is basic web development, so I would advise some further reading, or an online course such as those provided by Codeacademy
As the other answers state, you can't apply a CSS rule to a variable. You can, however, do something like this:
<html>
<head>
<style>
.redgreen {border-style: solid; border-color: green; color: red;}
</style>
<script>
function foo() {
let msg = "<div class='redgreen'>Hello, world!</div>";
document.getElementById("themsg").innerHTML = msg;
}
</script>
</head>
<body onload='foo();'>
<p id='themsg'>Your message here</p>
</body>
</html>
That is, define "msg" as an HTML element instead of a text string.
You can't add CSS to a javascript variable.
if you are create element using javascript
html:
<div class="parent-div">
</div>
js:
var msg = "OK";
element = document.createElement('p');
// Give the new element some content and css
element.innerHTML = msg;
element.style.color = 'green';
element.style.border = "1px solid red";
// append element to parent div
document.querySelector('.parent-div').appendChild(element);
Just do without javascript
html:
<div class="parent-div">
<p class="child-one">OK</p>
<p class="child-two">Conflict</p>
</div>
css:
.parent-div .child-one {
color: red;
border: 1px solid green;
}
.parent-div .child-two {
color: green;
border: 1px solid red;
}

Stop changing cursor location when innerHTML is changed

How do I stop the cursor changing location when innerHTML is edited by javascript?
I am currently making a little code editor project where I want text highlighting, but to do that I must edit the innerHTML / DOM element to add a span into it. But when that happens it changes location to start of text.
var c = document.getElementById("c");
var t = setInterval(function(){
c.innerHTML = $("#c").text().split("lol").join("<span class='hi1'>lol</span>");
},1);
[contenteditable] {
border: 1px solid gray;
}
.hi1 {
color: rgb(51, 153, 255);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable id="c">
write "l o l" without spaces. Then continue to write and try to change location with arrow keys / mouse
</div>

html2canvas not working for pseudo element

I am working on saving image of div. but div has pseudo element , however i come to know that html2canvas does not support pseudo element.
How to solve it ? Is there any other library to save div as image ?
I am using below link to create a tree structure :
https://codepen.io/P233/pen/Kzbsi
and i want to save this as image.
For this purpose I am using html2canvas
$(document).ready(function() {
html2canvas($("#home1"), {
onrendered: function(canvas) {
var image = new Image();
image.src = divByteArray;
document.getElementById('image').appendChild(image);
//window.open(divByteArray);
/* $("#test").attr('href', canvas.toDataURL("image/png"));
$("#test").attr('download', 'checkFile.png');
$("#test")[0].click(); */
}
});
});
Please don't put your comment on function bracket. i am not putting whole function.
I just want to know if there is another library which save div as image?
You can use html2canvas.js and canvas2image for convert div to canvas and convert to image.
html2canvas seems to work just well with your code : https://codepen.io/anon/pen/gMOmpB
I wonder how you did "come to know" that it doesn't work with pseudo-elements?
A simpler example, which doesn't work in stack-snippet... :
https://jsfiddle.net/whtsavpp/
html2canvas(d).then(function(c){document.body.appendChild(c)})
div:after{content:'hello'}
canvas{border: 1px solid black;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<div id="d"></div>
In browsers other than Google chrome, getComputedStyle() method on pseudo elements pick the border style from main element. so you will have to include the border style on main element.
Here is the trick, change this code:
div::before {
content: 'Hello',
border-top: 1px solid green;
}
to:
div {
border: 0 solid;
}
div::before {
content: 'Hello',
border-top: 1px solid green;
}

this.style.cursor='hand', not working for the first time when I hover mouse on to the element

I am new to programming. All I was trying is to change the style of cursor to hand onmouseover event. when I run the page for first time it is changing the border style but the cursor style is not being changed, but when I move the cursor onto the image element for the second time everything is working as expected.
can anyone please explain what's the exact reason for this improper behavior and how can I make it work.
NOTE:
I was trying to implement this in asp.net content pages :P so I feel this is easier way instead of maintaining a separate css file
<img alt="Sedan" width="300px" height="200px" id="img" src="Images/WelcomePage/Compact/abc.jpg" />
<script>
img.onmouseover = function () {
this.style.cursor = 'hand';
this.style.border = "2px solid black"
}
img.onmouseout = function () {
this.style.cursor = 'pointer';
this.style.border = "2px solid white"
}
</script>
Try using CSS instead of JavaScript. If you want to do it in the same file, use a style element:
<style>
#img {
border: 2px solid white;
}
#img:hover{
cursor: pointer ;
border: 2px solid black;
}
</style>
That gives the image a white border normally (with the default cursor), then changes it to black with the pointer cursor when the mouse is over the element.
I know how to implement this in css, I was trying to dig out if there is any possibility to implement this in javascript.
Well, that was important information to include in the question.
Two things:
You need to use the correct CSS cursor property values, hand is not a valid value.
You need to ensure that your code runs after the image exists. The easiest way to do that is to put your script tag at the end of your HTML, just before the closing </body> tag.
If you do those things, it works. Of course, the image moves because it doesn't initially have a border:
img.onmouseover = function() {
this.style.cursor = 'pointer';
this.style.border = "2px solid black";
}
img.onmouseout = function() {
this.style.cursor = 'default';
this.style.border = "2px solid white";
}
<img alt="Sedan" width="300px" height="200px" id="img" src="Images/WelcomePage/Compact/abc.jpg" />
I don't recommend relying on the automatic global (the one created because you have id="img"), but it does work.
As kaiido points out, we could just set the cursor property once rather than in the event handlers, since it only applies when the cursor is hovering the element anyway:
img.style.cursor = 'pointer';
img.onmouseover = function() {
this.style.border = "2px solid black";
}
img.onmouseout = function() {
this.style.border = "2px solid white";
}
<img alt="Sedan" width="300px" height="200px" id="img" src="Images/WelcomePage/Compact/abc.jpg" />

Change text input border color

I want to make a form where data is verified using JavaScript before being sent.
When a field is empty, I want to set its border to red.
HTML code:
<label>Question: </label><input type = "text" maxlength = "100" name = "question"> <br />
JavaScript code 1:
fields[i].style.borderColor = "red";
JavaScript code 2:
fields[i].style.border = "1px solid red";
If I use JS code 1, the border changes its color but it has the width bigger than before (even though I do not say anything about border width).
If I use JS code 2, the text input shrinks with 2px and the change is noticeable.
What should I do to change only the border color?
Actually this is preferred by adding and removing classes:
$("input").change(function()
{
var value = $(this).val();
if(value=="")
{
$(this).addClass("red-border");
$(this).focus();
}else
{
$(this).removeClass("red-border");
}
});
And your CSS:
.red-border{
border: 1px solid red;
}
The default user agent stylesheet uses this for the input field:
border: 2px inset;
Now you may ask why is this not defined by default?
by default(In IE the appreance is hard-coded):
appearance: textfield;
But whenever you change something:
appearance: none;
And when the appearance is none, you will see the 2px inset border.
So actually the width is the problem here:
So you want to change 2 propeties: Border-width and border-color
You would need 2 lines now:
document.getElementsByTagName('input')[0].style.border = "red";
document.getElementsByTagName('input')[0].style.borderWidth = "1px";
jsFiddle
However your own solution might be elegant, as it is defined with one line of code:
fields[i].style.border = "1px solid red";
Note that the inset style sets the top and right border lighter where the bottom and left border is the given color. Setting the style to solid will solve this.
It won't harm your code to use the whole shorthand property of border. You always have to be very specific when you want to win the battle with the user agent stylesheet.
I have something like this in production, only it uses alerts instead of color change. Use CSS Styles & classes:
CSS
.error {
border:2px solid red;
}
JavaScript
<script>
function checkField(){
var f = document.getElementById('<name of field>').value;
if (f === "") {
document.getElementById('<name of field>').className = document.getElementById('<name of field>').className + " error";
return false;
}
}
</script>
Then add this to your button/control's click event:
return checkField()
This SO post seems to be similar:changing textbox border colour using javascript
Use outline instead of border.
fields[i].style.outline = "1px solid red";
Try this out. Jquery
$("input").change(function ()
{
var value = this.value;
if(value=="")
{
$(this).css("border", "1px solid red");
}else
{
$(this).css("border",'');
}
}).trigger("change");
Html
<input type="text" class="col">

Categories

Resources