#jquery

Another year, another jQuery UK conference. I wrote previously about the jQuery UK conferences that I attended in 2012 and 2013, now I’ve finally gotten around to writing up my notes from the 2014 conference.

Yesterday I attended the second jQuery conference in the UK (the first being last year, which I blogged about here). I failed to get any nice pictures at the event myself, so this blog post uses a collection of crowd-sourced pictures from attendees that shared them via Twitter, Instagram and Flickr.

Recently Jenny asked me for a way to embed a YouTube video with a custom thumbnail that would play the video when clicked.

Yesterday I attended the first European jQuery conference, which was hosted here in Oxford at the Saïd Business School. This was the first big conference I’ve been to (though I’ve attended a couple of local ‘Geek nights’ and ‘design jams’).

Bit of idea ping-pong with Tomas this evening, to provide a solution to something he is working on. He had some text in a table cell that needed to be split and put into an array, separating each line into two parts.

I’m probably stating something very obvious to everybody, but this is something that caused me a couple of hours of confusion. When creating a new slightly-fancier page to be displayed on omgmog.net I had a problem in that after a certain amount of time the browser would become unresponsive (or in Google Chrome the page would die - but I love how Google Chrome handles this). The problem I soon realised was in my animation loop. I’ve got a couple of lines of jQuery that move some elements on the page around randomly, to give a floating effect. The original code was as follows: $("h1 span").not("#h1p3").everyTime(0,function(){ $(this).animate({'margin-left':rand_no(),'margin-top':rand_no()}); }); It turns out the problem with this code is that the animation was looping before it had completed, so the browser presumably is stacking up all of these $().animate(); functions, which in turn caused the browser to become unresponsive. To remedy this, I specified a time for the $().animation(); function, and set the $().everyTime(); timeout to slightly longer than this: $("h1 span").not("#h1p3").everyTime(500,function(){ $(this).animate({'margin-left':rand_no(),'margin-top':rand_no()},490); }); With these small changes in place, it seems my problem is solved! I don’t have any “lessons learned” speech to close the post with, it’s just something that I found interesting :)

This is a repost of a solution I provided over at the smashing magazine forums. I’m posting it here as it’s a pretty useful solution in itself. The original question is as follows: I’m building a new website and on this one page I need to use a huge form, instead of using labels I want to enter the “label” text in the value attribute and then use JS to clear the field on mouseclick. The problem is that every field needs to be filled out. I don’t want users hitting the submit button with some of the standard values still in place (easy to miss certain stuff) because this will mess things up. I can ofcourse check for empty fields but to do this I need to somehow check if all the fields have been changed on form submit. So I whipped up a quick implementation of how I would do it using jQuery.