Member Avatar for ekseks

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

Edited by ekseks because: n/a
  • 2 Contributors
  • 3 Replies
  • 148 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by ekseks

Recommended Answers

All 3 Replies

Member Avatar for rajarajan2017

Instead of display 0 have a textbox:

<tr>
<td width="143">Blah Blah University</td>
<td width="131" colspan="3"><input type="text" name="inc" value="0"></td>
</tr>

//Have another method call:

<form id="form1" name="form1" method="post" onclick="inc()">

//Process the updation

<script language="javaScript">
function inc(){
 //find the element
 //update the value by 1 
</script>
Member Avatar for ekseks

where will i put the other method (form) and will you please tell us the code for the other function we just need to get this done right now thanks

Member Avatar for ekseks

can anyone help?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.