[JS] Automatisch website breedte aanpassen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java Developer

Dit ga je doen Ontwerpen en bouwen van nieuwe functionaliteiten binnen de complexe omgeving; Proactief de processen kwalitatief en efficient inrichten; Opzetten van Unit Tests; Code Reviews; Regie nemen voor innovatieve projecten; Landschap beheren en de bijbehorende ketens hierbij in het oog houden. Hier ga je werken De organisatie is actief binnen de financiele branche en heeft een IT afdeling van circa 450 man. De organisatie voorziet de maatschappij binnen de financiele dienstverlening en is gedurende de jaren een onmisbare schakel geworden. Het is een high profile organisatie waar ze veel te maken hebben met veranderingen voortkomend uit maatschappelijke ontwikkelingen,

Bekijk vacature »

Junior Software Developer (HBO / WO)

Functie omschrijving Wij zijn op zoek naar een Junior Software Developer! Sta jij aan het begin van je carrière en heb je net je HBO of WO-diploma in de richting van ICT of Techniek mogen ontvangen? En heb jij grote affiniteit met software development? Dan hebben wij bij Jelling IT Professionals de perfecte opdrachtgever in de omgeving van Utrecht, die jou tot een volwaardig Fullstack Software Developer gaat opleiden. Binnen deze grote organisatie krijg je ruime en professionele trainingen die jouw in korte tijd vakbekwaam maken. Niet alleen het aan technisch aspect, maar ook zeker jouw persoonlijke ontwikkeling wordt veel

Bekijk vacature »

Junior Software Developer

Functie omschrijving Wij zijn op zoek naar een Junior Software Developer!? Sta jij aan het begin van jouw loopbaan of heb jij misschien al enige ervaring? Vind jij het daarnaast belangrijk om jezelf constant te kunnen ontwikkelen en uitdagen? Lees dan snel verder! Voor een vooraanstaand softwarehuis in Nieuwegein ben ik op zoek naar een Junior Software Developer. De eigenaar van het bedrijf is ervan bewust dat je als junior nog een hoop kan leren, waardoor je de eerste maanden veel begeleiding en diverse trainingen krijgt. Daarna ga je samen met je collega's aan zowel kleine als grote projecten werken.

Bekijk vacature »

Back-end ontwikkelaar

Functie omschrijving Wil jij meebouwen aan diverse databasesystemen in een klein bedrijf met een platte organisatie? In een team van ruim 10 ontwikkelaars wordt er aan diverse ICT oplossingen gewerkt. Jouw taken hierbij zullen bestaan uit: Het onderhouden en door-ontwikkelen van bestaande databases. Denk hierbij aan schema verbeteringen en performance-tuning. Bij nieuwe ontwikkelingen ga jij ook bezig met het bouwen van het databaseschema. Omdat je in een klein team werkt zal je ook de C# routine verder uitbouwen en ontwikkelen. Ook kan je meedraaien in algemene refactory-, ontwikkel- of testwerkzaamheden. Je zal voornamelijk gebruik maken van de volgende technieken: .NET

Bekijk vacature »

Software Developer

Dit ga je doen Je bent verantwoordelijk voor de warehouse applicatie die een integratie heeft met de PLC laag; Je ontwikkelt in C#/.Net; Je werkt mee aan de migratie naar .NET 6; Je bent verantwoordelijk voor het ontwikkelen van interfaces en het visualiseren van componenten; Je denkt mee over het design voor business oplossingen; Je bent verantwoordelijk voor het testen van de gebouwde oplossing. Hier ga je werken Voor een internationale organisatie in de transport zijn wij momenteel op zoek naar een Software Developer. Zij zijn wereldwijd de grootste speler en lopen voorop met het automatiseren van alle processen van

Bekijk vacature »

Softwareontwikkelaar Cleopatra

Functieomschrijving: De directie Verkeer en Openbare ruimte van de gemeente Amsterdam beschikt over een softwareapplicatie, "Cleopatra", waarmee geautomatiseerde handhaving plaatsvindt (op basis van kentekenherkenning) van bepaalde gebieden waarin toegangseisen worden gesteld aan het verkeer. Voorbeelden ervan zijn de milieuzones, de zone zwaar verkeer, handhaving van bromen snorfietser op het fietspad en autoluwe gebieden. Voor de doorontwikkeling en uitbreiding ervan zijn gespecialiseerde softwareontwikkelaars nodig die helpen bij het programmeren van de handhavingsmodules voor nieuwe gebieden en het verbeteren en bijwerken van de bestaande onderdelen van de softwareapplicatie.De opdracht bestaat uit: het programmeren van de diverse modules;het tijdens demo's tonen van de

Bekijk vacature »

C# .Net Developer

Dit ga je doen Het bouwen van Api's; Nieuwe oplossingen bouwen met C# .Net; De huidige software uitbouwen met C# .Net; Meewerken in projecten; Meedenken aan de toekomstplannen en verbeteringen; Onderdeel van het Scrum Team. Hier ga je werken Onze klant is een dienstverlenende organisatie voor diverse soorten organisaties in Nederland. Ze zijn van oorsprong een familiebedrijf en er is een open cultuur. Ze zijn vooruitstrevend op IT gebied en hebben een eigen inhouse development team van circa 11 man. Je komt hier te werken in het subteam .Net Core. Hier werken ze volgens scrum met de nieuwste technieken en

Bekijk vacature »

Senior Front-end Developer

Wordt jij de nieuwe Front end specialist / developer? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Onze klantenkring is groot en divers, dat vraagt om flexibiliteit van jou. Tegelijkertijd betekent dit dagelijks nieuwe dingen leren én dat geen werkdag hetzelfde is. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling waarbij iedereen welkom is, zowel binnen als

Bekijk vacature »

PHP/Symfony developer

Functieomschrijving Vanuit het hoofdkantoor in omgeving Bergen op Zoom ben je als PHP/Symfony Developer niet alleen bezig met software ontwikkeling. Je bent buiten ontwikkeling ook continu bezig met het zoeken naar nieuwe trends en ontwikkelingen die van waarde kunnen zijn voor de efficiëntie van software ontwikkeling. Techstack: PHP, Symfony & mySQL. Jouw takenpakket ziet er als volgt uit: Het ontwerpen en implementeren van webapplicaties met het Symfony-framework; Het testen van ontwikkelde applicaties om te zorgen dat ze goed functioneren en voldoen aan de eisen van de klanten; Het schrijven van een schone en efficiënte code volgens het Symfony framework; Onderhouden

Bekijk vacature »

PHP developer (Laravel, Docker, Gitlab-CI)

Functie Het IT-team bestaat momenteel uit 4 ontwikkelaars. Ieder onderdeel van de software draait op aparte servers en het bestaat dus echt uit verschillende componenten intern ontwikkeld en je werkt aan alle facetten. Van uitbreiding van de core tot maatwerk voor de klant. Ook liggen er verschillende uitdagingen op servervlak en databases. Je zult de eerste periode veel samenwerken met de lead developer om vervolgens echt je gang te gaan binnen de software. Een groot deel van de systemen is gebouwd met behulp van het Laravel framework en PHP (minimaal 7.2), Docker voor lokaab gebruik en Gitlab-CI voor het deployen

Bekijk vacature »

Senior java ontwikkelaar integratie

Functieomschrijving Voor de gemeente Rotterdam zijn wij op zoek naar een senior java ontwikkelaar integratie. Taken Binnen een zelfsturend Scrumteam voer je geheel zelfstanding je opdrachten uit en levert het eindresultaat op aan het Integratieteam. Jij voelt je net als alle teamleden verantwoordelijk voor alle aspecten, vanaf de vraag tot en met de oplevering in productie. Je bent kritisch, je helpt de klant om zijn wensen helder te krijgen, je schrijft zelfstandig clean code die van hoge kwaliteit is, met bijbehorende unit- en integratietesten, je ondersteunt zo nodig bij deployments naar productie. Het Integratieteam bouwt componenten (Endpoints) op de ESB.

Bekijk vacature »

C# developer

Functie Als ervaren Software Engineer wordt jij verantwoordelijk voor het bedenken en ontwikkelen van technische (maatwerk) oplossingen voor onze klanten en dit samen met de klant af te stemmen. Jij wordt o.a. verantwoordelijk voor de doorontwikkeling het software pakket welke voor ons enorm belangrijk is. Dit pakket zorgt er namelijk voor dat wij complete productielijnen kunnen aansturen en monitoren. Daarnaast heb jij actief contact met onze hoofdvestiging om het software achter een van onze systemen te verbeteren en te herschrijven. Momenteel zijn onze C# applicaties geschreven met o.a. Winforms. Echter hebben wij de actieve ambitie om dit te gaan herschrijven

Bekijk vacature »

Front-End Developer

As a Front-End Developer at Coolblue you improve the user-friendliness of our webshop for millions of customers. How do I become a Front-End Developer at Coolblue? As a Front-End Developer you work on the user-friendliness of our webshop for millions of customers. You enjoy working with the UX Designer to pick up stories. You get energy from coming up with creative solutions and are happy to present these within the team. You also take pride in your work and welcome any feedback. Would you like to become a Front-End Developer at Coolblue? Read below if the job suits you. You

Bekijk vacature »

C# developer

Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Ga je bij ons als C# Developer aan de slag? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling. Mede hierdoor zij wij dit jaar Microsoft Partner of the Year geworden. Sogetisten staan klaar voor elkaar, hebben lol met elkaar en daarmee behalen we de mooiste resultaten! Werken bij Sogeti

Bekijk vacature »

Traineeship Full Stack .NET Developer

Dit ga je doen Start op 7 augustus 2023 bij de Experis Academy en ontwikkel jezelf tot een gewilde Full Stack .NET Developer. Maar hoe ziet het traineeship eruit en wat kun je verwachten? Periode 1 De eerste 3 maanden volg je fulltime, vanuit huis, een op maat gemaakte training in teamverband. Je leert belangrijke theorie en krijgt kennis van de benodigde vaardigheden en competenties die nodig zijn om de IT-arbeidsmarkt te betreden. Zowel zelfstandig als in teamverband voer je praktijkopdrachten op het gebied van front- en backend development uit. Wat er per week op het programma staat kun je

Bekijk vacature »
Steef

Steef

18/08/2009 11:21:00
Quote Anchor link
Hallo PHPhulp'ers,

Ik ben wat aan het proberen met het automatisch resizen van een website aan de hand van de breedte van het venster.

CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<style type="text/css">
#container {
    width: 200px; margin: 0 auto 0; height: 300px; background: #F00;
}
</style>


Javascript:
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
<script type="text/javascript">
function getWidth()
{
    if(typeof window.innerWidth != 'undefined')
        return window.innerWidth
    
    else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0)
        return document.documentElement.clientWidth
    
    else
        return document.getElementsByTagName('body')[0].clientWidth
}

function resizeHandler(width)
{
    if(width<1050)
        document.getElementById('container').style.width = '600px';
    
    else if(width<1025)
        document.getElementById('container').style.width = '1024px';
        
    else if(width<1209)
        document.getElementById('container').style.width = '300px';
    
    else if(width>1209)
        document.getElementById('container').style.width = '100px';
}
</script>


Body:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>

<div id="container">
<a href="#" onmouseover="resizeHandler(getWidth());">reset website resolutie</a>

<script type="text/javascript">
    resizeHandler(getWidth());
</script>

<p>test de viewport resolutie van de pagina</p>
</div>

</body>


Het lukt dus al aardig alleen zodra je de website hebt geopent dan voert hij de code uit (de javascript). Ook doet hij dit zodra je met je muis over de tekst van 'reset website resolutie' (bijvoorbeeld als je je venster kleiner/groter hebt gemaakt), alleen doe je dit nog een keer dan doet de code het niet meer.

Heeft iemand een oplossing of wellicht een andere suggestie om de website breedte automatisch aan te passen (ik ben geen grote ster in javascript!)

Alvast bedankt mensen!
 
PHP hulp

PHP hulp

19/05/2024 18:09:59
 
Leen M

Leen M

18/08/2009 11:25:00
Quote Anchor link
Dit kan de eenvoudig doen door je afmetingen in percentages te zetten ipv in pixels.
 
Steef

Steef

18/08/2009 11:26:00
Quote Anchor link
Leen schreef op 18.08.2009 11:25:
Dit kan de eenvoudig doen door je afmetingen in percentages te zetten ipv in pixels.
Ik wil dus juist geen gebruik maken van percentages, want dan heb je ook weer te maken dat er geen maximum aan de breedte zit.
Gewijzigd op 01/01/1970 01:00:00 door Steef
 
Wouter De Schuyter

Wouter De Schuyter

18/08/2009 11:30:00
Quote Anchor link
Steef schreef op 18.08.2009 11:26:
Leen schreef op 18.08.2009 11:25:
Dit kan de eenvoudig doen door je afmetingen in percentages te zetten ipv in pixels.
Ik wil dus juist geen gebruik maken van percentages, want dan heb je ook weer te maken dat er geen maximum aan de breedte zit.
Toch wel, max-width


Edit
bv
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
div.wrapper { width: 90%; max-width: 1200px; }
Gewijzigd op 01/01/1970 01:00:00 door Wouter De Schuyter
 
Steef

Steef

18/08/2009 11:32:00
Quote Anchor link
Paradox™ schreef op 18.08.2009 11:30:
Steef schreef op 18.08.2009 11:26:
Leen schreef op 18.08.2009 11:25:
Dit kan de eenvoudig doen door je afmetingen in percentages te zetten ipv in pixels.
Ik wil dus juist geen gebruik maken van percentages, want dan heb je ook weer te maken dat er geen maximum aan de breedte zit.
Toch wel, max-width
Is dat crossbrowser of alleen voor internet explorer? Want het zal ook moeten werken in Firefox enz.
Gewijzigd op 01/01/1970 01:00:00 door Steef
 
Leen M

Leen M

18/08/2009 11:32:00
Quote Anchor link
Dat kan je oplossen door een max-width in te stellen

edit:
Bij mijn weten werkt dat ook in firefox ea
Gewijzigd op 01/01/1970 01:00:00 door Leen M
 
Mitchell

Mitchell

18/08/2009 11:32:00
Quote Anchor link
En voor IE zijn er onder tussen al fixes voor max-width, dus dat is ook geen probleem.
 
Steef

Steef

18/08/2009 11:38:00
Quote Anchor link
En wat nu als ik zeg maar wil dat je bij een viewport van 1024px en lager een breedte hebt van 1000px, maar bij een viewport van 1400px en lager een breedte van 1200px?
 
Mitchell

Mitchell

18/08/2009 11:40:00
Quote Anchor link
Steef schreef op 18.08.2009 11:38:
En wat nu als ik zeg maar wil dat je bij een viewport van 1024px en lager een breedte hebt van 1000px, maar bij een viewport van 1400px en lager een breedte van 1200px?
Daar zul je js voor moeten gebruiken, dan geef je gewoon een min-width en max-width gebaseerd op die persoons resolutie?
 
Steef

Steef

18/08/2009 11:44:00
Quote Anchor link
Het is inmiddels al gelukt met de code uit de eerste post. Wat ik moest doen was:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div id="container">

vervangen voor
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div id="container"  style="width: 200px;">


Toch bedankt voor jullie hulp!
 



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.