7 useful Front-end code snippets (Dev Tips)


Here’s 7 useful web code snippets for your Monday. These are some common front-end, client-side problems and some quick simple solutions for them using either HTML5, CSS, and / or jQuery/JavaScript.

1.) CSS, Make mobile drop-down menu nav scrollable:

#MobileMenuDivWrapper { 
  height: 200px;
  max-height: 200px;
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling:touch; // mobile safari
}

2.) JS, adding image into web page with Angular.js

<div ng-init="myVar='pic_angular.jpg'">
    <h1>Angular</h1>
    <img ng-src="{{myVar}}">
</div>

3.) CSS, Background position, margin-top:

#thediv {
    background-image: url("imagestatus.gif");
    background-position: right 50px;
    background-repeat: no-repeat;
}

4.) HTML5 Video – Completely Hide Controls:

<video width="300" height="200" autoplay="autoplay">
  <source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>

5.) Find and replace specific text characters across a document:

$("body").children().each(function () {
    $(this).html( $(this).html().replace(/@/g,"$") );
});

6.) CSS3, Create white rgba background:

background:rgba(255,255,255, 0.9);

7.) CSS, Full screen width div area:

#BigityBoom {
   width: 100%;
   margin: 0;
   padding: 0;
   background-color:#000
   top: 0;
   left: 0;
}

Happy Monday!


Published by

admin

I’m Cameron Cashwell, I’ve been a Web Developer for 6+ years. I’m always on the look out for exciting new projects and ideas. Wanna work together? http://www.cdev.co/#request

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz