bewerk css classe
vb volgende classe
Code (php)
1
2
3
4
2
3
4
span.width200 {
width: 200px;
display: inline-block;
}
width: 200px;
display: inline-block;
}
Hier wil ik de ideale breedte berekenen en dan width wijzigen in die ideale breedte.
Ik kan natuurlijk ook alle spans met queryselectorall opzoeken en hiervan de breedte instellen maar het lijkt me beter om de classe te wijzigen.
Jan
(en lees dan het commentaar erbij, want niet elk antwoord is even goed)
Dus overal waar op de webpagina die class width200 wordt gebruikt wil jij een andere width hebben dan die 200px. Begrijp ik het zo goed?
Dus als op de pagina staat:
Code (php)
1
<span class="width200">Hallo allemaal!</span>
Dan zou dat normaal 200px breed zijn. En jij wil die breedte nadat de pagina is geladen wijzigen naar iets anders. Correct?
In dat geval kun je dat makkelijk doen via jQuery.
Code (php)
1
$(".width200").css("width", "500px");
Je kunt dan eerst de ideale breedte berekenen. Die stop je in een variabele. En waar nu in het voorbeeld 500px staat, plaats je dan die variabele.
Dat kunnen er bijvoorbeeld 1000 zijn, wat dus enige moeite voor je browser kost.
Daarnaast kun je door ajax calls of simpelweg javascript acties je pagina uitbreiden met elementen die ook de class width200 hebben. Deze worden dan niet automagisch aangepast naar de width 500px.
Vandaar denk ik de vraag om dat in de css-definitie aan te passen.
Ik zou dan niet width200 kiezen als naam voor de class, aangezien dit iets met 200px suggereert.
Dan zou je beter widthschermvullend of iets dergelijks kunnen nemen.
Dan verander je centraal die waarde van 200px naar 500px.
(denk trouwens ook eens aan width:100%. Al gaat dat niet op voor lettergrootte of kleuren die je mogelijk achteraf wilt bewerken)
Als je een breedte dynamisch aanpast, zou ik als classname nooit "width200" gebruiken. Want iets later is hij misschien 500px breed en dat is verwarrend. Gebruik dan iets als:
Code (php)
1
<span class="js-width-dynamic">Hallo allemaal!</span>
Dan is het in je code meteen duidelijk wat er gebeurt.
Ivo P op 31/08/2022 14:59:31:
In dat geval, Ozzie, pas je de momenteel aanwezige elementen aan.
Volgens mij is dat ook wat hij wil. En vandaar ook mijn vraag of ik hem goed heb begrepen.
Jan Koehoorn op 31/08/2022 15:02:36:
Als je een breedte dynamisch aanpast, zou ik als classname nooit "width200" gebruiken. Want iets later is hij misschien 500px breed en dat is verwarrend.
Dat is uiteraard waar, maar het kan zijn dat er bijvoorbeeld van een bepaald theme of een bepaalde extensie gebruikt wordt gemaakt die die classnaam hanteert, waardoor je daar aan gebonden bent.
De naam width200 was gewoon 1: als voorbeeld en 2: als fallback indien javascript zou falen of uitgeschakeld is.
De optie van jquery lukt wel maar ik hou veel meer van Vanilla JavaScript. Eventueel met een aardbeiensausje :) Ik vind jq zo moeilijk om te debuggen. maar dat is mijn probleem.
De oplossing van ivo p komt het dichts bij wat ik zocht. Echter als ik alle csssheets moet doorlopen om de juiste te vinden, dan alle rules doorlopen om weer de juiste te vinden opnieuw de style doorzoeken.
Dan denk ik dat de oude oplossing sneller en beter blijft.
Toch allen bedankt om te helpen.
ter info oude code
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
let players = document.querySelectorAll("span.spelerwit, span.spelerzwart");
let max=0;
for (i=0;i<players.length;i++) {
if (max<players[i].scrollWidth) {
max = players[i].scrollWidth;
}
}
for (i=0;i<players.length;i++) {
players[i].style.width = max + "px";
}
let max=0;
for (i=0;i<players.length;i++) {
if (max<players[i].scrollWidth) {
max = players[i].scrollWidth;
}
}
for (i=0;i<players.length;i++) {
players[i].style.width = max + "px";
}
Code (php)
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
40
41
42
43
44
45
46
47
48
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
40
41
42
43
44
45
46
47
48
<?php
$spelers = [
'Jan',
'Piet',
'Klaas',
'Speler met een heel lange naam',
];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 0 auto;
width: 80%;
border: 1px solid;
background-color: lightblue;
border-radius: 10px;
min-height: 200px;
}
.speler {
display: inline-block;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="wrapper">
<?php foreach ($spelers as $speler): ?>
<span class="speler"><?=$speler;?></span>
<?php endforeach;?>
</div>
</body>
</html>
$spelers = [
'Jan',
'Piet',
'Klaas',
'Speler met een heel lange naam',
];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 0 auto;
width: 80%;
border: 1px solid;
background-color: lightblue;
border-radius: 10px;
min-height: 200px;
}
.speler {
display: inline-block;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="wrapper">
<?php foreach ($spelers as $speler): ?>
<span class="speler"><?=$speler;?></span>
<?php endforeach;?>
</div>
</body>
</html>
Wellicht leuk als je even een uitleg erbij kunt geven en een voorbeeldje online plaatst via bijv. https://jsfiddle.net/ .
Structuur is 1 speeldag (370px) met onderliggend
* titel
* datum
* De partijen
Wit speler (130px)
uitslag (40px)
Zwart speler (130px)
Officiele ronde (40px)
* Vrije spelers
Deze groep zoveel mogelijk op 1 rij dan naar volgende rij.
De hoogte en breedte van elke groep moet ook hetzelfde zijn.
praktijk: https://www.janr.be/schaak/sc_post-gent/?page=volgenderonden&all=1
Ik weet het ik wil veel maar momenteel ben ik blij met mijn resultaat maar probeer het toch te verbeteren. Als ik de breedte exact kan bepalen kunnen er soms meer op en spaar ik ook papier bij afdruk (verplicht!).
Jan
Ozzie PHP op 31/08/2022 20:41:22:
@Jan Koehoorn
Wellicht leuk als je even een uitleg erbij kunt geven en een voorbeeldje online plaatst via bijv. https://jsfiddle.net/ .
Wellicht leuk als je even een uitleg erbij kunt geven en een voorbeeldje online plaatst via bijv. https://jsfiddle.net/ .
https://jsfiddle.net/jankoehoorn/fm1r570o/33/
Uitleg: de container div krijgt display: grid in de css.
Het grid krijgt 4 even grote kolommen:
Code (php)
1
grid-template-columns: repeat(4, 1fr);
Tussen de grid items hebben we een gutter/gap van 10px:
Code (php)
1
grid-gap: 10px;
Alle kolommen even breed, zonder JavaScript ;-)
Gewijzigd op 01/09/2022 19:48:19 door Jan Koehoorn
Jan Koehoorn op 01/09/2022 19:47:57:
Alle kolommen even breed, zonder JavaScript ;-)
https://jsfiddle.net/ntvh6eqk/ :-)
;-) :-)
Toevoeging op 02/09/2022 12:18:39:
Maar het zijn nu toch gewoon 4 blokken met dezelfde breedte ongeacht de langste naam? Zelfs als de namen klein zijn? Of mis ik iets?
https://jsfiddle.net/xwt9qfd3/