bewerk css classe

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Full Stack Developer

Dit ga je doen Ontwikkelen van Product Informatie Management (PIM) systemen; Werken aan zowel grotere als kleine projecten voor toonaangevende klanten binnen o.a. de retail; Verantwoordelijk voor de front-end werkzaamheden; Naast de front-end werk je ook aan de backend. Hier ga je werken Als Full Stack Developer komt je te werken binnen een vooruitstrevende organisatie die Product Informatie Management (PIM) systemen levert aan hun klanten. Hun klanten zijn toonaangevende bedrijven binnen o.a. de retail. De organisatie zit gevestigd in regio Zwolle en bestaat uit zo'n 35 medewerkers, waarvan 30 IT. Je komt te werken binnen één van de zelfsturende development

Bekijk vacature »

Freelance senior ICT ontwikkelaar (zzp)

Belastingdienst B/cao Startdatum inzet: 9-1-2023 Einddatum inzet: 31-12-2023 Uren per week: 36,00 Standplaats: Apeldoorn Max tarief: € 86,00 Team LIV is op zoek naar een enthousiaste, flexibele, multitaskende en hands-on ontwikkelaar met veel ervaring in het gedeeltelijk of volledig zelfstandig bepalen van ontwikkel- en realisatie aanpak. Onze nieuwe collega moet in staat zijn te werken in een hectische omgeving waarbij er sprake is van zeer verschillen realisatietrajecten voor wat betreft(technische)diepgang, startmoment (wel/geen beschrijvingen beschikbaar) en klantcontact. De gekozen ontwikkelmethodiek dient passend te zijn voor het op te lossen vraagstuk waarbij samenwerking met de testengineer in relatie tot Systeem integratie test

Bekijk vacature »

Junior Mendix Developer

Wat wij bieden een contract voor onbepaalde tijd en goede primaire arbeidsvoorwaarden; een flexibele werkomgeving waar je tijd en plaats onafhankelijk kan werken; een ruim mobiliteitsbudget voor een keuze in een leaseauto of voor je eigen vervoer; een flex benefit budget en collectieve regelingen (o.a. thuiswerkfaciliteiten, korting op je zorgverzekering en bedrijfsfitness); een keuze in een laptop en je ontvangt een telefoonvoucher t.w.v. €290,-; een betrokken community dat gericht is op jouw interesses, teambuilding, gaming en evenementen; onbeperkt opleidingsbudget om je technisch en persoonlijk te blijven ontwikkelen. Wat jij meeneemt je hebt een (technische) WO-diploma behaald of hebt jouw WO

Bekijk vacature »

React Native Developer

As a React Native Developer you will be dedicated to bring the app to the next level. You will be working on several projects. This can be done in the office or you can do it from your own workstation if you only come to the office once a week to consult. You will be researching and building a lot on your own and there will be plenty of support to assist you should you not be able to figure it out. Functie-eisen You have 3+ years experience with React Native You have experience with Javascript frameworks You have experience

Bekijk vacature »

Java-softwaredeveloper

Wat je gaat doen: Dit ga je doen Daar kunnen we heel kort over zijn: software ontwikkelen met de agile-/scrumteams van toonaangevende organisaties. Zoals ministeries, gemeentes, financiële instellingen en retail- en energiebedrijven. En als het bij je past, begeleid je collega-developers in het ontwikkelproces. Doordat je tijdelijk aan een opdracht werkt, doe je in korte tijd veel mooie ervaringen op en leer je nieuwe technieken en tools kennen. Je teamleden werken bijvoorbeeld met Spring, JPA/Hibernate, AJAX, REST/JSON, GIT, AWS en TDD. Het interessante is dat jij volledig in control bent en zelf kiest welke opdrachten je oppakt. Het soort rol,

Bekijk vacature »

Freelance senior ICT ontwikkelaar (zzp)

Belastingdienst B/cao Startdatum inzet: 9-1-2023 Einddatum inzet: 31-12-2023 Uren per week: 36,00 Standplaats: Apeldoorn Max tarief: € 86,00 Team LIV is op zoek naar een enthousiaste, flexibele, multitaskende en hands-on ontwikkelaar met veel ervaring in het gedeeltelijk of volledig zelfstandig bepalen van ontwikkel- en realisatie aanpak. Onze nieuwe collega moet in staat zijn te werken in een hectische omgeving waarbij er sprake is van zeer verschillen realisatietrajecten voor wat betreft(technische)diepgang, startmoment (wel/geen beschrijvingen beschikbaar) en klantcontact. De gekozen ontwikkelmethodiek dient passend te zijn voor het op te lossen vraagstuk waarbij samenwerking met de testengineer in relatie tot Systeem integratie test

Bekijk vacature »

Integration Developer

Als Integration Developer zorg jij ervoor dat de systemen van de klanten geautomatiseerd kunnen communiceren met de Bleckmann systemen. Daarnaast zorg je voor dat interne en externe rapportages worden gemaakt en worden onderhouden. Verder zorg je ervoor dat de documenten volgens de specificatie van de klanten uitzien. Je komt terecht in een enthousiast team dat op een duurzame manier bedrijven, markten en mensen verbindt. Binnen deze omgeving krijg jij de veelzijdige taak om onze IT-processen te automatiseren en verder te stroomlijnen Om bovenstaande taken uit te kunnen voeren krijg je een interne opleiding van onze softwarepakketten en bedrijfsprocessen en ben

Bekijk vacature »

Freelance senior ICT ontwikkelaar (zzp)

Belastingdienst B/cao Startdatum inzet: 9-1-2023 Einddatum inzet: 31-12-2023 Uren per week: 36,00 Standplaats: Apeldoorn Max tarief: € 86,00 Team LIV is op zoek naar een enthousiaste, flexibele, multitaskende en hands-on ontwikkelaar met veel ervaring in het gedeeltelijk of volledig zelfstandig bepalen van ontwikkel- en realisatie aanpak. Onze nieuwe collega moet in staat zijn te werken in een hectische omgeving waarbij er sprake is van zeer verschillen realisatietrajecten voor wat betreft(technische)diepgang, startmoment (wel/geen beschrijvingen beschikbaar) en klantcontact. De gekozen ontwikkelmethodiek dient passend te zijn voor het op te lossen vraagstuk waarbij samenwerking met de testengineer in relatie tot Systeem integratie test

Bekijk vacature »

Integratie Ontwikkelaar

Dit ga je doen Je houdt je voornamelijk bezig met het maken en onderhouden van koppelingen tussen verschillende ERP systemen en de ESB (Enterprise Service Bus) van klanten. Je schakelt met de klanten om hen zo goed mogelijk van dienst te zijn. Je bent meer werkzaam met integratie producten dan met projecten. Je bent werkzaam voormaatschappelijk relevante organisaties. Je bent werkzaam in zelfsturende teams, waardoor je ook de mogelijkheid hebt om wat meer leidinggevende taken uit te kunnen voeren; Hier ga je werken Deze organisatie is er een waar je bij wilt horen! Lijkt jou het gaaf om de ultieme

Bekijk vacature »

.NET developer

Over deze functie Als .NET developer bouw je mee aan innovatieve dienstverlening en draag jij bij aan de groei van de organisatie. Kenter groeit namelijk hard op het gebied van kwaliteit, professionaliteit en innovatie en is altijd op zoek naar verbeteringen. Zij richten zich op de ontwikkeling van moderne meetoplossingen, ook juist op korte termijn. Zo kunnen zij vooruitlopen op het gebied van IoT, realtime data en andere innovatieve oplossingen. Als .NET developer ben je van onschatbare waarde. Je werkt samen met ruim 20 IT professionals aan zowel greenfield- als legacy-projecten. Dat doe je in samenwerking met ontwikkelaars, data engineers,

Bekijk vacature »

Developer Low-code

Dit ga je doen Low-code ontwikkeling van software voor landelijk bekende organisaties; Opleveren van mooie eindproducten, middels de Agile methodiek; Samenwerken in een team van 10 collega's; Direct contact met de eindklant over de gewenste oplossingen. Hier ga je werken Als Developer kom je te werken in de regio van Lelystad bij een organisatie die met toonaangevende klanten uit heel Nederland samen werkt. De producten en diensten van de organisatie bereiken miljoenen Nederlanders. Hierbij komt een grote hoeveelheid informatie kijken en deze moet discreet en veilig verwerkt worden. De processen die hierbij horen worden door het IT team vormgegeven. De

Bekijk vacature »

Senior Developer 3D computing

Senior Developer 3D computing Als Senior Developer 3D Computing bij KUBUS word je verantwoordelijk voor de implementatie van user-interacties en 3D optimalisaties van onze 3D tools voor visualiseren en analyseren van 3D gebouwmodellen. We gebruiken de modernste web technologie als onderdeel van BIMcollab, ons platform voor 3D model-validatie en issue-management, bedoeld om de kwaliteit van 3D design-modellen voor gebouwen te verbeteren. Betere 3D modellen leiden tot betere gebouwen, dus zo draag je bij aan verduurzaming van de gebouwde omgeving met slimmer gebruik van materialen, minder verspilling en energie-efficiënte gebouwen. Een goede gebruikerservaring staat bij ons hoog in het vaandel; we

Bekijk vacature »

Lasrobotprogrammeur/operator (M/V)

Heb je interesse in trekkers en beschik je overvlijmscherpse precisie? Solliciteer dan op deze vacature! Als Lasoperator ben je vooral bezig met het maken van nieuwe lasrobotprogramma’s en het optimaliseren van bestaande programma’s, zowel online als offline (incl. het bedienen van de Lasrobots). Daarnaast draag je bij aan een optimaal rendement van de las robots. Verder heb je de volgende werkzaamheden: Het meewerken als operator c.q. Robotlassen niveau 2 (van complexe samenstellingen/halffabricaten), het om- en instellen van de diverse stations van lasmallen (productdragers), het afwerken van laswerk (verwijderen lasspetters en oxiden), het bewaken van de machineplanning (op bewerkingen) incl. de

Bekijk vacature »

Senior Java developer (backend)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

React native developer

Looking for a new React native job? Talk to our expert who knows all about Dutch companies developing apps. Find out the in's & out's and your opportunities. Our client has have received a new investment and therefore want to get started quickly to expand their new app with new features. If you are an expert with React native they would love to have you in their team. Functie-eisen You have at least 4 years of experience developing in React Native apps and... TypeScript, Firebase, GIT, REST, and Swagger. Working together is your second nature Passion for the development profession

Bekijk vacature »
Jan R

Jan R

31/08/2022 11:56:21
Quote Anchor link
Kan ik een css classe wijzigen? Ik bedoel echt de classe en niet element.classname of toggleclass

vb volgende classe
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
span.width200 {
    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
 
PHP hulp

PHP hulp

01/02/2023 10:22:37
 
Ivo P

Ivo P

31/08/2022 12:23:59
Quote Anchor link
heb je hier wat aan: https://stackoverflow.com/questions/566203/changing-css-values-with-javascript

(en lees dan het commentaar erbij, want niet elk antwoord is even goed)
 
Ozzie PHP

Ozzie PHP

31/08/2022 13:20:24
Quote Anchor link
Ik weet niet of ik je helemaal goed begrijp.

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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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.
 
Ivo P

Ivo P

31/08/2022 14:59:31
Quote Anchor link
In dat geval, Ozzie, pas je de momenteel aanwezige elementen aan.
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)
 
Jan Koehoorn

Jan Koehoorn

31/08/2022 15:02:36
Quote Anchor link
Ik heb redelijk wat ervaring met CSS (ongeveer vanaf het begin) en deze truc nog nooit nodig gehad, maar goed ;-)

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)
PHP script in nieuw venster Selecteer het PHP script
1
<span class="js-width-dynamic">Hallo allemaal!</span>

Dan is het in je code meteen duidelijk wat er gebeurt.
 
Ozzie PHP

Ozzie PHP

31/08/2022 16:44:55
Quote Anchor link
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.
 
Jan R

Jan R

31/08/2022 19:51:04
Quote Anchor link
Hi

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)
PHP script in nieuw venster Selecteer het PHP script
1
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";
    }
 
Jan Koehoorn

Jan Koehoorn

31/08/2022 20:18:03
Quote Anchor link
Wat je nu doet (met JavaScript de breedste opzoeken en die vervolgens op alle spans toepassen) is ongelofelijk makkelijk met CSS Flexbox/Grid te bereiken. Het loont echt de moeite om dat te leren. Een voorbeeldje:

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
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>
 
Ozzie PHP

Ozzie PHP

31/08/2022 20:41:22
Quote Anchor link
@Jan Koehoorn

Wellicht leuk als je even een uitleg erbij kunt geven en een voorbeeldje online plaatst via bijv. https://jsfiddle.net/ .
 
Jan R

Jan R

01/09/2022 18:58:44
Quote Anchor link
Ik heb het nooit werkende gekregen via flex
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
 
Jan Koehoorn

Jan Koehoorn

01/09/2022 19:47:57
Quote Anchor link
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/ .


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)
PHP script in nieuw venster Selecteer het PHP script
1
    grid-template-columns: repeat(4, 1fr);


Tussen de grid items hebben we een gutter/gap van 10px:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
    grid-gap: 10px;


Alle kolommen even breed, zonder JavaScript ;-)
Gewijzigd op 01/09/2022 19:48:19 door Jan Koehoorn
 
Ozzie PHP

Ozzie PHP

02/09/2022 00:10:26
Quote Anchor link
Jan Koehoorn op 01/09/2022 19:47:57:
Alle kolommen even breed, zonder JavaScript ;-)

https://jsfiddle.net/ntvh6eqk/ :-)
 
Jan Koehoorn

Jan Koehoorn

02/09/2022 09:09:31
 
Ozzie PHP

Ozzie PHP

02/09/2022 12:15:58
Quote Anchor link
Ja, niet stiekem een "word-wrap: break-word;" toevoegen hè

;-) :-)

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/
 



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.