STYLE SWITCHER

Auto-fill issue in floating input (Material Design)

The new selector is something like this: .form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label By adding the following lines to my site's CSS file it fixes the issue

.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label {
    top: -30px;
    left: 0;
    font-size: 12px;
    line-height: 1.07142857;
}
More

Driver.js – JavaScript Engine to Drive Users Focus Across the Page

Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the page

What are the features?

Driver is compatible with all the major browsers and can be used for any of your overlay needs. Feature introductions, focus shifters, call-to-action are just a few examples.

  • Highlight any (literally any) item on page
  • Block user interactions
  • Create feature introductions
  • Add focus shifters for users
  • Highly customizable – Use it anywhere for overlay
  • User Friendly – Controllable by keys
  • MIT Licensed – Free for personal and commercial use
  • Lightweight – Only ~4kb when gzipped
  • Consistent behavior across all major browsers
Website
More

FilePond – Flexible JavaScript File Upload Plugin

FilePond is a flexible and fun javascript file upload plugin with beautiful animations, fast uploads with client-side image optimization and smooth user experience.

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

Website
More

CSS Hacks Targeting Firefox

Firefox specific styling is now possible with CSS alone. No more JS hacks required.

#Firefox 2

html>/**/body .selector, x:-moz-any-link { color:lime; }

#Firefox 3

html>/**/body .selector, x:-moz-any-link, x:default { color:lime; }

#Any Firefox

@-moz-document url-prefix() { .selector { color:lime; } }
Website Thank you so much Nidhin for giving us such an effective Mozilla specific info.
More

How To Limit Words and Characters in content WordPress

1. Words Length:

Remove  the <?php the_content();?>  insert the below code
<?php $content = get_the_content();
  $trimmed_content = wp_trim_words( $content, 60, '<a href="'. get_permalink() .'">...[ read more ]</a>' ); ?>
  <p><?php echo $trimmed_content; ?></p>
(Change the 60 to your desire words length)

2. Character Length :

Remove  the <?php the_content();?>  insert the below code
<?php echo substr(strip_tags($post->post_content), 0, 46);?>
//(Change the 46 to your desire string length)
More