Here is a sample of our project which involves counting votes, the problem is that we implemented a pop-up window thus clicking a submit button to be able to vote (which is in the pop-up window) well what our problem is that we need to increment or rather add +1 vote to the university or whatsoever you choose and we ask for help how can we do that with a pop-up window. (There is a table for the name of the university then for counting of votes)
Here is the html if you wanna try it:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pass</title>
<link rel="stylesheet" href="popup.css" type="text/css" />
<link rel="stylesheet" href="smbtable1.css" type="text/css" />
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div id="container">
<div id="menu">
<center></center>
</div>
<div id="header">
<div id="logo">
<tr>
<td width="143">Blah Blah University</td>
<td width="131" colspan="3">0</td>
</tr>
</div>
<div id="dj"></div>
<div id="welcome">
</div>
<div class="clear"></div>
</div>
<div id="middle"></div>
<div id="content">
<div class="clear">
<center>
<br>
VOTE FOR YOUR UNIVERSITY
<br>
<div id = "blanket" style = "display:none"></div>
<div id = "popUpDiv" style = "display:none">
<br>
Blah Blah University
<br><br>
<center><img src="+1Heart.jpg" width="97" height="100"/></center>
<br>
<br>
<br>
<br>
<br>
<br>
<left>
<form id="form1" name="form1" method="post" onclick="popup('popUpDiv')">
<label>
<input type="submit" name="vote" id="vote" value="Vote for Blah Blah" />
</label>
</form>
</div>
<a class = "opacity-1">
<img src="+1Heart.jpg" width="105" height="108" onclick = "popup('popUpDiv')"/></a>
</body>
</html>HERE IS THE JAVASCRIPT OF THE POP UP WINDOW
JS
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
var popUpDiv2 = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-150; ///150 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-150; ///150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}CSS of the POP UP WINDOW
CSS
#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
border: 5px solid #FFF;
background-color: #000;
font-family:Verdana, Geneva, sans-serif;
color:#0C3;
width:300px;
height:300px;
z-index: 9002;
}Note: there is not only 1 example can it also be done with many selections? Thanks and JS and CSS are not from us, found it through Google