How To Make Videos Responsive with CSS

A responsive website means It will respond to your browser sizes or I can browser stretches. The basic idea of it is to give optimal viewing experience to visitors, nowadays you will rarely see a unresponsive website. If you remember a Jquery snippet I posted about detecting browser real time size It is also responsive. So basically in order to make websites responsive on load you need a meta tag that helps you to stretch/resize the elements of your website but It's not required for this tutorial.

So for this tutorial, only videos with iframe, embed or objects works. You can get the iframe code of any videos from popular websites like YouTube, DailyMotion, Vimeo, MetaCafe etc.

Let's make our style, here's the css we need(if you are a beginner make sure you put the codes within <style>) :

 .Responsive-Video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow:
    hidden;
}
   
.Responsive-Video iframe, .Responsive-Video object, .Responsive-Video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

So after adding the css to your web page, add your video embed code within the div class given below(I know this is NOOB! )  :

<div class="Responsive-Video">

    </div>

Example :

<div class="Responsive-Video">
    <iframe width="760" height="720" src="http://www.youtube.com/embed/Mu4ARzSZOmg" frameborder="0" allowfullscreen></iframe>
    </div>

Screenshot : 

If you're using Blogger or Wordpress you can just add the css code within the body and whenever you post a video in your post you can add the embed code within the div class.

Read more

How to Validate Email in JavaScript with Regular Expression

We have seen many Regular Expression tutorials in VB.NET and C-sharp, this is our first JavaScript tutorial on Regular Expressions. So today we’ll see how to validate an email address that's being entered to a textbox. We have a textbox and a button, when you enter something into the textbox and click on the “validate”  button it’ll tell if It’s an email address or not(being noob GRRR!).

Add our JavaScript first(make sure you add it to the head) :
<script type="text/javascript"> function inputemailcheck(emailaddress){ //Down below we have the Regular Expressions into a Variable var regex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; //Now this where the email is being checked with an if condition if(regex.test(emailaddress)){ return "That is indeed a Email Address"; }else{ return "It is not a Email Address"; } } </script>
Next add the input box and the validate button :
<input type="text" id="emailaddress"> <button onclick="alert(inputemailcheck(document.getElementById('emailaddress').value))">Validate</button>

That’s all. You can use this for some kind of subscription button or register/login forms. I hope this little snippet is helpful for you.

Read more

How To Target Mozilla FireFox With CSS

Every web designer/developer knows about CSS rules even beginners know it so in this we are using as rule that targets only Mozilla FireFox. What I mean with targeting is, It's like the the style under this rule will only work on Mozilla FireFox. This rule is really useful because we can define what to show and what not to show. You can also target for Google Chrome and Safari I will write about it another time.

Code 

<style type="text/css"> @-moz-document url-prefix() { H1 { color:black; } H2 { color:Blue; font-family:"Verdana"; font-size:32px; } } </style>

As you see in the code the H1 and H2 styles have been modified and that targets Mozilla Firefox(@-moz-document url-prefix()). So likewise you can add any style that you want to show up only with Mozilla Firefox.

Read more

How To Make A Port Scanner in PHP

Port scanners are created to find opened/closed ports in a host, you can get the same results in this Port Scanner coded in php by the way I wouldn't take all the credits to this because i am a php beginner so I had to make this from scratch also there are many more open source advanced Port Scanners. You can also easily add Ports if you need to.

Read more

How To Make A Awesome Calender Using HTML,CSS,JQUERY

hello guys , i am going to write here on how to make a calender i am gonna use html and css  first of all you need the codes

you need jquery 1.6.2



jquery ui mouse

Read more