Woutertjuh88
Terugkerende gebruiker
- Lid geworden
- 20 nov 2005
- Berichten
- 3.532
Ik ben bezig met een geanimeerde poll te maken met behulp van jQuery.
Als er gestemd wordt worden er gegevens naar een js bestand gestuurd en deze stuurt een geanimeerde uitslag terug.
Deze uitslag heeft een balk die wordt weer gegeven. Deze heeft een bepaalde hoogte (5 px). overal werkt dit behalve bij IE6, IE7 en IE8 (ouder heb ik niet geprobeert). Het probleem is zolang de balk in komt schuiven is hij netjes 5px hoog. Maar zodra de animatie klaar is springt hij naar ongv. 15px hoog. Dit moet ook gewoon 5px zijn.
Iemand een oplossing?
code:
Picture 3.png is hoe het moet zijn(dit is in FF)
Picture 2.png is de fout in IE
Als er gestemd wordt worden er gegevens naar een js bestand gestuurd en deze stuurt een geanimeerde uitslag terug.
Deze uitslag heeft een balk die wordt weer gegeven. Deze heeft een bepaalde hoogte (5 px). overal werkt dit behalve bij IE6, IE7 en IE8 (ouder heb ik niet geprobeert). Het probleem is zolang de balk in komt schuiven is hij netjes 5px hoog. Maar zodra de animatie klaar is springt hij naar ongv. 15px hoog. Dit moet ook gewoon 5px zijn.
Iemand een oplossing?
code:
HTML:
function cssStyle(){
/*css style voor de poll*/
styleDivBalk = "style='width: 300px; float: left; '";
styleBalkStandaard = "style='margin-top: 5px; background-color: " + Balk + "; width: 0px; height: 5px; max-height: 5px; max-width: 300px; '";
styleAntwoord = "style='font-size: 12px; min-height: 16px; width: 300px; padding-bottom: 5px; '";
stylePercentage = "style='font-size: 11px; margin-left: 5px; width: 125px; float: right; '";
styleBalkGestemd = "style='margin-top: 5px; background-color: " + BalkGestemd + "; width: 0px; height: 5px; max-height: 5px; max-width: 300px; '";
styleAntwoordGestemd = "style='font-size: 12px; min-height: 16px; font-style: italic; font-weight: bold; width: 300px; padding-bottom: 5px; '";
stylePercentageGestemd = "style='font-size: 11px; font-style: italic; font-weight: bold; margin-left: 5px; width: 125px; float: right; '";
}
/*Gegevens van de poll*/
function Gegevens(){
vraag = jQuery("input[name=vraag]").val();
Balk = jQuery("input[name=kleurBalk]").val();
BalkGestemd = jQuery("input[name=kleurBalkGestemd]").val();
antwoord1 = jQuery("input[name=antwoord1]").val();
antwoord2 = jQuery("input[name=antwoord2]").val();
antwoord3 = jQuery("input[name=antwoord3]").val();
antwoord4 = jQuery("input[name=antwoord4]").val();
antwoord5 = jQuery("input[name=antwoord5]").val();
antwoord6 = jQuery("input[name=antwoord6]").val();
antwoord7 = jQuery("input[name=antwoord7]").val();
antwoord8 = jQuery("input[name=antwoord8]").val();
antwoord9 = jQuery("input[name=antwoord9]").val();
antwoord10 = jQuery("input[name=antwoord10]").val();
stemmenAntwoord1 = parseFloat(jQuery("input[name=stemmenAntwoord1]").val());
stemmenAntwoord2 = parseFloat(jQuery("input[name=stemmenAntwoord2]").val());
stemmenAntwoord3 = parseFloat(jQuery("input[name=stemmenAntwoord3]").val());
stemmenAntwoord4 = parseFloat(jQuery("input[name=stemmenAntwoord4]").val());
stemmenAntwoord5 = parseFloat(jQuery("input[name=stemmenAntwoord5]").val());
stemmenAntwoord6 = parseFloat(jQuery("input[name=stemmenAntwoord6]").val());
stemmenAntwoord7 = parseFloat(jQuery("input[name=stemmenAntwoord7]").val());
stemmenAntwoord8 = parseFloat(jQuery("input[name=stemmenAntwoord8]").val());
stemmenAntwoord9 = parseFloat(jQuery("input[name=stemmenAntwoord9]").val());
stemmenAntwoord10 = parseFloat(jQuery("input[name=stemmenAntwoord10]").val());
totaalStemmen = parseFloat( parseFloat(stemmenAntwoord1) + parseFloat(stemmenAntwoord2) + parseFloat(stemmenAntwoord3) + parseFloat(stemmenAntwoord4) + parseFloat(stemmenAntwoord5) + parseFloat(stemmenAntwoord6) + parseFloat(stemmenAntwoord7) + parseFloat(stemmenAntwoord8) + parseFloat(stemmenAntwoord9) + parseFloat(stemmenAntwoord10) );
}
/*Percentage van de uitslag*/
function Percentage(){
if(Math.round(((100/totaalStemmen)*stemmenAntwoord1)*10)/10 ==NaN == 0 <=100.1){
uitslag1 = "0%";
}else{
uitslag1 = Math.round(((100/totaalStemmen)*stemmenAntwoord1)*10)/10 + "%";
};
if(Math.round(((100/totaalStemmen)*stemmenAntwoord2)*10)/10 ==NaN == 0 <=100.1){
uitslag2 = "0%";
}else{
uitslag2 = Math.round(((100/totaalStemmen)*stemmenAntwoord2)*10)/10 + "%";
};
if(Math.round(((100/totaalStemmen)*stemmenAntwoord3)*10)/10 ==NaN == 0 <=100.1){
uitslag3 = "0%";
}else{
uitslag3 = Math.round(((100/totaalStemmen)*stemmenAntwoord3)*10)/10 + "%";
};
if(Math.round(((100/totaalStemmen)*stemmenAntwoord4)*10)/10 ==NaN == 0 <=100.1){
uitslag4 = "0%";
}else{
uitslag4 = Math.round(((100/totaalStemmen)*stemmenAntwoord4)*10)/10 + "%";
};
if(Math.round(((100/totaalStemmen)*stemmenAntwoord5)*10)/10 ==NaN == 0 <=100.1){
uitslag5 = "0%";
}else{
uitslag5 = Math.round(((100/totaalStemmen)*stemmenAntwoord5)*10)/10 + "%";
};
if(Math.round(((100/totaalStemmen)*stemmenAntwoord6)*10)/10 ==NaN == 0 <=100.1){
uitslag6 = "0%";
}else{
uitslag6 = Math.round(((100/totaalStemmen)*stemmenAntwoord6)*10)/10 + "%";
};
if(Math.round(((100/totaalStemmen)*stemmenAntwoord7)*10)/10 ==NaN == 0 <=100.1){
uitslag7 = "0%";
}else{
uitslag7 = Math.round(((100/totaalStemmen)*stemmenAntwoord7)*10)/10 + "%";
};
if(Math.round(((100/totaalStemmen)*stemmenAntwoord8)*10)/10 ==NaN == 0 <=100.1){
uitslag8 = "0%";
}else{
uitslag8 = Math.round(((100/totaalStemmen)*stemmenAntwoord8)*10)/10 + "%";
};
if(Math.round(((100/totaalStemmen)*stemmenAntwoord9)*10)/10 ==NaN == 0 <=100.1){
uitslag9 = "0%";
}else{
uitslag9 = Math.round(((100/totaalStemmen)*stemmenAntwoord9)*10)/10 + "%";
};
if(Math.round(((100/totaalStemmen)*stemmenAntwoord10)*10)/10 ==NaN == 0 <=100.1){
uitslag10 = "0%";
}else{
uitslag10 = Math.round(((100/totaalStemmen)*stemmenAntwoord10)*10)/10 + "%";
};
}
/*Bewegende balk weergeven*/
function animateResults(){
$("#balk1").animate( {
width: Math.round(((100/totaalStemmen)*stemmenAntwoord1)*10)/10 + "%"
}, 750);
$("#balk2").animate( {
width: Math.round(((100/totaalStemmen)*stemmenAntwoord2)*10)/10 + "%"
}, 750);
$("#balk3").animate( {
width: Math.round(((100/totaalStemmen)*stemmenAntwoord3)*10)/10 + "%"
}, 750);
$("#balk4").animate( {
width: Math.round(((100/totaalStemmen)*stemmenAntwoord4)*10)/10 + "%"
}, 750);
$("#balk5").animate( {
width: Math.round(((100/totaalStemmen)*stemmenAntwoord5)*10)/10 + "%"
}, 750);
$("#balk6").animate( {
width: Math.round(((100/totaalStemmen)*stemmenAntwoord6)*10)/10 + "%"
}, 750);
$("#balk7").animate( {
width: Math.round(((100/totaalStemmen)*stemmenAntwoord7)*10)/10 + "%"
}, 750);
$("#balk8").animate( {
width: Math.round(((100/totaalStemmen)*stemmenAntwoord8)*10)/10 + "%"
}, 750);
$("#balk9").animate( {
width: Math.round(((100/totaalStemmen)*stemmenAntwoord9)*10)/10 + "%"
}, 750);
$("#balk10").animate( {
width: Math.round(((100/totaalStemmen)*stemmenAntwoord10)*10)/10 + "%"
}, 750);
}
/*Inhoud voor de uitslag*/
function Inhoud(){
cssStyle();
inhoud = "";
inhoud = inhoud + "<div style='font-size: 14px; font-weight: bold; '>" + vraag + "</div><div style='font-size: 11px; '>Aantal stemmen: " + totaalStemmen + "</div><br />";
inhoud = inhoud + "<div>Uitslag:</div>";
inhoud = inhoud + "<div style='width: 430px; '>";
if($("input[name=antwoord1]").val() !=""){
if(gekozenStem == 1 ){
styleBalk = styleBalkGestemd;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk1'" + styleBalk + "></div></div><div " + stylePercentageGestemd + ">" + uitslag1 + " (" + stemmenAntwoord1 + "x gestemd)</div><div " + styleAntwoordGestemd + ">" + antwoord1 + "</div>";
}else{
styleBalk = styleBalkStandaard;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk1'" + styleBalk + "></div></div><div " + stylePercentage + ">" + uitslag1 + " (" + stemmenAntwoord1 + "x gestemd)</div><div " + styleAntwoord + ">" + antwoord1 + "</div>";
}
}
if($("input[name=antwoord2]").val() !=""){
if(gekozenStem == 2 ){
styleBalk = styleBalkGestemd;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk2'" + styleBalk + "></div></div><div " + stylePercentageGestemd + ">" + uitslag2 + " (" + stemmenAntwoord2 + "x gestemd)</div><div " + styleAntwoordGestemd + ">" + antwoord2 + "</div>";
}else{
styleBalk = styleBalkStandaard;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk2'" + styleBalk + "></div></div><div " + stylePercentage + ">" + uitslag2 + " (" + stemmenAntwoord2 + "x gestemd)</div><div " + styleAntwoord + ">" + antwoord2 + "</div>";
}
}
if($("input[name=antwoord3]").val() !=""){
if(gekozenStem == 3 ){
styleBalk = styleBalkGestemd;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk3'" + styleBalk + "></div></div><div " + stylePercentageGestemd + ">" + uitslag3 + " (" + stemmenAntwoord3 + "x gestemd)</div><div " + styleAntwoordGestemd + ">" + antwoord3 + "</div>";
}else{
styleBalk = styleBalkStandaard;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk3'" + styleBalk + "></div></div><div " + stylePercentage + ">" + uitslag3 + " (" + stemmenAntwoord3 + "x gestemd)</div><div " + styleAntwoord + ">" + antwoord3 + "</div>";
};
}
if($("input[name=antwoord4]").val() !=""){
if(gekozenStem == 4 ){
styleBalk = styleBalkGestemd;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk4'" + styleBalk + "></div></div><div " + stylePercentageGestemd + ">" + uitslag4 + " (" + stemmenAntwoord4 + "x gestemd)</div><div " + styleAntwoordGestemd + ">" + antwoord4 + "</div>"
}else{
styleBalk = styleBalkStandaard;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk4'" + styleBalk + "></div></div><div " + stylePercentage + ">" + uitslag4 + " (" + stemmenAntwoord4 + "x gestemd)</div><div " + styleAntwoord + ">" + antwoord4 + "</div>";
};
}
if($("input[name=antwoord5]").val() !=""){
if(gekozenStem == 5 ){
styleBalk = styleBalkGestemd;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk5'" + styleBalk + "></div></div><div " + stylePercentageGestemd + ">" + uitslag5 + " (" + stemmenAntwoord5 + "x gestemd)</div><div " + styleAntwoordGestemd + ">" + antwoord5 + "</div>";
}else{
styleBalk = styleBalkStandaard;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk5'" + styleBalk + "></div></div><div " + stylePercentage + ">" + uitslag5 + " (" + stemmenAntwoord5 + "x gestemd)</div><div " + styleAntwoord + ">" + antwoord5 + "</div>";
};
}
if($("input[name=antwoord6]").val() !=""){
if(gekozenStem == 6 ){
styleBalk = styleBalkGestemd;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk6'" + styleBalk + "></div></div><div " + stylePercentageGestemd + ">" + uitslag6 + " (" + stemmenAntwoord6 + "x gestemd)</div><div " + styleAntwoordGestemd + ">" + antwoord6 + "</div>";
}else{
styleBalk = styleBalkStandaard;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk6'" + styleBalk + "></div></div><div " + stylePercentage + ">" + uitslag6 + " (" + stemmenAntwoord6 + "x gestemd)</div><div " + styleAntwoord + ">" + antwoord6 + "</div>";
};
}
if($("input[name=antwoord7]").val() !=""){
if(gekozenStem == 7 ){
styleBalk = styleBalkGestemd;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk7'" + styleBalk + "></div></div><div " + stylePercentageGestemd + ">" + uitslag7 + " (" + stemmenAntwoord7 + "x gestemd)</div><div " + styleAntwoordGestemd + ">" + antwoord7 + "</div>";
}else{
styleBalk = styleBalkStandaard;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk7'" + styleBalk + "></div></div><div " + stylePercentage + ">" + uitslag7 + " (" + stemmenAntwoord7 + "x gestemd)</div><div " + styleAntwoord + ">" + antwoord7 + "</div>";
};
}
if($("input[name=antwoord8]").val() !=""){
if(gekozenStem == 8 ){
styleBalk = styleBalkGestemd;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk8'" + styleBalk + "></div></div><div " + stylePercentageGestemd + ">" + uitslag8 + " (" + stemmenAntwoord8 + "x gestemd)</div><div " + styleAntwoordGestemd + ">" + antwoord8 + "</div>";
}else{
styleBalk = styleBalkStandaard;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk8'" + styleBalk + "></div></div><div " + stylePercentage + ">" + uitslag8 + " (" + stemmenAntwoord8 + "x gestemd)</div><div " + styleAntwoord + ">" + antwoord8 + "</div>";
};
}
if($("input[name=antwoord9]").val() !=""){
if(gekozenStem == 9 ){
styleBalk = styleBalkGestemd;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk9'" + styleBalk + "></div></div><div " + stylePercentageGestemd + ">" + uitslag9 + " (" + stemmenAntwoord9 + "x gestemd)</div><div " + styleAntwoordGestemd + ">" + antwoord9 + "</div>";
}else{
styleBalk = styleBalkStandaard;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk9'" + styleBalk + "></div></div><div " + stylePercentage + ">" + uitslag9 + " (" + stemmenAntwoord9 + "x gestemd)</div><div " + styleAntwoord + ">" + antwoord9 + "</div>";
};
}
if($("input[name=antwoord10]").val() !=""){
if(gekozenStem == 10 ){
styleBalk = styleBalkGestemd;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk10'" + styleBalk + "></div></div><div " + stylePercentageGestemd + ">" + uitslag10 + " (" + stemmenAntwoord10 + "x gestemd)</div><div " + styleAntwoordGestemd + ">" + antwoord10 + "</div>";
}else{
styleBalk = styleBalkStandaard;
inhoud = inhoud + "<div " + styleDivBalk + "><div id='balk10'" + styleBalk + "></div></div><div " + stylePercentage + ">" + uitslag10 + " (" + stemmenAntwoord10 + "x gestemd)</div><div " + styleAntwoord + ">" + antwoord10 + "</div>";
};
}
inhoud = inhoud + "</div>";
}
/*stem verwerken en uitslag weergeven*/
function Stem(id){
gekozenStem = parseFloat(jQuery("input[name=antwoord]:checked").val());
/*buttons weg halen*/
if(gekozenStem >= 0){
$("#stem").fadeOut(0);
$("#uitslag").fadeOut(0);
}
Gegevens();
totaalStemmen = parseFloat(totaalStemmen + parseFloat(1));
uistlag = parseFloat(0);
if(gekozenStem >= 0){
if(gekozenStem == 1){
stemmenAntwoord1 = parseFloat(jQuery("input[name=stemmenAntwoord1]").val()) + parseFloat(1); uistlag = parseFloat(jQuery("input[name=stemmenAntwoord1]").val()) + parseFloat(1);
}else{
stemmenAntwoord1 = parseFloat(jQuery("input[name=stemmenAntwoord1]").val());
}
if(gekozenStem == 2){
stemmenAntwoord2 = parseFloat(jQuery("input[name=stemmenAntwoord2]").val()) + parseFloat(1); uistlag = parseFloat(jQuery("input[name=stemmenAntwoord2]").val()) + parseFloat(1);
}else{
stemmenAntwoord2 = parseFloat(jQuery("input[name=stemmenAntwoord2]").val());
}
if(gekozenStem == 3){
stemmenAntwoord3 = parseFloat(jQuery("input[name=stemmenAntwoord3]").val()) + parseFloat(1); uistlag = parseFloat(jQuery("input[name=stemmenAntwoord3]").val()) + parseFloat(1);
}else{
stemmenAntwoord3 = parseFloat(jQuery("input[name=stemmenAntwoord3]").val());
}
if(gekozenStem == 4){
stemmenAntwoord4 = parseFloat(jQuery("input[name=stemmenAntwoord4]").val()) + parseFloat(1); uistlag = parseFloat(jQuery("input[name=stemmenAntwoord4]").val()) + parseFloat(1);
}else{
stemmenAntwoord4 = parseFloat(jQuery("input[name=stemmenAntwoord4]").val());
}
if(gekozenStem == 5){
stemmenAntwoord5 = parseFloat(jQuery("input[name=stemmenAntwoord5]").val()) + parseFloat(1); uistlag = parseFloat(jQuery("input[name=stemmenAntwoord5]").val()) + parseFloat(1);
}else{
stemmenAntwoord5 = parseFloat(jQuery("input[name=stemmenAntwoord5]").val());
}
if(gekozenStem == 6){
stemmenAntwoord6 = parseFloat(jQuery("input[name=stemmenAntwoord6]").val()) + parseFloat(1); uistlag = parseFloat(jQuery("input[name=stemmenAntwoord6]").val()) + parseFloat(1);
}else{
stemmenAntwoord6 = parseFloat(jQuery("input[name=stemmenAntwoord6]").val());
}
if(gekozenStem == 7){
stemmenAntwoord7 = parseFloat(jQuery("input[name=stemmenAntwoord7]").val()) + parseFloat(1); uistlag = parseFloat(jQuery("input[name=stemmenAntwoord7]").val()) + parseFloat(1);
}else{
stemmenAntwoord7 = parseFloat(jQuery("input[name=stemmenAntwoord7]").val());
}
if(gekozenStem == 8){
stemmenAntwoord8 = parseFloat(jQuery("input[name=stemmenAntwoord8]").val()) + parseFloat(1); uistlag = parseFloat(jQuery("input[name=stemmenAntwoord8]").val()) + parseFloat(1);
}else{
stemmenAntwoord8 = parseFloat(jQuery("input[name=stemmenAntwoord8]").val());
}
if(gekozenStem == 9){
stemmenAntwoord9 = parseFloat(jQuery("input[name=stemmenAntwoord9]").val()) + parseFloat(1); uistlag = parseFloat(jQuery("input[name=stemmenAntwoord9]").val()) + parseFloat(1);
}else{
stemmenAntwoord9 = parseFloat(jQuery("input[name=stemmenAntwoord9]").val());
}
if(gekozenStem == 10){
stemmenAntwoord10 = parseFloat(jQuery("input[name=stemmenAntwoord10]").val()) + parseFloat(1); uistlag = parseFloat(jQuery("input[name=stemmenAntwoord10]").val()) + parseFloat(1);
}else{
stemmenAntwoord10 = parseFloat(jQuery("input[name=stemmenAntwoord10]").val());
}
Percentage();
$.post("verwerk.php", {pollId: id, antwoordNummer: gekozenStem},
function(data){
Inhoud();
inhoud = inhoud + "<div style='font-size: 14px; font-weight: bold; margin-top: 20px; '>Bedankt voor uw stem!</div>"
setTimeout(function(){
$("#Stemmen").fadeOut(250);
$("#uitslagPoll").fadeOut(0);
setTimeout(function(){
$("#uitslagPoll").html(inhoud).fadeIn(250, function(){
animateResults();
});
}, 250);
}, 500);
}
);
}else{
$("#uitslagPoll").fadeOut(0);
$("#uitslagPoll").fadeIn(250).html("<div style='font-size: 14px; font-weight: bold; '>U vergeet een antwoord te kiezen!</div>");
setTimeout(function(){
$("#uitslagPoll").fadeOut(250).html("<div style='font-size: 14px; font-weight: bold; '>U vergeet een antwoord te kiezen!</div>");
}, 4000);
return false;
}
}
/*uitslag weer geven als de cookie bestaat*/
function UitslagGestemd(id){
gekozenStem = parseFloat(0);
Gegevens();
Percentage();
Inhoud();
inhoud = inhoud + "<div style='font-size: 14px; font-weight: bold; margin-top: 20px; '>U heeft al gestemd!</div>"
$("#Stemmen").fadeOut(250);
$("#uitslagPoll").fadeOut(0);
setTimeout(function(){
$("#uitslagPoll").html(inhoud).fadeIn(250, function(){
animateResults();
});
}, 500);
}
/*Uitslag weergeven*/
function Uitslag(id){
gekozenStem = parseFloat(0);
Gegevens();
Percentage();
Inhoud();
$("#Stemmen").fadeOut(250);
$("#uitslagPoll").fadeOut(0);
setTimeout(function(){
$("#uitslagPoll").html(inhoud).fadeIn(250, function(){
animateResults();
});
}, 500);
}Picture 3.png is hoe het moet zijn(dit is in FF)
Picture 2.png is de fout in IE
