|
JavaScript - Voting System With Horiztontal Bars
All,
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. Similar TutorialsI 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 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 How can I fixed the size of the page to desired width and length and also make that page fixed to that size so that it cannot resized. And also I want to disable all bars(scrollbars, menubars, address bars etc) for the page. I am using these codes for my projects and these are for commercial purpose. I am also asking for your permission to use these codes for my projects. lookin 4wrd. 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 Is there any way to lock down the menu bars? I currently have a form that was created in Adobe Professional. I have hidden the menu bars on initial view of this form, in an effort to force the sales associates to use buttons that I created that will show them all fields that are required. This worked for a while, but now the sales associates have found out how to unhide the menu bars and are again submitting incomplete forms. I would like to have something in place, that if they do unhide the menu bars, there are certain commands that they cannot use (i.e. Attach to E-mail). Is there any way to put script on this form that will gray out certain commands on the menu bars?
Hi, I have written a magnifier (using both CSS and JavaScript), and it appears to work OK in the four browsers I have tested (IE9, FF3.5.7, Safari 5.1, and Opera 11.51). However, Safari annoyingly puts in scroll bars when you are magnifying the picture. I can get rid of this by making the ctrlDiv offset as hidden, but then this removes the bottom scroll bar completely in all browsers (not really useful if the document is bigger than the browser window). I have read about putting the image as a background image of another element, but cannot for the life of me get this to work at all. Also, the functions to return the absolute position of elements (and mouse pointer) does not work if the document has a margin (i.e. width:1216px;margin:auto) - but I can work around this at the moment. Anyway, the complete code is at http://www.geraldholdsworth.co.uk (it was easier to stick it there and post a link than to post the code here). Cheers, Gerald. I made this webpage. It runs with a simple javascript function that changes the content in the window when you click on the menu buttons. the only problem is there are no vertical scroll bars when viewed in any browser. There seems to be a place for them but no actual scroll bar. I tried modifying the color and such with cs but it didn't change anything. please help the site www.star1on1tutoring.com here is all the code starting with the html, then the css, and the two javascript pages [code] <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="assets/css/main.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="assets/java/global.js"></script> <script type="text/javascript" src="assets/java/menu.js"></script> <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"/> <title>Star 1 on 1 Tutoring</title> <meta name="description" content="One on One tutoring for individuals and small groups in the Charlotte, North Carolina area. Taught by a former Charlotte-Mecklenburg teacher, we cater to your child's individual needs and goals. Package and groups discounts are available. "/> <meta name="robots" content="all,follow"/> <meta name="keywords" content=" star 1 on 1 tutroing, star one on one, one on one, Charlotte, North Carolina, Stonecrest, South Charlotte, Tutor, private tutor, tutoring, dominique greve, help in school, behind in school, huntington learning, huntington tutoring, small group tutoring, teacher, private teacher, math, science, social studies, history, math tutor, science tutor, history, history tutor, social studies tutor, grades, A+, better grades, children, school, better in school, Charlotte private tutor "/> </head> <body> <div id="logo"> </div> <div id="book"> <ul id="internalNav"> <li><a href="#intro">Introduction</a></li> <li><a href="#subjects">Subjects and Grades</a></li> <li><a href="#rates">Rate Information</a></li> <li><a href="#difference">The Difference</a></li> <li><a href="#bookIt">Book It!</a></li> <li><a href="#payment">Payment and Discounts</a></li> </ul> <div class="section" id="intro"> <p>Private tutoring (individual or small group) can provide the help your child needs in order to achieve academic success.* As a former teacher, I am qualified to create an individualized plan to help your child work on specific subjects or content areas, prepare for a difficult exam or project, or simply improve study skills. While teaching and tutoring I have helped students with a variety of academic levels. I have experience with learning disabled students as well as students classified as academically gifted.</p> </div> <div class="section" id="subjects"> <h3> K-8 all subjects (math depends on level)</h3> <h3>Study Skills/Organization</h3> <h3>Introductory Spanish </h3> <h3>High school (depends on course and level) </h3> </div> <div class="section" id="home"> <p>Private tutoring (individual or small group) can provide the help your child needs in order to achieve academic success.* As a former teacher, I am qualified to create an individualized plan to help your child work on specific subjects or content areas, prepare for a difficult exam or project, or simply improve study skills. While teaching and tutoring I have helped students with a variety of academic levels. I have experience with learning disabled students as well as students classified as academically gifted.</p> </div> <div class="section" id="rates"> <h3>Individual Rate: $30/hr</h3> <h3>Small Group Rates: </h3> <h3>2 students $50/hr</h3> <h3>3 students $75/hr</h3> <h3>4 students $100/hr</h3> </div> <div class="section" id="difference"> <p> At Star 1 on 1 Tutoring, your child's program is tailored specifically to his or her needs and learning style. We can focus on your child's actual course work and assignments, using the school's preferred textbooks and resources.* You do not have to commit to a lengthy and inflexible contract with an organization that pursues its own curriculum at its predetermined pace.* Star 1 on 1 Tutoring focuses on what it takes for your child to succeed.</p> </div> <div class="section" id="bookIt"> <h2> For more information or to book your session</h2> <h3> Call 704-321-9226</h3> <h3> or <a href="mailto:dgreve@star1on1tutoring.com">E-mail Me</a></h3> </div> <div class="section" id="payment"> <p> You can pay with a credit card or check with a secure payment on Paypal. I also offer package rates.<h3> Buy 9 sessions get the 10th free.</h3> </p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="9411314"> <table> <tr><td><input type="hidden" name="on0" value="Package">Package</td></tr><tr><td><select name="os0"> <option value="1 hour session">1 hour session $30.00</option> <option value="5 1- hour sessions">5 1- hour sessions $150.00</option> <option value="10 1- hour sessions">10 1- hour sessions $270.00</option> </select> </td></tr> </table> <input type="hidden" name="currency_code" value="USD"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> </div> <div id="pencil"></div> <div id="apple"></div> </body> </html> @charset "UTF-8"; /* CSS Document */ html, body { overflow-y:scroll; overflow-x:scroll; } body { background-image:url(../images/newbg.jpg); font-size:.9em; overflow-y:scroll; background-attachment:fixed; } #logo { background: url(../images/logobacking.png) no-repeat; position:fixed; top:0px; left:200px; height:198px; width:609px; } #book { background:url(../images/newbook_06.png) no-repeat; position:fixed; left:23px; top:173px; width:960px; height:455px; } #apple { background-image:url(../images/star.png); height:310px; width:340px; position:fixed; left:50px; top:440px; } #pencil { background:url(../images/newpencil.png) no-repeat; position:fixed; top:470px; left:372px; height:278px; width:617px; } #internalNav li a { text-decoration:none; list-style-type: none; color:#000000; } img { border:none; } #internalNav li { font-family:"Courier New", Courier, monospace; font-size:1.5em; color:#000000; list-style-type:none; text-decoration:none; border:none; } #internalNav { position:fixed; left:80px; top:255px; } #home { display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:230px; width:375px; word-spacing: .01em; } #subjects { display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #rates{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #difference{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #bookIt{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:220px; width:350px; } #intro{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:230px; width:375px; word-spacing: .01em; } #payment{ display:block; font-family:"Courier New", Courier, monospace; position:fixed; left:520px; top:230px; width:370px; } // JavaScript Document function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function showSection(id) { var divs = document.getElementsByTagName("div"); for (var i=0; i<divs.length; i++ ) { if (divs[i].className.indexOf("section") == -1) continue; if (divs[i].getAttribute("id") != id) { divs[i].style.display = "none"; } else { divs[i].style.display = "block"; } } } function prepareInternalnav() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("internalNav")) return false; var nav = document.getElementById("internalNav"); var links = nav.getElementsByTagName("a"); for (var i=0; i<links.length; i++ ) { var sectionId = links[i].getAttribute("href").split("#")[1]; if (!document.getElementById(sectionId)) continue; document.getElementById(sectionId).style.display = "none"; links[i].destination = sectionId; links[i].onclick = function() { showSection(this.destination); return false; } } } addLoadEvent(prepareInternalnav); [CODE] I am using the below script on http://bubbles4urtroubles.com. Because I made the bubbles larger than the ones used in the original script, the horizontal scroll bar displays some of the time, then turns off. Is there any way to just not have the horizontal scroll bar? Also, how would I set the zindex so the bubbles are always in front of everything else. Thank you in advance. //Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com) //Based on code by Altan d.o.o. (snow@altan.hr) //For full source code and installation instructions to this script, visit http://www.dynamicdrive.com var no = 15; // image number or falling rate var speed = 2; // the lower the number the faster the image moves var snow = new Array(); snow[0] = "bubble.png" snow[1] = "bubble2.png" snow[2] = "bubble3.png" var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 600, doc_height = 1024; if (ns4up||ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); j = 0; for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>"); } } else if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>"); } } if (j == (snow.length-1)) { j = 0; } else { j += 1; } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]+pageYOffset; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE_NS6() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = ns6up?window.innerWidth-5:document.body.clientWidth; doc_height = ns6up?window.innerHeight-5:document.body.clientHeight; } dx[i] += stx[i]; if (ie4up){ document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } else if (ns6up){ document.getElementById("dot"+i).style.top=yp[i]+pageYOffset+'px'; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+'px'; } } setTimeout("snowIE_NS6()", speed); } if (ns4up) { snowNS(); } else if (ie4up||ns6up) { snowIE_NS6(); } // End --> </script> Hi, As an example, I have a horizontal navigation bar that grows and shrinks when the page is resized. I'd like it if the horizontal scroll bar only appeared when the window is less than x pixels wide (thus, cutting off some of my navigation options). The same thing with zooming. If the user starts to zoom the page and the options of my nav bar begin to get cut off, is there any way to show the scroll bar after x number of zooms? I'm just trying to avoid ALWAYS showing the horizontal or vertical scrolls. I'd like them to only appear as needed, like this site: http://www.crimemapping.com/map.aspx...9-966e8cda4d70 (Notice if you zoom in, or change the window size, the behavior is like what I mentioned). Is there any way to do this? 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 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 Is there any Rating System based on java or ajax for free.. 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! 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 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. . . 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 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>
|
|||||||