Place 2 you: html

Showing posts with label html. Show all posts

Monday, November 26, 2012

Iframe with 100% Height

Ever wonder how to create an iframe that fills the entire height (and width) of a page?
You probably tried writing something like:

<iframe width=100% height=100%></iframe>

and expected the iframe to fill up whatever it could.
The width=100% does what you expected and fills up the entire width of the page, but the height just stays about 200px.

Here's some easy JavaScript to do exactly this:

Put this in the head of your page:

<script language="JavaScript">
<!--
function resize_iframe()
{

 var height=window.innerWidth;//Firefox
 if (document.body.clientHeight)
 {
  height=document.body.clientHeight;//IE
 }
 //resize the iframe according to the size of the
 //window (all these should be on the same line)
 document.getElementById("glu").style.height=parseInt(height-
 document.getElementById("glu").offsetTop-8)+"px";
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe; 

//Instead of using this you can use: 
// <BODY onresize="resize_iframe()">


//-->
</script>

And inside your page's body create the iframe tag:

<iframe id="glu" width="100%" onload="resize_iframe()">
</iframe>

Tuesday, November 6, 2012

15+ Useful jQuery Datepicker Roundup

jQuery Datepicker Scripts

jdPicker – the ultimate jQuery date picker

jdPicker is a free non obstructive jQuery plugin that enables you to simply add a folding calendar to the HTML input you want your users to select a date in.
In other words it’s a fully customizable jQuery date picker (hence the name) which already embeds a many options and will continue to progress that way.
MORE INFO / DEMO

Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework

Really cool jQuery datepicker script with date range picking features.
MORE INFO / DEMO

Calendar – date picker – date field

A field that opens a calendar where you can pick a date. The date that you picked will be entered in the inputbox. Works with jQuery and php class. It is possible to update the layout and text in the popup.
MORE INFO / DEMO by CodeCanyon (premium plugin)

jQuery Datepicker

A datepicker can easily be added as a popup to a text field or inline in a division or span with appropriate default settings. The popup shows when the field gains focus and is closed by clicking on the Close link or clicking anywhere else on the page. You can also remove the datepicker widget if it is no longer required.
MORE INFO / DEMO

jQuery DatePicker

Simple jQuery UI date picker extension to allow user to choose date ranges. When user chooses a date, a hidden form is submitted. Uses jQuery 1.6 and jQuery UI 1 .8. Tested in and compatible with IE 6 -9, Firefox, Safari, Chrome, and Opera.
MORE INFO / DEMO by CodeCanyon (premium plugin)

Date Picker jQuery Plugin

Date Picker component with a lot of options and easy to fit in your web application. Flat mode – as element in page, Multiple calendars in the component, Allows single, multiple or range selection, Mark dates as special, weekends, special days, Easy to customize the look by changing CSS etc.
MORE INFO / DEMO

Timeline calendar

Timeline is simple JavaScript driven calendar, which is written on top of jQuery JavaScript framework. Timeline is a horizontal representation of days in month. It can be used to display unlimited number of events with their descriptions.
MORE INFO / DEMO by CodeCanyon (premium plugin)

Zebra_Datepicker, a lightweight datepicker jQuery plugin

Zebra_Datepicker is a small, compact and highly configurable datepicker jQuery plugin, meant to enrich forms by adding the datepicker functionality to them. This jQuery plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached datepicker. Users can easily jump between months and years due to the datepicker’s intuitive interface. The selected date will be entered in the input field using the date format of choice, configurable in the datepicker’s options.
MORE INFO / DEMO

Timeframe, (JavaScript Datepicker)

Timeframe is an open source JavaScript date picker.
MORE INFO / DEMO

JSCalendar (JavaScript)

JSCalendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. By using it, you can set up the coolest calendar in the shortest amount of time.
MORE INFO / DEMO by CodeCanyon (premium plugin)

Datepicker Control, (JavaScript Datepicker)

The DatePicker lets users easily select valid dates from a dropdown calendar. No need to worry about date formats, by picking dates it’s always correct.
MORE INFO / DEMO

Multiday Calendar Datepicker JQuery Plugin

Multi-day, multi-month animated datepicker jquery Calendar plugin that weighs in at 14KB with the uncompressed development version.
MORE INFO / DEMO

jQuery.calendar/datepicker

This component is a light-weight jquery Calendar/datepicker. Some features worth mentioning could be: supports internationalization (supports do not necessary means it is implemented), supports changing current date, supports mouse wheel scrolling, supporting (deferred) callback on date selection,supports variable number of years, months and days, supports next/prev arrows
MORE INFO / DEMO

oClock – Analog Time Picker

oClock is a shiny analog time picker that provides user select time easily. It converts your inputs into an analog clock like date pickers does.
MORE INFO / DEMO by CodeCanyon (premium plugin)

Simple JQuery Datepicker

Pretty neat jquery Calendar datepicker which works on one or more text input elements and is easy styled with CSS. It is very easy to use this datepicker – just choose your year and month first and then pick some day
MORE INFO / DEMO

jQuery UI Datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span. You can use keyboard shortcuts to drive the datepicker
MORE INFO / DEMO

jQuery Calendar datepicker plug-in

This jQuery datepicker allows you to easily add “date picker” calendars to you HTML forms. These calendars make it much quicker, easier and less error prone for people to input certain types of dates.
MORE INFO / DEMO

simple jQuery datepicker plugin

Simple plugin that works on one or more text input elements (<input type="text" … />)

Unobtrusive Datepicker Widget Update

A datePicker ( jquery Calendar) that is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml.
MORE INFO / DEMO

Friday, October 19, 2012

php register system

How to make user register system with username checker?

1. Create table with 5 rows.
example: table name = users

CREATE TABLE `users` (
    `id` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
    `password` CHAR( 32 ) NOT NULL ,
    `username` VARCHAR( 50 ) NOT NULL ,
    `email` VARCHAR( 50 ) NOT NULL ,
    `real_name` VARCHAR( 255 ) NOT NULL
) ENGINE = MYISAM

example register.php file:
<?php
    if(isset($_POST['register'])){
        $checkUsername_sql = "
            SELECT
                username
            FROM
                users
            WHERE
                username = '" . $_POST['username'] . "'
        ";
        $checkUsername_res = mysql_query($checkUsername_sql);
        $checkUsername = mysql_fetch_array($checkUsername_res);
        $getUsername = $checkUsername['username'];
        if(!$getUsername){
            mysql_query("
                INSERT INTO
                    users (username, password, email, real_name)
                VALUES
                    ('" . $_POST['username'] . "', '" . md5($_POST['password']) . "', '" . $_POST['email'] . "', '" . $_POST['real_name'] . "')
            ");
            $result = 'Success';
        }else{
            $result = 'This username exist!';
        }
    }
?>

example register template file:

<html lang="en">
<head>
<title>Sample HTML File</title>
</head>
<body bgcolor="white">
<?
if(isset($_POST['register']) AND isset($result)){?>
    echo $result;
}
?>
<div>
<form action="" method="post">
    Username: <input type="text" name="username" /> <br />
    Password: <input type="text" name="password" /> <br />
    E-mail: <input type="text" name="email" /> <br />
    Real Name: <input type="text" name="real_name" /> <br />
    <input type="submit" name="register" value="Register" />
</form>
</div>

</body>
</html>