Scratch
archived forums
#1 2011-08-25 22:38:42
javascript pop-up in self dialog <- Go Everywhere web app help
I am developing the Go Everywhere web app, and I want it to be much like a native app (installed) on the ios. In Javascript, I can do this for alerts:
Code:
window.alert("text text text");and this for single line prompts:
Code:
window.prompt("prompt text", '');BUT I have another thing I want to do. On native apps, there are alerts that are multi text inputs forms (ex. for logging in to stuff) and as far as I know, javascript has no way to do those kind of dialogs.
I need help with this. I need people to give codes to help with it. The codes I need are:
Javascript <- for the popup. You can use jQuery and jqTouch
CSS <- to make it look like a dialog using css3
If you think that I am too lazy to do the work alone, then your wrong. I am just trying to get the code. I will post codes here too.
I am currently
Offline
#2 2011-08-26 01:07:48
Re: javascript pop-up in self dialog <- Go Everywhere web app help
I found out how to make the pop up. Here is the html of the page:
Code:
<html>
<head>
<title>Dialog pop-up test</title>
<style type="text/css">
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #FFF;
border:1px solid black;
padding:15px;
text-align:center;
}
</style>
<script type="text/javascript" language="JavaScript">
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>
<body>
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
<p>
Click here to [<a href='#' onclick='overlay()'>close</a>]</p>
</div>
</div>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
<h1>
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
.......................................................
</h1>
</body>
</html>the .....................s are too see if the pop up will go over elements.
I STILL NEED HELP WITH THE CSS!!
Please help, I'm not very good with css.
I need a tiny little bit of fade (the gost effect in scratch) so that you can barely see the page behind the popup. Is this possible with css, or do you need javascript? Please give me the code, thank you.
I am currently
Offline
#3 2011-08-26 04:00:46
Re: javascript pop-up in self dialog <- Go Everywhere web app help
I know the CSS transparency bit for you!
Just set its CSS style to opacity: 0.9; and it should give it a 10% ghost.
It can be inline or in a separate CSS style.
Offline
#4 2011-08-26 14:20:55
Re: javascript pop-up in self dialog <- Go Everywhere web app help
LS97 wrote:
I know the CSS transparency bit for you!
Just set its CSS style to opacity: 0.9; and it should give it a 10% ghost.
It can be inline or in a separate CSS style.
thanks. I'll add that to the code. I'm doing a inline for tests, but seperate for the final product to save programming space.
I am currently
Offline
#5 2011-08-26 14:24:21
Re: javascript pop-up in self dialog <- Go Everywhere web app help
GP1 wrote:
LS97 wrote:
I know the CSS transparency bit for you!
Just set its CSS style to opacity: 0.9; and it should give it a 10% ghost.
It can be inline or in a separate CSS style.thanks. I'll add that to the code. I'm doing a inline for tests, but seperate for the final product to save programming space.
Yeah. By inline I meant using the 'style' property though, not the tag 
Offline
#6 2011-08-26 14:31:53
Re: javascript pop-up in self dialog <- Go Everywhere web app help
LS97 wrote:
GP1 wrote:
LS97 wrote:
I know the CSS transparency bit for you!
Just set its CSS style to opacity: 0.9; and it should give it a 10% ghost.
It can be inline or in a separate CSS style.thanks. I'll add that to the code. I'm doing a inline for tests, but seperate for the final product to save programming space.
Yeah. By inline I meant using the 'style' property though, not the tag
its the same thing........ basicly. I do the <style type="text/css"></style> tags for inline.
I am currently
Offline
#7 2011-08-26 14:35:10
Re: javascript pop-up in self dialog <- Go Everywhere web app help
GP1 wrote:
LS97 wrote:
GP1 wrote:
thanks. I'll add that to the code. I'm doing a inline for tests, but seperate for the final product to save programming space.Yeah. By inline I meant using the 'style' property though, not the tag
its the same thing........ basicly. I do the <style type="text/css"></style> tags for inline.
I meant <span style=""> </span>
Offline