|
JavaScript - How Can I Create An Independent Copy Of A Voting Function?
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; }
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 Hi, i've got a calculator/quotation script i've made. Once the calculation is complete, i want the user to click a button which will copy some of the field data to new fields for printing. This is fine and i can do easily, however i then want the user to be able to reset the form and do another calculation, click the same button and it copy the new data to new fields too. So in effect you end up with all of your calculations listed somewhere for printing. how would i attempt this? any help appreciated Code: <html>
<head>
<title>TESTING</title>
<script type="text/javascript">
<!--
document.write("<input type='submit' value='submit' onclick='func()'>");
function func()
{
document.write("<input type='submit' value='New Button' onclick='func()'>");
window.alert("THIS");
}
-->
</script>
</head>
<body>
<!--input type="button" value="Read" onclick="ReadFiles()"-->
</body>
</html>
This is a very basic version of what I am trying to do. I have a dynamic list which is set in a table. When clicked, a function is run to set up a new list.. The reason I explain that, is that I need to keep it dynamic. Now for the problem: When I run this page, I have the button made right away, then when clicked it creates the new button. The new button should also run the function to create the new button again, but when I click it, I only receive "error on page". I don't know if there is a better way to go about this, but as for this route, I am stuck. Any help is greatly appreciated! -Shane Hello Am designig a web site i want that sote to be appear same in all browser is their any script which makes my site look same in all browsers Hi all, can anyone recommend me nice tooltip script which is javascript library independent, meaning no help/code from any of libraries such as (jquery, prototype,scriptalicious, mootools,extjs etc.). Here is the one I particularly like but it uses protoype and that is not option for me now, because I'm just integrating something else into already existing huge script and I don't wanna mess up old functionality or bring some additional unnecessary overhead. Or even better if you can give me some guidelines / pointers , how to make one from scratch that would be acceptable for me also. The most important thing is that it points from above downwards, because I found like dozen of good ones but pointing from below. Here is an example what I mean when I say from pointing from above. Thank you hello friends.. I am working on the html code in which i using the List Control The Requirement that among the List element in which I choose the locations there is option in which whenever i select the option None From The List then it should Disply the empty textbox So how the function is declared Please tell me... Hi guys, new to the forum and a big noob to JavaScript! I've created a function that would hide and show paragraphs from a drop down list, that paragraph contains a link that will show a div containing a map of google. But when I switch to another State on the drop down list I'd like to have the original first paragraph that showed up to disappear. So far, I can only get the <div> that contains the map to disappear. Can someone send me an example of a function that would hide the paragraph and the <div>? Again, I'm a noob baby talk please. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Untitled Page</title> <script type="text/javascript"><!-- var lastDiv = ""; function showDiv(divName) { // hide last div if (lastDiv) { document.getElementById(lastDiv).className = "hiddenDiv"; } //if value of the box is not nothing and an object with that name exists, then change the class if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } function showMap(divName) { //if value of the box is not nothing and an object with that name exists, then change the class if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } //--> </script> <style type="text/css" media="screen"><!-- .hiddenDiv { display: none; } .visibleDiv { display: block; border: 1px grey solid; } #ex1 { position:absolute; width:425px; height:350px; right:40px; top:100px; } #ex2 { position:absolute; width:425px; height:350px; right:40px; top:100px; } --></style> </head> <body bgcolor="#ffffff"> <form id="FormName" action="blah.php" method="get" name="FormName"> <select name="selectName" size="1" onChange="showDiv(this.value);"> <option value="">Choose State</option> <option value="1">Alabama</option> <option value="2">Alaska</option> <option value="3">Arizona</option> <option value="4">Arkansas</option> <option value="5">California</option> <option value="6">Colorado</option> <option value="7">Connecticut</option> <option value="8">Delaware</option> <option value="9">Florida</option> <option value="10">Georgia</option> <option value="11">Hawaii</option> <option value="12">Idaho</option> <option value="13">Indiana</option> <option value="14">Iowa</option> <option value="15">Kansas</option> <option value="16">Kentucky</option> <option value="17">Louisiana</option> <option value="18">Maine</option> <option value="19">Maryland</option> <option value="20">Massachusetts</option> <option value="21">Michigan</option> </select> </form> <p id="1" class="hiddenDiv"><a href="#" onclick="showMap('ex1')">8160 du Creusot<br />St-Leonard, QC</a></p> <p id="2" class="hiddenDiv"><a href="#" onclick="showMap('ex2')">9510 ave. Radisson<br />Brossard, QC</a></p> <p id="3" class="hiddenDiv">This is paragraph 3.</p> <p id="4" class="hiddenDiv"><a href="#l" onclick="showMap('ex1')">Home</a><br /> <a href="us/home.html">Home</a><br /></p> <div id="ex1" class="hiddenDiv"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=8160+Rue+du+Creusot+Saint-L%C3%A9onard,+QC+H1P+1T5,+Canada&aq=&sll=45.597664,-73.581356&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=8160+Rue+du+Creusot,+Saint-L%C3%A9onard,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H1P+1T5,+Canada&ll=45.597373,-73.581641&spn=0.001501,0.004828&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=8160+Rue+du+Creusot+Saint-L%C3%A9onard,+QC+H1P+1T5,+Canada&aq=&sll=45.597664,-73.581356&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=8160+Rue+du+Creusot,+Saint-L%C3%A9onard,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H1P+1T5,+Canada&ll=45.597373,-73.581641&spn=0.001501,0.004828&z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div><!-- end ex1 --> <div id="ex2" class="hiddenDiv"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=9510+Avenue+Radisson,+Brossard,+QC+J4X+2V3,+Can ada&aq=0&sll=45.597405,-73.581313&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=9510+Avenue+Radisson,+Brossard,+C hamplain,+Qu%C3%A9bec+J4X+3A1,+Canada&ll=45.43337,-73.487572&spn=0.001506,0.004828&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=9510+Avenue+Radisson,+Brossard,+QC+J4X+2V3,+C anada&aq=0&sll=45.597405,-73.581313&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=9510+Avenue+Radisson,+Brossard,+C hamplain,+Qu%C3%A9bec+J4X+3A1,+Canada&ll=45.43337,-73.487572&spn=0.001506,0.004828&z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div><!-- end ex2 --> </body> </html> 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 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. 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, I am a beginner in programming however I am close to completing this task for my uni course and I know what method is needed "toLowerCase()" yet I am not sure on where it needs to be placed. If i paste in the question and then the coding I have done so far any helped would be greatly appreciated. Thanks in advance to everyone who replies QUESTION: function findAnyU(s) - to discover if string s appears in any of the URLs in the array pages. Gives an alert of s together with 'found' or 'not found' as for find1C. [Note that the search should be case insensitive so that 'lboro' and 'Lboro' and 'LBORO' would all be found in 'www.lboro.ac.uk' - all remaining functions should also be case insensitive in this way] Example call: findAnyU("Lboro") Example result: "Lboro" found MY CODING... var pages = [ "[www.lboro.ac.uk] Loughborough University offers degree programmes and world class research.", "[www.XXXX.ac.uk] Loughborough University offers degree programmes and world class research. " ]; function findAnyU (s){ for(i=1;i<pages.length;i++) { var a = '"'+s+'"'; var b = pages[i].indexOf('['); var l = pages[i].indexOf(']'); var t = pages[i].substr(b+1, l); var c = t.indexOf(s); } if (c>=0) a+= ' found' else a+= ' not found' return (a) } alert(findAnyU("Lboro")); *********************************** Thanks Again Everyone X I have this line of code: <input type='text' id='fCode' style="width:875px; height:22px;"/><br /><br /> Does anyone know how to add a copy button to so when you click it it copies everything in the box to your clipboard? Thanks -Wardman Don't even know where to post this as I have never thought about it; I've just made my game have a image upload script in, and a album showing the users images. How could I make have a link saying "Copy Link" that if clicked will copy the picture url to clip board. I've seen places like w3schools use in but not as tuts though. Please this will really help, desplayin the link is ugly EDIT: I've found the following code but I don't understand how I turn it into a link or button. Code: <script>
window.clipboardData.setData('text','This has been copied to your clipboard.');
</script>
I have this line of code: <input type='text' id='fCode' style="width:875px; height:22px;"/><br /><br /> Does anyone know how to add a copy button to so when you click it it copies everything in the box to your clipboard? Thanks -Wardman I have been looking all over google and i cant find it. How would you make a text box and when you type in it it would display the words underneath?
Hello, I am needing help in copying a url to another href on a page. Here is the scenario: I have a page with multiple <LI>. Within each <LI> there is A hidden link An image A visible link This is the code within each <LI>: Code: <h2 class="postTitle" style="display: none;"><a href="URL to copy">LI Name</a></h2> <a href="Copied URL"><img alt="" src="LI Image" /></a> <a href="Copied URL">LI Name</a> Each <LI> will contain a different image, LI name, and link. I am needing a way to get the hidden URL for each LI copied into the visible href. Hope this makes sense. Thanks in advance for your help. since there are troubles with innerHTML in IE ..... instead of : Code: target.innerHTML = src.innerHTML; --> Code: this.copy_innerHTML = function(src,target)
{
//remove all target inner elements
while(target.hasChildNodes()){target.removeChild(target.childNodes[0])}
for (var j = 0; j<src.childNodes.length-1; j++)
{
target.appendChild(src.childNodes[j].cloneNode(true));
}
}
a) Tested in FF and GC b) in IE this works, but stuff does not appear where it should. EDIT: if text nodes removed , then even in ff does not work, does not find textarea inside target node. That is, the error pops up, previously only notable at IE. HTML & CSS validation is OK. Any advice ? do anyone know how do make a form that automatic tab when we paste something into the box and sort it out automatically. Like cd-key box. when we copy n paste cd-key into the box it automatic inert everything into correct places. Thanks |
|||||||