tag gezocht

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Top Low-Code Developer Gezocht!

Bedrijfsomschrijving Unieke Kansen, Uitstekende Arbeidsvoorwaarden & Inspirerend Team Wij zijn een toonaangevende, internationale organisatie die de toekomst van technologie vormgeeft door het creëren van innovatieve en baanbrekende oplossingen. Ons succes is gebaseerd op een hecht en gepassioneerd team van professionals die altijd streven naar het overtreffen van verwachtingen. Als jij deel wilt uitmaken van een dynamische, vooruitstrevende en inspirerende werkomgeving, dan is dit de perfecte kans voor jou! Functieomschrijving Als Low-Code Developer ben je een cruciaal onderdeel van ons team. Je werkt samen met collega's uit verschillende disciplines om geavanceerde applicaties te ontwikkelen en te optimaliseren met behulp van Low-code

Bekijk vacature »

Jan R

Jan R

12/02/2022 10:45:55
Quote Anchor link
Hoi,

Ik zoek een "tag" waarin ik een voortgang kan simuleren.
Ik ken de tag progress maar ik heb niet genoeg aan gedaan en nog te doen. Ik zoek iets met meerdere kleuren en secties die per sectie ook tekst kan bevatten.

Nu heb ik een image gemaakt met php maar 100% gelukkig ben ik er ook niet mee.
Ik heb ook geprobeerd met een div (width: 100%) met verschillende span of divs in met width: ##% maar als de tekst te groot is verminkt deze de sectie.

Iemand ideeen?

Jan
 
PHP hulp

PHP hulp

19/03/2024 04:03:42
 
Ward van der Put
Moderator

Ward van der Put

12/02/2022 12:34:43
 
Ad Fundum

Ad Fundum

12/02/2022 19:36:08
Quote Anchor link
Meestal verzin ik gewoon iets met bestaande HTML tags en wat CSS, eventueel vanille JavaScript.
Een willekeurige voortgangsindicator:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!DOCTYPE html>
<html>
  <head>
    <style>
      .voortgang {
        --hoogte: 40px;
        width: 200px;
        height: var(--hoogte);
        line-height: var(--hoogte);
        border: 1px solid gray;
        background-image: linear-gradient(to top, red 0%, blue 100%);
        background-repeat: no-repeat;
        text-align: center;
        color: yellow;
        font-weight: bold;
        font-family: sans-serif;
        text-shadow:
          1px  1px 0 green,
          1px -1px 0 green,
         -1px  1px 0 green,
         -1px -1px 0 green;
      }
    </style>
  </head>
  <body>
    <div class="voortgang" style="background-size: 73% 40px;">
      73 %
    </div>
  </body>
</html>

Met CSS kan je ook animaties gebruiken, doorzichtige kleuren en filter-effecten. Wil je iets er bij, dan doe je dat met CSS. Je kunt HTML pseudo-elementen gebruiken (::before en ::after) en als dat niet genoeg is, maak je er vanuit PHP gewoon een HTML element bij. Moet het iets speciaals wat niet kan met CSS? Dan kan je overwegen om JavaScript er bij te gebruiken (daar was het ooit voor bedoeld).

Toevoeging op 12/02/2022 19:39:16:

Eventueel kan je tekst in een div laten afbreken door:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
 
Jan R

Jan R

12/02/2022 21:15:52
Quote Anchor link
deze oplossingen hebben allemaal spijtig genoeg maar 2 groepen/secties.
ik heb er meerdere nodig. 4 soms 5
 
Rob Doemaarwat

Rob Doemaarwat

12/02/2022 21:31:30
Quote Anchor link
Je kunt zo'n background in net zoveel secties indelen als je wilt.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
    <div style='position:relative; background-image: linear-gradient(to right, red 0%, red 25%,green 25%,green 50%,blue 50%, blue 75%, yellow 75%, yellow 100%); text-align: center'>
      <div id='todo' style='position: absolute; background: white; right: 0; top: 0; bottom: 0; left: 73%'></div>
    </div>
 
Jan R

Jan R

12/02/2022 23:17:01
Quote Anchor link
Inderdaad maar niet met tekst per sectie of zie ik iets verkeerd.
 
Ad Fundum

Ad Fundum

13/02/2022 10:49:20
Quote Anchor link
Als ik jou was zou ik die voorgangsindicatoren gewoon achter elkaar zetten, dan heb je zoveel secties als je wilt op 1 regel. Wil je dat het mooi uitlijnt, dan kan je CSS flexbox gebruiken (in plaats van een tabel).

Voor wie CSS flexbox niet vaak genoeg gebruikt om het paraat te hebben is deze link wel handig:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties
 
Jan R

Jan R

14/02/2022 07:05:34
Quote Anchor link
Aan flex heb ik eigenlijk niet gedacht. Werk hier zelden mee:)
Maar hoe los ik dan de tekstinhoud aan zodat deze past in de exacte breedte van de sectie?
Zover ik weet onbreekt er een css optie "fit"
dit zou handig zijn maar bestaat niet
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.fit {
   font-size: 15px;
   overflow: fit;
}
Gewijzigd op 14/02/2022 07:05:49 door Jan R
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.