JavaScript PopUp

Forum Moderators: open

Message Too Old, No Replies

JavaScript PopUp

andrewsmd

6:57 pm on Apr 1, 2009 (gmt 0)

I would like to have a small form about the quarter size of a page popup when you click a link. I don't want it to look like a new page or window more like just a dropdown menu almost. However, it needs to be able to pass data to a php script that will run on the form. I'm not really for sure the best way to go about this. Does anyone have any suggestions. How I have it working right now is the link is generated with php and some get data i.e. <a href='newLink.php?newID=3'>new</a>
Should I be using CSS instead and make a div that is initially hidden? Thanks,

whoisgregg

9:48 pm on Apr 1, 2009 (gmt 0)

Using CSS to absolutely position an <iframe> is a common solution to this need. Then the javascript only needs to toggle the element.style.display between 'none' and 'block' to make the <iframe> appear.

If you run into trouble implementing this, feel free to post back with the code that's causing trouble and we'll do our best to help. :)

andrewsmd

2:07 pm on Apr 2, 2009 (gmt 0)

Ok so I'm just learning the iframe. When I give it an ID like myFrame can I just define

#myFrame{
all of my properties
}

in my css file
Also I want this iframe to show up like 10 px to the left and 10px down from a specific link how would I position that. We recently lost our front end designer at my job so i'm new to all of this formatting stuff. Thanks,

Dsgnr

2:51 pm on Apr 2, 2009 (gmt 0)

I think you can create it with DHTML

andrewsmd

3:19 pm on Apr 2, 2009 (gmt 0)

I'm working on it. I'll let you know if I have any problems. The most difficult part of this for me is I can't even draw a stick person so making things look pretty is a challenge for me.

andrewsmd

4:30 pm on Apr 2, 2009 (gmt 0)

So I may have found a different way but I'm having a few problems. I am setting a div to hidden and then showing it with JS. My first problem is, I cannot set the size of the div no matter what settings I give it, it is just the size of the HTML within the div. My second problem is I want it to display over the top of my other html, and this just moves all of the html to make room for it. Here is my code.

test.php (theres no php yet)
<html>
<head>
<link rel= StyleSheet href="test.css" type="text/css">
<script id="clientEventHandlersJS" language="javascript">
<!--
function Show()
{
var tDiv = document.getElementById("dvSample");
tDiv.style.visibility="visible";
tDiv.innerHTML = "hello world";

}

//-->
</script>
</head>
<form id="form1">
<body>
<center><input type="button" value="Show" id="Button1" name="Button1" onclick="Show()"></center>
<center>
<div id="dvSample">
</div>
Some other text
</center>
</form>
</body>
</html>

test.css
#dvSample{

display: inline;
visibility: hidden;
background-image: url("images/br_paper.jpg");
height: 300em;
width: 300em;

}

for some reason its just as big as hello world. Also it moves Some other text. How do I make it just display overtop of everything and be a set size? Thanks

whoisgregg

5:20 pm on Apr 2, 2009 (gmt 0)

Try something along these lines for the javascript:

function Show() 
{ 
var tDiv = document.getElementById("dvSample"); 
tDiv.style.display="block"; 
tDiv.innerHTML = "hello world";
}

And these for the css:

#dvSample{
background-image: url("images/br_paper.jpg"); 
position: absolute;
top: 3em;
left: 50%;
margin-left: -150em;
height: 300em; 
width: 300em;
}

And declare the display:none; on the div itself:

<div id="dvSample" style="display: none;">

andrewsmd

1:02 pm on Apr 3, 2009 (gmt 0)

nevermind I got it