Forum » Client-Side scripting » Rankvorderingsbar
Malik
Berichten: 866
avatar
Online Stuur privebericht
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
Laatst gewijzigd door Malik op 2011-05-28 16:54:36
28-05-2011 16:53
Dit topic is 446 keer bekeken door 77 verschillende leden
Reacties op: "Rankvorderingsbar"
1 | 2 Volgende pagina
arendjee
:haha:
Berichten: 482
avatar
Offline Stuur privébericht
hoe bedoel je die 20 procent?
in het script zelf?

bijvoorbeeld
Code | Selecteer Alles
minimaliseren
1
2
3
<div class="balk">
<div class="vord" style="width:<?php echo $vord ;?>;></div>
</div>


zoiets ofzo?
28-05-2011 16:58
Malik
Berichten: 866
avatar
Online Stuur privébericht
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.
28-05-2011 17:00
arendjee
:haha:
Berichten: 482
avatar
Offline Stuur privébericht
Code | Selecteer Alles
minimaliseren
1
2
3
4
5
6
7
8
9
10
11
<?php
$vord = 30 ;
?>

<td align="center">
<div class="dash_progress_bar">
<div class="Progress_Bar">
<div style="width:<?php echo $vord;?>%;">&nbsp;</div>
</div>
</div>
<?php echo $vord;?>%</td>


Code | Selecteer Alles
minimaliseren
1
2
3
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
maar miss dat je der wat mee kunt
28-05-2011 17:05
Malik
Berichten: 866
avatar
Online Stuur privébericht
Ik heb iets vlug in elkaar gestoken maar merk nu dat hij margin-top: 2px; niet wilt uitvoeren.
Code | Selecteer Alles
minimaliseren
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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?
=========
29-05-2011 18:58
Luc
devow.nl
Berichten: 1592
avatar
Offline Stuur privébericht
wat moet de margin doen?
29-05-2011 19:24
Malik
Berichten: 866
avatar
Online Stuur privébericht
als je bekijkt is houder 4 cm groter (2 boven 2 beneden)

De bar moet in midden zijn en dus 2px van bovenaf
29-05-2011 19:28
L.Groot
Rapifia Europe
Berichten: 3716
avatar
Offline Stuur privébericht
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.
29-05-2011 20:56
Malik
Berichten: 866
avatar
Online Stuur privébericht
@L.Groot en hoe krijg ik dan dat hij maar 1 keer de jQuery laadt?

Want ik gebruik ?p systeem en het is niet de bedoeling dat hij bij elke klik opnieuw laadt.
30-05-2011 09:10
L.Groot
Rapifia Europe
Berichten: 3716
avatar
Offline Stuur privébericht
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 .
30-05-2011 10:12
Malik
Berichten: 866
avatar
Online Stuur privébericht
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:
Het is me gelukt met jQuery dankjewel.
30-05-2011 10:18
Reageer op: "Rankvorderingsbar"
1 | 2 Volgende pagina
Je kan niet reageren omdat je niet bent ingelogd. Inloggen of Aanmelden