jQuery scrollto

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Front-end Angular developer

Functie In jouw rol als Front-End developer werk je samen met de backend developers om middels tweewekelijkse sprints het platform naar een hoger niveau te tillen. Hiernaast heb je affiniteit met data en werk je graag samen met het team om de gegevensintegriteit en -beveiliging te waarborgen, om ervoor te zorgen dat de gebruiker wereldwijd de beste SaaS-services heeft. Deze organisatie heeft meer dan 100 mensen in dienst, waarvan er 45 in Nederland werken. Het ontwikkelteam bestaat uit 10 mensen en is verdeeld in 2 scrumteams. Het eerste team bestaat uit Java en Scala ontwikkelaars. Het tweede team, waar jij

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 »

Traineeship Fullstack developer (WO, 0 tot 3 jaar

Functie Zoals beschreven ga je vanaf start aan de slag bij een passende opdrachtgever, hierbij kijken ze echt naar jouw wensen, kennis/ervaring maar ook de reisafstand. Momenteel hebben ze meerdere klanten waarbij ze groepen hebben opgezet wat maakt dat er diverse uitdagende kansen liggen. Naast het werken bij de opdrachtgever, en het volgen van de masterclasses, zul je regelmatig met de andere trainees in contact zijn. Niet alleen op professioneel vlak maar juist ook bij de borrels en kwartaaluitjes! Kortom; een jaar lang hard aan jezelf werken in combinatie met gezelligheid en plezier. Spreek dit jou aan? Dan komen we

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 »

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 »

Medior/senior front end developer

Functie Vanwege de groei binnen het bedrijf zijn we op zoek naar versterking in het development team. Als back-end developer bouw je aan de bedrijfssoftware die ons helpt bij de primaire processen. Een leuk (intern) project dus waarbij je de software continu doorontwikkeld! Je werkt in een klein team, we hebben dagelijks stand-ups en iedere twee weken een scrum-sessie, begeleid door onze Scrum Master. Hierin krijg je uitgebreid de kans om je ideeën te presenteren, en te overleggen met je mede-ontwikkelaars en de Product Owner. Binnen de ontwikkelteams gebruiken we Trello, Gitlab, Jiira, Confluence en Boockstack. Hiernaast werken ze met

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 »

Lead React Developer

Dit ga je doen Als Lead React Developer zul jij je voornamelijk gaan bezighouden met: Het werken aan tal van uiteenlopende projecten waar gloednieuwe (web)applicaties van scratch af aan ontwikkeld worden met o.a. React (Native) en Drupal; Het aansturen van een team bestaande uit 5-6 talentvolle en gedreven ontwikkelaars; Het adviseren en meedenken over nieuwe (technische) oplossingen en te gebruiken tools/frameworks; Het meedenken over de architectuur en de juiste implementatiebeslissingen maken; De doorontwikkeling van huidige applicaties. Hier ga je werken Als je inderdaad een ervaren Lead React Developer bent die zichzelf graag nog verder wil ontwikkelen dan is het goed

Bekijk vacature »

Cloud Engineer

Ben jij een ervaren Cloud Engineer die complexe omgevingen kan overzien en wil je graag in vaste dienst werken bij een professioneel en kleinschalig bedrijf waar je een belangrijke rol kan spelen? Wij, IntelliMagic in Leiden, ontwikkelen specialistische IT monitoring software die we als SaaS oplossing verkopen aan grote bedrijven in Europa en de VS. We zijn een Nederlands bedrijf met een goede sfeer en met grote waardering voor de persoonlijke inbreng en kwaliteiten van onze medewerkers. Wij zoeken een ervaren Cloud Engineer met academisch denkniveau die verantwoordelijk wordt voor het beheer van de cloud infrastructuur voor onze Europese klanten.

Bekijk vacature »

PHP Programmeur

Functieomschrijving Vanuit het hoofdkantoor in omgeving Breda, ontwikkel je als PHP programmeur niet alleen webapplicaties, maar ben je verder ook gefocust op het constant inspelen op nieuwe innovaties m.b.t software ontwikkeling. Naast het ontwikkelen van webapplicaties, bouwt deze toffe werkgever ook webshops en websites voor hun opdrachtgevers. Wat ga je doen? Het testen van ontwikkelde applicaties om te zorgen dat ze goed functioneren en voldoen aan de eisen van de klanten; Het ontwerpen en implementeren van webapplicaties met het Symfony framework; Het schrijven van een schone en efficiënte code volgens het Symfony framework; Onderhouden en updaten van bestaande applicaties die

Bekijk vacature »

.NET developer

Functie Als ervaren .NET ontwikkelaar start jij een team met 12 programmeurs. Jullie zijn verantwoordelijk voor het huidige platform van deze organisatie. Als team werken jullie in tweewekelijkse sprints en starten jullie iedere dag met een stand-up. Jij werkt samen met jouw team aan het uitbreiden van het huidige platform door middel van nieuwe features. Daarnaast zorg jij er samen met jouw team voor dat het platform veilig is en gebruiken jullie de nieuwste technieken om deze veiligheid te waarborgen. Zo maken jullie gebruik van C# .NET, .NET Core, React, Azure, Kubernetes, ASP.NET, MVC. Jij gaat aan het werk in

Bekijk vacature »

Medior/senior front end developer

Functie Vanwege de groei binnen het bedrijf zijn ze op zoek naar een Technische front end developer. Momenteel hun front end back end team gescheiden aan het werk. Hier willen ze verandering in krijgen. Omdat ook veel interne applicaties ontwikkeld worden zoeken ze iemand die hen kan helpen om de interne applicaties te voorzien van de juiste Vue.js componenten. Zodoende willen ze de interactie tussen front end en back end versoepelen en de volgende stap binnen het platform gaan zetten. Deze componenten die jij ontwikkeld zullen in elk project gebruikt worden. Het back end team bestaat momenteel uit 8 ontwikkelaars

Bekijk vacature »

Medior Java developer (fullstack)

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 »

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 »

Back-end ontwikkelaar

Functie omschrijving Wil jij meebouwen aan diverse databasesystemen in een klein bedrijf met een platte organisatie? In een team van ruim 10 ontwikkelaars wordt er aan diverse ICT oplossingen gewerkt. Jouw taken hierbij zullen bestaan uit: Het onderhouden en door-ontwikkelen van bestaande databases. Denk hierbij aan schema verbeteringen en performance-tuning. Bij nieuwe ontwikkelingen ga jij ook bezig met het bouwen van het databaseschema. Omdat je in een klein team werkt zal je ook de C# routine verder uitbouwen en ontwikkelen. Ook kan je meedraaien in algemene refactory-, ontwikkel- of testwerkzaamheden. Je zal voornamelijk gebruik maken van de volgende technieken: .NET

Bekijk vacature »
Bart C

Bart C

22/11/2012 15:16:28
Quote Anchor link
Hoi,

via php genereer ik een id bij een link. Bij het klikken op de link wordt de pagina herladen terwijl er data weggeschreven wordt.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
<a href="http://www.test.be/vast.php?weekday=2&starttime=10:15&endtime=10:29&action=available&reference=220:15" id="220:15"><img ... /></a>
?>


Nu dacht ik met dit stukje code ervoor te zorgen dat de pagina de focus terug zou zetten op de laatst aangeklikte link:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<?php
<script>
$(document).ready(function (){
    $("#220:15").click(function (){
        $('html, body').animate({
            scrollTop: $("#220:15").offset().top
                }, 2000);
        });
    });

</script>

?>


Maar dus niet. Ligt dit aan het feit dat de pagina herladen wordt waardoor de actie 'click' voor het stukje javascript niet in het eerst actieve document zelf plaatsvind maar pas in de nieuwe geopende waar er dan eigenlijk nog geen 'click' gebeurd?

groetjes
Gewijzigd op 22/11/2012 15:16:56 door Bart C
 
PHP hulp

PHP hulp

13/06/2024 22:09:39
 
Kris Peeters

Kris Peeters

22/11/2012 17:15:32
Quote Anchor link
Bart C op 22/11/2012 15:16:28:
... Ligt dit aan het feit dat de pagina herladen wordt waardoor de actie 'click' voor het stukje javascript niet ...


Ja, inderdaad; daar ligt het aan.

Daarvoor was vroeger een oplossing bedacht: live()

ipv.
$("#220:15").click(function (){
doe je:
$("#220:15").live("click", function (){

Dan wordt dat ook uitgevoerd voor elementen die dynamisch zijn geladen.

Tegenwoordig kan dat ook met on() (en off() om het uit te zetten)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$("#220:15").on("click", function (){


Uitleg en referentie:
http://api.jquery.com/on/
Video tutorial over dit alles (trouwens, bekijk de rest van de tutorial ook, als je tijd hebt):
https://tutsplus.com/lesson/bind-live-delegate-huh/
 
Bart C

Bart C

22/11/2012 22:00:44
Quote Anchor link
Dag Kris,

dank je voor de interessante link!

Ik krijg het niet werkende. Kan het zijn omdat ik het script via php opbouw?

LINK waarop je klikt en waar er opnieuw naartoe gescrolld moet worden:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
$link
= '<a href="vast.php?weekday='.$i.'&starttime='.$row['StartTime'].'&endtime='.$row['EndTime'].'&action=available&reference='.$reference.'" id="'.$reference.'"><img src="./img/edit.png" /></a>';
?>


Wanneer je op deze link klikt wordt de pagina opnieuw geladen en worden de gegevens uit de url weggeschreven.
Dan controleer ik ook of de parameter 'reference' aanwezig is:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<?php
if (isset($_GET['reference']))
{

    $reference = $_GET['reference'];
}

?>


Nadien wordt deze variabele in deze functie gebruikt:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?php
echo '$(document).ready(function (){
    $(\'#'
.$reference.'\').live("click", function('.$reference.'){
        $(\'html, body\').animate({
            scrollTop: $(\'#'
.$reference.'\').offset().top
                }, 2000);
        });
    });'
;
?>


Kan dit? Zelfs met live()?
Moet ik $('#referentie') of $('referentie') gebruiken.
Ik verwijs dus niet naar de href maar wel naar de id van de <a>-tag.
Gewijzigd op 22/11/2012 22:01:23 door Bart C
 
Kris Peeters

Kris Peeters

23/11/2012 14:04:13
Quote Anchor link
Dat kan, maar dan wel anders.
De functie waarin de reactie wordt gegeven, geef je een parameter e. Die bevat informatie over het evenement (muiscoördinaten van de klik, de target, ...). Je mag dat niet overschrijven door een parameter die je zelf in de functie kan gebruiken.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<?php
echo '
$(document).ready(function () {
  $("#'
. $reference . '").live("click", function(e) {  // deze paramater e dus niet vervangen door iets anders
    // het aangesproken element kan je bereiken met this.  this is dus dat element waarop de gebruiker geklikt is
    $("html, body").animate({
      scrollTop: $(this).offset().top
    }, 2000);
  });
});'
;
?>



En verder ... Wanneer je javascript genereert met php, controleer altijd wat dat geeft in de HTML broncode; dan pas zie je of je gedaan hebt wat moet.
Want het is soms wat verwarrend; welke accolade of haakje hoort bij php, welke bij javascript ... php-concateneren met punt; js-concateneren met + ...

----

Iets anders ... je kan dit ook allemaal bereiken met ouderwetse HTML.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
bla ... bla
...

<a name="mijn_anker"></a>
<p> tekst die hoort bij dit item mijn_anker</p>

...
<a href="#mijn_anker">Scroll naar mijn_anker</a>
Gewijzigd op 23/11/2012 14:15:53 door Kris Peeters
 
Bart C

Bart C

23/11/2012 14:44:39
Quote Anchor link
Kris Peeters op 23/11/2012 14:04:13:
Je mag dat niet overschrijven door een parameter die je zelf in de functie kan gebruiken.


Dag Kris,

inderdaad, dat was een foutje van mij. Ik had die laten staan.

Ik zou dit inderdaad kunnen met ouderwetse html maar ik wou eens iets anders proberen. Trouwens, heel interessante website die tutsplus.com! Zal ik zeker benutten.

Ik heb het document even online gezet om te testen
http://www.restaurantterpolder.be/wachtkamer/vast.php

De jquery wordt goed opgebouwd maar het werkt niet.
Is het beter om te werken met #refnr in de url ipv ?reference=refnr?
Gewijzigd op 23/11/2012 14:54:19 door Bart C
 
Kris Peeters

Kris Peeters

23/11/2012 15:12:17
Quote Anchor link
O ja ... dat is dus de bedoeling ...

Dan gaat het niet meer om een click event, maar moet die animate uitgevoerd worden als de pagina wordt geladen

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<script>
$(document).ready(function (){
  $("html, body").animate({
    scrollTop: $("#717:45").offset().top
    }, 2000
  );
});
</script>
 
Bart C

Bart C

23/11/2012 15:33:24
Quote Anchor link
ok, thx. om het te laten werken heb ik dus nog wat gewijzigd. Ik heb de hashtag toegevoegd als anchor in de url en deze dan zelf in mijn jquery gebruikt:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<script>
var url = windows.location.pathname;
var hash = url.substring(url.indexOf("#")+1);

$(document).ready(function (){
  $("html, body").animate({
    scrollTop: $("#"+hash"").offset().top
    }, 2000
  );
});
</script>


Dit werkt zoals het zou moeten werken maar nu kom ik erachter dat het systeem niet perfect is :p
Als ik een link aanklik die onderaan de pagina dan reload hij hem, indien mogelijk, boven aan de pagina (wat natuurlijk logisch is met die anchors). Dat zorgt ervoor dat de pagina toch nog af en toe verspringt naar een andere locatie.

Een beter systeem zou zijn om via ajax gewoon dat ene element te herladen. Ik moet de inhoud wel opnieuw inladen (andere link inzetten) maar vooral moet er een andere css-klasse aan toegewezen worden.
Gewijzigd op 23/11/2012 16:14:11 door Bart C
 



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.