[JS] Automatisch website breedte aanpassen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

C#.NET Developer Jr. Functie

Functie omschrijving Bouw jij graag aan applicaties om processen in distributiecentra te optimaliseren? Wij zijn op zoek naar een C#.NET ontwikkelaar in regio Breda die hier graag een steentje aan bijdraagt! Jouw werkzaamheden zullen er als volgt uitzien: Je krijgt veel vrijheid in de keuze van de technieken die je gaat gebruiken. Uiteraard wel binnen de gestelde kaders, en door gebruik te maken van het .NET platform. Je gaat aan de slag met de ontwikkeling van een nieuwe module binnen de WMS suite van dit bedrijf. Deze "carrier" module gaat er voor zorgen dat de selectie van een vervoerder volledig

Bekijk vacature »

OutSystems Developer

Dit ga je doen Het van scratch af aan ontwikkelen van applicaties met OutSystems; Het aanhaken bij diverse projecten binnen de organisatie; Schakelen met de business; Meedenken over de mogelijkheden van het platform binnen de organisatie. Hier ga je werken Deze organisatie is een toonaangevende speler in de vastgoedbranche en telt momenteel ruim 500 medewerkers. Met meer dan 150 applicaties staat er een complex applicatielandschap, bestaande uit standaard- en maatwerkapplicaties. De maatwerkapplicaties worden ontwikkeld door een inhouse development team. Het doel voor de komende periode is het verder vernieuwen en optimaliseren van het huidige applicatielandschap. Zo staat de organisatie aan

Bekijk vacature »

Backend developer

Functie omschrijving Ben jij graag bezig met de back-end van applicaties? Zou je dit graag willen doen voor een kleine werkgever waar ook tijd is voor een drankje op zijn tijd? Je taken hierbij zullen bestaan uit: Gebruik maken van de volgende technieken: .NET (core), C#, SQL, XML, MVC, JSON, REST & SOAP API. Gebruik maken van de volgende tools: Visual Studio, GIT, Jira, Jenkins. Bovengenoemde technieken en tools ga je gebruiken om: Nieuwe functionaliteiten te ontwikkelen. Wijzigingsverzoeken van klanten uitvoeren. Verzorgen van koppelingen tussen data. Bedrijfsprofiel Jouw nieuwe werkgever bevindt zich in regio Raamdonksveer en bieden oplossingen op gebied

Bekijk vacature »

Senior SQR Java Developer

Vacature details Vakgebied: Software/IT Opleiding: Senior Werklocatie: Eindhoven Vacature ID: 13333 Introductie Are you passionate about contributing to the world's most advanced machines. Do you thrive in a challenging environment working with highly motivated and skilled teams? If so, we have the perfect opportunity for you! We are seeking a Senior Software Design Engineer for Sequence Tooling to play a critical role in creating and maintaining mission-critical software applications. In this role, you will focus on achieving maintainable software architecture that is transparent and easy to extend while maintaining a strong focus on software quality. You will work closely with

Bekijk vacature »

C# .NET Ontwikkelaar ASP.NET

Samengevat: Deze werkgever is een inkooporganisatie. Ben jij een ervaren .Net ontwikkelaar? Heb je ervaring met .Net en C#? Vaste baan: C# .NET Developer .Net MBO HBO €3.100 - €4.300 Onze missie is: “Een essentiële bijdrage leveren aan het verlagen van de integrale kostprijs van de aangesloten groothandels, middels het bundelen van inkoopvolume en het creëren van synergie met en tussen de groothandels en leveranciers, met scherpe inkoopprijzen, goede handelscondities en gerichte dienstverlening als resultaat” Zij werken voor MKB klanten. Deze werkgever heeft veel verschillende projecten. Houd jij van afwisseling? Dan zit je bij hun goed! De branche van dit

Bekijk vacature »

Traineeship Java Developer

Functie Wat ga je doen als Java Developer? Jij start via ons bij deze opdrachtgever als Trainee Java ontwikkelaar, tijdens het traineeship ga je in 1 jaar van de basis naar professioneel Java ontwikkelaar. Je start samen met een groep trainees, volgt de aangeboden cursussen en gaat aan de slag bij één van onze opdrachtgevers. Na een aantal maanden volgt de volgende opdracht. Door de groei in jouw rol kom je op steeds complexere opdrachten terecht. Veel afwisseling dus. Collega’s met ervaring helpen je bij deze groei en samen met jouw coach ga je een persoonlijke leerplan opzetten om jou

Bekijk vacature »

Software Developer

Dit ga je doen Ontwikkelen aan de software dat beschikbaar is op de substations; Ontwikkelen in C++, C, Python en JavaScript. Daarnaast op een Embedded Linux omgeving, opgebouwd met containers en DevOps; Meewerken aan cyber security (OWASP); Uitvoeren/bouwen van geautomatiseerde testen in samenwerking met de Quality Specialist; Vertalen van wensen van de klanten/business naar werkbare/duurzame oplossingen. Hier ga je werken Als Software Ontwikkelaar kom je te werken bij een organisatie gericht op de (internationale) energiemarkt, waar wordt gewerkt voor het verwerven en verwerken van realtime, high quality data. Er wordt gewerkt vanuit het hart van de substations en direct voor

Bekijk vacature »

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 »

Software Developer PHP JavaScript Python HBO SQL

Samengevat: Wij zijn een softwarebedrijf voor Autodealers. Ben jij een Medior of Senior Software Developer? Heb je ervaring met PHP, JavaScript of Python? Vaste baan: Java.Developer Software HBO €3.000 - €5.200 Bij ons op de werkvloer is er een positieve en informele sfeer. Naast een goede begeleiding en een enthousiaste klantenkring biedt deze werkgever een prettige omgeving met zeer afwisselende werkzaamheden. Houd jij van aanpakken en denk je dat je deze uitdaging aankunt? Dan zoeken wij jou! Zij werken voor grote klanten. Zij doen omvangrijke projecten die we bij deze werkgever op kantoor realiseren (geen detachering). Zij werken met state-of-the-art

Bekijk vacature »

App Developer

Samen werken aan een gezonder Nederland en toekomstbestendige zorg voor iedereen. Dat is de impact die jij kan hebben als App Developer bij VGZ. Wil jij een bijdrage leveren aan een maatschappij waarin iedereen zich thuis voelt? Bekijk dan de vacature. Uit onderzoek van Computable is VGZ verkozen tot ‘beste niet-ICT werkgever voor ICT’ers van Nederland’ Hoe ook jij het verschil maakt Als App developer werk jij aan het belangrijkste communicatiekanaal van VGZ, namelijk de App! Als App developer bij VGZ maak je onderdeel uit van een van onze App-teams. Met een goede mix van kennis en ervaring zet je

Bekijk vacature »

Senior Front end developer Angular

Functie Er zijn momenteel 5 SCRUM-teams waarvan drie gefocust zijn op DevOps en de huidige projecten en twee op innovatie van de platformen. Jij zal onderdeel worden van het innovatie Scrum team. De 2 multidisciplinaire innovatie teams bestaan momenteel uit 14 werknemers. Jij als senior Front end developer wordt onderdeel van onze innovatieteams. De innovatieteams houden zich bezig met het door ontwikkelen van de huidige producten en denken na over nieuwe functionaliteiten. Binnen de rol van Front end developer krijg je veel vrijheid en kan je je dag zelf indelen. Dingen waar jij je dagelijks mee bezig zult houden is

Bekijk vacature »

Fullstack JavaScript developer (ReactJS, NodeJS, T

Functie Het team bestaat momenteel uit ruim 15 collega’s, waarvan ruim de helft in het ontwikkelteam werkzaam is. Er zijn gave plannen om het platform ook te gaan toepassen op bijv. vliegvelden, maar ook internationale groei zit in het verschiet en daarom zijn ze op zoek naar versterking. Als Fullstack JavaScript developer werk je nauw samen met 9 fullstack (Python en .NET) developers. Binnen het team ga jij je toespitsen op het creeren van de optimale toegankelijkheid en user experience. Om dit voor elkaar te krijgen zul je ontwerpen, programmeren, testen en implementeren. Het hele proces dus! Maar ook bijvoorbeeld

Bekijk vacature »

Medior Java developer

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 »

Developer Full Stack

Functie omschrijving Full Stack Developer gezocht! Wij zijn op zoek naar een Full Stack Developer voor een bedrijf in de regio Nijkerk. Je maakt in deze functie onderdeel uit van een groeiend team met een goede ambitie waarbij eenheid, betrokken en overtreffen de belangrijkste kernwaardes zijn. Het bedrijf werkt volgens de AGILE/SCRUM methode, wat je o.a. terug vindt in de tweewekelijkse sprints, retrospectives en een daily standup. Je takenpakket bestaat uit: Bijdragen aan het door ontwikkelen, onderhouden en optimaliseren van een Saas applicatie; Bijdragen aan de innovatie van het bedrijf en hun klanten; Het ontwikkelen op de laatste technologie van

Bekijk vacature »

Cobol Developer

Dit ga je doen Als Cobol Ontwikkelaar zal je gaan meebouwen aan een onderdeel van het backend systeem waarbij je het functionele ontwerp vertaald naar een technische oplossing die geïntegreerd kan worden in de huidige omgeving. Je zorgt ervoor dat de bedrijfsprocessen op een efficiënte manier worden uitgevoerd en werkt proactief aan het verbeteren hiervan. Samen met jouw collega’s reviewen jullie elkaars code en test je je eigen code. Je werkt nauw samen met andere ontwikkelaars, testers en functioneel ontwerpers. Taken pakket: Beheren en doorontwikkelen van de bestaande omgeving; Vertalen van een functionele vragen naar een technische oplossing; Doorvoeren van

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

05/11/2024 12:35:14
 
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.