Beste leden van CP,
Ik ben bezig met het slicen van een rankvorderingsbar maar snap het eventjes niet meer.
Ik heb een houder (image) en een plaatje met een volle 100% (image).
Nou wil ik zo dat wanneer je op 20% zit dat hij alleen 20% van de bar laat zien, dus is mijn vraag hoe kan ik het, het best aanpakken?
Alvast bedankt voor jullie hulp.
Met vriendelijke groeten,
Malik
hoe bedoel je die 20 procent?
in het script zelf?
bijvoorbeeld
<div class="balk">
<div class="vord" style="width:<?php echo $vord ;?>;></div>
</div>zoiets ofzo?
Plaatje verschilt steeds van kleur, zou het gewoon met width: kunnen?
Want ik dacht dat width: plaatje zou verkleinen naar aangegeven breedte terwijl ik wil dat tie
alleen de aangegeven breedte toont van de plaatje.
<?php
$vord = 30 ;
?>
<td align="center">
<div class="dash_progress_bar">
<div class="Progress_Bar">
<div style="width:<?php echo $vord;?>%;"> </div>
</div>
</div>
<br /><?php echo $vord;?>%</td>div.dash_progress_bar {width:75px;text-align:left;}
div.dash_progress_bar div.Progress_Bar {float:left;width:75px;height:10px;border:1px solid #767676;background-image: url('bg balk');}
div.dash_progress_bar div.Progress_Bar div {height:10px;background-image: url('virdbalk');}heb dit ergens vandaan getrokken :p
maar miss dat je der wat mee kunt 
Ik heb iets vlug in elkaar gestoken maar merk nu dat hij margin-top: 2px; niet wilt uitvoeren.
<html>
<head></head>
<body>
<style type="text/css">
#rank-holder{
background: url('./_images/rankvord/houder-rank.png');
width: 151px;
height: 29px;
}
#rank-bar{
background: url('./_images/rankvord/bar-rank.png');
margin-left: 2px;
margin-top: 2px;
max-width: 147px;
max-height: 25px;
height: 25px;
line-height: 25px;
}
.bar{
color: #fff;
padding-left: 120px;
font-size: 12pt;
}
</style>
<div id="rank-holder">
<div id="rank-bar" style="width: 75%;">
<span class="bar">75%</span>
</div>
</div>
</body>
</html>==
Weten jullie misschien hoe ik het kan oplossen?
=========
wat moet de margin doen?
als je bekijkt is houder 4 cm groter (2 boven 2 beneden)
De bar moet in midden zijn en dus 2px van bovenaf
Misschien dat je gebruik kan maken van jQuery progressBar?
http://plugins.jquery.com/project/jQueryProgressBar
Voorbeeld zie:
http://t.wits.sg/misc/jQueryProgressBar/demo.php
Volgens mij kon je daar ook eigen images in implanteren en dat gaat volgens mij makkelijk en snel.
Hoe bedoel je dat precies?
Bij elke klik word inderdaad de hele jQuery library weer opnieuw geladen. Dan zul je met caches moeten gaan werken, maar ik snap het probleem eerlijk gezegd niet ;).
men zal geirriteerd raken aan steeds laden, vandaar dat ik het 1x wil laten laden en dat tie dan pas bij volgende sessie weer laad.
Nieuwe reactie samengevoegd met originele reactie op 30.05.11 10:21:37:
:slotje: Het is me gelukt met jQuery dankjewel.
Vele andere leden zitten geloof ik te springen om een geweldige oplossing.
Heb je nog geen account? Registreer je nu en word deel van onze community!