Textarea expand onclick

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Front-end developer

Functie Jij komt te werken in een team van 5 developers. het product is continue in beweging. Nieuwe en bestaande klanten vragen om vaak nieuwe features. Hierin ben jij zeer belangrijk om te zorgen dat de functionaliteiten goed opgezet worden op technisch vlak. Designs krijg je aangeleverd van een externe partij zodat jij je primair kan focussen op de techniek! Je hebt daarbij alle vrijheid om je eigen creativiteit toe te passen en mee te denken over de gebruikte technieken. Het gezamenlijke doel is een product dat functioneel zeer gebruiksvriendelijk is en het bedrijfsproces van de gebruikers versneld en kwalitatief

Bekijk vacature »

Embedded Developer C++

Functie omschrijving Ben jij op zoek naar een leuke uitdaging als Embedded Developer, zoek dan niet verder! Voor een leuke opdrachtgever in omgeving Rotterdam zijn wij op zoek naar een Embedded Developer die graag met Embedded Devices werkt. Je zult verantwoordelijk worden voor het ontwikkelen en onderhouden van diverse producten. Jouw specialisatie ligt op het vlak van software, hardware en back-end. Dit bedrijf is gespecialiseerd in het ontwerpen van software voor een unieke industrie. Wil jij betrokken worden bij een proces dat loopt van ontwikkeling tot installatie? Waarbij je bezig zult zijn met perfecte systemen die geleverd worden aan binnen

Bekijk vacature »

Frontend Developer - Leeuwarden

Als Frontend Developer bouw jij mee aan het onderwijs van de toekomst! In een scrum team werken met jonge en enthousiaste collega’s, moderne technieken, ruimte voor eigen ontwikkeling en op een proactieve wijze kunnen meewerken aan innovatie binnen het onderwijs. Magister is het state-of-the-art softwarepakket dat scholen in het voortgezet onderwijs op alle fronten ontzorgt. Van leerlingenadministratie tot het ondersteunen van individuele leerlijnen, van toegang tot digitaal lesmateriaal tot het plannen van het lesrooster. In de Magister app bedient Magister ruim 2,5 miljoen gebruikers waarvan, dagelijks meer dan 600.000 unieke. Hiermee is Magister de absolute marktleider in onderwijsland. Wat vragen

Bekijk vacature »

Fullstack Software Developer

Functieomschrijving Voor een ambitieuze werkgever in regio Roosendaal zijn wij op zoek naar een Full Stack C#.NET Developer. Als software programmeur ben je verantwoordelijk voor het bouwen van webapplicaties, apps en dashboards voor de eigen IOT-oplossingen. Je werkt samen met andere developers en engineers om de sensoren in machines uit te lezen en deze data om te zetten in management informatie voor jullie klanten. Taken en verantwoordelijkheden: Verder ontwikkelen en onderhouden van webapplicaties, dashboards en apps voor de eigen IOT-oplossingen; Testen en goedkeuren van de software; Je gaat aan de slag met de volgende technologieën en frameworks: C#, JS frameworks,

Bekijk vacature »

PHP Developer

Functieomschrijving Vanuit het hoofdkantoor in omgeving Breda ben je als PHP/Symfony Developer niet alleen gefocust op het ontwikkelen van software. Daarnaast ben je voortdurend bezig met het zoeken naar nieuwe trends en ontwikkelingen die van waarde kunnen zijn voor de efficiëntie van software ontwikkeling. Hieronder een kort overzicht van jouw takenpakket: Het ontwerpen en implementeren van webapplicaties met het Symfony Framework; Het schrijven van een schone en efficiënte codes; Het testen van ontwikkelde applicaties om te zorgen dat ze goed functioneren en voldoen aan de eisen van de klant; Onderhouden en updaten van bestaande applicaties die zijn gebouwd met het

Bekijk vacature »

Laravel developer

Zie jij mogelijkheden om onze tooling technisch te verbeteren en uit te bouwen? Over Jobmatix Jobmatix is een innovatieve en internationale speler op het gebied van jobmarketing. Onze jobmarketing automation tool helpt organisaties bij het aantrekken van nieuw talent door vacatures digitaal, geautomatiseerd en op een efficiënte manier te adverteren en onder de aandacht te brengen bij de doelgroep op 25+ jobboards. Volledig performance-based, waarbij organisaties betalen op basis van cost per click of cost per applicant. Maandelijks wordt onze jobmarketing automation tool al gebruikt door vele directe werkgevers, intermediairs en mediabureaus, waaronder Picnic, Rijkswaterstaat, AdverOnline, Schiphol, DPA, Teleperformance en

Bekijk vacature »

Node.js developer looking for a challenging consul

Functie Under the guidance of 3 account managers, one of whom will be your point of contact within your expertise, you will start working for various clients. He or she will help you find a suitable and challenging assignment. Naturally, they will take your situation, experience and (technical) ambitions into account. The assignments last one to two years on average. This allows you to really commit to a project and make an impact as a consultant. Besides the assignment, you will regularly meet your colleagues from the IT department to share knowledge or discuss new trends, for example. Master classes

Bekijk vacature »

Lead C++ Developer

De rol van Lead C++ Developer Als Lead C++ developer bij KUBUS word je verantwoordelijk voor het implementatie design van requirements en de software architectuur van de desktop applicaties van BIMcollab, ons platform voor 3D model-validatie en issue-management bedoeld om de kwaliteit van 3D design-modellen voor gebouwen te verbeteren. Betere 3D modellen leiden tot betere gebouwen, dus zo draag je bij aan verduurzaming van de gebouwde omgeving met slimmer gebruik van materialen, minder verspilling en energie-efficiënte gebouwen. Een goede gebruikerservaring staat bij ons hoog in het vaandel; we gaan in onze ontwikkeling voor innovatie en kwaliteit. In je rol als

Bekijk vacature »

Junior .NET developer

Functie Als junior .NET ontwikkelaar start jij in ons development team met twee andere .NET developers. Als team werken jullie in scrum en is er iedere ochtend om 11.00 een standup. Jij krijgt als junior .NET ontwikkelaar een inwerk traject dat echt specifiek wordt ingericht op basis van wat jij nodig hebt. Een van de grootste pluspunten bij ons is dat wij binnen ons bedrijf veel (technische) vrijheid geven en juist eigen initiatieven erg stimuleren. Jouw werkzaamheden gaan er bij ons als volgt uit zien: – Het ontwikkelen van nieuwe software samen met interne en eventueel externe ontwikkelaars; – Het

Bekijk vacature »

Oracle Developer / PL SQL

Dit ga je doen Software ontwikkeling aan een internationaal gebruikt pakket; Werken met technieken als Oracle 19c, Toad, PL/SQL, Oracle Forms, Reports en Designer; Meedraaien in internationale projecten; Meedenken over technisch en functioneel ontwerp; Samenwerken met collega's als Informatie Analisten, Testers en Release Managers; Soms wensen en eisen afstemmen met de business. Hier ga je werken Onze klant, een internationaal bekend bedrijf dat essentiële producten maakt waar iedereen graag gebruik van maakt, zoekt versterking in het Software Development team. Samen met 3 developers, een release manager, een informatie analist en 3 testers werk jij aan een systeem waarmee complexe producten

Bekijk vacature »

Low Code Developer voor o.a. overheidsprojecten!

Bedrijfsomschrijving Wil jij ook behoren tot de specialist in Low Code? Dan zou ik zeker aanraden om verder te lezen. Deze organisatie is ooit opgericht door twee studenten en is inmiddels uitgegroeid tot een serieuze werkgever met een groot aanzien op Low Code projecten. De sfeer is echter niet veranderd, er heerst een informele sfeer met een open deuren beleid, en hierin mag de eigen bar natuurlijk niet ontbreken. Momenteel maakt deze organisatie een flinke groei door en hier kan jij natuurlijk niet bij ontbreken. Daarom ben ik op zoek naar Low Code Developers met een degelijke technische achtergrond. Kennis

Bekijk vacature »

PHP Developer - medior functie

Functieomschrijving Ben jij innovatief en wil jij je kennis graag delen met jouw nieuwe collega's? Lees dan snel verder! Voor een leuke opdrachtgever in de omgeving van Roosendaal zoeken wij een Symfony developer. Of je nou junior, medior of senior bent, je krijgt hier alle vrijheid en verantwoordelijkheid om jouw eigen loopbaan te ontwikkelen. Je gaat je hier bezig houden met en inspelen op de actualiteiten van jouw vakgebied. Techstack: Symfony, PHP, mySQL. Kennis van Svelte is helemaal mooi meegenomen. Bedrijfsprofiel Al sinds '99 is dit webbureau actief. De kernwaarden binnen het bedrijf zijn integer, dienstbaar en deskundig. Je komt

Bekijk vacature »

Front-end Developer

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

Front-end developer Supply Chain Angular, ReactJS,

Functie Het development team bestaat momenteel uit 9 fullstack (Python en .NET) developers. Binnen het team ga jij je toespitsen op het creëren 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 meedenken over strategie en design. Hierin krijg je veel vrijheid om de functie naar eigen inzicht in te vullen en te pionieren. Alle data die wordt gebruikt is zichtbaar in een webapplicatie, geschreven in Angular en React. Momenteel zijn ze bezig om de dashboards anders vorm te geven en de

Bekijk vacature »

Java Full Stack Developer

Java Full Stack developer What makes Cognizant a unique place to work? The combination of rapid growth and an international and innovative environment! This is creating a lot of opportunities for people like YOU — people with an entrepreneurial spirit who want to make a difference in this world. At Cognizant, together with your colleagues from all around the world, you will collaborate on creating solutions for the world's leading companies and help them become more flexible, more innovative and successful. And this is your chance to be part of the success story: we are looking for a (Senior) Java

Bekijk vacature »
Piet Jansen

Piet Jansen

27/02/2012 18:50:58
Quote Anchor link
Beste mensen,

Ik heb dus een simpel scriptje gevonden om een textarea zachtjes te verlengen na een klik event. Nu heb ik het script, werkt overigens prima op Fiddle, maar als ik alles correct overneem op mijn eigen systeem werkt het weer niet.

De script:

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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Textarea expands after mouseclick</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style type="text/css">
        .expand {
            height: 1em;
            width: 50%;
            padding: 3px;
        }
    </style>
    <script type="text/javascript">
        $('textarea.expand').focus(function () {
            $(this).animate({ height: "4em" }, 500);
        });
    </script>
</head>
<body>
    <textarea class="expand" rows="1" cols="10"></textarea>
</body>
</html>


Wat gaat er fout?
Gewijzigd op 27/02/2012 18:51:22 door Piet Jansen
 
PHP hulp

PHP hulp

25/11/2024 01:42:04
 
Erwin H

Erwin H

27/02/2012 19:07:29
Quote Anchor link
Lijkt in dit stukje te zitten:
$(this).animate({ height: "4em" }, 500);

De JQuery animate functie maakt de animatie van de huidige waarde naar de meegegeven waarde. Dus als je textarea 1em is, dan groeit die naar 4em. Maar als je textarea al 4em is, dan gebeurt er dus niets. De allereerste keer dat je erop klikt zou je dus de groei moeten zien (maar dat kan al op pageload zijn waardoor je het niet ziet), daarna zie je in elk geval niets meer gebeuren.

Toevoeging op 27/02/2012 19:09:05:

Probeer het eens in plaats van bij "focus" bij een "click" te doen, dan gebeurt het in elk geval niet na de pageload al.
 
Jaron T

Jaron T

27/02/2012 19:14:42
Quote Anchor link
zet er ook de document ready function omheen.. wel handig als je textarea pas later aangemaakt wordt.
 
Piet Jansen

Piet Jansen

27/02/2012 19:18:20
Quote Anchor link
Document ready heb ik zojuist geplaatst. Niks verandert. Verandering naar click werkt ook niet. Werkt het bij jullie wel in de browser? Op Fiddle werkt het namelijk prima.

http://jsfiddle.net/Y3rMM/
Gewijzigd op 27/02/2012 19:18:32 door Piet Jansen
 
Erwin H

Erwin H

27/02/2012 19:28:43
Quote Anchor link
Als ik er dit van maak werkt het wel in mijn browser (FF):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
$(document).ready(function(){
  $('textarea.expand').focus(function () {
    $(this).animate({ height: "4em" }, 500);
  });
});

Dus Jaron heeft de eer :-)
Gewijzigd op 27/02/2012 19:30:03 door Erwin H
 
Reshad F

Reshad F

27/02/2012 20:05:52
Quote Anchor link
@jaron als je je jquery net voor het einde van je body zet is document.ready overbodig :) dus less code less problems!
@piet bij mij doen .focus en .click het beide welk browser gebruik je zelf? ik gebruik chrome.. ik heb het overigens alleen getest op fiddle

Toevoeging op 27/02/2012 20:15:30:

ik heb de oplossing voor je hebt het even zelf getest :)

probeer dit is
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<script>
$('#message').click(function () {
    $(this).animate({ height: "4em" }, 500);
  });
</script>


en dan is hierbij #message natuurlijk de ID van de textarea die je kleiner of groter wil laten maken

:)
Gewijzigd op 27/02/2012 20:07:42 door Reshad F
 
Eddy E

Eddy E

27/02/2012 20:45:33
 
Reshad F

Reshad F

27/02/2012 20:49:42
Quote Anchor link
kanook :p maarja jquery is dan weer 3 regeltjes
 
Piet Jansen

Piet Jansen

27/02/2012 22:06:15
Quote Anchor link
Erwin en iedereen, hartstikke bedankt, het werkt met Erwins oplossing prima. Hartelijk dank voor de tijd.
Gewijzigd op 27/02/2012 22:14:41 door Piet Jansen
 
Wouter J

Wouter J

27/02/2012 22:44:51
Quote Anchor link
Al is onfocus hier beter dan onclick... Want een input element focus je en klik je niet.

Tevens is het beter om CSS en JS gescheiden te houden, en hier dan een class voor te maken. Dan krijg je zoiets: http://jsfiddle.net/Y3rMM/291/
Je hebt hier dan wel Core Effects van jQuery UI nodig om de animatie te laten verlopen.

PS: jQuery 1.5.2? Waarom gebruik je geen jQuery 1.7.1, deze heeft namelijk een veel betere events api.

Quote:
maarja jquery is dan weer 3 regeltjes

+ 9311 regels jQuery source... ;)
Gewijzigd op 27/02/2012 22:45:56 door Wouter J
 
Reshad F

Reshad F

27/02/2012 23:00:21
Quote Anchor link
ja aar die source include je he :P

Toevoeging op 28/02/2012 00:35:42:

@piet werkt het ook in chrome? bij mij werkte het namelijk niet.. ( erwin zijn manier )
 
Piet Jansen

Piet Jansen

28/02/2012 21:13:16
Quote Anchor link
Werkt prima in Chrome!
 
Reshad F

Reshad F

28/02/2012 22:12:28
Quote Anchor link
oh dan had ik iets verkeerd gedaan :P maar goed dat het werkt!
 



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.