How to Add Stunning 3D CSS Photo Frame Effect to Images

Hi, we’ll see how to add a stunning 3D CSS Photo Frame Border Effect to Images on mouse hover in this tutorial. Adding some fancy border effects to images will spice up the look of the images used in website. Doing so doesn't need any image processing software’s like Photoshop. With CSS3, now we can add such image border effects easily with few lines of code.

How to get the Status Code from HTTP Response Headers in PHP

We'll see how to get the Status Code of any HTTP RESPONSE Headers sent by the server upon a HTTP REQUEST in PHP. For example, opening a webpage in a browser will send a HTTP request to the server and which in turn will be returned by a response. At times, we want to get the status code alone from the headers sent by the server for processing.

Recommended Read: How to Create Login Form in CodeIgniter, MySQL and Twitter Bootstrap

Recommended Read: How to add jQuery UI Slider Input Control to HTML Form

Get the HTTP Response Status Code

First use the PHP get_headers() function to fetch the array of all the headers sent by the server and then strip the status code from it.

<?php
//function to get the http reponse code
function get_response_code($url)
{
     $responseHeader = get_headers($url);
     return substr($responseHeader[0], 9, 3);
}

$statusCode = get_response_code('http://example.com');
echo $statusCode;
?>

Recommended Read: 10 Amazing CSS Drop Cap Effects you can Copy Paste

Recommended Read: Create a stylish Horizontal Menu Bar with HTML and CSS

I hope you find this php tutorial useful.

Last Modified: Apr-15-2015

How to add jQuery UI Slider Input Control to HTML Form

The jQuery UI Slider Input Control can be used in places where the user input should be bound to a certain range of numeric values. We can use textbox and slider control together to force the user to pick up the input value by sliding the slider button. This way we can have more control over the form input values.

Required Libraries for Slider Control

For this tutorial we need both jQuery and jQuery UI library. So if you don't have the latest versions, download them first.

Recommended Read: Learn jQuery addclass removeclass methods onclick

Recommended Read: Use PHP json_decode function to parse json object and insert into MySQL Database

Adding Slider Control to HTML Form

Now create a HTML file and include all the required CSS and JS files in the HTML file.

<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

Alternatively, you can load these files from google api library.

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

Next add a textbox and a div block which we will turn up into the slider control with the help of jQuery UI plugin.

<form id="form1" method="post" action="#">
     <label for="price">price</label>
     <input id="price" type="text" disabled="disabled" />
     <div id="slider-price"></div>
     <input type="submit" id="submit" value="Submit" />
</form>

Now add this jQuery script to the HTML file.

<script type="text/javascript">
$(function() {
     $( "#slider-price" ).slider({
          range: "min",
          min: 1,
          max: 20,
          value: 5,
          slide: function( event, ui ) {
               $( "#price" ).val( ui.value );
          }
     });
     $("#price").val($("#slider-price").slider("value"));
});
</script>

Done. Having added the slider control and bounded it to the textbox, now when the user slides the slider control, its corresponding value will be picked up by the textbox and displayed.

Recommended Read: 10 Amazing CSS Drop Caps Effects you can Copy Paste

Recommended Read: How to Create Login Form in CodeIgniter, MySQL and Twitter Bootstrap

Here is the complete HTML code.

<!DOCTYPE html>
<html>
<head>
<title>Slider Input Demo</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<style type="text/css">
#slider-price {
     display: inline-block;
     margin: 0 10px;
     width: 150px;
}

#price {
     width: 25px;
}
</style>

</head>
<body>

<form id="form1" method="post" action="#">
     <label for="price">price</label>
     <input id="price" type="text" disabled="disabled" />
     <div id="slider-price"></div>
     <input type="submit" id="submit" value="Submit" />
</form>
     
<script type="text/javascript">
$(function() {
     $( "#slider-price" ).slider({
          range: "min",
          min: 1,
          max: 20,
          value: 5,
          slide: function( event, ui ) {
               $( "#price" ).val( ui.value );
          }
     });
     $("#price").val($("#slider-price").slider("value"));
});
</script>
</body>
</html>

Hope you have enjoyed this tutorial on adding jQuery UI slider to the HTML page.

Last-Modified: May-25-2015