We Keep Coding

Why is my drawing canvas offset within the page?

It's very hard to explain. But I'll try, the whole canvas is offset. I'm not sure how this even happened or how to fix it. It's like when your mouse is in the top left corner of the page, and you started in the center, it matches up with the top left corner of the canvas element itself. Use the code snippets to see what I'm talking about.
let currentColor = null;
let inputs = document.getElementsByClassName("style2");
for (const input of inputs) {
input.addEventListener("click", (e) => {
if (e.detail !== 2) e.preventDefault();
});
}
let arr = [];
for (let i = 0; i < inputs.length + 1; i++) {
arr.push(i.toString());
}
arr.shift();
for (const input of inputs) {
input.addEventListener("input", (e) => {
const { value } = document.getElementById(e.target.id);
currentColor = value;
$("#selectedColor").css("background-color", value);
})
input.addEventListener("click", (e) => {
const { value } = document.getElementById(e.target.id);
currentColor = value;
$("#selectedColor").css("background-color", value);
})
}
var rangeslider = document.getElementById("sliderRange");
const setSize = document.getElementById("setSize")
const submit = document.getElementById("submit")
submit.addEventListener("click", (e) => {
rangeslider.value = setSize.value
})
const button = document.getElementById("clear")
// create canvas element and append it to document body
var canvas = document.getElementById('canvas');
// some hotfixes... ( ≖_≖)
// get canvas 2D context and set him correct size
var ctx = canvas.getContext('2d');
resize();
// last known position
var pos = { x: 0, y: 0 };
window.addEventListener('resize', resize);
button.addEventListener('click', clear)
document.addEventListener('mousemove', draw);
document.addEventListener('mousedown', setPosition);
document.addEventListener('mousemove', setPosition);
// new position from mouse event
function setPosition(e) {
let canvas = document.getElementById("canvas")
pos.x = e.clientX
pos.y = e.clientY
}
// resize canvas
function resize() {
ctx.canvas.width = 650;
ctx.canvas.height = 375;
}
function draw(e) {
// mouse left button must be pressed
if (e.buttons !== 1) return;
let canvas = document.getElementById('canvas');
console.log(pos)
ctx.beginPath(); // begin
ctx.lineWidth = rangeslider.value;
ctx.lineCap = 'round';
ctx.strokeStyle = currentColor;
ctx.moveTo(pos.x, pos.y); // from
setPosition(e);
ctx.lineTo(pos.x, pos.y); // to
ctx.stroke(); // draw it!
}
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
html, body {
height: 100%;
width: 100%;
font-family: sans-serif;
background-color: #B3B7B5;
/* overflow: hidden; */
}
.style2 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
width: 35px;
height: 35px;
border: none;
cursor: pointer;
}
.style2::-webkit-color-swatch {
border-radius: 50%;
border: 3px solid #000000;
}
.style2::-moz-color-swatch {
border-radius: 50%;
border: 3px solid #000000;
}
.box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px;
max-width: 320px;
margin: 0 auto;
padding: 7.5px 10px;
}
.box1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px;
max-width: 9999px;
margin: 0 auto;
padding: 10px 10px;
}
.box5 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px;
max-width: 650px;
margin: 0 auto;
padding: 10px 10px;
}
.box2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px;
max-width: 9999px;
margin: 0 auto;
padding: 10px 10px;
}
#selectedColor {
width: 100px;
height: 30px;
border: 3px solid black;
border-radius: 5px;
background-color: black;
}
.canvas {
height: 350px;
width: 650px;
border: 3px solid black;
border-radius: 5px;
background-color: white;
cursor: crosshair;
position: relative;
/* left: 50%; */
}
#clear {
width: 50px;
height: 35px;
font-size: 15px;
border-radius: 5px;
}
#submit {
width: 59px;
height: 23px;
margin: auto;
left: 35%;
border-radius: 5px;
position: relative;
}
.rangeslider {
width: 50%;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF ;
width: 50%;
height: 20px;
opacity: 2;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E ;
width: 5%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
.rangeslider {
left: 38%;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box5">
<canvas class="canvas" id="canvas"></canvas>
</div>
<div class="box1">
<button id="clear">Clear</button><br>
</div>
<div class="box1">
<div class="rangeslider">
<input type="range" min="1" max="100" value="5" class="myslider" id="sliderRange">
</div>
</div>
<div class=box1>
<div>
<input id="setSize" type="text" placeholder="Set Brush Size... (Max 100)">
<br>
<button type="submit" id="submit" for="setSize">Submit</button>
</div>
</div>
<div class="box">
<div class="container">
<input type="color" value="#000000" class="style2" id="1" />
</div>
<div class="container">
<input type="color" value="#ffffff" class="style2" id="2" />
</div>
<div class="container">
<input type="color" value="#ffffff" class="style2" id="3" />
</div>
<div class="container">
<input type="color" value="#ffffff" class="style2" id="4" />
</div>
<div class="container">
<input type="color" value="#ffffff" class="style2" id="5" />
</div>
</div>
<div class="box">
<label for="selectedColor">Current Color:</label>
<div id="selectedColor"></div>
</div>
<script src="script.js"></script>
</body>
</html>
I know this code is kind of weird but please bare with me.

This is actually a simple one to solve. You merely forgot to offset the clientX and clientY. You see, those coordinates are in window space therefore (0,0) will be the top left of your window. If your canvas is also in the top left then everything will seem all fine but in your case the canvas is center so the coordinates won't align. This can be fixed by subtracting the coordinates by the screen position of the canvas.
Here's an example:
function setPosition(e) {
let canvas = document.getElementById("canvas")
let bounds = canvas.getBoundingClientRect()
pos.x = e.clientX - bounds.x
pos.y = e.clientY - bounds.y
}
You can read more about getBoundingClientRect over at https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

The way of calculating the position of the mouse is not appropriate, it is necessary to take into account the deviation of the canvas compared to the viewport. You can't do it using getBoundingClientRect() :
function setPosition(e) {
const canvas = document.getElementById("canvas");
const bounds = canvas.getBoundingClientRect();
pos.x = e.clientX - bounds.left;
pos.y = e.clientY - bounds.top;
}
But you also have to fix the .canvas css class by removing width and height or by setting the same height than in the resize function.
https://codepen.io/Joulss/pen/BaPYgpZ?editors=1111

functions deleting the paint canvas

I would really appreciate If someone could figure out what is wrong with my functions. I'm working on this simple paint program and I have Undo and Clear buttons. Undo is supposed to clear the last drawn line (the function deletes the last element of the array since the array consist of all the drawn lines on the canvas) and Clear just takes the canvas back to It's formal state (makes the board completely white). But every time I put any of those functions in the code my canvas just deletes Itself and I can't seem to figure out what's wrong. The function names are clear_canvas and undo_last. Any tips or solutions on how to fix or make another working example?
<head>
<img src="logo.png" style="width:50%; margin-right: auto; margin-left: 400px; ">
</head>
<style>
body, a, a:hover { cursor:url('https://66.media.tumblr.com/7659e714cab33f9d59124f924405e793/tumblr_inline_p7g82dZq1h1r466gz_75sq.png'), auto
}
body {
transform-style: preserve-3d;
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
canvas {
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
padding: 5px;
}
.tools .color-field {
height: 40px;
width: 40px;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid white;
align-self: center;
margin: 5px 5px ;
}
.color-field {
display: block;
margin-left: auto;
margin-right: auto;
}
.tools {
display: flex;
justify-content: center;
flex-direction: row;
margin-top: 110px;
}
.tools .button{
align-self: center;
width: 100px;
height: 40px;
border: 2px solid white;
cursor: pointer;
color: white;
background: #DB7093;
font-weight: bold;
margin: 0 10px;
display: block;
}
.button {
display: block;
margin-left: auto;
margin-right: auto;
}
.color-picker {
align-self: center;
margin: 0 15px;
background-color: pink;
}
.pen-range {
align-self: center;
margin: o 15px;
background-color: #DB7093;
}
.container {
width: 600px;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index:-1;
margin-left: 425px;
}
#gif {
background-image: url("gif.gif");
position: fixed;
width: 100%;
transform: translateZ(-1px);
top: 0;
left: 0;
}
</style>
<body style="background-image: url('https://images8.alphacoders.com/105/1055726.png');">
<div id="gif"> <img src="gif.gif"> </div>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> cute drawing program </title>
<div class="container">
<div id="status" style="color: white;"></div>
<img src="container.png" style="width:120%;">
</div>
<div class="field">
<canvas id="canvas"> </canvas>
<div class="tools">
<button onClick="undo_last()" type="button" class="button"> Undo </button>
<button onClick="clear_canvas()" type="button" class="button"> Clear </button>
<div onClick="change_color(this)" class="color-field" style="background: red;"></div>
<div onClick="change_color(this)" class="color-field" style="background: blue;"></div>
<div onClick="change_color(this)" class="color-field" style="background: yellow;"></div>
<div onClick="change_color(this)" class="color-field" style="background: green;"></div>
<div onClick="change_color(this)" class="color-field" style="background: orange;"></div>
<div onClick="change_color(this)" class="color-field" style="background: pink;"></div>
<div onClick="change_color(this)" class="color-field" style="background: brown;"></div>
<div onClick="change_color(this)" class="color-field" style="background: gray;"></div>
<div onClick="change_color(this)" class="color-field" style="background: black;"></div>
<div onClick="change_color(this)" class="color-field" style="background: white;"></div>
<input onInput="draw_color = this.value" type="color" class="color-picker">
<input type="range" min="1" max="100" class="pen-range" onInput="draw_width = this.value">
</div>
</div>
<script>
const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth = 650;
canvas.height = 350;
let context = canvas.getContext("2d");
let start_background_color ="white";
context.fillStyle = start_background_color;
context.fillRect(0, 0, canvas.width, canvas.height);
let draw_color = "black";
let draw_width = "2";
let is_drawing = false;
let restore_array =[];
let index = -1;
function change_color(element) {
draw_color = element.style.background;
}
canvas.addEventListener("touchstart", start, false);
canvas.addEventListener("touchmove", draw, false);
canvas.addEventListener("mousedown", start, false);
canvas.addEventListener("mousemove", draw, false);
canvas.addEventListener("mtouchstart", stop, false);
canvas.addEventListener("mouseup", stop, false);
canvas.addEventListener("mouseout", stop, false);
function start(event) {
is_drawing = true;
context.beginPath();
context.moveTo(event.clientX - canvas.offsetLeft,
event.clientY - canvas.offsetTop);
event.preventDefault();
}
function draw(event) {
if ( is_drawing ) {
context.lineTo(event.clientX - canvas.offsetLeft,
event.clientY - canvas.offsetTop);
context.strokeStyle = draw_color;
context.lineWidth = draw_width;
context.lineCap = "round";
context.lineJoin = "round";
context.stroke();
}
event.preventDefault();
}
function stop(event) {
if (is_drawing) {
context.stroke();
context.closePath();
is_drawing = false;
}
event.preventDefault();
if (event.type != 'mouseout'){
restore_array.push(context.getImageData(0, 0, canvas.width, canvas.height));
index += 1;
}
}
function undo_last(){
if (index <= 0) {
clear_canvas();
}
else {
index -=1;
restore _array.pop();
context.putImageData(restore_array[index], 0, 0);
}
}
function clear_canvas() {
context.fillStyle = start_background_color;
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillRect(0, 0, canvas.width, canvas.height);
restore_array = [];
index = -1;
}
</script>
</body>
</html>

You should use console.log. You should also be getting an error that helps identify your issue when you run the script.
Check this line in undo_last
restore _array.pop();
It should be
restore_array.pop();

Increase canvas height automatically when adding extra rects

When adding rectangles the canvas height does not scale with it. Changing the canvas height is not an option. I am searching for weeks how to make this possible. My question is when adding multiple rectangles that the canvas height automatically increases with it for example bij 100 pixels so that it shows the complete rectangle and not only a piece of it like now.
Here is how it is now https://jsfiddle.net/5qybcp84/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IIS7</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/NodeList.js"></script>
<script src="click.js"></script>
<script src="date.js"></script>
<script src='jcanvas.min.js'></script>
<script src="canvasscript.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<b>Nodes</b>
<br>
<div class="scrollbar">
<div class="content">
<canvas id="NodeList" width="200" style="border:2px solid black"></canvas>
</div>
</div>
<div class="Display" id="Display">
<canvas id="NodeDisplay" style="border:2px solid black;" ></canvas>
<script>
var ctx = $('#NodeList').get(0).getContext('2d');
var rects = [[20, 20, 150, 100], [20, 140, 150, 100]];
for(var i=0;i<rects.length;i++) {
ctx.fillRect(rects[i][0],
rects[i][1],
rects[i][2],
rects[i][3]);
}
$('#NodeList').click(function(e) {
var x = e.offsetX,
y = e.offsetY;
for(var i=0;i<rects.length;i++) {
if(x > rects[i][0]
&& x < rects[i][0] + rects[i][2]
&& y > rects[i][1]
&& y < rects[i][1] + rects[i][3]) {
alert('Rectangle ' + i + ' clicked');
}
}
});
</script>
</div>
<div id="canvas-wrap">
<canvas width="600" height="600" style="border:2px solid black;"></canvas>
<div id="overlay"></div>
<div class="een" style="border:2px solid black;" >11111 </div>
<div class="twee" style="border:2px solid black;" >22222 </div>
<div class="drie" style="border:2px solid black;" >33333</div>
<div class="vier" style="border:2px solid black;" >44444 </div>
</div>
</div>
</body>
</html>
html, body {
height: 100%;
overflow: hidden;
}
b {
margin-left: 75px;
}
#container {
margin-left:auto;
margin-right:auto;
text-align:center;
}
a img {
border:none;
}
.scrollbar{
width:220px;
height:1050px;
border:1px solid #000;
overflow:scroll;
overflow-x: hidden;
position: fixed;
}
.content{
width:auto;
height:100%;
}
#Display {
margin-left: 580px;
float: left;
}
#NodeDisplay{
float: left;
height: 300px;
width: 600px;
margin-left: -200px;
}
#canvas-wrap {
position:fixed;
margin-left: 380px;
float: left;
position: fixed;
margin-top: 435px;
}
#canvas-wrap canvas {
position:absolute;
top:0;
left:0;
z-index:0
}
.een{
height: auto;
width: 600px;
}
.twee{
height: auto;
width: 600px;
}
.drie {
height: auto;
width: 600px;
}
.vier{
height: auto;
width: 600px;
}

If you want to resize your canvas without stretching your drawings you'll need a draw() method. This draw method will add all object to your canvas. Therefore you'll have to save your object somewhere. You'll need to do this because resizing the canvas clears it. The draw method need to know your current objects and draws them every time you resize the canvas.
You could add some JQuery code:
Everytime you add a rectangle:
$('#NodeList').height("+=100");
draw();
when you delete a rectangle:
$('#NodeList').height("-=100");
draw();
In your example that would be for for-loop right now. But the whole loop.

side menu appears -- div not moving

I have added a side menu layer to my HTML app taking refrence this link http://www.uiupdates.com/sidebar-menu-layer-with-jquery/.
When i press menu button & side menu appers. My following div class "buttoncls_scrollableCenter" & "buttoncls_fotter" is able to move right when menu appears .
But this div "buttoncls_scrollable" does not moves to the right when side menu appears.
How to make this div "buttoncls_scrollable" move when side menu appears ?
Code :--
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>My item list </title>
<style>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
position:relative;
}
.div_wrapper {
left:0px;
z-index:100;
}
.div_layer {
background: none repeat scroll 0 0 #3e4046;
position: absolute;
width: 200px;
height: 100%;
}
.div_layer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.div_layer ul li {
border-bottom: 1px solid #dfdfdf;
overflow: hidden;
padding: 5px;
height: 33px;
color:white;
text-align:center;
}
.buttoncls {
background:#767676;
width:75px;
height:25px;
position:absolute;
float:left;
border:1px solid #000;
cursor:pointer;
color:#fff;
}
.input {
display: inline-block;
padding: 0 2px;
}
.input input {
display: block;
}
.imgtxt {
margin: 0;
font-family:arial;
color:#DDDFED;
font-size:15px;
}
#images {
background-color: grey;
white-space:nowrap;
}
div.scrollable {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
div.scrollableMenu {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
div.scrollableCenter {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
#center {
background-color:#292B3B;
position:absolute;
top:115px;
left:0px;
right:0px;
bottom:20px;
}
#fotter {
background-color:#CC99FF;
text-align:center;
position:absolute;
left:0;
bottom:0;
width:100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function menu_onclick() {
var rig=$('.div_layer').position().left;
if(rig == 0 )
{
$('.div_layer').animate({left:-this.width}, 300);
$(".buttoncls_scrollable").animate({left:'0px'}, 300);
$(".buttoncls_scrollableCenter").animate({left:'0px'}, 300);
$(".buttoncls_fotter").animate({left:'0px'}, 300);
}
else
{
var center = this.width;
$('.div_layer').animate({left:'0px'}, 300);
$(".buttoncls_scrollable").animate({left:this.width}, 300);
$(".buttoncls_scrollableCenter").animate({left:center}, 300);
$(".buttoncls_fotter").animate({left:this.width}, 300);
}
}
function doc_onload() {
this.width = $('.div_layer').width();
$('.div_layer').css('left',-this.width);
this.rig = $('.div_layer').position().left;
};
//http://rickluna.com/wp/2012/10/setting-css-background-colors-via-javascript-rgb-triplet-vs-hex/
function convertToHex(str){
var raw = str.match(/(\d+)/g);
var hexr = parseInt(raw[0]).toString(16);
var hexg = parseInt(raw[1]).toString(16);
var hexb = parseInt(raw[2]).toString(16);
hexr = hexr.length == 1 ? '0' + hexr: hexr;
hexg = hexg.length == 1 ? '0' + hexg: hexg;
hexb = hexb.length == 1 ? '0' + hexb: hexb;
var hex = '#' + hexr + hexg + hexb;
return hex;
}
//
function selectId(id) {
//alert(id);
if(id == "1")
{
//alert('one');
var div = document.getElementById('1');
div.style.backgroundColor = 'red';
var div = document.getElementById('2');
div.style.backgroundColor = 'black';
var div = document.getElementById('3');
div.style.backgroundColor = 'black';
}
//http://stackoverflow.com/questions/13712697/set-background-color-in-hex
//http://rickluna.com/wp/2012/10/setting-css-background-colors-via-javascript-rgb-triplet-vs-hex/
if(id == "2")
{
//alert('two');
var div = document.getElementById('1');
div.style.backgroundColor = 'black';
var div = document.getElementById('2');
div.style.backgroundColor = 'red';
var div = document.getElementById('3');
div.style.backgroundColor = 'black';
}
if(id == "3")
{
//alert('three');
var div = document.getElementById('1');
div.style.backgroundColor = 'black';
var div = document.getElementById('2');
div.style.backgroundColor = 'black';
var div = document.getElementById('3');
div.style.backgroundColor = 'red';
}
$('.div_layer').animate({left:-this.width}, 300);
var center = 250;
$(".buttoncls_scrollable").animate({left:'100px'}, 300);
$(".buttoncls_scrollableCenter").animate({left:'0px'}, 300);
$(".buttoncls_fotter").animate({left:'0px'}, 300);
//collaspe the menu
};
</script>
</head>
<body onload="doc_onload()">
<div class="div_layer">
<ul>
<li onclick="selectId(this.id)" id="1">Fruits</li>
<li onclick="selectId(this.id)" id="2">Automobile</li>
<li onclick="selectId(this.id)" id="3">Cloth</li>
</ul>
</div>
<div id="images" class="scrollable buttoncls_scrollable">
<div class="input">
<input type="image" src="http://www.shoredreams.net/wp-content/uploads/2014/02/show-menu-icon.png" onclick="menu_onclick()" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Menu</p>
</div>
<div class="input">
<input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRTBRnn9Aqx74JvKyJ7Z5ydbXXuj8cIDVuOdJZUxb02Q2LWfJGP" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Normal Vegitable</p>
</div>
<div class="input">
<input type="image" src="http://www.boldsky.com/img/2013/03/19-greenveggies.jpg" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Green Vegitable</p>
</div>
</div>
<div id="center" class="scrollableCenter buttoncls_scrollableCenter">
<div >
<input type="image" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTMPmp8aVaovrd3AGj1_hL_GEXX1M4DJ-TTMJ34Vr622XeY_usu" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">brinjal</p>
<hr/>
</div>
<div >
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/2/25/Cauliflower.JPG" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">cauliflower</p>
<hr/>
</div>
<div >
<input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQJgt4i9ph9uQsS3JV940PBg-kwN1kkrKbC6FLYI6UhbxucEb91" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">tomato</p>
<hr/>
</div>
<div >
<input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT-mwuxaqQeHXjoZzPUoee9Rvg8Jq-eCvo8H0EgEtapjfr6U4E3" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ladyfinger</p>
<hr/>
</div>
<div >
<input type="image" src="http://t2.gstatic.com/images?q=tbn:ANd9GcQRxXUO2stKHLyET_rXpxOuLp67qc1IzlBcJGke5jYoGPeRZpnO" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">radish</p>
<hr/>
</div>
<div >
<input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT2zCeG621TSX1YmcsT9DPLaQJkdVwdYk_n-eWECCa8NTtXR0LFeQ" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ginger</p>
<hr/>
</div>
</div>
<div class="buttoncls_fotter" id="fotter">List of Items</div>
</body>
</html>
Actual Html page:--
side Menu appears, top div is not moving :--

You need to absolutely position your buttoncls_scrollable:
div.scrollable {
position: absolute;
right:0;
left:0;
}
Example
If you also change your #fotter to have right:0 instead of width:100%; it will fix your issue with the horizontal scrollbar appearing when the side menu shows

why not using jquery? it will be very simple.
there is more than one way to do it but you can for example use the Jquery click() function to do the action and to use Jquery addClass() function to give the 'body' (or other 'wrap all' element) a class to affect all his children after click - new position for the menu and for the new div (div that wrap all the element except of the menu itself). on the HTML, add a div that will wrap all the elements except of the menu itself and add to the input image a class or id to avoid conflict, for example add a id (id="menu_button") and call it with jquery:
Jquery:
$(document).ready(function(){
$('#menu_button').click(function(){
if ($('body').hasClass('show')){
$('body').removeClass('show');
}
else {
$('body').addClass('show')
}
});
});
on CSS, you need to add the new div wrap. add left: 200px; (the width of the menu) to hide the menu fully when it's not need be displayed. add z-index: 1; (you can use higher value as long as it will be higher the all the rest element that needs to be below). for make them menu above the other elements. add new class with left: 0; to bring the menu to the position it needs to be after click. you can use CSS3 transition for better show.
CSS:
.content_wrap
{
width: 100%;
height: 100%;
float: right;
}
.show .content_wrap
{
width: calc(100% - 200px);
}
.div_layer
{
background: none repeat scroll 0 0 #3e4046;
position: absolute;
left: -200px;
width: 200px;
height: 100%;
z-index: 1;
}
.show .div_layer
{
left: 0;
}
.content_wrap, .div_layer
{
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
example: http://jsfiddle.net/6dgbp5dh/1/

javascript, css, z-index, div stacking

I want to create a sort of light/thick box that only acts on a single DIV within a page.
When mine fires off the first div(phantom_back) acts as I want it but the second, phantom_top sets its self after phantom_back regardless of its z-index and positioning.
What am I doing wrong?
Here is what I have so far:
<html>
<head>
<script type="text/javascript">
<!--//
function phantom_back(image)
{
document.getElementById('phantom_back').style.zIndex = 100;
document.getElementById('phantom_back').style.height = '100%';
document.getElementById('phantom_back').style.width = '100%';
phantom_top();
}
function phantom_top(image)
{
document.getElementById('phantom_top').style.zIndex = 102;
document.getElementById('phantom_top').style.height = 600;
document.getElementById('phantom_top').style.width = 600;
document.getElementById('phantom_top').style.top = 0;
document.getElementById('phantom_top').style.left = 0;
}
//-->
</script>
</head>
<body>
Change
<div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
<div style="height: 10px; width: 10px; position: relative; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>
<div style="height: 10px; width: 10px; position: relative; z-index: -3; margin: 0 auto; background-color: green;" id="phantom_top">asdf</div>
</div>
</body>
</html>
I was wandering why none of the tutorials I've been able to find offer something like this.

So, I got it. I set an absolute positioning on phantom_back and instead of trying to restack them I just set the visibility. When I tried to set the z-index it would fall apart on me.
<html>
<head>
<script type="text/javascript">
<!--//
function phantom_back(image)
{
document.getElementById('phantom_back').style.height = 700;
document.getElementById('phantom_back').style.width = 700;
document.getElementById('phantom_back').style.zIndex = 50;
phantom_top();
}
function phantom_top()
{
document.getElementById('phantom_top').style.height = 600;
document.getElementById('phantom_top').style.width = 600;
document.getElementById('phantom_top').style.visibility = "visible";
}
//-->
</script>
</head>
<body>
Change
<div style="height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red;" id="overlord">
<div style="height: 10px; width: 10px; position: absolute; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" id="phantom_back"></div>
<div style="margin: 0 auto; text-align: center; height: 10px; width: 10px; position: relative; z-index: 102; top: 10px; background-color: white; visibility: hidden;" id="phantom_top"><br /><br /><img src="load.gif"></div>
</div>
</body>
</html>

phantom_top is set to position:relative not absolute therefore it's currently not overlapping phantom_back.

Don't forget to concatenate a px string for height and width. You don't need the px for z-index
document.getElementById('phantom_back').style.height = 700 + "px";
Like that.