Massive and Feature-Rich Drop-Down Navigation Menus

It seems that we have left huge drop-down menus behind, opting for little mobile-friendly hamburger buttons that skillfully hide a great panel with links, sticky streamlined navigation bars or just elegant slide-out sidebars; however, there are still projects that simply can’t function without large menus.

Classic and time-tested drop-downs that were once popular nowadays look massive, heavy and unstylish. Nevertheless, they still own a great potential, being able to easily dish up assorted information without sacrificing precious space. What they need is just some enhancements in terms of design and a slight upgrade to satisfy the needs of small and large screens.

We have found 20 fresh examples of improved extensive feature-rich navigation menus. They suggest that drop-downs are getting better: becoming faster, more lightweight and even richer with icons, and multimedia. Not only do they serve as a getaway for inner structure but also overwhelm online readers with ads, promo shots, social media and even a product box with a hot ‘buy’ button.

Large Drop-Down Menus

Adidas Football

The brand is famous for websites with huge and all-embracing drop-down menus that skillfully balance copy and images. Monochrome color palette, a considerable amount of white space and well-organized list create a pleasant experience.

Adidas Football

Boutique Olympique Lyon

The website leverages accompanying icons that carefully visualize each menu item. They are used both at the top level and in drop-down sections. These nifty line style glyphs go well with the main theme and make the navigation more intuitive and visually appealing.

Boutique Olimpique Lyon

Treblecone

Treblecone utilizes blocks that take up only the required amount of space. In such a way the ‘welcome’ section performs its role of showing off motivational images even when a user browses through the navigation. Although the backdrop of the drop-down part is slightly transparent, it still provides optimal contrast to the content.

Treblecone

Le Slip Francais

Le Slip Francais pays attention to the meanings of the menu item so that the drop-down panel relies on a series of relatively large icons. Just with one glance users are able to quickly find the desired category. Each glyph is made in a brand coloring and neat flat style.

Le Slip Francais

Belazu

Belazu populates its mega drop-down menu with pictures. Since images are worth a thousand words, the solution livens up the project and navigation, making exploration more pleasant and handy.

Belazu

Gibbston Valley

Gibbston Valley is another website that goes for a vast menu with supporting images that overlays almost the whole screen. Each picture cleverly represents a link, enriching the visual experience.

Gibbston Valley

SM Seruya

SM Seruya has a highly informative and content-intensive website that needs to display lots of data in a convenient and straightforward manner. The enormous navigation panel starts with a traditional streamlined bar and ends with a huge slide-out box with links and promo images. It has a rigid structure and perfect organization that strengthens readability.

SM Seruya

Acties

Acties has a relatively small drop-down menu that occupies only several rows. Each menu item has a supportive contour icon and is placed within a grid system. Grayish coloring nicely collaborates with the white backdrop and is consistent with the overall theme.

Acties

Reservoir

Reservoir has an elegant menu that complies with the website aesthetics. Although the font size is super small, titles are still readable because of a perfect contrast, list style organization, and ample space. The promo image strikes the eye right away, serving as a focal point.

Reservoir

Luxe

Luxe makes use of a menu that extends over the entire width of the screen. Despite of lots of unused space, the component is not overloaded with extra text or images. On the contrary, the team has retained an open feeling to add a generous amount of fresh air and reinforce the luxurious appearance.

Luxe

Dogswelll

Here the team has managed to bring order to the primary navigation. Links are carefully laid out in several columns that are spaced at regular intervals and relatively large line height. As a result, each item has its place and the component has an excellent readability. Solid semi-realistic icons are the perfect complement.

Dogswell

MTV Serbia

MTV Serbia looks vibrant, dynamic and energizing. There are lots of interesting twists: asymmetrical layout, bright coloring, flat graphics, neon-like touches, videos and much more. However, when it comes to the menu section, the sublevels are made according to the traditional way of presenting data: solid color backdrop, simple arrangement, and perfect contrast.

MTV Serbia

THB Hotels

THB Hotels has a drop-down menu that fits here like a glove. Although it is content-heavy, thanks to accompanying icons and modular system users won’t get lost.

THB Hotels

GSI Outdoors

GSI Outdoors tries to focus users’ attention on menu items without cluttering the design. The sub levels omit needless things and opt in favor of visual impact that is produced by images. The latter puts the content above everything and engages online visitors.

GSI Outdoors

Royal Robbins

Royal Robbins has a semi-transparent sub-menu that looks refined. Although it partly overshadows the lush image backdrop, yet users still can enjoy its picturesque scene. White tones and sharp typography that are used for displaying titles help to delineate the content and make it easy to perceive.

Royal Robbins

Creative3 Design

Creative3 Design’s mega drop-down menu looks simply overpowering. It covers a lot of information that it is a bit annoying. Of course, the column-style structure tries to save the situation; however, it is hard to find the required link right away.

Creative3 Design

Nest Designs

Nest Designs employs blocks to show sublevels of the main menu. Each box comprises textual data and an image of a relevant product with an active link and CTA. This little marketing ploy increases conversion rates.

Nest Designs

Clipper Round the World

Clipper Round the World has a classic drop-down menu that includes a properly arranged list of links. It matches the tone of the project and does not distract attention with lavish visuals. The small drawback lies in the coloring that needs some improvements since readability suffers a bit.

Clipper Round the World

Secret Den

The top level of menu comprises only three links that are broken into a dozen of others and presented in sub levels. Although, as a rule, the drop-down part leverages only several columns, the team has left open space to make the navigation look more weighty and eye-catching.

Secret Den

Bracketron

As you can see from the screenshot, the drop-down box has a small flaw. Even though the menu meets the theme and has a certain level of elegance and sophistication, when it comes to readability it fails to perform its role properly. Maybe a less transparent backdrop would do the trick.

Bracketron

Conclusion

E-commerce, news websites, online magazines and those projects that have a complex information hierarchy prefer massive and feature-rich drop-down menus. They allow embracing all the categories and presenting them in a straightforward and intuitive manner, saving plenty of space. Accompanying images and icons give a fresh zest to the component.

Which type of navigation do you like: huge drop-downs, slide-out sidebars or hidden under hamburger buttons? Do you find menus with images and videos handy and pleasant? Share with us your opinion.


Onextrapixel – Web Design and Development Online Magazine

FacebookTwitterGoogle+LinkedInEmailPinterest

Nokia OZO: The Virtual Reality Camera

And you thought Nokia was dead right? Well, they aren’t, and this new product, the OZO, might be what pulls them back into the light, with a world-leading Virtual Reality Camera. The OZO is a professional Virtual Reality Camera made for pro-storytellers and production companies, and with a price of $ 50,000. It’s not cheap, but […]


Digital Buzz Blog

FacebookTwitterGoogle+LinkedInEmailPinterest

Top 6 Graphic Design Gadgets You Can Buy Online

Every freelancer can tell you that creating great designs is all about working with quality resources. Because we know how important tools are for boosting designers’ creativity, this week, we’ve prepared a special collection of geeky gadgets to help you build the best designer workstation you can possibly imagine. Selected from a broad range of categories, including electronics, books and even home decor, this cool list of items is definitely in every designer’s wish list for this holiday season. Let’s jump right in and discover some among the best graphic design tools and gadgets you can buy over the Internet.

 

The Designer’s Wish List: The Top 6 Gadgets To Create a Better Work Environment

 

The Website Stencil Kit

Stainless steel website stencil

Source: http://www.uistencils.com/

Looking for a cool graphic design tool under $ 30? The website stensil kit, found on UI Stensils, provides a simple and convenient way for wireframing web elements without the need of precise sketching. This stainless steel stencil comes equipped with the most commonly used user interface elements and social media icons. Together with the product, you’ll get an amazing zebra mechanical pencil and a downloadable PDF template to make your designing experience a true pleasure.

 

The Keyboard Mug

Keyboard coffee mugs.

Source: http://beln.in

 

Imagine taking a sip of your favourite whipped cream coffee from your own keyboard. Despite the common understanding that keyboards and liquids don’t go along very well, this designer mug will help you dive into another reality and drink straight from the inspiration source. These mugs, offered over Amazon, come in many varieties and offers you the incredible opportunity to drink from either “Ctrl”, “Alt” or, our favourite – “Delete”.

 

Laser Projection Virtual Keyboard

Cool laser virtual keyboard.

Source: http://rasteekoyee.blogspot.com

 

Project your own virtual keyboard on any surface you wish and amaze your clients with this awesome laser keyboard. Connect it to your laptop or smart device and type along. This cool gadget, sold by Quantum Wireless, can project a red-tinted, virtual keyboard on any surface. It uses revolutionary technology and connects using Bluetooth wireless technology. It can be the designer’s best friend in busy situations when no keyboard is available and it’s a great way to impress your buddies.

 

Wi-Fi Scanner Wand

Wi-Fi Scanner Wand

Source: www.saydigi.com

 

Scanning ideas and materials on the go is now a breeze thanks to this incredible Wi-Fi Scanner Wand. Make electronic copies within seconds with this revolutionary one-touch scanner by VuPoint Solutions. This pocket-size scanning device can create high-resolution images with up to 900 dpi. The Wi-Fi Scanner Wand is a cordless scanning tool which can connect with any device on your home or office wi-fi network and can easily export files in both JPEG and PDF format. It has a microSD card slot which allows up to 32GB of additional space and works with two AA batteries, which can be recharged at any time.

 

Wacom Intuos Pen and Touch

Wacom Intuos Pen and Touch Tablet

Source: www.centrecom.com.au

 

Replace your old mouse and turn your laptop into a digital drawing canvas. Wacom’s tablet comes with many cool additions and can turn any low-budget designer workstation into a high-end art hub. This awesome product comes with a great set of design software. The Autodesk Sketchbook Express is an amazing addition to your design software folder and ArtRage Studio offers you the opportunity to unleash your creativity over an absolutely realistic workstation. Mix colour and texture on a unique digital canvas in a way that no other program could. Connect your Wacom tablet to Mac or Windows and easily fit the 8,3 x 7,0 device in a limited desktop area.

 

The Creative Workshop

The Creative Workshop book

Source: changeorder at Flickr / https://www.flickr.com/photos/29623457@N02/5176568986

 

Challenge your creativity with this amazing product by David Sherwin. This amazing book got its place among other top-rated designer gadgets for its unique concept. Expand your imagination and stimulate your designer skills with a broad set of quirky tasks. The Creative Workshop is a guide to creativity beyond the limitations of time. It promises to teach you the ins and outs of creating a successful design, despite being squeezed within the borders of a short time frame. The graphic design exercises include compelling projects from various designers and implement engaging stories, which aim at pushing readers’ creativity to its limits.

 

The post Top 6 Graphic Design Gadgets You Can Buy Online appeared first on SpyreStudios.


SpyreStudios

FacebookTwitterGoogle+LinkedInEmailPinterest

Blazing an angelic trail

 

With the festive season under way and the world facing dark times, what could be better than wandering around the V&A searching for a host of benevolent guardians to keep us safe. And, much as I admire their work, I’m not talking about the security team!

The concept of what in modern Britain we know as ‘angels’ is almost as ancient as humanity and features in virtually every civilisation. Winged figures appeared in stone carvings from Old Babylonia at least 2000 years BC (check out the Burney Relief at the British Museum) and have been represented in different forms and with different names and roles across many cultures since then, notably in Christianity, Judaism and Islam, although each has different ideas about what these figures represent.

My volunteer colleague Marilyn McIntyre and I have put together an entirely non-academic but (we think!) fascinating tour around some of the angels on display in case you find yourself with an hour or so to spare. Follow the Angel 2B icon below and we hope you enjoy exploring with us, whether physically or via the links embedded in this post.

 

Angel 2BStart at the main entrance and take lift B or Stairs A up to British Galleries level 2. Head to room 56d and in Case 13 you’ll find a lovely German earthenware dish, which helpfully dates itself as 1615.

German slipware dish 1615

 

We liked the intricate but naive decoration and rich colouring as well as the benevolent features of the central angel figure.

 

 

 

 

 

Angel 2BHead through the British Galleries to room 58b, Case 1, where you’ll see a beautiful stained glass panel depicting angels playing a lute and harp.

 

But all is not as it seems. Rather than drawing on divine inspiration, it is thought that the artist had actually referenced performers from one of the touring ‘pageant wagons’, who wore pyjamas covered in feathers as costumes for their popular mystery plays.

 

Angel 2BHead back down to the main entrance and into room 41, South Asia, Case 16 to find a stunning Indian cabinet.

Indian cabinet

This mixes local craftsmanship with European influences and juxtaposes two subjects that we might not normally associate with each other, namely a gun-toting hunting party on one side and The Annunciation on the other.

 

Angel 2B Now take the main corridor to the Cast Courts, room 46A on the left. Towards the back of the room beyond Trajan’s column, you’ll see a cast that could, at first glance, appear to be a contemporary piece with African influences.

Shobdon Church Plaster Cast

 

It is in fact a cast of the tympanum from a long-demolished church at Shobdon in Herefordshire and the original highly stylised artwork dates from c1140.

 

 

 

 

Angel 2BContinue through the Cast Court into the exhibition corridor and turn left. Take Staircase L up to Jewellery. Here we have two exquisite pieces to share with you, although there are more to find if you want to linger among the gold and diamonds.

 

Earrings

 

These earrings are an example of how 19th century makers were inspired by ancient pieces discovered during archeological explorations, reminding us that it’s not just in our time that ‘everything is a remix’.

Seraph

 

 

 

 

The brooch is a modern piece also drawing on ancient teachings for inspiration, producing this beautiful mix of materials and techniques.

 

 

 

 

Angel 2BMake your way into Paintings, room 82 and take a look at the East Wall where St Cecilia and the Angels awaits your gaze.

 

St Cecilia and the angels

Spirit of Gaiety

St Cecilia is the patron saint of music so it is fitting that our next angel has a grand piano for company, next door in room 81. She is the Spirit of Gaiety designed for the dome of the second Gaiety Theatre in London, and erected in 1904.

 

 

 

Angel 2BNow make your way into Silver, room 67 and in case 10 you’ll get two angels for the price of one!

 

Silver Candelabra

 

 

This fine quality silver candelabra is by Joseph Angell who has many other pieces on display nearby.

 

 

 

 

 

Angel 2BAs you head back through Sacred Silver and Stained Glass, room 84, take a moment to seek out this beautifully detailed roundel in case S3.

 

Roundel

 

Angel 2BHead back down staircase L and by now you’ll probably need a cup of tea!

 

 

And if you’re in need of some reading material while you rest, here’s a very small selection of ‘angelic’ material to read…sadly these are some of the many items currently in storage but they have diverse and fascinating stories to tell if you click the links.

Pakistan paintingRelief fragment, China

 

 

 

 

 

 

 

Relief fragment, Khadalik, China ca.6th century          Painting, Pakistan, 2007, Khadim Ali

Egyptian panelAnd all the angels singTapestry Panel, Egypt, 400-599                   

Furnishing fabric ‘And all the angels sing’, Sweden, 1992, Lilo Hörstadius

 

Angel 2BIf you’ve emerged from the café refreshed and ready for more, head to the other cast court, room 46B, where you will find an abundance of angels.

The Marriage of the Virgin

 

 

We have picked out The Marriage of the Virgin as a magnificent example with a heavenly host complete with trumpets and all the accoutrements we’d expect in a classical work.

 

 

 

Angel 2B Go out of the Cast Court, cross the corridor into room 50b and look for case 2.

 

Angel of the annunciation

 

The Angel of the Annunciation is a rare surviving wood sculpture with remarkably colourful decoration given its age.

 

 

 

 

 

Angel 2BLook around you and you’ll see a host of classical angels but to finish, where else could we end but in room 50a with the two remaining Wolsey Angels.

 

Wolsey angels

We really hope you’ve enjoyed this tour as much as we enjoyed putting it together!

Wolsey angel 2

Blog

FacebookTwitterGoogle+LinkedInEmailPinterest

Honda IndyCar: Race On Google StreetView

I just stumbled across this Google StreetView mashup from Honda’s IndyCar business, which is part of their annual “Fastest Seat in Sports” sweepstakes campaign. It’s called The IndyCar Speed Simulator, and apart from the “speed” part, the simulator lets you race just about anywhere in the word through Google StreetView. Just enter a location, and […]


Digital Buzz Blog

FacebookTwitterGoogle+LinkedInEmailPinterest

Drag and Drop File Uploading

The following is a guest post by Osvaldas Valutis. Osvaldas is going to show us not only how drag and drop file uploading works, but goes over what nice UI and UX for it can be, browser support, and how to approach it from a progressive enhancement standpoint.

I work on an RSS reader app called Readerrr. I wanted to enrich the feed import experience by making allowing for drag and drop file upload alongside the traditional file input. Sometimes drag and drop is a more comfortable way to select a file, isn’t it?

View Demo

Markup

This markup doesn’t have anything specifically to do with drag and drop. It’s just a normal, functional <form>, albeit with some extra HTML elements for potential states.

<form class="box" method="post" action="" enctype="multipart/form-data">   <div class="box__input">     <input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />     <label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>     <button class="box__button" type="submit">Upload</button>   </div>   <div class="box__uploading">Uploading&hellip;</div>   <div class="box__success">Done!</div>   <div class="box__error">Error! <span></span>.</div> </form>

We’ll hide those states until we need them:

.box__dragndrop, .box__uploading, .box__success, .box__error {   display: none; }

A little explanation:

  • Regarding states: .box__uploading element will be visible during the Ajax process of file upload (and the others will still be hidden). Then .box__success or .box__error will be shown depending on what happens.
  • input[type="file"] and label are the functional parts of the form. I wrote about styling these together in my post about customizing file inputs. In that post I also described the purpose of [data-multiple-caption] attribute. The input and label also serve as an alternative for selecting files in the standard way (or the only way if drag and drop isn’t supported).
  • .box__dragndrop will be shown if a browser supports drag and drop file upload functionality.

Feature detection

We can’t 100% rely on browsers supporting drag and drop. We should provide a fallback solution. And so: feature detection. Drag & drop file upload relies on a number of different JavaScript API’s, so we’ll need to check on all of them.

First, drag & drop events themselves. Modernizr is a library you can trust all about feature detection. This test is from there:

var div = document.createElement('div'); return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)

Next we need to check the FormData interface, which is for forming a programmatic object of the selected file(s) so they can be sent to the server via Ajax:

return 'FormData' in window;

Last, we need the DataTransfer object. This one is a bit tricky because there is no bullet-proof way to detect the availability of the object before user’s first interaction with the drag & drop interface. Not all browsers expose the object.

Ideally we’d like to avoid UX like…

– “Drag and drop files here!”
[User drags and drops files]
– “Oops just kidding drag and drop isn’t supported.”

The trick here is to check the availability of FileReader API right when the document loads. The idea behind this is that browsers that support FileReader support DataTransfer too:

'FileReader' in window

Combining the code above into self invoking anonymous function…

var isAdvancedUpload = function() {   var div = document.createElement('div');   return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window; }();

… will enable us to make an effective feature support detection:

if (isAdvancedUpload) {   // ... }

With this working feature detection, now we can let the users know they can drag & drop their files into our form (or not). We can style the form by adding a class to it in the case of support:

var $  form = $  ('.box');  if (isAdvancedUpload) {   $  form.addClass('has-advanced-upload'); }
.box.has-advanced-upload {   background-color: white;   outline: 2px dashed black;   outline-offset: -10px; } .box.has-advanced-upload .box__dragndrop {   display: inline; }

No problems at all if drag & drop file upload is not supported. Wsers will be able to upload files via good ol’ input[type="file"]!

Note on browser support: Microsoft Edge has a bug which stops drag and drop from working. It sounds like they are aware of it and hope to fix it.

Drag ‘n’ Drop

Here we go, here’s the good stuff.

This part deals with adding and removing classes to the form on the different states like when the user is dragging a file over the form. Then, catching those files when they are dropped.

if (isAdvancedUpload) {    var droppedFiles = false;    $  form.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {     e.preventDefault();     e.stopPropagation();   })   .on('dragover dragenter', function() {     $  form.addClass('is-dragover');   })   .on('dragleave dragend drop', function() {     $  form.removeClass('is-dragover');   })   .on('drop', function(e) {     droppedFiles = e.originalEvent.dataTransfer.files;   });  }
  • e.preventDefault() and e.stopPropagation() prevent any unwanted behaviors for the assigned events across browsers.
  • e.originalEvent.dataTransfer.files returns the list of files that were dropped. Soon you will see how to use the data for sending these files to the server.

Adding and removing .is-dragover when necessary enables us to visually indicate when it is safe for a user to drop the files:

.box.is-dragover {   background-color: grey; }

Selecting Files In a Traditional Way

Sometimes dragging & dropping files is not very comfortable way for selecting files for upload. Especially when a user is in front of a small screen size computer. Therefore it would be nice to let users choose the method they prefer. The file input and label are here to allow this. Styling them both in the way I’ve described allows us to keep the UI consistant:

Ajax Upload

There is no cross-browser way to upload dragged & dropped files without Ajax. Some browsers (IE and Firefox) do not allow setting the value of a file input, which then could be submitted to server in a usual way.

This won’t work:

$  form.find('input[type="file"]').prop('files', droppedFiles);

Instead, we’ll use Ajax when the form is submitted:

$  form.on('submit', function(e) {   if ($  form.hasClass('is-uploading')) return false;    $  form.addClass('is-uploading').removeClass('is-error');    if (isAdvancedUpload) {     // ajax for modern browsers   } else {     // ajax for legacy browsers   } });

The .is-uploading class does double duty: it prevents the form from being submitted repeatedly (return false) and helps to indicate to a user that the submission is in progress:

.box.is-uploading .box__input {   visibility: none; } .box.is-uploading .box__uploading {   display: block; }

Ajax for modern browsers

If this was a form without a file upload, we wouldn’t need to have two different Ajax techniques. Unfortunately, file uploading via XMLHttpRequest on IE 9 and below is not supported.

To distinguish which Ajax method will work, we can use our existing isAdvancedUpload test, because the browsers which support the stuff I wrote before, also support file uploading via XMLHttpRequest. Here’s code that works on IE 10+:

if (isAdvancedUpload) {   e.preventDefault();    var ajaxData = new FormData($  form.get(0));    if (droppedFiles) {     $  .each( droppedFiles, function(i, file) {       ajaxData.append( $  input.attr('name'), file );     });   }    $  .ajax({     url: $  form.attr('action'),     type: $  form.attr('method'),     data: ajaxData,     dataType: 'json',     cache: false,     contentType: false,     processData: false,     complete: function() {       $  form.removeClass('is-uploading');     },     success: function(data) {       $  form.addClass( data.success == true ? 'is-success' : 'is-error' );       if (!data.success) $  errorMsg.text(data.error);     },     error: function() {       // Log the error, show an alert, whatever works for you     }   }); }
  • FormData($ form.get(0)) collects data from all the form inputs
  • The $ .each() loop runs through the dragged & dropped files. ajaxData.append() adds them to the data stack which will be submitted via Ajax
  • data.success and data.error are a JSON format answer which will be returned from the server. Here’s what that would be like in PHP:
<?php   // ...   die(json_encode([ 'success'=> $  is_success, 'error'=> $  error_msg])); ?>

Ajax for legacy browsers

This is essentially for IE 9-. We do not need to collect the dragged & dropped files because in this case (isAdvancedUpload = false), the browser does not support drag & drop file upload and the form relies only on the input[type="file"].

Strangely enough, targeting the form on a dynamically inserted iframe does the trick:

if (isAdvancedUpload) {   // ... } else {   var iframeName  = 'uploadiframe' + new Date().getTime();     $  iframe   = $  ('<iframe name="' + iframeName + '" style="display: none;"></iframe>');    $  ('body').append($  iframe);   $  form.attr('target', iframeName);    $  iframe.one('load', function() {     var data = JSON.parse($  iframe.contents().find('body' ).text());     $  form       .removeClass('is-uploading')       .addClass(data.success == true ? 'is-success' : 'is-error')       .removeAttr('target');     if (!data.success) $  errorMsg.text(data.error);     $  form.removeAttr('target');     $  iframe.remove();   }); }

Automatic Submission

If you have a simple form with only a drag & drop area or file input, it may be a user convenience to avoid requiring them to press the button. Instead, you can automatically submit the form on file drop/select by triggering the submit event:

// ...  .on('drop', function(e) { // when drag & drop is supported   droppedFiles = e.originalEvent.dataTransfer.files;   $  form.trigger('submit'); });  // ...  $  input.on('change', function(e) { // when drag & drop is NOT supported   $  form.trigger('submit'); });

If drag & drop area is visually well-designed (it’s obvious to the user what to do), you might consider hiding the submit button (less UI can be good). But be careful when hiding a control like that. The button should be visible and functional if for some reason JavaScript is not available (progressive enhancement!). Adding a .no-js class name to <html> and removing it with JavaScript will do the trick:

<html class="no-js">   <head>     <!-- remove this if you use Modernizr -->     <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$  )/,"$  1js$  2")})(document,window,0);</script>   </head> </html>
.box__button {   display: none; } .no-js .box__button {   display: block; }

Displaying the Selected Files

If you’re not going to do auto-submission there should be an indication to the user if they have selected files successfully:

var $  input    = $  form.find('input[type="file"]'),     $  label    = $  form.find('label'),     showFiles = function(files) {       $  label.text(files.length > 1 ? ($  input.attr('data-multiple-caption') || '').replace( '{count}', files.length ) : files[ 0 ].name);     };  // ...  .on('drop', function(e) {   droppedFiles = e.originalEvent.dataTransfer.files; // the files that were dropped   showFiles( droppedFiles ); });  //...  $  input.on('change', function(e) {   showFiles(e.target.files); });

When JavaScript Is Not Available

Progressive enhancement is about the idea that a user should be able to complete the principal tasks on a website no matter what. File uploading is no exception. If for some reason JavaScript is not available, the interface will look like this:

The page will refresh on form submission. Our JavaScript for indicating the result of submission is useless. That means we have to rely on server-side solution. Here’s how it looks and works in the demo page:

<?php    $  upload_success = null;   $  upload_error = '';    if (!empty($  _FILES['files'])) {     /*       the code for file upload;       $  upload_success – becomes "true" or "false" if upload was unsuccessful;       $  upload_error – an error message of if upload was unsuccessful;     */   }  ?>

And some adjustments for the markup:

<form class="box" method="post" action="" enctype="multipart/form-data">    <?php if ($  upload_success === null): ?>    <div class="box__input">     <!-- ... -->   </div>    <?php endif; ?>    <!-- ... -->    <div class="box__success"<?php if( $  upload_success === true ): ?> style="display: block;"<?php endif; ?>>Done!</div>   <div class="box__error"<?php if( $  upload_success === false ): ?> style="display: block;"<?php endif; ?>>Error! <span><?=$  upload_error?></span>.</div>  </form>

That’s it! This already-long article could have been even longer, but I think this will get you going with a responsible drag and drop file upload feature on your own projects.

Check out the demo for more (view source to see the no-jQuery-dependency JavaScript):

View Demo


Drag and Drop File Uploading is a post from CSS-Tricks

CSS-Tricks

FacebookTwitterGoogle+LinkedInEmailPinterest

Meet The Family: A VR Short Film Experience

How about this VR film just for Halloween, created by the award winning production studio, Exzeb, and supported by UNIT9 Presents, have together, launched a new immersive (and slightly weird!) VR film experience that takes you on a journey into the lives and minds of a creepy, cryptic virtual family. “Meet The Family” showcases true […]


Digital Buzz Blog

FacebookTwitterGoogle+LinkedInEmailPinterest

A Facebook Data Powered Robot Bartender

Here’s an interesting experiment. It’s called “The Social Shot” and is a mobile bartending-robot that mixes you drinks based off your Facebook profile data. Once you log-in, you’ll get a personalised drink which visualises the personality traits using psychology’s “Big Five” factor model. The graphic translation of abstract datasets into a colorful, drinkable diagram allows […]


Digital Buzz Blog

FacebookTwitterGoogle+LinkedInEmailPinterest

Get In Touch!

Or save my details for later...