CSS Opacity setting for all browsers

Below is the CSS Opacity settings for all browsers. As opacity is not supported in all browsers using following hacks and filters to support it in most common browsers.

For IE 5, 6, 7 , 8 & 9

filter: alpha(opacity=50);

For Mozilla Firefox Older than 9

-moz-opacity:0.5;

Safari 1.x (pre WebKit!)

-khtml-opacity: 0.5;

All Modern Browsers like;

  • Firefox 0.9+
  • Safari 2+
  • Chrome all
  • Opera 9+
  • IE 9+
opacity: 0.5;

Any Issues? questions? Don’t forget to ask in comments below

Sharing is caring
  •  
  •  
  •  
  •  
  •  

How to create a sidebar slide panel for bootstrap

This is the simplest way to create sidebar slide panel for bootstrap with HTML/CSS and a few lines of JQuery.
Follow the steps to a create slide panel in 5 minutes.

Add following Libraries and file paths to head section of the page:

bootstrap.min.css
jquery.min.js
bootstrap.min.js

Lets create HTML for slide panel and content section of the page.

Slide Panel

<div id="slide-panel">
<a href="#" class="btn btn-danger" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
Panel Content
</div>

Content Section

For content section i am using standard dummy text (filler text) i.e. Lorem lipsum

<article id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</article>

CSS for styling the slide panel and content area

body
{
    overflow: hidden;
}
#slide-panel {
    width:300px;
    height:800px;
    padding:10px;
    background:#eee;
    margin-left:-300px;
    float: left;
    max-width: 300px;
}
#opener {
    float:right;
    margin:-10px -50px 0px 0px;
    border-radius:0;
}
#content
{
    height: 500px;
    width: 100%;
    float: left;
padding-left: 5%;
}

JQuery

Add JQuery for hide, show and animating the slide panel.

$(document).ready(function(){
    $('#opener').on('click', function() {	
    var panel = $('#slide-panel');
    if (panel.hasClass("visible")) {
       panel.removeClass('visible').animate({'margin-left':'-300px'});
       $('#content').css({'margin-right':'0px'});
    } else {panel.addClass('visible').animate({'margin-left':'0px'});
       $('#content').css({'margin-right':'-300px'});
    }	
      return false;	
    });
});

GITHUB Repository

Complete source of the plugin available for downloading on github. Feel free to download and contribute on github repository.

Sharing is caring
  •  
  •  
  •  
  •  
  •  

Hello World! History in Programming

Why Hello World?

A new program is like a newly born baby. So most of the programmers choose Hello World! to print the text on the screen, console etc. to test every thing is working fine and configured properly.

Who introduced Hello World?

hello world imageWhile checking best online resource for history and information i.e. wikipedia. We can flash back to history to know how these words hello world were introduced into programming world.

Kernighan’s in 1972 tutorial name Introduction to the Language was the first known occurrence of these words in computer literature. Following is the program written in Io:

main( ) {
  extrn a, b, c;
  putchar(a); putchar(b); putchar(c); putchar('!*n');
}
a 'hell';
b 'o, w';
c 'orld';

How to Print Hello World! in different programming languages

In Io:

"Hello World!" println

In Java:

public class HelloWorld {
    public static void main(String [] args) {
        System.out.println("Hello World!");
    }
}

In JavaScript:

alert("Hello World!");

In PHP:

<?php echo "Hello World!"; ?>

In Ruby:

puts "Hello World!"

In C:

printf ("Hello");

In C++

cout<<"Hello"; 
Sharing is caring
  •  
  •  
  •  
  •  
  •