[JS] Automatisch website breedte aanpassen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Junior .NET developer

Functie Om half 9 kom jij binnen en pak jij als eerst natuurlijk een bakje koffie of thee. Vervolgens ga jij je voorbereiden op de stand-up van kwart voor 9. Zijn er bijvoorbeeld dingen waar jij nog tegen aan loopt? Of is er nog code die getest of gereviewd moet worden? Vervolgens starten jullie met de stand up en na de stand up zoeken jullie elkaar op en gaan jullie aan de slag. Als team met 6 developers werken jullie in drie wekelijkse sprints. Het einde van een sprint is altijd op een donderdag zodat jullie op vrijdag de demo

Bekijk vacature »

Network Engineer (f/m/d) in Heidelberg

Network Engineer (f/m/d) The IT Services team operates and supports the IT infrastructure and services at EMBL headquarters in Heidelberg and at the laboratory’s sites in Barcelona and Rome. As part of IT Services, the Network team is responsible for managing and developing the network infrastructure in our data centres, on campus, and to our external network providers. As a leading scientific institution with highly data-intensive research, extensive data flows at and between the laboratory’s six sites and to the Internet, EMBL is connected to national and international scientific networks using state-of-the-art technologies from vendors including Cisco, Extreme Networks and

Bekijk vacature »

Fullstack Software Developer

Bedrijfsomschrijving Functieomschrijving Java ontwerpen, bouwen en testen (T-shaped). Als senior ontwikkelaar ben je bekend in zowel de back-end als de frontend van een applicatie. Angular, Continious Delivery / Integration. Een ervaren iemand die de leiding kan nemen, een weg vindt in nieuwe situaties, en in oude applicaties. Initiatiefrijk, bekend met de (technische) omgevingen die we bij duo gebruiken, niet te beroerd om collega’s te helpen. Als senior programmeur in staat om op te treden als lead programmeur. Ondersteunt de testers bij de testautomatisering en minder ervaren programmeurs bij dagelijks werkzaamheden. Dit laatste met name op het gebied van Angular. Achtergrond

Bekijk vacature »

Senior Java Ontwikkelaar

Dit ga je doen Werken aan uiteenlopende interne projecten voor grote (internationale) organisaties; Ontwikkelen van diverse (web)applicaties en platformen met technieken als Java, Azure en ASP.NET; Complexe vraagstukken tackelen met jouw expertise en ervaring; Waar nodig help jij je collega's om samen tot de juiste oplossing te komen. Hier ga je werken Als Java Developer kom je te werken bij een internationale organisatie in regio Amsterdam die zich richt op procesoptimalisatie door middel van zeer complexe IT oplossingen. Dit doen zij op het allerhoogste niveau met vestigingen over heel de wereld en met een groot aantal aansprekende, maatschappelijk betrokken klanten.

Bekijk vacature »

Fullstack Developer

Functieomschrijving Voor een erkende werkgever in regio Etten-Leur zijn wij op zoek naar een Fullstack Developer met PHP/Laravel ervaring. Je gaat aan de slag met het bouwen van maatwerk software voor klanten die actief zijn in een specifieke markt. Als fullstack developer ben je samen met een enthousiast team van 7 collega’s verantwoordelijk voor de ontwikkeling, beheer en innovatie van informatiesystemen voor klanten in een specifieke branche. Verder ondersteun je complexe uitdagingen van klanten. Je brengt hun wensen in kaart en vertaalt deze door naar maatwerk software. Ervaring met Laravel is een must. Om de klant zo goed mogelijk te

Bekijk vacature »

Back-end Developer Java

Dit ga je doen Het (door)ontwikkelen van een zelfgebouwde applicatie in Java, Spring Framework, SQL, HTML, CSS en Javascript; End-to-end beheer m.b.t. de applicatie en koppelen van applicaties binnen het landschap; Ontwikkelen van rapportages voor de interne organisatie; Ontwikkelen van aanvullende functionaliteiten m.b.t. de applicatie; Uitvoeren van testen en code reviews. Hier ga je werken Binnen deze organisatie kom je te werken op de afdeling die medische gegevens verzamelt vanuit het hele land. Denk hierbij aan vertrouwelijke persoonsgegevens. Het team verwerkt al deze data met als doel het waarborgen en verbeteren van de kwaliteit van de zorg in heel Nederland.

Bekijk vacature »

Senior Node.js developer Digital Agency

Functie Door de groei van de organisatie zijn ze op zoek naar een Tech Lead. Als tech lead ben jij verantwoordelijk Als Back end Node.js developer kom je terecht in een van de 8 multidisciplinaire teams in het projectenhuis. Afhankelijk van jouw interesses, wensen en capaciteiten word je bij projecten en onderwerpen naar keuze betrokken. Als ervaren ontwikkelaar zul jij vaak leiding nemen in de projecten en in het team een aanvoerder zijn van technische discussies. Uiteindelijk wil jij natuurlijk de klantwensen zo goed mogelijk vertalen naar robuuste code. De projecten kunnen varieren van langlopende- tot kleinschalige trajecten. Voorheen werkte

Bekijk vacature »

PHP ontwikkelaar

Functie Met een complex en uitgebreid e-commerce platform, een eigen PIM-systeem en eigen scan applicatie – krijg jij dagelijks te zien hoe jouw werk gebruikt wordt door miljoenen gebruikers. En we staan qua development pas in de startblokken, aangezien er nog meerdere projecten op de plank liggen te wachten! Ons huidige development team bestaat uit 8 programmeurs. Er wordt dagelijks gereflecteerd op geschreven code, Scrum taken en kennisdelen onderling is een must. Onze voertaal binnen ons team is Engels, dit omdat wij twee internationale collega’s hebben. Ons huidige “IT Landschap” bestaat voornamelijk uit allerlei losse onderdelen die individueel, maar ook

Bekijk vacature »

Software programmeur

Functieomschrijving Voor een uitdagende werkgever in regio Breda zijn wij op zoek naar een Full Stack C#.NET programmeur. Je bent verantwoordelijk voor het ontwikkelen van apps, webapplicaties en dashboards voor de eigen IOT-oplossingen. Je werkt samen met andere developers en engineers om de sensoren in machines te scannen en vervolgens de data om te zetten in management informatie voor de klanten. Taken en verantwoordelijkheden: Je gaat aan de slag met de volgende technologieën en frameworks: C#, JS frameworks, HTML, TypeScript, SQL & C++, CSS. Geen ervaring met één van deze technologieën is dan ook geen enkel probleem! Deze werkgever biedt

Bekijk vacature »

Lasrobot Programmeur

Over de functie Off-line programma’s maken die het beste resultaat bij de lasrobot mogelijk maken De programma’s met behulp van teach verder optimaliseren Proactief meedenken over oplossingen en over de juiste invulling van lasmallen Het lasrobotproces zoveel mogelijk optimaliseren Over het bedrijf Onze opdrachtgever is gespecialiseerd in de engineering, productie en assemblage van samengestelde plaatwerkproducten en monodelen uit metaal. Onze klant werkt samen met het team aan de mooiste producten van de toekomst. Binnen dit bedrijf staat een sterk team van specialisten op het gebied van industrial design, mechanical engineering, in-house prototyping en all-round projectmanagement. Met daarbij uiteenlopende kennis in

Bekijk vacature »

Full stack developer Node.js, React Remote

Functie Als fullstack JavaScript developer vind jij het uitdagend om op basis van concrete klantvragen nieuwe functionaliteiten te ontwikkelen. Bij voorkeur worden deze functionaliteiten op een bepaalde manier geprogrammeerd, zodat ze door meerdere klanten te gebruiken zijn. Je hebt dus vaak te maken met abstracte vraagstukken. Om dit te kunnen realiseren sta je nauw in contact met de product owner en/of klant. Je bent niet alleen onderdeel van het development team, maar hebt ook vaak contact met de product-owner en/of klanten om daardoor inzichten te verzamelen die leiden tot productverbeteringen. • Inzichten verzamelen bij de klant en/of product owner •

Bekijk vacature »

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Junior/medior Back end developer PHP, Laravel

Functie Jij als ontwikkelaar komt te werken in een team bestaande uit 4 back end programmeurs, 2 vormgevers/ Front end developers en een online marketeer. Qua persoonlijkheden is het team erg gevarieerd van sportfanaten tot gameliefhebbers en Golfers. Een ding heeft iedereen hier gemeen; Passie voor goede code. In jouw rol zul je voor veel van je tijd je bezig houden met het ontwikkelen van maatwerk features en applicaties. Daarnaast hebben wij op aanvraag ook wel eens een website of onderhoudsklusje, die opgepakt moet worden en hier ben jij ook niet vies van. Jij als full stack developer zult dus

Bekijk vacature »

Java (Java EE) Developer

In het kort Werken als Java developer betekent werken aan complexe IT projecten bij onder meer een internationaal containeroverslag bedrijf. Zo sturen we apparaten en eindgebruikers aan d.m.v. onze custom-made software oplossing, die dagelijkse vele duizenden containers verwerkt. Denk aan systemen die volautomatische kranen aansturen en op afstand bedienen, de volledige afhandeling van containernummerherkenning bij het laden en lossen van zeeschepen of het tonen van instructies aan de chauffeurs van ruim 300 straddle carriers. En dat allemaal redundant, robuust en in een dynamische 24/7 omgeving! Jij versterkt ons ontwikkelteam en gaat aan de slag met oa. Java i.c.m. Spring (Boot),

Bekijk vacature »

Microsoft Acess Developer

Functieomschrijving Wat ga je doen? Heb jij ongeveer 3 jaar ervaring als Software Developer, en komen de volgende kennisgebieden jou niet vreemd voor: MS Acces, C# & SQL? Vind jij het daarnaast leuk om maatwerk software te ontwikkelen voor klanten in een bijzondere branche? Lees dan snel verder! Als developer ben jij samen met een gemotiveerd team van 10 collega’s verantwoordelijk voor het creëren van aangemeten software voor klanten. Je bent klantvriendelijk en oplossingsgericht ingesteld, omdat het essentieel is om de klanten zo goed mogelijk te helpen met hun uitdagingen. Het is mogelijk om vanuit huis je werkzaamheden uit te

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

20/04/2024 00:03:58
 
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.