I'm trying to make a custom prompt box in javascript. However, I just can't figure out how to close it again. The cancel button does work (the prompt box disappears), but when you click on the ok button, the box doesn't disappear.
Since I based my code on the code on this page: https://www.developphp.com/video/JavaScript/Custom-Prompt-Box-Programming-Tutorial
But now I see that if I copy the example on that page, the OK button doesn't work either. Can someone tell me what's wrong?
This is the example on the site I linked to, which doesn't work:
<!DOCTYPE html>
<html>
<head>
<style>
#dialogoverlay{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 10;
}
#dialogbox{
display: none;
position: fixed;
background: #000;
border-radius:7px;
width:550px;
z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }
</style>
<script>
function changeText(val){
document.getElementById('status').innerHTML = val;
}
function doStuff(val){
document.body.style.background = val;
}
function CustomAlert(){
this.render = function(dialog){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Acknowledge This Message";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
}
this.ok = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
function CustomConfirm(){
this.render = function(dialog,op,id){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Confirm that action";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Confirm.yes(\''+op+'\',\''+id+'\')">Yes</button> <button onclick="Confirm.no()">No</button>';
}
this.no = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
this.yes = function(op,id){
if(op == "delete_post"){
deletePost(id);
}
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Confirm = new CustomConfirm();
function CustomPrompt(){
this.render = function(dialog,func){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "A value is required";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxbody').innerHTML += '<br><input id="prompt_value1">';
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Prompt.ok(\''+func+'\')">OK</button> <button onclick="Prompt.cancel()">Cancel</button>';
}
this.cancel = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
this.ok = function(func){
var prompt_value1 = document.getElementById('prompt_value1').value;
window[func](prompt_value1);
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Prompt = new CustomPrompt();
</script>
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
<h1>My web document content ...</h1>
<h2>My web document content ...</h2>
<button onclick="alert('You look very pretty today.')">Default Alert</button>
<button onclick="Alert.render('You look very pretty today.')">Custom Alert</button>
<button onclick="Prompt.render('And you also smell very nice.')">Custom Alert 2</button>
<h3>My web document content ...</h3>
</body>
</html>
You're missing the second parameter for the ok button click, which allows you to invoke a function once you click ok:
<button onclick="Prompt.render('And you also smell very nice.', 'doStuff')">Custom Alert 2</button>
This will invoke doStuff with the value from the prompt.
There is one possibility check with the id's used for elements in you the code provided if at all there are duplicate id the javaScript will not work properly.
This statement in the code,
document.getElementById('dialogbox').style.display = "none";
Is making use of element with id 'dialogbox' so if at all there is another element in your page having same id. your code will not work properly. More help can be provided if there is code with problem is shared.
Related
I have 2 button, one in top another in the bottom. when I click the top button it works fine. when i scroll down to bottom button and click the button again ( same function ) it appends the element with some where. I am calculating the top position from absolute way. getting the relation ship with body.
so how to handle this kind of scenario?
Live demo
Js code :
const h1All = document.getElementsByTagName("h1");
function addElement() {
let div = document.createElement('div');
div.innerText = "I am here";
div.style.border = "1px solid green";
div.style.position = "absolute";
let h1 = h1All[0];
h1.style.border = "1px solid red";
let parentPos = h1.getBoundingClientRect();
console.log(parentPos)
document.body.appendChild(div);
div.style.top = parentPos.y + parentPos.height + "px";
}
HTML:
<h1>Hello Plunker!</h1>
<div class="mydiv">some div info goes here
<button onclick="addElement()">Click Me </button> //works fine.
</div>
<button onclick="addElement()">Click Me </button> //it's not. after scroll down!!
the second button appends the element some where. what is the correct way to calculation do we have to do here?
Thanks in advance.
const h1All = document.getElementsByTagName("h1");
function addElement() {
let div = document.createElement('div');
div.innerText = "I am here";
div.style.border = "1px solid green";
div.style.position = "absolute";
let h1 = h1All[0];
h1.style.border = "1px solid red";
let parentPos = h1.getBoundingClientRect();
document.body.appendChild(div);
div.style.top = parentPos.y + parentPos.height + "px";
}
.mydiv{
border: 1px solid green;
height: 600px;
}
<h1>Hello Plunker!</h1>
<div class="mydiv">some div info goes here
<button onclick="addElement()">Click Me </button>
</div>
<button onclick="addElement()">Click Me </button>
If you want absolute positioning, you need to take scrolling into account. You can do that with window.scrollY. Notice the change at the last line of addElement:
const h1All = document.getElementsByTagName("h1");
function addElement() {
let div = document.createElement('div');
div.innerText = "I am here";
div.style.border = "1px solid green";
div.style.position = "absolute";
let h1 = h1All[0];
h1.style.border = "1px solid red";
let parentPos = h1.getBoundingClientRect();
document.body.appendChild(div);
div.style.top = parentPos.y + parentPos.height + window.scrollY + "px";
}
.mydiv{
border: 1px solid green;
height: 600px;
}
<h1>Hello Plunker!</h1>
<div class="mydiv">some div info goes here
<button onclick="addElement()">Click Me </button>
</div>
<button onclick="addElement()">Click Me </button>
I am trying to set CSS styles using Javascript.
I have written this code:
<div class="dim" id="dim" title="Event">
</div>
<div class="dialog_wrapper" id="dialog_wrapper">
<div class="dialog" id="dialog"><img id="buyukresim" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg" height="250"></div>
</div>
<script>
document.getElementById('buyukresim').style.display = "none";
document.getElementById('dim').style.display = "none";
document.getElementById('dialog_wrapper').style.display = "none";
document.getElementById('dialog').style.display = "none";
function karanlikyap2() {
var ogedim = document.getElementById('dim');
var ogewrapper = document.getElementById('dialog_wrapper');
var ogedialog = document.getElementById('dialog');
var ogeresim = document.getElementById('buyukresim');
ogedim.style.height = "100%";
ogedim.style.width = "100%";
ogedim.style.position = "fixed";
ogedim.style.left = "0";
ogedim.style.top = "0";
ogedim.style.z-index = "1 !important";
ogedim.style.background-color = "black";
ogedim.style.filter = "alpha(opacity=75)";
ogedim.style.-khtml-opacity = "0.75";
ogedim.style.-moz-opacity = "0.75";
ogedim.style.opacity = "0.75";
ogedim.style.display = "block";
ogewrapper.style.width = "100%";
ogewrapper.style.top = "0";
ogewrapper.style.left = "0";
ogewrapper.style.position = "absolute";
ogewrapper.style.z-index = "5";
ogewrapper.style.display = "block";
ogedialog.style.width = "400";
ogedialog.style.height = "400";
ogedialog.style.margin = "0 auto";
ogedialog.style.padding = "40";
ogedialog.style.background-color = "#fff";
ogedialog.style.border = "1px solid #ccc";
ogedialog.style.color = "#333";
ogedialog.style.display = "block";
ogeresim.style.display = "block";
}
</script>
<button onclick="karanlikyap2()">Karanlık 2</button>
But the code is not working.
Note : I have a good French, but my English isn't good. Pardon me. I hope you understand.
What you are doing to alter the CSS is not a good way. Please look for references over the internet. In JS, it doesn't normally work the way you expect it to work. You are trying to change the CSS like you would normally do with CSS, but JS is a bit picky when it comes to CSS. For example to change background color, in CSS you would write "background-color", but in JS "background-color" would be "backgroundColor".
Only change the CSS from JS if absolutely necessary, use CSS class to style your element.
You can reference https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm
But if you really want to do it this way, here it is how:
<div class="dim" id="dim" title="Event">
</div>
<div class="dialog_wrapper" id="dialog_wrapper">
<div class="dialog" id="dialog"><img id="buyukresim" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg" height="250"></div>
</div>
<button onclick="karanlikyap2()">Karanlık 2</button>
<script>
document.getElementById('buyukresim').style.display = "none";
document.getElementById('dim').style.display = "none";
document.getElementById('dialog_wrapper').style.display = "none";
document.getElementById('dialog').style.display = "none";
function karanlikyap2() {
var ogedim = document.getElementById('dim');
var ogewrapper = document.getElementById('dialog_wrapper');
var ogedialog = document.getElementById('dialog');
var ogeresim = document.getElementById('buyukresim');
ogedim.style.height = "100px";
ogedim.style.width = "100px";
ogedim.style.position = "fixed";
ogedim.style.left = "0";
ogedim.style.top = "0";
ogedim.style['z-index'] = "1 !important";
ogedim.style['background-color'] = "black";
ogedim.style.filter = "alpha(opacity=75)";
ogedim.style['-khtml-opacity'] = "0.75";
ogedim.style['-moz-opacity'] = "0.75";
ogedim.style.opacity = "0.75";
ogedim.style.display = "block";
ogewrapper.style.width = "100%";
ogewrapper.style.top = "0";
ogewrapper.style.left = "0";
ogewrapper.style.position = "absolute";
ogewrapper.style['z-index'] = "5";
ogewrapper.style.display = "block";
ogedialog.style.width = "400";
ogedialog.style.height = "400";
ogedialog.style.margin = "0 auto";
ogedialog.style.padding = "40";
ogedialog.style['background-color'] = "#fff";
ogedialog.style.border = "1px solid #ccc";
ogedialog.style.color = "#333";
ogedialog.style.display = "block";
ogeresim.style.display = "block";
}
</script>
As gavgrif hinted at in the comments, it would be better to define static CSS styles and then manipulate the class names instead of trying to set everything with JS. Only setting things at run-time when they need to be dynamic and changeable. This will help with the separation of concerns and help make your code more maintainable.
In this case everything you are defining is static, the only real change you are making is hiding or showing the elements via changing display to none or block. You can easily achieve a similar effect by instead just defining them as blocks and creating a class that hides an element via visibility: hidden. Then you can hide and show them by adding or removing that new class.
This is how I would rewrite it:
function karanlikyap2() {
var ogedim = document.getElementById('dim');
var ogewrapper = document.getElementById('dialog_wrapper');
// you only need to remove the hidden class from the items at the top
// level of the DOM, the wrapper and dim
ogedim.classList.remove('hidden');
ogewrapper.classList.remove('hidden');
}
function hide() {
var ogedim = document.getElementById('dim');
var ogewrapper = document.getElementById('dialog_wrapper');
// add the hidden class back on to hide them again.
ogedim.classList.add('hidden');
ogewrapper.classList.add('hidden');
}
// hide the dialog when something is clicked
document.getElementById('dialog_wrapper').addEventListener('click', hide, false);
document.getElementById('dim').addEventListener('click', hide, false);
#dim {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1 !important;
background-color: black;
filter: alpha(opacity=75);
-khtml-opacity: 0.75;
-moz-opacity: 0.75;
opacity: 0.75;
display: block;
}
#dialog_wrapper {
width: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 5;
display: block;
}
#dialog {
width: 400px;
height: 400px;
margin: 0 auto;
padding: 40px;
background-color: #fff;
border: 1px solid #ccc;
color: #333;
display: block;
}
.hidden {
visibility: hidden;
}
<div class="dim hidden" id="dim" title="Event">
</div>
<div class="dialog_wrapper hidden" id="dialog_wrapper">
<div class="dialog" id="dialog">
<img id="buyukresim" src="https://lorempixel.com/output/cats-q-c-250-250-4.jpg" height="250">
</div>
</div>
<button onclick="karanlikyap2()">Karanlık 2</button>
(I've used a different image to get around mixed-content issues because StackOverflow is served over https and your image is on http.)
Further reading:
more information about classList
Séparation du fond et de la forme
basically i'm trying to create multiple popup boxes that appear when different links are clicked. For some reason, a popup box only appears when the first link is clicked. When the rest of the links are clicked, nothing happens. Any help is appreciated, thanks. Also, I've only included 2 of the links in this example.
javascript code:
function xpopup() {
document.getElementById("x").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("xPopup");
overlay.style.display = "block";
popup.style.display = "block";
}
}
function ypopup() {
document.getElementById("y").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block";
}
}
</script>
HTML code:
<body onLoad="xpopup()"; "ypopup()";>
<div id="overLay"></div>
<div class="popupBox" id="xPopup"></div>
<div class="popupBox" id="yPopup"></div>
Link 1<br>
Link 2<br>
CSS code:
.popupBox{
display:none;
position: fixed;
width: 30%;
height: 40%;
margin-left: 16.5%;
margin-top: 4.5%;
background-color: white;
border: 2px solid black;
border-radius: 10px;
z-index: 10;
}
#overLay{
display:none;
position: fixed;
width: 100%;
height: 100%;
background-color: #707070;
opacity: 0.7;
z-index: 9;
left: 0;
top: 0;
}
Replace <body onLoad="xpopup()"; "ypopup()";> with <body onLoad="xpopup(); ypopup();"> and in your JavaScript code you have a typo.
function ypopup() {
document.getElementById("y").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block"; // Here the popup1 is undefined change it to popup.style.....
}
}
Edit :-->
I've changed your code to hide the popup, if you click on the greyed out section.
Fiddle
HTML:
<body>
<div id="overLay"></div>
<div class="popupBox" id="xPopup"></div>
<div class="popupBox" id="yPopup"></div>
Link 1
<br />
Link 2
<br />
</body>
JavaScript:
var overlay = document.getElementById("overLay");
var xpopup = document.getElementById("xPopup");
var ypopup = document.getElementById("yPopup");
document.getElementById("x").onclick = function () {
overlay.style.display = "block";
xpopup.style.display = "block";
};
document.getElementById("y").onclick = function () {
overlay.style.display = "block";
ypopup.style.display = "block";
};
overlay.onclick = function () {
overlay.style.display = "none";
xpopup.style.display = "none";
ypopup.style.display = "none";
};
I'm seeing two issues --
The first is already answered by chipChocolate.py:
Replace <body onLoad="xpopup()"; "ypopup()";> with <body onLoad="xpopup(); ypopup();">.
The second (and maybe this is just a typo?) is that you have:
function ypopup() {
document.getElementById("y").onclick= function()
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block";
}
}
You're referencing popup1 but you've named your variable popup. If you open up the javascript console you'll probably see that's throwing an error. Rename the variable popup1 and this should work.
I wrote below code to get co-ordinate of x/y in JAVASCRIPT , it's not working .
I want to create a color picker using this image
when ever some one click on button pick color then it prompts a window with color and button cancel , When user clicked on image than i need to find x/y co-ordinate so that i can specify which color it is .
Problem is that these alerts are not working
alert(e.clientX - offsetl);
alert(e.clientY - offsett);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#dialogoverlay{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 10;
}
#dialogbox{
display:none;
position: fixed;
background: #f2f2f2;
border-radius:5px;
z-index: 10;
}
#dialogboxhead{background:white;height:40px;margin:10px;}
#text {float:left; text-align:center;margin:10px; font-size:19px;}
#cancel{float:left;margin:9px;}
#image{
margin-top:0px;
padding:10px;
}
</style>
<script type="text/javascript">
function CustomAlert(){
this.render = function(dialog){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
}
this.cancel = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
function position(e){
var offsetl = document.getElementById('image').offsetLeft;
var offsett = document.getElementById('image').offsetTop;
alert(offsetl);
alert(offsett);
alert(e.clientX - offsetl);
alert(e.clientY - offsett);
}
</script>
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div id="dialogboxhead">
<p id="text">Select color</p>
<input type="button" onClick="Alert.cancel()" id="cancel" name="Cancel" value="Cancel"/>
</div>
<div>
<img id="image" src="color.png" onClick="position()"/>
</div>
</div>
<button onclick="Alert.render('Hello World');" >pick color </button>
</body>
</html>
I recommend use jQuery and attach click event handler in you image. The event object return in jQuery include two properties, pageX and pageY. This properties contains mouse position relative to the top edge of the document (jQuery Event Object). The code look like this:
$(document).ready(function () {
$('img#image').click(position);
});
function position(e) {
var offsetX = e.pageX,
offsetY = e.page;
}
The sample is in JSFiddle http://jsfiddle.net/zV3dH/.
I hope this help you.
Try this code buddy.. Sure it works
function getClickPos(e) {
return {x:e.clientX,y:e.clientY};
}
Now u can use it like this:
document.querySelector("#img").onclick = function(e) {
var pos= getClickPos(e);
alert(pos.x);
};
I am using the following coding
<html>
<head>
<style>
#thediv {
margin:0 auto;
height:400px;
width:400px;
overflow:hidden;
}
img {
position: relative;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<input type="button" value ="-" onclick="zoom(0.9)"/>
<input type="button" value ="+" onclick="zoom(1.1)"/>
<div id="thediv">
<img id="pic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/>
</div>
<script>
window.onload = function(){
zoom(1)
}
function zoom(zm) {
img=document.getElementById("pic")
wid=img.width
ht=img.height
img.style.width=(wid*zm)+"px"
img.style.height=(ht*zm)+"px"
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
</script>
</body>
</html>
For making a simple zoom in and zoom out function.
I this i have a difficulty of the image is zooming indefinitely. i want to fix a position to zoom in and zoom out. The image must not exceed that position while zooming in and zooming out.
I am adding a fiddle to this link
Here you go:
var zoomLevel = 100;
var maxZoomLevel = 105;
var minZoomLevel = 95;
function zoom(zm) {
var img=document.getElementById("pic");
if(zm > 1){
if(zoomLevel < maxZoomLevel){
zoomLevel++;
}else{
return;
}
}else if(zm < 1){
if(zoomLevel > minZoomLevel){
zoomLevel--;
}else{
return;
}
}
wid = img.width;
ht = img.height;
img.style.width = (wid*zm)+"px";
img.style.height = (ht*zm)+"px";
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
You can modify the zoom levels to whatever you want.
I modified the fiddle a bit, since you only need to add javascript to the bottom-left area.