Wednesday 9 October 2013

How to make a nice file upload button with HTML & CSS

We have all seen the horrible file upload boxes, we all know what they look like.. and they all differ slightly from browser to browser.

There are lots of hacks out there to emulate a button click to launch the file input dialog, or to position the input box transparent ontop of a beautified button, but all of these are limited to the browser support and some browsers require hacks.

I want to show you the simplest way I can think of..

Here's how it looks:




Ok that's cool, but how exactly does it work?



<style>
.upload_box {
    overflow:hidden;
    position:relative;
}

#select_file {
    position:absolute;
    left:-300px;
}

label {
    cursor:pointer;
    font-weight:bold;
}
</style>
<div class="upload_box">
    <input id="select_file" type="file" />
    <label for="select_file" id="selected">To select your file click here!</label>
</div>
>And that's all there is to it.. Let me explain.. the good thing about the label tag is it links to the input element that you would like to focus on.. the container ( .upload_box ) has the css attribute overflow:hidden; so we basically hide the input element off to the left, which essentially "hides" the input element, so when you click on the label, it triggers the input dialog. Because this is a label, you can style it to however you like.. this is how I have styled it for one of my clients:






So, now we've covered how to do it.. there's one more thing you should know, once you select the file it won't display the file name, so to do this we do need a small piece of Javascript.. This is the Javascript:


<script>
function fileName()
{
  var _file = document.getElementById('select_file');
  document.getElementById('selected').innerHTML = _file.value.replace(/C:\\fakepath\\/i, '');
}
</script>

To make this work, you need to attach fileName() to the input field, to do this simply add onchange="fileName()" like so:


<input id="select_file" type="file" onchange="fileName()" />

I hope this has helped!

And here's a working DEMO



Friday 14 June 2013

Need help getting your tweets onto your website? (Twitter API v1.1 no PHP needed)

A lot of us used to use the old "search twitter for the screenname and return the json results" javascript.. this was awesome, and easy to implement.

Unfortunately, Twitter turned off the old 1.0 API, which includes unauthorized queries to their API v1.1.. now you have to sign up for an application, create an oAuth and make requests to twitter..

Now people are shouting "My twitter feed isn't working!!!" and "how do i get my twitter feed on my website?" and "how to oauth with twitter"...

This means time and hassle searching and developing.. it also means you need to watch and change it again once twitter change their setup again!

Or, you could use http://getmytweets.co.uk

It's simple, it includes 5 steps in total, and 1 of the steps is sharing the website with people!!

Here's how it works..

Simply, place this above the </head> tag of your HTML and replace "gmtweetsuk" with your twitter username..

<!-- include the jQuery library if you haven't already -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<!-- include the GMTweets library, keep this hosted to our servers to ensure you stay up-to date -->
<script src="http://api.getmytweets.co.uk/min.tweet.2.js"></script>

<!-- the plugin -->
<script type="text/javascript">
$(document).ready(function(e) {
    
    $('.twitter_feed').getmytweets({
        twitter_sn: 'gmtweetsuk', /* my twitter username */
        twitter_wrap: 'tweet', /* wrap each tweet with a class */
        twitter_limit: 1 /* how many tweets to return */
    });
    
});
</script>

And then place this where you want your tweets to appear:

<div class="twitter_feed"></div>

Simple!

The good thing about this, is when twitter change things, you don't have to! GMTweets will constantly update their API to keep your feed current and working.. all you need to do is keep linking to their JS.

Saturday 23 February 2013

Need help fixing your newsletter / eflyer / eshot?

So, building a newsletter that works in all the different email clients is a mission!

Luckily there is a program that helps out, adobe fireworks - this program exports the HTML files and images needed for the newsletter, unfortunately this isn't all you need to do.. That'll be ok for some templates but if you have any text in yours newsletter there'll be issues!

There's a tool called eshotdoctor.com which takes your HTML freshly exported from fireworks and processes is to fix all the issues like padding, images out of shape, text resizing on iPhone mail, images jumping on googles gmail, blue links underline on mac outlook and more!

Give it a try.. It saves you so much time

http://www.eshotdoctor.com

Wednesday 23 January 2013

Wait until all images have loaded then fade in - jQuery

I'll be showing you a very easy way of having all your images hidden, and then fading in nicely when they have loaded, which gives a nicer effect than seeing them trace down the page or depixelate into an image...

Place this in your head just before the closing tag.. 


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
 $('img').css('opacity',0); // hide all images
});
$(window).load(function() { // we use $(window).load because unlike $(document).ready, it isn't triggered until the client has finished loading completely.
 $('img').animate({'opacity':1},800); // everything is loaded, fade images in
});
</script>

Monday 2 July 2012

How to use CSS3 Pseudo Classes on IE7 and IE8


It is a real shame when you have to drop using Pseudo classes and add another class into your CSS just to combat IE7 and IE8. Sure it's no big deal, but these classes, especially nth-* is a really nice addition to the CSS library, and makes coding a lot easier. Luckily, jQuery does understand these selectors. 
A lot of websites are using the jQuery library now, so we have developed this plugin to use in conjunction with jQuery.
How to use it:
Place this just before the closing </head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://api.skyblueproject.com/pseudoie/pseudo-ie.0.1.min.js"></script>
<!--[if lt IE 9]>
<script>
 $(document).pseudoie({url:'style.css'});
</script>
<![endif]-->

Make sure you replace style.css with the path to your stylesheet for instance:
/styles/style.css
/css/style/mystylesheet.css
If you have multiple stylesheets to parse, then simply replicate as follows:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://api.skyblueproject.com/pseudoie/pseudo-ie.0.1.min.js"></script>
<!--[if lt IE 9]>
<script>
 $(document).pseudoie({url:'style1.css'});
 $(document).pseudoie({url:'style2.css'});
 $(document).pseudoie({url:'style3.css'});
</script>
<![endif]-->

Hope this helps!

Any issues please leave a comment!

Thursday 22 March 2012

Custom select dropdown with CSS and JS

Dropdowns have been a major pain in the backside in the past when it comes to styling of them, the default look doesn't always suite your website theme.


Customization is very limited, but it's not very difficult to change the style of the dropdown with CSS and javascript.


Lets turn this:






Into this:






Step 1
The HTML - This is simple, basically we have a div which holds the select element, it also holds the span element:


<div class="selection">
    <select class="selectbox" onchange="changeValue(this.value);">
        <option>test select</option>
        <option>test select 2</option>
        <option>test select 3</option>
        <option>test select 4</option>
        <option>test select 5</option>
    </select>
    <span id="selector">test select</span>
</div>


Step 2
The CSS - this tells the select element to become invisible, and tells the span what to look like and to sit below the selectbox.


<style>
.selection { position:relative; }

.selectbox,#selector {
 position:absolute;
 top:0;
 left:0;
 font-family:Arial, Helvetica, sans-serif;
 font-size:15px;
}

.selectbox {
 width:220px;
 padding:5px;
 height:30px;
 opacity:0;
 z-index:5;
}

#selector {
 background-image:url(dropdown.jpg);
 background-repeat:no-repeat;
 padding:5px 43px 5px 10px;
 overflow:hidden;
 width:162px;
 height:20px;
 color:#fff;
}
</style>


Perfect, as you can see from the CSS, the span with the id of #selector uses a background image called dropdown.jpg - this gives the coloured background and the arrow, you can make your own one. - this image is 215x30px if you change the size of it make sure you adjust the CSS accordingly, basically fiddle around with the #selector width and padding. You may also need to change the .selectbox width and padding if you experience difficulty clicking the dropdown once you've changed the size.


Step 3
The Javascript - this is just to update the span with the selected dropdown option.


You can do this with the jQuery library (if you already use it on your website), or using built in javascript, both work fine:


jQuery


<script>
function changeValue(val)
{
 $('#selector').html(val);
}
</script>

Javascript


<script>
function changeValue(val)
{
 document.getElementById('selector').innerHTML = val;
}
</script>


So there you have it, the complete code is below:


Complete Code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Select box</title>
<script>
function changeValue(val)
{
 document.getElementById('selector').innerHTML = val;
}
</script>
<style>
.selection { position:relative; }

.selectbox,#selector {
 position:absolute;
 top:0;
 left:0;
 font-family:Arial, Helvetica, sans-serif;
 font-size:15px;
}

.selectbox {
 width:220px;
 padding:5px;
 height:30px;
 opacity:0;
 z-index:5;
}

#selector {
 background-image:url(dropdown.jpg);
 background-repeat:no-repeat;
 padding:5px 43px 5px 10px;
 overflow:hidden;
 width:162px;
 height:20px;
 color:#fff;
}
</style>
</head>

<body>
<div class="selection">
    <select class="selectbox" onchange="changeValue(this.value);">
        <option>test select</option>
        <option>test select 2</option>
        <option>test select 3</option>
        <option>test select 4</option>
        <option>test select 5</option>
    </select>
    <span id="selector">test select</span>
</div>
</body>
</html>

Wednesday 14 March 2012

How to secure HTML5 video

With videos being used everywhere, more and more websites are trying to accommodate videos on their website, if it's for visual tutorials, or marketing. Sometimes though you don't want your video being downloaded and shared with others.. A good case for this would be a subscription based website.

Easy, lets use a flash player.. well ok, we could do.. but with more and more websites jumping over to HTML5 compliant, it would be nice if we could protect our videos and still use the HTML5 player.

The key issues with using an HTML5 player is there is absolutely NO encryption or protection for the videos.

Here's an example of the HTML5 video tag

<video controls>
    <source src="/sample.mp4" type="video/mp4" />
    <source src="/sample.webm" type="video/webm" />
</video>
All a viewer has to do is right click on the playing video and hit a button called 'Save Video As' and they'll have it on their computer. If not they can see exactly where the video is stored and download it anyway.

Protecting the video is a very complex method using multiple checks on multiple technologies, i won't go into the details..

We have spent hours, ounces (of coffee), an unmeasurable amount of stress developing this HTML5 protection.

After a lot of agressive testing we have secured our videos and have developed a very smart detection system which adapts to different download attempts.

And so from the creators of The Skyblue Transporter and The Custom Google +1 button we are proud to announce that we will be releasing Version 1 of our SkyblueVideoProtection (SkyBVP) on a cloud based subscription where you can securely store and stream your videos embedded directly to your website.. For more information please enquire!