[JS] Automatisch website breedte aanpassen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

C#.NET ontwikkelaar

Functie omschrijving Voor een softwarebedrijf in de omgeving van Veghel zijn we op zoek naar een C# developer. Word jij blij van ontwikkelen in C# en .NET? Lees dan snel verder! Jouw werkzaamheden zullen er als volgt uit gaan zien: Op basis van de wensen van de klant ga je samen met je collega's ga je op zoek naar de juiste oplossingen en je gaat dit uitwerken tot een mooi eindproduct. Je bouwt webshops, webapplicaties en websites, dit doe je door middel van ASP.NET, MVC Framework en C#. Je zorgt voor de optimalisering van bestaande software en de automatisering van

Bekijk vacature »

Applicatie ontwikkelaar

Functie omschrijving Zelfstandige applicatie ontwikkelaar gezocht voor familiair bedrijf in omgeving Capelle ad Ijssel Ben jij op zoek naar een nieuwe uitdaging en zoek jij een informele werkgever waar je zelfstandig kunt werken binnen een leuk IT team, lees dan snel verder want wie weet zijn wij op zoek naar jou! Een deel van jouw werkzaamheden: Onderhouden en ontwikkelen van de IT systemen; Opzetten van Azure Cloud systemen, denk aan interfaces, hardware op de Cloud, webportalen of BI functies; Werken aan scripts binnen verschillende software applicaties, denk aan ERP en CAD; Ontwikkelen en implementeren van MS PowerApps en Power BI.

Bekijk vacature »

Medior/Senior Front-end Developers gezocht (Utrech

Functie Het team bestaat uit 10+ gespecialiseerde (veel senior) front-end ontwikkelaars en ontwerpers die werken aan projecten voor klanten van verschillende groottes (kan twee jaar bezig zijn met 1 klant). Je helpt klanten met ingewikkelde front-end vraagstukken, hierbij kun je denken aan: UX/UI design, CI/CD, architectuur en integratie met back-end systemen. De werkzaamheden verricht je op locatie bij de klant, dit is vaak in de Randstad. De organisatiestructuur is plat en er heerst een informele sfeer, zo kun je met vragen dus terecht bij de directie. Er wordt veel nadruk gelegd op het bevorderen van persoonlijke ontwikkeling door middel van

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 »

Back-end PHP Developer

Dit ga je doen Her- en uitbouwen van het inhouse softwareplatform dmv PHP; Onderhouden van bovengenoemd platform in PHP; Sparren met het team; Meedenken over nieuwe functionaliteiten, security etc; Jouw input leveren aan het proces door op de hoogte te blijven van nieuwe ontwikkelingen etc. Hier ga je werken Onze klant, gevestigd in de omgeving van Alkmaar, levert wereldwijd oplossingen op het gebied van IT. Dag in dag uit werken zij met veel passie aan hun product waarmee ze streven naar verbeteringen binnen zorg. Voor onze klant zijn we op zoek naar een medior PHP Developer. Je komt te werken

Bekijk vacature »

.NET developer

Functie Als ervaren .NET ontwikkelaar ontbreekt er aan passie en motivatie niks. Jij bent communicatief sterk en pakt iedere uitdaging dan ook met beide handen aan. Op projectbasis ga jij met je team of met enkele andere ontwikkelaars intern aan de slag bij diverse partners. Op basis van het project ga jij aan de slag en zijn de werkzaamheden en technieken erg divers. Jouw werkgever stelt jouw ontwikkeling hierin voorop, zo krijg je een vast vertrouwenspersoon die één keer in de maand op locatie van jouw project zal kijken hoe het gaat en of er eventuele aandachtspunten zijn. Daarnaast krijg

Bekijk vacature »

.NET Developer Shared Driving

Bedrijfsomschrijving Onze klant richt zich op het toegankelijker maken van steden, een fantastisch mooi streven. Hoe ze dat doen? Met eigen ontwikkelde software, waarmee vervoersmiddelen gedeeld kunnen worden. Deze inspirerende werkgever maakt een maatschappelijke impact en dat doen ze nu al zo'n 25 jaar! Het bedrijf is gevestigd in het centrum van Rotterdam en kent ongeveer zo'n 90 medewerkers. Het personeel is lekker gewoon gebleven! Iedereen kleedt zich zoals hij of zij dat zou willen en de sfeer is er erg fijn. Een leuke werkgever om voor te werken, en bovendien zijn er voor jou als Software Developer veel mooie

Bekijk vacature »

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carrière. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

Starter/junior Magento developer gezocht!

Functie Je komt te werken in een zelfsturend team waarin vertrouwen voorop staat en inbreng en ideeën worden gewaardeerd. Ook staat innovatie centraal. Ze bieden jou de mogelijkheid om jezelf door te ontwikkelen. Denk hierbij aan cursussen en een persoonlijk ontwikkelplan. Je komt terecht in het team van momenteel 4 (ervaren) collega’s en zal meewerken aan de doorontwikkeling en nieuwbouw van de Magento platformen van meerdere opdrachtgevers volgens Agile/Scrum. Denk hierbij aan nieuwe functionaliteiten, UX en koppelingen met verschillende back-end systemen. Als starter/junior developer zul je direct begeleid worden door een senior uit het team. Het is van belang dat

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 PHP developer/ Software Architect

Functie Momenteel zijn ze op zoek naar een ervaren PHP developer die zichzelf graag bezighoudt met zaken als architectuur en de algehele verbetering van structuren en standaarden. Het is eigenlijk meer operationeel als uitvoerend omdat je bezig gaat met zaken als het verder uitrollen en verbeteren van testautomatisering, codereviews, tickets en de doorloop hiervan en architectuurkeuzes. Mocht je hiernaast ook wat DevOps kennis meenemen is dit mooi meegenomen! Vanwege het kleine team maar de wereldwijde impact die zij leveren is er veel focus op kwaliteit. In deze functie werk je aan één van hun belangrijkste applicaties. Hierin werk je nauw

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 »

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 »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

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 »
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

23/11/2024 14:06:29
 
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.