How to show a preview image of an input file upload

Today we’re going to show you how to show a preview image of a file that you upload using the HTML input type file.

Okay, let’s dig right into it, firstly, let’s image you have the following HTML markup:-


<input type="file" onchange="readURL(this);" />
<img id="blah" alt="Your Image Preview" />

We’re going to add a bit of CSS styling to hide the image initially and only display the image once the file has been uploaded.


img {
  max-width: 180px;
  display: none;
}

input[type=file] {
  padding: 10px;
  background: #2d2d2d;
  color: #FFF;
  display: block;
  margin-bottom: 20px;
}

Now, we just need the jQuery function to show the preview and add the uploaded file to replace the image, you can do this as follows:


function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah')
        .attr('src', e.target.result);
      $('#blah').show();
    };

    reader.readAsDataURL(input.files[0]);
  }
}

The end result will look something as follows:-

If you take a look at this blog post, you will see how you can take this one step further to make it even more visually appealing 😉

This is a pretty cool feature to add to file uploads to make them a bit more visually impressive to the user.

You can check out and test the CodePen we created here.

As always, we hope you have found this useful… make sure to leave a comment and stay tuned for the next tutorial!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

We’re Hiring! 1 x Freelance Web Developer

We are currently in need of a website developer to work with to complete ad-hoc jobs as required as we quite often we tend to get a work overload that we could do with some assistance in order to complete tasks in a timely manner. We always aim to deliver any type of project in a timely manner which is how we maintain long-term relationships with our clients.

Please only submit your application if you are competent in the following:-

  • Bespoke WordPress Theme Builds
  • Plugin Customisation
  • HTML5 / CSS3 / PHP / jQuery / JavaScript / SASS / SCSS
  • Bootstrap 4
  • Providing estimates and delivering on time
  • Developing Email Templates using MailChimp
  • Based in Europe*

 

Optional requirements but not essential:-

  • Magento
  • Shopify
  • Laravel
  • Various other frameworks as there tends to be a varied type of work.

 

Please submit your hourly rate and a list of your expertise within your application.

To get started, email your CV and Cover Letter to [email protected]

Thank you for reading, and we look forward to hearing from you!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Replace an image in an using CSS

Today we are going to show you a nice little feature using CSS box-sizing as an image replacement technique.

I stumbled across this when I was asked to replace an on of the sites we built with another image hosted elsewhere. Sounds easy right? But the catch was I would not be able to replace the markup as it was already deployed to production, but could inject CSS or JS through our CMS. For whichever technology I chose, it would be inserted on all site pages. I only needed on one specific page, and the attributes of parent containers were non-specific to the desired page.

Okay so let’s say we have the following HTML:-


<head>
  <title>Your Page Title</title>
</head>
<body>
  <!-- .header would be across site on other pages with different children, so no background image adding -->
  <div class="header">
    <img class="banner" src="//exampledomain.com/banner.png">
  </div>
</body>

This is simple to do with JavaScript, but I wanted to see if there was another, more simpler, way. After a few iterations in Chrome Dev Tools, I thought to use the box-sizing property to keep dimensions strict, add the new image as a background image, and just push the inline image out of the way with padding and see what happened.


/* All in one selector */
.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://exampledomain.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

It worked perfectly and here are some reasons why:-

  • It works on just about any element, even empty ones like or

  • Browser support is excellent (Chrome, Firefox, Opera, Safari, IE8+) http://caniuse.com/#feat=css3-boxsizing
  • Refrains from using SEO unfriendly display: none or other properties

That last point seemed important, as it works really well for text replacement too without any adjustment.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

CSS – Offsetting a HTML anchor point

If you’ve ever used anchors in HTML pages you probably already know what the issue is. Sometimes when you add an anchor point above the div you want it to scroll down to, when you click the link you quite often find it’s cutting off some of the section you want to have within the viewport. You can use jQuery or JavaScript to resolve this issue but I find using a small amount of CSS does the job!

Okay so here is the super easy solution, first add a class to your link:-


<a class="anchor" id="top"></a>

You can then position the anchor and offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. -200px will position the anchor up 200px:-


a.anchor {
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;
}

And there you have it, you now have control of the anchor point scroll to position, just tweak the ‘top’ attribute to suit your needs!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

CSS/jQuery – How to add a custom Back to top Icon

The Back to top link allows users to smoothly scroll back to the top of the page. It’s a little detail that enhances the navigation experience on a website with long pages.

How to add a custom back (scroll) top top icon?

Firstly, within your footer, add the following HTML:-


<a href="#" class="back-to-top"></a>

Then add the following CSS:-


.back-to-top {
    display: none;
    background-image: url(../img/back-to-top.png); // Link this to your image
    background-repeat: no-repeat;
    position: fixed;
    height: 30px; // The height of the icon you added for the background
    width: 30px; // The width of the icon you added for the background
    background-size: 30px; // The height and width of the background image
    bottom: 30px;
    height: 30px;
    z-index: 999;
}

The magic behind it is adding jQuery to handle the fade in/out when the scroll point is further down the page. Add the following jQuery code:-


/* Back to Top */

var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
	if (jQuery(this).scrollTop() > offset) {
		jQuery('.back-to-top').fadeIn(duration);
	} else {
		jQuery('.back-to-top').fadeOut(duration);
	}
});

jQuery('.back-to-top').click(function(event) {
	event.preventDefault();
	jQuery('html, body').animate({scrollTop: 0}, duration);
	return false;
});	

And there you have it, you now have an icon that appears on the bottom right-hand corner when you scroll down the page. Clicking this element will smoothly scroll back to the top of the page.

Remember to include the jQuery library and jQuery UI for this to work properly.

Any difficulties, just ask away in the comments!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to make Responsive Slanted Divs in CSS

Do you need to create a slanted div for your website? Well you’ve come to the right place!

We are going to create a slanted Div using CSS only without the use of images as this would be a waste of resources! We are going to use pseudo elements, applying a CSS3 transform on them, skewing the whole element and hiding the overlapping areas. Here is the code:-

HTML


<div class="container">

  <main class="main">
    <div class="main-container">
      <section>
        <h1>Silva Web Designs</h1>
        <p>Okay, so I guess this is a good way to make a slanted div aye? I am also responsive which is pretty cool. Instead of using a background colour you can use a background image instead which works very nicely. The possibilities are endless! :)</p>
        </section>
    </div>
   </main>

</div>

CSS


.container {
  padding-top: 60px;
}

.main-container {
  background: #169fe6;
  position: relative;
  color: #FFFFFF;
}

.main-container:before {
  content: '';
  position: absolute;
  left: 0;
  top: -36px;
  width: 100%;
  height: 72px;
  background: #169fe6;
  -webkit-transform: skewY(2.5deg);
  -moz-transform: skewY(2.5deg);
  -ms-transform: skewY(2.5deg);
  -o-transform: skewY(2.5deg);
  transform: skewY(2.5deg);
  -webkit-backface-visibility: hidden;
}

section {
  margin: 10px 0;
  padding: 0 20px;
  padding-bottom: 10px;
  position: relative;
}

And there you have it, I hope this helps! 🙂

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share