How to Create Bootstrap Accordion Menu - Example

Hi, in this tutorial we'll see how to create accordion menu in bootstrap. Accordion Menu is one of the important components of Twitter Bootstrap 3 Framework, and is a stacked list of items such as windows, buttons, labels, thumbnails etc which can be expanded and collapsed though only one accordion window will be visible at a time.

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

Create Stitched Leather Style CSS Buttons

Exploring new styles of CSS Buttons is always a fun. One of my earlier tutorial discussed a method of Creating Round Social Media Icons using CSS without any images. This time I have come up with leather style buttons with stitches running around the edges of the button.

A Beginners Guide to CSS box-sizing property

The CSS box-sizing property lets you take control over the HTML elements width. Generally padding and border width of an HTML element adds themselves up to the elements width and makes it to stretch over. But if you don't want the HTML element to be stretched irrespective of padding and border width, then use the CSS box-sizing: border-box; property.

Create CSS Buttons - A Step-by-Step Tutorial

A Step-by-Step Tutorial for beginners to create CSS Buttons.

Using CSS Buttons instead of images is always advantageous. You can come up with amazing button styles with few lines of CSS code. The possibility of the button styles is almost unlimited. If you are a CSS expert then you already know how to create buttons with CSS. However if you are a newbie, having some pretty good ideas for buttons but don't know where to start with, this is the tutorial for you.