|
JavaScript - How To Create A Voting System?
I run a site on tumblr. I know its not as good as wordpress and doesn't allow as many options but I am looking to create a unique voting option for each post. Like an up down vote. Any ideas on how to set this up? Can it be done?
Thanks, Thomas Similar TutorialsAll, Does anyone know a good example on where to find something that when I click on vote it calculates the results and then shows me horizontal bars to show the percentage for each vote? There will only be two? Thanks in advance. Hello, I am new to this forum and hope this is in the right place but I have been trying to code (with no success) a voting system with PHP/MySql and jQuery for a clients webpage and am about to throw my computer out the window. Any help/advice would be appreciated, heres my dilemma. I need to create a simple system where a viewer can vote (only one vote) between two options (only 2). Example: [heading]Do you brush your teeth [radio button]Option 1: Yes [radio button]Option 2: no [submit] upon submission jQuery would then show the results without leaving the page. there is also 16 things to vote on per page (i dont know if this changes anything) Thanks in advance, J I'm having trouble duplicating my working voting function code. It only works with one copy, but once I copy and paste it into a second copy it seizes it to work no matter what I do even if I change the name, value, class or id names. If I press the vote up or vote down button it affects only one of the copies Here is an incomplete fiddle that need some troubleshooting: Edit fiddle - JSFiddle Help me figure out how to get an independent second copy of the following code: Javascript: Code: $(document).ready(function() {
$('.vote').click(function() {
$('img', this).attr('src', function(i, oldSrc) {
return oldSrc == 'voteup.png' ? 'votedown.png' : 'voteup.png';
});
$('.voteswitch').toggle(400);
return false;
});
});
function showMessage(which) {
if (which == 1) {
document.getElementById("voteup").style.display = "block";
document.getElementById("votedown").style.display = "none";
document.getElementById("notrated").style.display = "none";
}
else {
document.getElementById("voteup").style.display = "none";
document.getElementById("votedown").style.display = "block";
document.getElementById("notrated").style.display = "none";
}
}
HTML: Code: <!-- Voting-->
<div class="votesystem">
<input name="vote" class="voteup" type="radio" value="Yes" onclick = "showMessage(1)"/>
<label class="voteup-label" for="voteup"></label>
<!--Vote Number-->
<div class="votenumber">
<div id="voteup" style="display:none">100<span class="percentagesign">%</span></div>
<div id="notrated">Not Rated</div>
<div id="votedown" style="display:none">0<span class="percentagesign">%</span></div>
</div><!--End Votenumber-->
<input name="vote" class="votedown" type="radio" value="No" onclick = "showMessage(2)"/>
<label for="votedown"></label>
<p class="votecounter">0 Votes</p>
</div><!--End Voting-->
CSS: Code: .votesystem { display:inline-block; list-style-type: none; padding-top:3px; border-left:#000 1px solid; border-bottom:#000 1px solid;width:85px; text-align:center; height:107px; float:right; position:relative; }
input.voteup a {
background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1');
background-repeat: no-repeat;
overflow: hidden;
display: block;
margin: 0 auto;
width: 41px;
height: 25px;
}
input.voteup[type="radio"]{
opacity: 0; right:33px; margin-top:7px;
position:absolute; cursor:pointer;
}
input.voteup[type="radio"]+label{
background:: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); background-position: 0px -230px; padding-left:40px; padding-bottom:10px;
}
input.voteup[type="radio"]:checked+label{
background: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); background-position: 0px -230px;
}
input.voteup[type="radio"]:hover+label{
background: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); padding-left:40px; padding-bottom:10px; background-position: 0px -230px;
}
input.votedown[type="radio"]{
opacity: 0; right:33px; margin-top:-5px;
position:absolute; cursor:pointer;
}
input.votedown[type="radio"]+label{
background: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); background-position: 0px -300px; padding-left:40px; padding-top:9px;
}
input.votedown[type="radio"]:checked+label{
background: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); background-position: 0px -330px; padding-left:40px; padding-top:9px;
}
input.votedown[type="radio"]:hover+label{
background: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); padding-left:40px; padding-top:9px; background-position: 0px -330px;
}
.votenumber { color:#666; font-size:22px; margin:0; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:42px; padding-top:5px; padding-bottom:2px; }
#notrated { font-size:15px; color:#999; }
#voteup { margin-left:-2px;}
#votedown { margin-left:-2px;}
.percentagesign { font-size:15px; margin-top:-3px; position:absolute; }
.contentarea { width:100%; height:100%; background-color:#CF3; display:block; }
.votecounter { position:relative; top:8px; color:#000; font-family:Tahoma, Geneva, sans-serif; font-size:12px; }
Voting button on the poll in the left column works fine if you take the sharethis javascripts out. Why won't they work together though? <script type="text/javascript" src="http://www.claimsheaven.co.uk/polls/admin/script.js"></script> <script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript" src="http://s.sharethis.com/loader.js"></script> e.g. on this page: http://www.claimsheaven.co.uk/news/20120305.php Hi all. I'm coding a javascript game, and need to know how I can take this heart image, split it up frame by frame, and make it display 20 full hearts. then if i click the mouse, it will remove the top-right of the heart, followed by the bottom right, followed by the bottom left, followed by the top left of the heart. when it removes a part of the heart, it instead displays part of the "empty" frame of the heart. code: Code: <script>
//2d rpg
var max = 20;
var img = "hearts.png";
hearts(max);
function hearts(max){
for(var i = 0; i<=max-1;i++){
document.write('\<img src\=\''+img+'\'\>\<\/img\>');
}
}
</script>
ANY help is GREATLY appreciated! Hello Is there any Rating System based on java or ajax for free.. hi guys im new here. i need some help at a battle system java script im working at a wbmmorpg game and im stuck at the battle system i dont know how to make that script i tryed some methods but all were wrong. i want the battle script to calculate the following procedu attack vs deffense inteligence vs intelligence agillity vs agillity those attributes are taken from MySQL database. can you please explain or make the script for that combination or at least for one. i appreciate it thanks Hello there I am creating a website for a friend where the user cant can choose what jobs they want to do while a event. There a are more than 300 people involved so i found a script that worked fine but it used some checkboxes, and I wat to use drop down menu (one drop down menu for every day of the event). With the checkboxes it worked fin but when I modifie the part to insert the dropdown menu and that on my webpage I choose a job and then i send it and it tells me that I haven't selected anything. I already lost 3 days of work triing to make it work but nothin succesfull.. This is the PHP code of the webpage: PHP Code: <?php include("login.php"); ?> <html> <head> <title>Tickets</title> <style> * { font-size: 11px; font-family: arial; } </style> <script> function reserveSeats() { var selectedList = getSelectedList('Reserve Seats'); if (confirm('Do you want to reserve selected seat/s ' + selectedList + '?')) { document.forms[0].oldStatusCode.value=0; document.forms[0].newStatusCode.value=2; document.forms[0].action='bookseats.php'; document.forms[0].submit(); } else { clearSelection(); } } function getSelectedList(actionSelected) { // get selected list var obj = document.forms[0].elements; var selectedList = ''; for (var i = 0; i < obj.length; i++) { if (obj[i].checked && obj[i].name == 'seats[]') { selectedList += obj[i].value + ', '; } } // no selection error if (selectedList == '') { alert('Please select a seat before clicking ' + actionSelected); return false; } else { return selectedList; } } function refreshView() { clearSelection(); document.forms[0].action='<?php echo $_SERVER['PHP_SELF']; ?>'; document.forms[0].submit(); } </script> </head> <body> <table> <tr><td width="100%" align="center"> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <input type="hidden" name="oldStatusCode" value=""/> <input type="hidden" name="newStatusCode" value=""/> <table width='100%' border='0'> <tr><td align='center'> <input type='button' value='Refresh View' onclick='refreshView();'/> </td></tr> </table> </td></tr> <tr><td width="100%" align="center"> <table width='100%' border='0'> <tr><td align='center'> <input type='button' value='Reserve Seats' onclick='reserveSeats()'/> </td></tr> </table> </td></tr> <tr><td width="100%" align="center"> <select> <?php $linkID = @ mysql_connect("......", ".....", ".....") or die("Could not connect to MySQL server"); @ mysql_select_db("......") or die("Could not select database"); /* Create and execute query. */ $query = "SELECT * from seats order by rowId, columnId desc"; $result = mysql_query($query); $prevRowId = null; $seatColor = null; $tableRow = false; //echo $result; while (list($rowId, $columnId, $status, $updatedby) = mysql_fetch_row($result)) { if ($prevRowId != $rowId) { if ($rowId != 'A') { } $prevRowId = $rowId; } else { $tableRow = false; } if ($status == 0) { $seatColor = "lightgreen"; } else { $seatColor = "red"; } if ($status == 0 || ($status == 1 && $updatedby == $_SERVER['PHP_AUTH_USER'])) { echo "<option name='seats[]' value='$rowId$columnId'>$rowId$columnId</option>"; } } echo "</tr></table></td>"; echo "</tr>"; echo "</table>"; /* Close connection to database server. */ mysql_close(); ?> </select> </td></tr> </table> </form> </body> </html> There is an atatchment of the webpage in a browser. I hope someone out there can help me figure out the probleme. Thanks alot Joris I have both the java script and the php files, i just need to intergrate them into eachother to display the different topics and forums: New Forum: index.php : PHP Code: <?php include('../includes/db_connect.php'); include('../includes/inc-logincheck.php'); include('../includes/inc-functions.php'); include('../includes/inc-userfunctions.php'); include('../includes/inc-menu.php'); //include('../includes/smile.php'); $strTitle='Forum'; $strMessage=''; $intUserID=$_SESSION['uID']; $fetch=$user; ////include('../includes/forumhead.php'); $forum=$_GET['forum']; $viewtopic = $_GET['viewtopic']; if ($crew == "0"){ $query="SELECT * FROM `topics` WHERE `forum`='$forum'"; } $query=mysql_query("$query"); $num=mysql_num_rows($query); $col="0"; while($fo=mysql_fetch_object($query)){ if ($col=="0"){ $td="#444444"; $col="1"; }else{ $td="#555555"; $col="0"; } $hehe=mysql_num_rows(mysql_query("SELECT * FROM replys WHERE idto='$fo->id'")); } ?> <link rel="stylesheet" type="text/css" href="../includes/forum.css"> <td width="99%" background="../game/site/site/innerbg.gif" bgcolor="#222222" valign="top"> <br> <center> <table border="0" cellspacing="0" cellpadding="10" width="100%" class="cat"> <tr> <td> <script language='JavaScript' type='text/javascript' src='../includes/scripts/autosize.js'></script> <script> var box = 'reply'; var oldTopic = 5; var muted = 'no'; var set = 0; function parseUrl(url,variable){ var theurl = url.split('?'); if(theurl[1]){ pars = theurl[1].split('&'); for(i = 0; i < pars.length; i++){ var check = pars[i].split('='); if(check[0] == variable){ return check[1]; } } } return false; } function keepRefreshed(){ if(set == 0){ refresher = setTimeout("keepRefreshed()", 60000); allowButton = setTimeout("allowRefresh()", 3000); set = 1; } else { refreshTopics(); } } function allowRefresh(){ document.replyForm.refreshButton.disabled = false; } function refreshTopics(hl){ if(set == 1){ clearTimeout(refresher); clearTimeout(allowButton); } document.replyForm.refreshButton.disabled = true; refresher = setTimeout("keepRefreshed()", 60000); allowButton = setTimeout("allowRefresh()", 3000); if(document.replyForm.editIt.value == 'x'){ currentTopics = self.frames['topicsFrame'].location.href; var page = parseUrl(currentTopics, 'page'); var forum = parseUrl(currentTopics, 'forum'); var flag = parseUrl(currentTopics, 'flag'); if(flag){ add = '&flag=' + flag; } else { add = ''; } if(!page){ page = 1; } if(!forum){ forum = 1; } if(!hl){ hl = oldTopic; } self.frames['topicsFrame'].location.href = 'topics.php?forum=' + forum + '&default=' + oldTopic + '&page=' + page + '&hl=' + hl + add; } } function updateBox(id){ oldTopic = id; if(document.replyForm.editIt.value != 'x'){ document.replyForm.editIt.value = 'x'; document.replyForm.topicSubject.disabled = false; document.replyForm.selectedFlag.disabled = false; document.replyForm.submitTitle.value = 'Add!'; switchBox(true); } else { if(box == 'reply'){ document.replyForm.replyTo.value = id; document.replyForm.action = 'view.php?id=' + id + '&forum=' + 1; } } } function emotion(em){ document.replyForm.replyMes.value = document.replyForm.replyMes.value + em; document.replyForm.replyMes.scrollTop = document.replyForm.replyMes.scrollHeight; } function editThread(id, flag, points){ mes = self.frames['repliesFrame'].document.getElementById('topicMessage').value; sub = self.frames['repliesFrame'].document.getElementById('topicSubject').innerHTML; var replyform = document.replyForm; if(box == 'reply'){ switchBox(); } document.getElementById('topHeader').innerHTML = 'Edit thread'; replyform.topicSubject.value = sub; replyform.topicSubject.disabled = true; replyform.replyMes.value = mes; replyform.replyMes.focus(); replyform.editIt.value = id; replyform.selectedFlag.value = flag; replyform.selectedFlag.disabled = true; checkPoints(); replyform.addPoints.value = points; replyform.submitTitle.value = 'Edit!'; } function addQuote(type, username, id){ if(type == 'topic'){ quote = self.frames['repliesFrame'].document.getElementById('topicMessage'); } else { quote = self.frames['repliesFrame'].document.getElementById('quote_' + id); } format = '[quote=' + username + ']' + quote.innerHTML + '[/quote]\n\n'; document.replyForm.replyMes.value = document.replyForm.replyMes.value + format; document.replyForm.replyMes.scrollTop = 0; document.replyForm.replyMes.scrollTop = document.replyForm.replyMes.scrollHeight; } function switchBox(c,k){ if(document.replyForm.editIt.value != 'x'){ updateBox(oldTopic); return; } if((box == 'reply') && (!k)){ document.replyForm.action = 'topics.php?forum=1'; document.replyForm.target = 'topicsFrame'; document.replyForm.replyTo.value = 'x'; document.getElementById('topHeader').innerHTML = 'New topic'; document.getElementById('title').innerHTML = 'Add reply'; document.getElementById('topicTitle').style.display = 'block'; if(1 == 1){ document.getElementById('flagBox').style.display = 'block'; } box = 'topic'; } else { if(c){ document.replyForm.topicSubject.value = ''; document.replyForm.replyMes.value = ''; document.replyForm.addPoints.value = ''; document.replyForm.selectedFlag.value = 1; if(k){ url = 'topics.php?forum=1&hl=' + k; if(1 == 1){ if(document.replyForm.forumFilter.value){ url = url + '&flag=' + document.replyForm.forumFilter.value; } } self.frames['topicsFrame'].location.href = url; } } document.replyForm.action = 'view.php?id=' + oldTopic + '&forum=' + 1; document.replyForm.target = 'repliesFrame'; document.replyForm.replyTo.value = oldTopic; document.getElementById('topHeader').innerHTML = 'Add reply'; document.getElementById('title').innerHTML = 'Add topic'; document.getElementById('topicTitle').style.display = 'none'; document.getElementById('flagBox').style.display = 'none'; document.getElementById('addPoints').style.display = 'none'; box = 'reply'; } if(box == 'reply'){ updateButton(false); } else { checkPoints(); updateButton(true); } } function displayError(message){ if(message == 'clear'){ switchBox(true); document.getElementById('forumError').style.display = 'none'; document.getElementById('forumError').innerHTML = ''; } else { document.getElementById('forumError').style.display = 'block'; document.getElementById('forumError').innerHTML = message; } } var timel = 0; function countdown(){ timel -= 1; if(timel <= 0){ unMute(); } else { minutes = Math.floor(timel / 60); seconds = timel - (minutes * 60); document.getElementById('timeleft').innerHTML = '<b>Time left:</b> ' + minutes + ' minutes ' + seconds + ' seconds'; setTimeout("countdown()", 1000); } } function mutePlayer(muter, reason, post, timeleft){ muted = 'yes'; timel = timeleft; minutes = Math.floor(timeleft / 60); seconds = timeleft - (minutes * 60); document.getElementById('muteBox').innerHTML = 'You are unable to post because you have been muted by: <a href="viewprofile.php?viewuser=' + muter + '">' + muter + '</a><br><br><b>Reason:</b> ' + reason + '<br><div id="timeleft"><b>Time left:</b> ' + minutes + ' minutes ' + seconds + ' seconds</div><b>Post:</b><br>' + post; document.getElementById('replyBox').style.display = 'none'; document.getElementById('muteBox').style.display = 'block'; setTimeout("countdown()", 1000); } function unMute(){ muted = 'no'; document.getElementById('replyBox').style.display = 'block'; document.getElementById('muteBox').style.display = 'none'; } function checkPoints(){ var flag = document.replyForm.selectedFlag; if(flag.value == 13){ document.getElementById('addPoints').style.display = 'block'; } else { document.getElementById('addPoints').style.display = 'none'; } if(flag.value <= 3){ updateButton(true); } else { updateButton(false); } } function updateButton(upto){ if(1 == 1){ var button = document.replyForm.submitTitle; var flag = document.replyForm.selectedFlag; if((upto) && (flag.value <= 3)){ button.disabled = true; } else { button.disabled = false; } } } function updateFilter(){ var flag = document.replyForm.forumFilter.value; if(flag != 'void'){ url = 'topics.php?forum=1'; if(flag != 'all'){ url += '&flag=' + flag; } self.frames['topicsFrame'].location.href = url; } } function watchThread(){ url = 'topics.php?forum=1&hl=' + oldTopic + '&watch=' + oldTopic; if(document.replyForm.forumFilter.value){ url = url + '&flag=' + document.replyForm.forumFilter.value; } self.frames['topicsFrame'].location.href = url; } </script> <div id="forumError" display="none"></div> <center> <table border=0 cellspacing=0 cellpadding=2 width=99% bordercolor=black> <tr> <td width=40% valign=top class="insideTables"> <form name="replyForm" method="post" target="repliesFrame" action="view.php?id=5&forum=1"> <table border=1 cellspacing=0 cellpadding=2 width=100% class=sub2 bordercolor=black> <tr> <td align=center class=header><div id="topHeader">Add reply</div></td> </tr> <tr> <td> <div id="replyBox"> <div style="display:none;" id="topicTitle">Subject: <input type=text style="width:100%" name="topicSubject" maxlength=35><br>Message:<br></div> <textarea style="width:100%" rows=5 name="replyMes" style="white-space: normal;"></textarea> <div style="display:none;" id="flagBox"> <select style="width:100%;" name="selectedFlag" onChange="javascript:checkPoints()"><option selected value="1" style="background-color:#CDCDCD;">--- GAME RELATED ---</option> <option value="4" style="background-color:#69A16C;">Questions/Help</option> <option value="5" style="background-color:#69A16C;">Feature Discussion</option> <option value="6" style="background-color:#69A16C;">RIP/WS</option> <option value="7" style="background-color:#69A16C;">Bust Party</option> <option value="8" style="background-color:#69A16C;">Promotions</option> <option value="22" style="background-color:#69A16C;">Other</option> <option value="2" style="background-color:#CDCDCD;">--- OFF TOPIC ---</option> <option value="9" style="background-color:#CCAB6B;">Contests & Games</option> <option value="10" style="background-color:#CCAB6B;">Bars</option> <option value="11" style="background-color:#CCAB6B;">Rate THIS</option> <option value="21" style="background-color:#CCAB6B;">Sports</option> <option value="23" style="background-color:#CCAB6B;">Movies, Music & TV</option> <option value="24" style="background-color:#CCAB6B;">Other</option> <option value="3" style="background-color:#CDCDCD;">--- CLASSIFIEDS ---</option> <option value="13" style="background-color:#6B9FCC;">Points</option> <option value="14" style="background-color:#6B9FCC;">Crew</option> <option value="15" style="background-color:#6B9FCC;">Pictures & Music</option> <option value="16" style="background-color:#6B9FCC;">Casino</option> <option value="17" style="background-color:#6B9FCC;">Protection</option> <option value="18" style="background-color:#6B9FCC;">Organized Crime</option> <option value="19" style="background-color:#6B9FCC;">Establishment</option> <option value="20" style="background-color:#6B9FCC;">Other</option> </select> </div> <div style="display:none;" id="addPoints"> Verify: <input type=text name="addPoints" size=5> </div> <br> <input type=hidden name="replyTo"> <input type=hidden name="editIt" value="x"> <center> <a onclick="emotion(' :arrow: ')" style="cursor: pointer;"><img src="../game/emotions/arrow.gif" border=0 alt=":arrow:"></a> <a onclick="emotion(' :D ')" style="cursor: pointer;"><img src="../game/emotions/biggrin.gif" border=0 alt=":D"></a> <a onclick="emotion(' :S ')" style="cursor: pointer;"><img src="../game/emotions/confused.gif" border=0 alt=":S"></a> <a onclick="emotion(' 8) ')" style="cursor: pointer;"><img src="../game/emotions/cool.gif" border=0 alt="8)"></a> <a onclick="emotion(' :\'( ')" style="cursor: pointer;"><img src="../game/emotions/cry.gif" border=0 alt=":'("></a> <a onclick="emotion(' 8| ')" style="cursor: pointer;"><img src="../game/emotions/eek.gif" border=0 alt="8|"></a> <a onclick="emotion(' :evil: ')" style="cursor: pointer;"><img src="../game/emotions/evil.gif" border=0 alt=":evil:"></a> <a onclick="emotion(' :!: ')" style="cursor: pointer;"><img src="../game/emotions/exclaim.gif" border=0 alt=":!:"></a> <a onclick="emotion(' :idea: ')" style="cursor: pointer;"><img src="../game/emotions/idea.gif" border=0 alt=":idea:"></a> <a onclick="emotion(' :lol: ')" style="cursor: pointer;"><img src="../game/emotions/lol.gif" border=0 alt=":lol:"></a> <a onclick="emotion(' :mad: ')" style="cursor: pointer;"><img src="../game/emotions/mad.gif" border=0 alt=":mad:"></a> <br> <a onclick="emotion(' :?: ')" style="cursor: pointer;"><img src="../game/emotions/question.gif" border=0 alt=":?:"></a> <a onclick="emotion(' :redface: ')" style="cursor: pointer;"><img src="../game/emotions/redface.gif" border=0 alt=":redface:"></a> <a onclick="emotion(' :rolleyes: ')" style="cursor: pointer;"><img src="../game/emotions/rolleyes.gif" border=0 alt=":rolleyes:"></a> <a onclick="emotion(' :( ')" style="cursor: pointer;"><img src="../game/emotions/sad.gif" border=0 alt=":("></a> <a onclick="emotion(' :) ')" style="cursor: pointer;"><img src="../game/emotions/smile.gif" border=0 alt=":)"></a> <a onclick="emotion(' :o ')" style="cursor: pointer;"><img src="../game/emotions/surprised.gif" border=0 alt=":o"></a> <a onclick="emotion(' :P ')" style="cursor: pointer;"><img src="../game/emotions/toungue.gif" border=0 alt=":P"></a> <a onclick="emotion(' :twisted: ')" style="cursor: pointer;"><img src="../game/emotions/twisted.gif" border=0 alt=":twisted:"></a> <a onclick="emotion(' ;) ')" style="cursor: pointer;"><img src="../game/emotions/wink.gif" border=0 alt=";)"></a> <a onclick="emotion(' :tdn: ')" style="cursor: pointer;"><img src="../game/emotions/tdown.gif" border=0 alt=":tdn:"></a> <a onclick="emotion(' :tup: ')" style="cursor: pointer;"><img src="../game/emotions/tup.gif" border=0 alt=":tup:"></a> <br> <input type=submit value="Add!" name="submitTitle"> <input type=button value="Watch!" onClick="javascript:watchThread()"> <input type=button value="Refresh!" name="refreshButton" onClick="javascript:refreshTopics()"> </center> </div> <div id="muteBox" style="display:none;"></div> </td> </tr> <tr> <td align=center class=header>Topics (<a href="javascript:switchBox()" id="title">Add topic</a>)</td> </tr> <tr> <td> <select style="width:100%;" onChange="javascript:updateFilter()" name="forumFilter"> <option value="void" style="background-color:#CDCDCD;"> FILTER</option> <option value="all">View all</option> <option selected value="1" style="background-color:#CDCDCD;">--- GAME RELATED ---</option> <option value="4" style="background-color:#69A16C;">Questions/Help</option> <option value="5" style="background-color:#69A16C;">Feature Discussion</option> <option value="6" style="background-color:#69A16C;">RIP/WS</option> <option value="7" style="background-color:#69A16C;">Bust Party</option> <option value="8" style="background-color:#69A16C;">Promotions</option> <option value="22" style="background-color:#69A16C;">Other</option> <option value="2" style="background-color:#CDCDCD;">--- OFF TOPIC ---</option> <option value="9" style="background-color:#CCAB6B;">Contests & Games</option> <option value="10" style="background-color:#CCAB6B;">Bars</option> <option value="11" style="background-color:#CCAB6B;">Rate THIS</option> <option value="21" style="background-color:#CCAB6B;">Sports</option> <option value="23" style="background-color:#CCAB6B;">Movies, Music & TV</option> <option value="24" style="background-color:#CCAB6B;">Other</option> <option value="3" style="background-color:#CDCDCD;">--- CLASSIFIEDS ---</option> <option value="13" style="background-color:#6B9FCC;">Points</option> <option value="14" style="background-color:#6B9FCC;">Crew</option> <option value="15" style="background-color:#6B9FCC;">Pictures & Music</option> <option value="16" style="background-color:#6B9FCC;">Casino</option> <option value="17" style="background-color:#6B9FCC;">Protection</option> <option value="18" style="background-color:#6B9FCC;">Organized Crime</option> <option value="19" style="background-color:#6B9FCC;">Establishment</option> <option value="20" style="background-color:#6B9FCC;">Other</option> </select> </td> </tr> <tr> <td> <iframe width=100% height="357" src="topics.php?forum=1&flag=<?php echo "$forum"; ?>" frameborder="0" allowTransparency="true" name="topicsFrame" id="topicsFrame"></iframe> </td> </tr> </table> </form> </td> <td width=60% valign=top> <iframe width=100% height="590" src="view.php?forum=1&id=<?php echo "$viewtopic"; ?>" frameborder="0" id="repliesFrame" name="repliesFrame" allowTransparency="true"></iframe> </td> </tr> </table> </td> </tr> </table> </td> <?php include("/home/tacticsc/domains/360-tactics.co.uk/public_html/crimewave/includes/inc-footer.php"); ?> i will post the rest of the codes in comments below due to too many word count. if its not to hard please help me, i have put all the Javascript there and the php it just needs to be implimented, i have started some of it, such as getting the topics to display like so: its just when you click the topic it doesnt load into the right hand iframe and some other things like the reply box ect thanks. Dan Hi all, I am trying to achieve a star rating system (a simple one) without the need to store the data in a database... Basically I need 5 stars on the screen and for people to be able to click on those and them to turn yellow (i'm sure people have seen this before). I have had a go, substituting stars for radio buttons to try and get it going but I'm having problems getting it to work. This is what I have so far: Code: <script type="text/javascript">
var half_total = 0;
function recalculate(){
half_total = 0;
var el = document.getElementsByTagName('input');
for(i=0;i<el.length;i+=1){
if(el[i].className=="star_rating"){
if(el[i].checked){
if(parseInt(el[i].value)==1){
half_total += parseInt(el[i].value);
}
}
}
}
document.getElementById('rating_total').innerHTML = half_total / 2;
}
window.onload = function(){
var el = document.getElementsByTagName('input');
for(i=0;i<el.length;i+=1){
if(el[i].className=="star_rating"){
el[i].onclick = recalculate;
}
}
recalculate();
}
</script>
Code: <label>Rate our service out of 5 stars:</label> <input type="radio" name="rating" class="star_rating" value="1" /> <input type="radio" name="rating" class="star_rating" value="1" /> <input type="radio" name="rating" class="star_rating" value="1" /> <input type="radio" name="rating" class="star_rating" value="1" /> <input type="radio" name="rating" class="star_rating" value="1" /> You have currently rated us <td id="rating_total">0</td>/5<br/> Could someone who is more experienced help with this? Many thanks, Greens85 Is it possible to get a entire system configuration information including RAM Size,Type,HD Size,Processor details using JavaScript Or any other Scripting Language. Please Help Me In Getting This. . . I have concatenated list of posts, whereby a user can comment on each one (and the comment gets a live update via jquery). I decided that since I'm using a unique variable for each post, I could just tack that onto the end of the id of the update div, and also tack it onto the end of the class of the submit button, like so: PHP Code: $my_list .= ' <form action="#" method="post"> <textarea class="commentbox" name="comment" id="comment"></textarea> <input type="hidden" name="post_id" id="post_id" value=' . $post_id . ' /> <input type="hidden" name="member_id" id="member_id" value=' . $id . ' /> <input type="submit" class="submit' . $post_id . '" value="Comment " /> </form> ' . $comment_list . ' // existing comments queried from the db <ol id="update' . $post_id . '"></ol> // jquery-ed live update comments '; ?> Everything with respect to the above looks fine (i.e. each submit button gets a unique class and each update div gets a unique id). So the problem I'm running into now is: how do I get my js function to recognize each of the unique "submits"? This is what I have now (below). But whenever I click on a submit button next to a post, nothing happens, my page just reloads and a "#" gets added to the end of the url. I checked my live http headers, and it looks like the comment is getting posted along with the correct unique $post_id... but I believe it's stopping at the js function. Code: <head>
<script type="text/javascript">
$(function() {
$(".submit<?php echo $post_id; ?>").click(function() {
var post_id = $("#post_id").val(); // this is the unique id for each story, in a hidden input
var member_id = $("#member_id").val(); // this is a member for the commenter, in a hidden input
var comment = $("#comment").val(); // this is the comment from the input box
var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;
if(comment=='') {
alert('Please enter a valid comment');
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(html){
$("#update<?php echo $post_id; ?>").append(html);
$("#update<?php echo $post_id; ?> li:last").fadeIn("slow");
document.getElementById('post_id').value='';
document.getElementById('member_id').value='';
document.getElementById('comment').value='';
$("#comment").focus();
$("#flash").hide();
}
});
}
return false;
});
});
</script>
</head>
Hi! I have a menu bar, and i want to display notifications like facebook every X seconds, show the count of a query and display the number in a div... Do you have some advice for me? Thanks a lot!! Hi folks, I've got a chat program which relies on a column in a MySQL database to see if he/she has logged out or not. But if you close the browser window, the computer still thinks you're online. I wrote this in the JavaScript section cos I think it would definitely need Javascript. So any help for updating the database in any way? Thanks!! Lucas I am working on a site which is pretty old school.. i have a vertical drop down menu using javascript which uses <img src tag>.. Check the tab fountains at http://www.texaslakesandponds.com/index_html.html (it has a vertex and kasco dropdown) I want to add a similar dropdown for Aerators with the same format and color. I dont know how to do that since it uses a <ul><li> format and the image is called in the css class. Can someone please help me with the code. Heres what I did Created 4 variables 1 - to get which direction the person is pressing (leftright) 2 - if the person is pressing up 3 - to set a direction when a person is pressing any buttons 4 - for images I made every .05 seconds there should be a check on the conditions for buttons pressed and where the picture is. Aptana didn't find any errors and personally, I don't like using the program anyway because it makes me feel overwhelmed If someone could help me pick out the peice that is wrong, that would be nice should I use the preload as my image source, or keep it as imgs? Code: var yvel, i, imgs, updown, ground, reft, leftright, MAX_X, MAX_Y, MIN_X;
MAX_X = 500 /* parseInt(game.style.width) + parseInt(game.style.left); */
MIN_X = 300 /* parseInt(game.style.left); */
MAX_Y = 900 /* parseInt(game.style.height) + parseInt(game.style.top); */
updown = 0;
leftright = 0;
ground = 0;
reft = 1;
yvel = 0;
function init(){
var guy = document.getElementById("guy");
imgs=["stand.png", "standleft.png", "jump.png", "jumpleft.png", "walk.png", "walkleft.png", "finishjump.png", "finishleft.png"];
var preload = new Array();
for(i=0; i<imgs.length; i++) {
preload[i]= new Image();
preload[i].src = imgs[i];
}
i = 0;
document.onkeydown=keyDown;
document.onkeyup=keyUp;
movesprite();
}
function movesprite(hori, vert){
var game = document.getElementById("game");
x = parseInt(guy.style.left);
y = parseInt(guy.style.top);
if (ground = 0) {
yvel += 3;
if (hori == 1) { x += 1; right(1); reft = 1; }
if (hori == -1) { x += -1; left(1); reft = 0; }
if (hori == 0) { stand(1); }
}else {
if (hori == 1) { x += 3; right(0); reft = 1; }
if (hori == -1) { x += -3; left(0); reft = 0; }
if (hori == 0) { stand(0); }
if (vert == 1) { yvel += -15; jump(); }
}
checkBounds();
guy.style.left = x + "px";
guy.style.top = y + "px";
setTimeout("movesprite(updown,leftright)", 50);
}
function checkBounds(){
if (x >= MAX_X)
{x = MAX_X;}
if (x <= MIN_X)
{x = MIN_X}
if (y + yvel >= MAX_Y)
{y = MAX_Y; ground = 1;}
else {ground = 0; y += yvel;}
}
function jump(){
if (reft == 1) {guy.src = imgs[2];}
else {guy.src = imgs[3];}
}
function left(ground){
if (ground == 1) {
if (guy.src == imgs[1]) {guy.src = imgs[5];}
else {guy.src = imgs[1];}
}else {guy.src = imgs[7];}
}
function right(ground){
if (ground == 1) {
if (guy.src == imgs[0]) {guy.src = imgs[4];}
else {guy.src = imgs[0];}
}else {guy.src = imgs[6];}
}
function stand(ground){
if (ground == 1) {
if (reft == 1) {guy.src = imgs[0];}
else {guy.src = imgs[1];}
}else {
if (reft == 1) {guy.src = imgs[6];}
else {guy.src = imgs[7];}
}
}
function keyDown(e){
if (e.keyCode == 37) {leftright = -1;} /*left*/
if (e.keyCode == 38) {updown = 1;} /*up*/
if (e.keyCode == 39) {leftright = 1;} /*right*/
/* if(e.keyCode == 40) is down */
}
function keyUp(e){
if (e.keyCode == 37) {leftright = 0;}
if (e.keyCode == 38) {updown = 0;}
if (e.keyCode == 39) {leftright = 0;}
}
onload=init;
Hello one and all, I'm not bad with PHP/MySQL but know almost nothing about Javascript. What I'm looking for is a simple rollover 5 star rating system, and I mean really simple. A lot of the ones (almost all of them in fact) that I've seen on the web include a call to the database with Ajax or something similar and about 100 files you need to upload to your server and configure, lol. All I'm looking for is a rollover system that stop on the amount of stars clicked (onclick?) and provies a post value that I can handle within a form. No popups, not serverside synchronus interactions or anything like that. The only extra thing I need it to do is when you rollover it again it still goes to the star you hover over but if nothing is clicked returns to the originally clicked star. I'm hoping that makes sense, if not let me know, I try to be as thorough as I can in the forums. Anyways, so I used DW to create some java script for me but DW is notorious for adding extra clunky bits of code which laden the page. I'll show you my attempts to creating this system I'm talking about. Any help would be very much appreciated, this thing is killing me! Oh yeah, I used smiley faces for the gifs because I didn't have anything else but I'll make some stars for it. In the head --> PHP Code: <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } </script> And in the body --> PHP Code: <body onload="MM_preloadImages('media/smiley_online.png','media/smiley_offline.jpg')"> <div style="float:left; width:100%; height:50px;"> <div style="float:left;"><a href="javascript:;" onmousedown="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_offline.jpg','smiley3','','media/smiley_offline.jpg','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)"><img src="media/smiley_offline.jpg" name="smiley1" width="50" height="50" border="0" id="smiley1" onmouseover="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_offline.jpg','smiley3','','media/smiley_offline.jpg','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)" /></a></div> <div style="float:left;"><a href="javascript:;" onmousedown="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_offline.jpg','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)"><img src="media/smiley_offline.jpg" name="smiley2" width="50" height="50" border="0" id="smiley2" onmouseover="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_offline.jpg','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)" /></a></div> <div style="float:left;"><a href="javascript:;" onmousedown="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)"><img src="media/smiley_offline.jpg" name="smiley3" width="50" height="50" border="0" id="smiley3" onmouseover="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)" /></a></div> <div style="float:left;"><a href="javascript:;" onmousedown="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_online.png','smiley5','','media/smiley_offline.jpg',1)"><img src="media/smiley_offline.jpg" name="smiley4" width="50" height="50" border="0" id="smiley4" onmouseover="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_online.png','smiley5','','media/smiley_offline.jpg',1)" /></a></div> <div style="float:left;"><a href="javascript:;" onmousedown="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_online.png','smiley5','','media/smiley_online.png',1)"><img src="media/smiley_offline.jpg" name="smiley5" width="50" height="50" border="0" id="smiley5" onmouseover="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_online.png','smiley5','','media/smiley_online.png',1)" /></a></div> </div> P.S, To me, this should be a pretty simple task for anyone versed in Javascript especially all you veterans out there. I would love to see how it's done. Many, many thanks. Russ |
|||||||