I have made a custom prompt box for Javascript so I don't have to use the stock ones, however I cannot figure out how to return the value from the directly from the cPrompt() function. I want to be able to use it like a normal prompt and be able to do stuff like var name = cPrompt("Whats your name") however to close the custom prompt I must use an event to trigger a function called ok() when a button is clicked. This inhibits me from returning the value directly from the cPrompt function. Can anyone figure out how I can do this? Here is my code:
HTML:
<html>
<head>
<title>Custom Prompt</title>
</head>
<body>
<p>content</p>
<button onclick="cPrompt('Message goes here')">Click me</button>
<div id="overlay"></div>
<div id="pBox">
<div id="cPromptOut" onclick="ok()"></div>
<input type="text" id="cPromptIn"/>
</div>
<link rel='stylesheet' href='customPrompt.css'/>
<script src='customPrompt.js'></script>
</body>
</html>
CSS:
#overlay{
width:100%;
height:100%;
position:fixed;
background-color:grey;
opacity:0.5;
z-index: 10;
display: none;
left:0;
top:0;
}
#pBox{
width:50%;
height:30%;
position:fixed;
background-color:red;
left:25%;
top:20%;
z-index: 11;
display:none;
}
#cPromptOut{
width:100%;
height:50%;
background-color: green;
z-index: 12;
text-align: center;
font-size: 1.5em
}
#cPromptIn{
width:100%;
height:50%;
border:1px solid black;
text-align: center;
font-size: 1.5em
}
JS:
var overlay = document.getElementById("overlay")
var pBox = document.getElementById("pBox")
var cPromptOut = document.getElementById("cPromptOut")
var In = document.getElementById("cPromptIn").value
function cPrompt(msg){
overlay.style.display = "block";
pBox.style.display = "block";
cPromptOut.innerHTML = msg;
}
function ok(){
overlay.style.display = "none";
pBox.style.display = "none";
}
console.log(cPrompt("enter you name"))
So right now I'm not able to collect the value in the box. Can anyone figure out how I can do this? Remember I want to be able to call it just like a prompt without having to use any other calls like console.log(cPrompt("say something")). I might be trying to over-think this or maybe its impossible, any ideas are welcome.
EDIT - ok so it won't be as simple as console.log(cPrompt('message')), but there is a kinda way to go about doing what you want. See this fiddle adapted from toby Ho's trampolines. I can't make it work in chrome for some reason, but firefox does the trick. the cool part is in main() (it will have to be inside a run(main()) call
function main(){
log('start listening');
log(yield prompt('hello'));//the code "seems" to halt here.
log('end script');
}
Again you're asking something quite hard so it won't be as easy as you would like it to be, but here it is. Also, it would've been cool to tell us what you had tried so far.
BEFORE EDIT :
At first glance I would say it is impossible. if your cPrompt() function holds the interpreter so it can return the user's input, I think th page will freeze. have you tried something like this?
//This will probably freeze the page
function cPrompt(_msg){
...//init the prompt
while( input == null){}//your prompt sets input in an event
return input;
}
The usual way to go about it is to pass a closure like this
function whenInput(_input){console.log(_input);}
cPrompt('message', whenInput);
Now, I'm thinking that there may be a way with the new generators in js 1.7.
So, what have you tried?
Related
How can I apply my div position x value to a variable? And how to iterate it in a for loop?
<div id="object"></div>
<style>
#object{
position:absolute;
width:10px;
height:10px;
background:#ff8800;
}
</style>
<script>
function play(){
// here how to Add my div position to a variable And Applaying of Iteration In Forloop
// how to change position Of Its in For loop
for(){
}
// I am Strucked At Here
}
</script>
Try This With Logic Of Play And Stop With Some UI Elements .
var speed = 5;
function play(){
if($("#object").data("play"))
{
setTimeout(function(){
var count = $("#object").position().left;
count += speed;
$("#object").css("left",count);
requestAnimationFrame(play);
},500);
}
}
$("#play").click(function(){
$("#object").data("play",true);
$('#object').css('background','green');
play();
$('#stop').css('display','block');
});
$("#stop").click(function(){
$("#object").data("play",false);
$('#object').css('background','#ff8800');
$('#stop').css('display','none');
});
input
{
position:absolute;
width:50px;
height:25px;
top:100px;
}
#play
{
background:green;
border:none;
color:#fff;
border-radius:15px;
left:35px;
}
#stop
{
background:#ff8800;
border:none;
border-radius:15px;
color:#fff;
left:35px;
display:none;
}
#object{
position:absolute;
width:10px;
height:10px;
background:#ff8800;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="object"></div>
<input id="play" type="button" value="play">
<input id="stop" type="button" value="stop">
You can't achieve this using the for loop and setting new position of the div here. This is due to the fact, that JavaScript is single-threaded. I suggest you to read the answer to this question, it describes the problem quite well.
To somehow 'unblock' the thread you can use setTimeout calls and set new position in their callbacks. See the fiddle I've created for you to show you this method in action. This is a kind of a workaround of JS limitations but it works. As described in the answer I linked in the previous paragraph:
The idea behind it is that you give the UI some time to update every once in awhile. Since there's no synchronous sleep function in Javascript, the only way to achieve this is to use setTimeout (or setInterval with a little bit more complicate logic) to delay the execution of every loop of your complex calculations. This would give the browser some time to update the UI between loops, giving the visual effect of multiple things happening simultaneously. A few ms should be more than enough for the UI to reflect the latest changes.
However, the best way to do animations on web pages is by using CSS transitions. Just in case you are not limited to doing it in JS, I've created a fiddle to show you this solution as well (see how smooth the animation is).
Further reading:
What the heck is the Event Loop anyway? - a great video by Philip Roberts, which will clarify, how the JS thread works and why using setTimeout 'solves' the problem
CSS transitions # W3Schools
Smooth and efficient web animations - do's and don'ts
try this...
<!DOCTYPE HTML>
<html>
<head>
<title>testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="object"></div>
<input id="play" type="button" value="play">
<input id="stop" type="button" value="stop">
<style>
input
{
position:absolute;
width:50px;
height:25px;
top:100px;
}
#play
{
left:35px;
}
#stop
{
left:100px;
}
#object{
position:absolute;
width:10px;
height:10px;
background:#ff8800;
}
</style>
<script>
var _speed = 5;
function play(){
if($("#object").data("play"))
{
var _x = $("#object").position().left;
_x += _speed;
$("#object").css("left",_x);
requestAnimationFrame(play);
}
}
$("#play").click(function(){
$("#object").data("play",true);
play();
});
$("#stop").click(function(){
$("#object").data("play",false);
});
</script>
</body>
</html>
I am new to jquery and have problem with one part of my script. basically I am making dropdown div when mouse is over the button, but div starts moving up and down like crazy. here is what i have done: `
<script type="text/javascript">
public var boolean opened = false;
$("#drop1").slideUp();
$("#first").mouseover(function(){
$("#drop1").slideDown();
});
$("#first").mouseout(function(){
$("#drop1").slideUp();
});
});
also I tried using boolean variable but it gives me error.
<script type="text/javascript">
$(document).ready(function(){
public var boolean opened = false;
$("#drop1").slideUp();
$("#first").mouseover(function(){
if(!opened){
$("#drop1").slideDown();
opened = true;
}
});
$("#first").mouseout(function(){
if(opened){
$("#drop1").slideUp();
opened = false;
}
});
});
here is HTML if you want, but I think there is everything ok.
<link rel="stylesheet" type="text/css" href="design.css">
<div id="first" style="position: absolute; left: 0px;">
<a class="btn" href = "TheShooter/Launcher.exe" ><b>LAN shooter project</b></a>
<div id="drop1">
<em>shooter project main page</em> <br/>
info: Local Area Network multiplayer game, made with unity. Project not finished yet, but sometimes fun to play. <br/>
controls: walking: w,a,s,d<br/>
shoot: LMB.<br/>
zoom: RMB.
</div>
</div>
Thanks for any help.
--Nick.
So it looks like you might be more used to strongly typed languages like C#. JavaScript and its library jQuery are loosely typed, meaning you don't declare scope or type. Here's your code above cleaned up a bit to use correct syntax and solve the issues you're seeing:
$(document).ready(function(){
var opened = false;
// Instead of sliding this up, give the #drop1 element
// a property of display: none; to start - then remove the line below
$("#drop1").slideUp();
$("#first").mouseover(function(){
if(!opened){
// Below, I'm using a callback, which means the boolean
// won't update to true until after the animation is finished
$("#drop1").slideDown(400, function() {
opened = true;
});
}
})// Since it's the same element, we can chain events
.mouseout(function(){
if(opened){
// Another callback
$("#drop1").slideUp(400, function() {
opened = false;
});
}
}
});
});
Let me know if you have any questions about the above!
Hi please refer this fiddle which should answer your question. No need to add any boolean or conditional checking:
<div id="wrap">
<div id="text">text</div>
<div id="video">video</div>
and js
$(document).ready(function(){
$("#wrap").mouseover(function(){
$("#video").stop().slideDown("slow");
});
$("#wrap").mouseout(function(){
$("#video").slideUp("slow");
});
});
and css
#text
{
margin-top:20px;
float:center;
font:VNF-Museo;
font-size:40px;
color: #333;
margin-left:auto;
margin-right:auto;
border: 1px solid #000;
}
#video
{
display:none;
width:1024px;
height:278px;
border: 1px solid #000;
}
I think you should try something like this:
$(document).ready(function() {
$("#first").mouseover(function(){
$("#drop1").slideDown("slow");
});
$("#first").mouseout(function(){
$("#drop1").slideUp("slow");
});
});
See this example above, from the jQuery offical documentation, for more information:
http://api.jquery.com/mouseover/
http://api.jquery.com/mouseout/
Here is one more answer with live example,
$(document).ready(function(){
$("#drop1").mouseover(function(){
$("#first").slideDown("slow");
});
$("#drop1").mouseout(function(){
$("#first").slideUp("slow");
});
});
#first, #drop1 {
padding: 5px;
text-align: center;
background-color: #acacac;
border: solid 1px #c3c3c3;
}
#first {
padding: 50px;
display: none;
background-color: skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="drop1">Mouse over on panel to slide down</div>
<div id="first">Hello Stackoverflow ..!</div>
I have a website (html/css/javascript/php) on a WAMP server. The format is header. nav (on the left), section (to the right of the nav div). In the section I have a javascript 3 tabs container. I am pulling the info from a .php file and displaying the retrieved data in the textarea. The textarea is on a timer so each time new data is retrieved, a new textarea is created below the current textarea with the new data.
My problem, since Javascript is loaded into the page last, the textareas are positioned outside of the tabbed div container and run across all boundaries and borders.
How can I position the newly created textareas so they will appear and stay inside the first tab? Here is the code I am using so far. I have tried many solutions and none worked, even absolute positioning did not work.
<div id="section">
<!-- these are the tags ID and the href links back to itself, the page does not navigate forward or backward-->
<ul id="tabs">
<li>.........Orders Placed</li>
<li>.......Delivered</li>
<li>.......Cancelled</li>
</ul>
<div class="tabContent" id="order" style="max-height:800px;overflow-y:scroll;border:1px solid red;">
<div>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript" >
function myFunction() {
var x = document.createElement("TEXTAREA");
var t = document.createTextNode("<?php include('NewIncomingOrders.php')?>");
x.appendChild(t);
document.body.appendChild(x);
setTimeout(myFunction, 9000);
}
</script>
</div>
</div>
and the css I have tried: more than on way here, and I could not get any of them to work. I have a button included in the code to start the timed function.
TEXTAREA{
width:80em;
height:4em;
border: 1px solid #FFFFFF;
position:static;
left: 195px;
top: 1px;
}
OR THIS METHOD:
.section{
position:relative;
height:200px;
width:400px;
background-color:blue;
}
.tabContent{
position:absolute;
bottom:2px;
left:2px;
right:2px;
}
.tabContent textarea{
width:100%;
height:30px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
If anyone has an idea how to position the textarea so that it stays within the tab, or hints on what direction to go, please let me know!
Here is a picture to let you know what I mean.
Tab_Not_Working:
Dan O put me on the right path. I got it working:
<script type="text/javascript" >
function myFunction() {
var x = document.createElement("TEXTAREA");
var t = document.createTextNode("<?php include('NewIncomingOrders.php')>");
x.appendChild(t);
document.getElementById("order").appendChild(x);
setTimeout(myFunction, 9000);
}
</script>
I have a html/JavaScript project that i am working on and i am encountering problems.
I am making a sign-up form for an email newsletter and i have it in a div element in the middle of a page like so:
(i know, its structure is really messed up but i am just playing around right now.)
<div id="overlay"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center><div id="nothin" class="form">Sign Up For Our Newsletter<br><br>
<table><TD width="50%" valign="middle"><img class="round"src="picture1.jpg" height="150" width="250"></td><td width="5%"></td><td width="40%" valign="middle"><form>
<input type="text" class="round"required id="name" width="190"><br><br>
<input type="email" class="round"required id="email" width="190"><br><br>
<input id="submit"type="submit" class="button"value="Submit Your Email" onclick="success()"><br>
</form></td></table></div></center></div>
The problem i have is i made the script below so when you submit you get a success message and a button that should close down the div, leaving the webpage:
<script>
function success()
{
document.getElementById("nothin").innerHTML="<div id='form2'>Success!<br><br>Thank You!<br> You have successfully signed up for the Our newsletter!<br><button onclick='hide()' class='button'>Continue</button></div>";
}
</script>
When you click on the button "continue" it should run the function "hide()":
<script>
function hide()
{
document.getElementById("overlay").innerHTML="";
}
</script>
My problem is that when the "continue" button is clicked, it only closes <div id="nothin>
not "overlay" like it should. Do you have any idea why? Should i use some other method to close it?
Here is the CSS for the form, it wont work that well without it:
<style>
#overlay {
z-index: 16777271;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.form, .form2{
background-color:white;
color:black;
width:500;
height:250;
align:center;
border-radius: 40px;
border:dashed darkgreen;
}
.round{
border-radius:8px;
}
.button{
background-color:green;
border-color:green;
border-radius:45px;
height: 40px;
width:190px;
}
.BUTTON:HOVER{
background-color:darkgreen;
border-color:darkgreen;
border-radius:45px;
}
</style>
In the hide() function you are making the contents of "#overlay" element empty while element itself, remains.
One solution can be hiding the element.
This should work -
function hide(){
document.getElementById("overlay").style.visibility = 'hidden';
/*
//or setting the display to none
document.getElementById("overlay").style.display = 'none';
*/
}
Suppose you have a html code like
<div id ='parentWow'>
<div id='ChildHello'>
Some Content
<div>
</div>
If you want to remove the child of id "ChildHello" from the parent, instead of just making their visibility "hidden", you can use the following javascript
document.getElementById("ChildHello").parentNode.removeChild(document.getElementById("ChildHello"))
This helps... (y)
First off, hello! I'm new to this website so I apologize for any errors that I make posting-wise.
I am in a web technology class where we are learning JavaScript. In a previous class we learned HTML5 and CSS. Our current assignment is to make a webpage that will either display 1 of 3 images or no images when the user enters the corresponding word in the prompt window.
I was wondering if there was a way to account for user-entered typos? For example, I have in the code "Spn" but was wondering if there was a way to easily make it so that if a user were to enter "Son" by mistake, they would still be shown the image.
Is there a way to do this without having to add a separate if statement?
Below is the code I have so far, which includes my little "test" to see if I could do this. I thought it had worked when I only had two items (ex: "Spn, "spn"), but when I added a third it stopped working, and now it isn't working again. I may have very well been mistaken that there was ever a success, though.
Oh, also, we are only allowed to use JavaScript, HTML, and CSS. So if you have a solution that is jquery (I have no idea what that is), then thank-you, but I'm afraid I can't use it.
Please let me know if there is any other information that you need and I will gladly supply it to you. Thank-you very much for your help, I very much appreciate it!
-Carly
JavaScript Code (file name is switch.js):
var temp = "None";
function choose()
{
temp = prompt("Spn, DW, SH, or None?");
if (temp == "Spn","spn")
{
document.getElementById("picture").src="first.jpg";
document.getElementById("sub").innerHTML="Supernatural";
document.getElementById("picture").style.visibility="visible";
};
if (temp == "DW","dw","Dw")
{
document.getElementById("picture").src="second.jpg";
document.getElementById("sub").innerHTML="Doctor Who";
document.getElementById("picture").style.visibility="visible";
};
if (temp == "SH","sh","Sh")
{
document.getElementById("picture").src="third.jpg";
document.getElementById("sub").innerHTML="Sherlock";
document.getElementById("picture").style.visibility="visible";
};
if (temp == "None","none")
{
document.getElementById("picture").src="blank.jpg";
document.getElementById("sub").innerHTML="Click button to reveal image";
document.getElementById("picture").style.visibility="hidden";
};
}
HTML Code (file name is userchoice.html):
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="switch.js"></script>
<title>What is this not working I'm going to cry</title>
</head>
<body>
<h1>SuperWhoLock</h1>
<h2 id="sub">Click button to reveal image</h2>
<div id="picblock">
<img src="blank.jpg" id="picture">
</div>
<div id="buttons">
<button onclick="choose()">Choose Picture</button>
</div>
</body>
</html>
CSS code (the file name is style.css):
body
{ background-image:url('background.jpg');
}
h1
{ width: 25%;
text-align: center;
margin-left: auto;
margin-right: auto;
background: black;
color: white;
}
h2
{ width: 25%;
text-align: center;
margin-left: auto;
margin-right: auto;
background: white;
color: black;
}
#picblock
{ width: 25%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#picture
{visibility:hidden;
}
#buttons
{ text-align: center;
margin-left: auto;
margin-right: auto;
}
Barring the foray into putting intelligence in the code, I will give a rather simplistic approach, detailed below:
Since you are the one who is deciding that "Son" should pull up the image ideally meant for "Spn", we should use a mapping that is created by you yourself. We can have something like this:
`
var spn = "Spn", dw ="DW",sh="SH";
//creating a custom mapping
var dict = {
"Son":spn,
"Sln":spn,
"Spn":spn,
"DW":dw,
"DE":dw,
"SH":sh
}
//Your if would look like:
temp = (dict && dict[temp])?dict[temp]:null;
if (temp && temp.toLower() == "spn")
`
2. For creating that dictionary, you will just have to consider the characters around the letter that you are typing.
Note: This approach assumes you have only these three things to compare. If you want a more generic solution that should work beyond Spn,DW,SH, None, please let me know.