TheAmazingWeb.net has come to an end. From now on you will find my Web Development articles on visuelleGedanken.de.

Moving on

Hey,

you probably have noticed that I haven’t posted anything here in a while, that’s because this blog has come to an end. It was an experiment and it was good but maintaining two blogs isn’t that great so I decided to incorporate my web development articles into my other, older blog and make it my internet home again that it once was. I already wrote about how to use Icon Fonts, Google Web Fonts and how to avoid loading unnecessary CSS background images. And there is more to come. I won’t write any link posts in the future but make a Weekly Recap with the best articles, tools and so on. You can find the first one here.

So I hope you will follow me and subscribe here.

Thank you! <3

Minimal-Ui Viewport Meta Tag

With iOS 7.1 beta 2 Apple added a new viewport meta tag that allows us to minimize the top and bottom bars in Safari on the iPhone. It’ll be basically the same behaviour as if the user starts to scroll. In the past we had to do this with a little trick and trigger the behaviour with a 1px scroll when the page was loaded.

I think even though it adds annoooother option to the viewport meta tag which can get a little cluttered, it’s a good addition:

<meta name="viewport" content="minimal-ui">

Play iFrame embedded YouTube video on click of a button

In a recent project I had to show and autoplay an embedded YouTube video on click of a button. My first reaction was to use the YouTube API, create the video on the fly with Javascript and have some functions at my finger tips to start the video and so on. But then I started to look around if it might be possible to do the same with the normal embedded iframe code and I did find something that is much easier than to do all this YouTube API stuff.

So if you just need to play the video on click and don’t need to know when it’s ended or do other things with it, that the YouTube API allows you to do, this is the solution you are looking for:

First we need a simple link and the iframe Embed Code.

<a id="play-video" href="#">Play Video</a>
 
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>

And then we write some simple jQuery, which on click just extends the YouTube video source with the autoplay parameter thus plays the video. I also prevent the link from behaving like it normally would. Simple as that.

$(document).ready(function() {
    $('#play-video').on('click', function(ev) {

        $("#video")[0].src += "&autoplay=1";
        ev.preventDefault();
 
    });
});

Maybe this is useful for some of you in the future. :) I also made a CodePen so you can see the code in action.

CodeKit OS X Mavericks Update

Screen Shot 2013-10-24 at 15.08.11

If you are using CodeKit and have upgraded your Mac to OS X Mavericks (which you definitely should do) than you also should update CodeKit to the latest version. 1.9.2 fixes two issues with Mavericks.

XOXO Festival 2013 – Cabel Sasser

A highly recommended, personal talk from a, what seems to be wonderful and funny person, Cabel Sasser of Panic Inc.

On vacation

Hey guys,
just a short notice: I’ll be on vacation for the next one to two weeks. So don’t expect too much here over this time.

Cheers,
Martin

Animated open/close toggle button

I recently had an idea for a simple content/box toggle. You click a button (+), it rolls to the right and stops in a position so it looks like a close icon (x). It then reveals the content. You click the close button, the content will be hidden and the buttons rolls back to the left.

The idea was to only use CSS animations and transitions (Javascript only for toggling classes), especially because I’m not that good with this fancy stuff. It was a nice exercise and I quite like the result. Even though it’s not perfect it shows my initial idea pretty well.

See the Pen Open and close button with animation by Martin Wolf (@martinwolf) on CodePen

Postion: -webkit-sticky test

With the introduction of iOS7 we also get a new mobile Safari which, as the upcoming Safari 6.1 for desktops, supports position: -webkit-sticky;. This is something like a hybrid of position: static and fixed. The element is static until it’d be scrolled out of the viewport and then gets fixed. It’s easy to implement and would be a nice addition to our CSS tool belt if it gets implemented in every major browser.

You can see it in action in this CodePen. Remember: Only on Safari for iOS7 or Safari 6.1 beta.

Update: The CodePen only works with Safari 6.1 and not on iOS. That’s because of some iframe embed issue thingy I think. But I tested it locally on iOS7 and it works fine.
Update: Another update! Chrome 29 implemented position: sticky;. Prefix free! \o/

See the Pen Postion: -webkit-sticky test by Martin Wolf (@martinwolf) on CodePen

 Prev 1 2 3 4 5 6 7 8 Next