Develop Reference

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">

Can I put an HTML button inside the canvas?

I want to make the buttons for the game I'm making as real HTML buttons, but they need to be inside the canvas.
How would I go about doing this?

Given that the canvas element has a transparent content model, it may contain fallback elements which are displayed in the event that the canvas element is unsupported. They will not be displayed if the canvas is supported.
You can position HTML elements relative to the canvas' parent to have the buttons "hovering" over the canvas. A menu element could be an appropriately semantic element to render a list of controls, depending on the context:
HTML:
<div id="container">
<canvas id="viewport">
</canvas>
<menu id="controls">
</menu>
</div>
CSS:
#container
{
height: 400px;
position: relative;
width: 400px;
}
#viewport
{
height: 100%;
width: 100%;
}
#controls
{
bottom: 0;
left: 0;
position: absolute;
width: 100%;
}

You can put the button on top of the canvas by giving the canvas a z-index which is lower than the z-index of the button:
<canvas style="z-index:1"></canvas>
<input type="button" style="z-index:2; position:absolute; top:x; left:y" value="test"/>
where x and y are numbers.

I don't believe you can 'put' HTML content inside a canvas tag. Whatever you put in there will actually be displayed if the browser doesn't support <canvas>.
You can, however, position your buttons absolutely over top of a canvas or render areas in your canvas that 'look' like buttons and handle the events yourself (a lot of work).

HTML inside canvas is not possible, but maybe you could position your elements absolutely so that they are "floating" over the canvas, but not inside it.

One way to add button dynamically on the top of the canvas is following the next two points:
1. Making zIndex of the button higher than canvas
2. Position the button using absolute positioning with desired top and left value
Jsfiddle: https://jsfiddle.net/n2EYw/398/
HTML:
<canvas id="canvas" width="200" height="200">
</canvas>
CSS:
canvas {
border: 1px dotted black;
background: navy;
}
JavaScript:
var $testButton = $('<input/>').attr({
type: 'button',
name: 'btn1',
value: 'TestButton',
id: 'testButton',
style: 'position:absolute; top:50px;left:100px; zindex:2'
});
$('body').append($testButton);
$(document).on("click", "#testButton", function() {
alert('button clicked');
});

You can use my DropdownMenu for put an HTML button or menu inside the canvas.
Example of code:
<div class="container" id="containerDSE">
<canvas id="canvas"></canvas>
</div>
<script>
var elContainer = document.getElementById( "containerDSE" ),
elCanvas = elContainer.querySelector( 'canvas' );
dropdownMenu.create( [
{
name: 'Button',
onclick: function ( event ) {
var message = 'Button onclick';
//console.log( message );
alert( message )
},
},
], {
elParent: elContainer,
canvas: elCanvas,
decorations: 'Transparent',
} );
</script>
Example of using.

HTML inside of canvas is not possible.
But if you really want to use buttons, why don't you try positioning the buttons on top of the canvas?

You can put a button inside the canvas (png, jpg, svg and text), using the Canvate library.
http://www.sakuracode.com/canvate
Here you are a sample of a draging button inside the canvas.
container.startDrag();
https://codepen.io/EiseiKashi/pen/BxNbmj

javascsript : adding plus/minus icon to spry collapsible panel in dreamweaver

I'm working on modifying a website which has a chart of FAQs which have has a question link.
If question link is clicked, it reveals the answer in a drop down.
My goal is to swap out a plus icon image with a minus icon next to the linked text for the drop down reveal action.
the FAQs use Spry Collapsible Panel (sprycollapsiblepanel.js) to manage the show/hiding from the link. before I go about modifying the code in the javascript source code, I was wondering if there was an easier way of doing this through dreamweaver someone might be aware of.
thanks in advance.
UPDATE:
the html calling the show/reveal actions are:
<div class="CollapsiblePanel">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="1">Fax to E-Mail</div>
<div class="CollapsiblePanelContent">Here is the text content as it relates to Fax to E-Mail</div>
</div>
</div>
The construct the actions for the drop down, Spry requires the following at the bottom of the page:
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
</script>

In SpryCollapsiblePanel.css, amend the following style rules:
.CollapsiblePanelTab {
font: bold 0.7em sans-serif;
background-color: #DDD;
border-bottom: solid 1px #CCC;
margin: 0px;
padding: 2px 2px 2px 25px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
This increases the padding on the left to make room for the image.
Then add the images to the following rules:
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #EEE;
background-image: url(images/plus.gif);
background-position:left top;
background-repeat: no-repeat;
}
.CollapsiblePanelClosed .CollapsiblePanelTab {
background-image: url(images/minus.jpg);
background-position:left top;
background-repeat: no-repeat;
/* background-color: #EFEFEF */
}

THe plug ins adds a class to each panel title when is opened and when is closed, these are "CollapsiblePanelOpen" and "CollapsiblePanelClosed" accordingly. With that you can use CSS to add the +- effect with a background image perhaps.

onclick switch an image then onclick of something else switch back to + sign

If it's an image, and you don't want to change the source code, and you want to use javascript, you'll need to change the src property of the image.
// Grab the img object from the DOM
var img = document.getElementById("theImageId");
// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
img.src = "minus.png";
}
else {
img.src = "plus.png";
}
You can put this code in wherever you need (in an onclick or a function or whatever). Also, the URLs for the images will obviously need to be updated.

Easy fix with some simple JavaScript.
Add the following script:
<script type="text/javascript">
<!--
function name ()
{
var img = document.getElementById("imgid");
if (img.src == "plus.png") {
img.src = "minus.png";
}
else {
img.src = "plus.png";
}
}
//-->
</script>
When that's done look at the div defining the collapsible panel. It looks something like this:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Name <img src="url.com/minus.png" id="imgid"></div>
<div class="CollapsiblePanelContent">content</div>
All you need for this to work is to add onclick="name();" to the syntax:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="name();">Name <img src="url.com/minus.png" id="imgid"></div>
<div class="CollapsiblePanelContent">content</div>

Changin a div border with 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"); ?