[JS] Automatisch website breedte aanpassen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Front-end Developer

Gezellige team, passie en een groene toekomst! Lees hier de vacature van Front-end Developer bij All in Power! All in power heeft zich tot doel gesteld écht bij te dragen aan de energietransitie. Dit doen wij door de markt voor energie volledig op zijn kop te zetten. Producenten van schone (wind- of zonne-)energie verkopen via ons platform hun energie rechtstreeks aan gebruikers. Of dit nu huishoudens, bedrijven of bijvoorbeeld laadpalen zijn ons platform maakt het uitwisselen van energie mogelijk. Zo maken we de business case van onze klanten veel sterker en loont het om (meer) te investeren in vergroening voor

Bekijk vacature »

Lead developer

Functie Als lead developer wordt jij verantwoordelijk voor een van onze development teams. Samen met de Software Architect bewaak jij de kwaliteit en uitvoering van onze complexe vraagstukken. Daarnaast ben jij verantwoordelijk voor het inschatten, designen en ontwikkelen van middelgrote tot grote veranderingen in de software. Ook coördineer jij het proces rondom complexe technische vraagstukken. Verder bestaat jouw takenpakket uit het volgende: – Het aansturen van jouw development team; – Het begeleiden van Junior Software Engineers; – Het maken van technische analyses m.b.t. nieuwe aanvragen en het tijdsbestek inschatten voor de uitvoering hiervan; – Het uitvoeren van de ontwikkeling van

Bekijk vacature »

Ambitieuze medior developer

Wat je gaat doen: Heb jij al een paar jaar ervaring als developer maar wil jij naar the next level? In ons NextLevelDev Programma helpen wij jou om de volgende stap te zetten: een mooi programma aan trainingen op het gebied van Java, hippe frameworks, Agile/Scrum, OCP-certificering en optioneel: andere JVM-talen als Kotlin en Scala; Cloud (AWS, Azure, GCP) Soc 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

Bekijk vacature »

(Junior) PHP Ontwikkelaar bij een retail bedrijf i

Bedrijfsomschrijving Ben jij een ervaren PHP ontwikkelaar met een passie voor retail en ICT? Wil jij werken in een team dat zich bezighoudt met het ontwikkelen van uitdagende applicaties voor een groot retailbedrijf in Delft? Dan zijn zij op zoek naar jou! Functieomschrijving Als PHP Ontwikkelaar werk je in een team aan de ontwikkeling van applicaties die door de gehele organisatie worden gebruikt. Je bent verantwoordelijk voor het ontwikkelen, testen en implementeren van deze applicaties. Je werkt hierbij nauw samen met andere ontwikkelaars, projectmanagers en stakeholders binnen de organisatie. Je taken bestaan onder andere uit: Ontwikkelen van nieuwe functionaliteiten en

Bekijk vacature »

Java Developer (Training And Simulation)

Wat jij doet Je zou onze Java Developer zijn en nauw samenwerken met je Product Owner, Software System Engineer, Scrum Master en andere Developers. Samen draag je bij aan een multidisciplinair en zelf organiserend Agile team. De rol is zeer afwisselend en bestaat uit, maar is zeker niet beperkt tot: de-risk en prototype onbewezen simulatietechnologieën; simulatiekaders ontwikkelen voor gebruik door andere teams; je bent goed in het begrijpen van ingewikkelde ideeën; heeft de mogelijkheid om nauw samen te werken met grote internationale klanten, leveranciers en overheden om onze oplossingen, vastleggingsvereisten, enz. te definiëren en te presenteren. Ben jij het? Wij

Bekijk vacature »

.NET Developer

Functieomschrijving Ben jij klaar voor de volgende stap in jouw carrière? Kom werken bij dit kleine softwarebureau en werk aan de gaafste maatwerk projecten. Je komt te werken in een klein development team en werk nauw samen met elkaar, om maatwerk software te leveren en bij te dragen aan bedrijfsautomatiseringen. Je gaat werken met de Microsoft stack en technieken als .NET, C#, Entity, MVC, SQL server. In de functie krijg je veel vrijheid om zelf beslissingen te nemen en je hebt impact op de bedrijfsprocessen. Bedrijfsprofiel Dit familiebedrijf bestaat al ruim 20 jaar. Zij hebben een vast netwerk van klanten,

Bekijk vacature »

Cloud Developer

Cloud Developers opgelet! Bij Luminis zijn ze opzoek naar jou. Lees de vacature en solliciteer direct. Luminis is een software- en technologiebedrijf met meerdere vestigingen. Vanuit deze vestigingen werken 200 professionals aan technisch hoogwaardige oplossingen voor klanten zoals KLM, Nike en Bol.com. Ook ontwikkelt Luminis eigen oplossingen op het gebied van cloud, Internet of Things, data intelligence, e-sports en e-learning. Luminis onderscheidt zich door aantoonbaar voorop te lopen in technologie en innovatie. Luminis heeft drie kernpunten die verankerd zitten in alles wat we doen: het omarmen van nieuwe technologie, meesterschap en kennis delen. Functiebeschrijving First things first! Het is belangrijk

Bekijk vacature »

Scrum Master

TenneT is hard groeiend om de onze ambities waar te kunnen maken. Zo nemen wij een leidende rol in het aanjagen van de energietransitie. Het werven van nieuw talent speelt daarin een cruciale rol. Wij zijn op zoek naar een gedreven Scrum master op onze locatie Arnhem die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je begeleidt twee teams binnen de afdeling Platform Services (PLS). Je helpt mee de devops manier van werken van de teams verder door te ontwikkelen. Je helpt de PO bij het managen van de product backlog; het voorbereiden van

Bekijk vacature »

Laravel Developer

Functie omschrijving Voor een gave organisatie in de buurt van Den Bosch zoek ik een PHP developer. Het is van belang dat je kennis/ervaring hebt met het framework Laravel. Jij gaat in deze functie software applicaties ontwikkelen. Deze software projecten zijn heel divers, en deze organisatie maakt software, van A tot Z. Klanten kunnen in elke sector werkzaam zijn, van profit tot non-profit. Andere taken zijn onder andere: documentatie schrijven over applicaties/uitleg geven over software en applicaties/ klantcontact over bestaande applicaties/applicaties optimaliseren. Bedrijfsprofiel Deze organisatie zit in de regio van Den Bosch en is een klein bedrijf. Er werken circa

Bekijk vacature »

Hands-on Solution Architect / Software Architect (

TenneT is hard groeiend om de onze ambities waar te kunnen maken. Zo nemen wij een leidende rol in het aanjagen van de energietransitie. Het werven van nieuw talent speelt daarin een cruciale rol. Wij zijn op zoek naar een gedreven Solution Architect / Software Architect op onze locatie Arnhem die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je werkt samen met gedreven DevOps teams, bestaande uit frontend, backend en middleware developers, testers, UX-designers. Samen met de teams ben je continu op zoek naar de beste oplossingen voor onze klanten. Als Solution Architect onderzoek

Bekijk vacature »

Front End Developer React Vue

Dit ga je doen Meewerken aan de implementaties en ontwikkeling van nieuwe functionaliteiten van de webapplicaties; Ontwikkelen met o.a. React en Vue en HTML/CSS, ook krijg je in verband met de samenwerking ook affiniteit met de backend Ruby on Rails; Ontwikkeling aan de front end voor de koppelingen tussen de diverse systemen; Ontwerpen van interfaces en een bijdrage leveren aan de gebruikerservaring; Zorgdragen voor hoge kwaliteit van code en jezelf (en anderen) blijven verbeteren; Als Senior Front End Developer begeleid je zelf ook FE-development projecten, hierin leid je de projecten en pak jij het initiatief op (bv integratieprojecten). Hier ga

Bekijk vacature »

Medior/senior Back-end developer wanted!

Functie Because of the growth within the company, we are looking for reinforcement in the devlopmenttean. As a back-end developer you build the company software that helps us with the primary processes. A fun (internal) project in which you continuously develop the software! You will work in a small team, we have daily stand-ups and a scrum session every fortnight, led by our Scrum Master. During these sessions, you get the opportunity to present your ideas and discuss them with your fellow developers and the Product Owner. Within the development teams, we use Trello, Gitlab, Jiira, Confluence and Boockstack. They

Bekijk vacature »

Mendix Developer

For our client in Amsterdam, we are looking for a Senior Mendix Developer. Company description Our client is an IT Consultancy company who’s been active for 10 years now. With their ambitious team, they are working with different clients in order to help them with analyzing their data and giving advice to them, regarding how they can use their data in the smartest ways, or to make sure that their mobile or web applications are working efficiently. As you get a glimpse of various industries, it is guaranteed that no day will be the same. Job description As a Mendix

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 »

Database Developer

Functieomschrijving Wat ga je doen? 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 voeren, maar het is ook prettig als je in de omgeving van Tilburg woont om naar het kantoor te kunnen komen. Vind jij het leuk om jouw creatieve vaardigheden te benutten om complexe systemen te ontwikkelen? Lees dan snel verder! Bedrijfsprofiel Voor wie

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

25/12/2024 20:44:40
 
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.