Request Dev Services » / Notes /

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'">
    <img ng-src="{{myVar}}">

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" />

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;
   top: 0;
   left: 0;

Happy Monday!

About the Author
Cameron Cashwell Web Developer
I build websites, web apps, and software. Wanna work together? Let's chat about your project!

Leave a Reply

Be the First to Comment!

Notify of