It’s important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div “strips” to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item. So if you step back and look at the cornered element, think of there being solid colored divs hiding the true squared off corners of the item you wish to be changed. This helps you understand the inherent limitations of this small plugin. It’s best suited for rounding off block-level elements (divs, paragraphs, etc) and may present more challenges when trying to round off inline elements (spans, anchors, etc).
Recently I added support for native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property on the element. But in IE, we’ll have to wait for version 9 before that is supported. And for all browsers, choosing a pattern other than “round” requires the use of the “div stips” method.
Auto-Ready!
Available Patterns
The default pattern is round
Bevel
$(this).corner(”bevel”);
Notch
$(this).corner(”notch”);
Bite
$(this).corner(”bite”);
Cool
$(this).corner(”cool”);
Sharp
$(this).corner(”sharp”);
Slide
$(this).corner(”slide”);
Jut
$(this).corner(”jut”);
Curl
$(this).corner(”curl”);
Tear
$(this).corner(”tear”);
Fray
$(this).corner(”fray”);
Wicked
$(this).corner(”wicked”);
Sculpt
$(this).corner(”sculpt”);
Long
$(this).corner(”long”);
Dog Ear
$(this).corner(”dog”);
Dog2
$(this).corner(”dog2″);
Dog3
$(this).corner(”dog3″);
Dogfold*
$(this).corner(”dogfold”);
Bevelfold*
$(this).corner(”bevelfold”);
* Fold lines are not supported in Internet Explorer for pages rendered in quirksmode.
* Fold lines are only supported on top corners in Internet Explorer, unless running in IE8 standards-mode.
Choose Your Corner
Use top, bottom, left, right, tl, tr, bl, br to identify which corner to style
Top Bevel
$(this).corner(”bevel top”);
Top-Left Bite
$(this).corner(”bite tl”);
Round Bottom
$(this).corner(”bottom”);
Left Notch
$(this).corner(”notch left”);
Top-Right Dog Ear
$(this).corner(”dog tr”);
Top-Left, Bottom-Right Cool
$(this).corner(”cool tl br”);
Right Bevelfold
$(this).corner(”bevelfold right”);
Specify Size
Include a px value to specify the corner size
Round 30px
$(this).corner(”30px”);
Round 5px
$(this).corner(”5px”);
Cool 20px
$(this).corner(”cool 20px”);
Sharp 20px
$(this).corner(”sharp 20px”);
Bite 30px
$(this).corner(”bite 30px”);
Wicked 20px
$(this).corner(”wicked 20px”);
Dog 20px
$(this).corner(”dog 20px”);
Dog2 30px
$(this).corner(”dog2 30px”);
Dog3 30px
$(this).corner(”dog3 30px”);
Mix and Match
Chain corner calls to achieve combined effects
Round and Bevel
$(this).corner( “bottom”).corner(”top bevel”);
Round and Notch
$(this).corner( “br top”).corner(”notch bl 20px”);
Crazy
$(this).corner(”jut tl 20px”).corner(”dog tr 20px”).corner(”bite bl 15px”).corner(”notch br”);
Adornment
Effects Using Nested Cornered Elements (Thanks to Kevin Scholl for this idea)
Round
$(this).corner(”round 8px”).parent().css(’padding’, ‘4px’).corner(”round 10px”)
Round
$(this).corner(”round 8px”).parent().css(’padding’, ‘8px’).corner(”round 14px”)
Round
$(this).corner(”round 14px”).parent().css(’padding’, ‘15px’).corner(”round 14px”)
Bevel
$(this).corner(”bevel 8px”).parent().css(’padding’, ‘5px’).corner(”bevel 10px”)
Bevel
$(this).corner(”bevel 8px”).parent().css(’padding’, ‘10px’).corner(”bevel 14px”)
Bite
$(this).corner(”bite 10px”).parent().css(’padding’, ‘8px’).corner(”bite 10px”)
Bite
$(this).corner(”bite 20px”).parent().css(’padding’, ‘15px’).corner(”bite 20px”)
Fray
$(this).corner(”fray 10px”).parent().css(’padding’, ‘10px’).corner(”fray 10px”)
Tear
$(this).corner(”tear 20px”).parent().css(’padding’, ‘15px’).corner(”tear 20px”)
Notch
$(this).corner(”notch 4px”).parent().css(’padding’, ‘4px’).corner(”notch 4px”)
Notch
$(this).corner(”notch 10px”).parent().css(’padding’, ‘12px’).corner(”notch 10px”)
Sharp
$(this).corner(”sharp 10px”).parent().css(’padding’, ‘8px’).corner(”sharp 10px”)
Cool
$(this).corner(”cool 20px”).parent().css(’padding’, ‘10px’).corner(”cool 10px”)
Bite/Round
$(this).corner(”round 20px”).parent().css(’padding’, ‘8px’).corner(”bite 10px”)
Round/Bite
$(this).corner(”bite 15px”).parent().css(’padding’, ‘8px’).corner(”round 10px”)
Fray/Tear
$(this).corner(”tear 20px”).parent().css(’padding’, ‘8px’).corner(”fray 10px”)
Jut/Sculpt
$(this).corner(”sculpt 20px”).parent().css(’padding’, ‘8px’).corner(”jut 10px”)
Bevel/Notch
$(this).corner(”notch 20px”).parent().css(’padding’, ‘8px’).corner(”bevel 15px”)
Notch/Bite
$(this).corner(”bite 15px”).parent().css(’padding’, ‘10px’).corner(”notch 10px”)
Bite/Notch
$(this).corner(”notch 15px”).parent().css(’padding’, ‘15px’).corner(”bite 20px”)
Curl/Long
$(this).corner(”long 15px”).parent().css(’padding’, ‘15px’).corner(”curl 15px”)
Pick Your Colors (or keep your borders)
By default, corners are created using transparency and the background color of the parent element. When this is not what you want you can specify the colors that should be used.
corner color: cc:#xxx
strip color: sc:#xxx
keep borders: keep
normal corners
$(this).corner();
colored corners
$(this).corner(”cc:#009″);
colored strips
$(this).corner(”sc:#009″);
“keep” border
$(this).corner(”keep”);
cc:#009 notch
$(this).corner(”cc:#009 notch”);
cc:#009 keep notch
$(this).corner(”keep notch cc:#009″);
cc:#009 keep bite
$(this).corner(”bite keep 15px cc:#009″);
cc:#009 cool keep
$(this).corner(”cc:#009 cool keep 20px”);
Fun Stuff
Interesting Side Effects
Left
$(this).corner(”sharp tr br 20px”);
Right
$(this).corner(”sharp tl bl 20px”);
Posted in Miscellaneous.
Tagged with jquery.
Why do people slog for years educating themselves?
Is it just to get them selves the degrees or is it for the overall grooming of an individual. It could be one of these but the most important factor is to get a lucrative, well-paying job at the end of it.
So lets look at the 10 best paying jobs in India. Something that will make you the expert of all eyes, raise your level in society and get you the hand of the coveted girl.
A career in a top notch company in the Management cadre: If you are lucky, perseverant and hardworking and are able to get into one of the IIMs then the sky will be the limit for you. The moment you graduate from one of these schools then the minimum salary that you can expect is 7 to 8 lakhs. And if you get a job abroad then you will be paid in millions.
Chartered Accountant or a CFA: All the companies around however big or small need someone to write their books of accounts and keep them handy when the tax man comes calling. Hence there are always jobs available for financial wizards. Once you have got the nuances of accounting you could keep on adding to your qualifications and with that you can increase the number of zeros added to your pay packet each year.
Off shore drilling: You will be surprised to learn that the Government of India has a monopoly over the profits generated by ONGC in offshore drilling. And anywhere that there is monopoly there is big bucks involved. Huge salaries and plenty of perks is what you should look forward to if you join this bandwagon.
The IT Sector: The IT Sector has been the sunrise industry since a long time. Salaries paid are touching the sky by the day. Today’s business world cannot do without computers and hence people in this sector have jobs which are recession proof.
Software programmers and Certified Computer professionals: These two professions command high salaries and companies are willing to pay. A software programmer can fetch up to 12 lakhs per annum easily. Computer professionals can join a company or set up a coaching institute and they will see money rolling in faster than they can open an excel sheet.
The medical profession: Doctors are always in demand. Those who have a private practice and have earned a name for themselves can really rule the roost where earnings are concerned. Specialization in a specific field and your earnings further increase. Surgeons command unheard of respect and monetary figures to match them. Even dentists with various branches are not left out in this race to earn.
Lawyers and Advocates: Once you establish yourself then you can command the fee that your heart desires. Their earning potential definitely transports them to the top bracket.
Politicians: Our politicians are the ones who have tremendous power, clout and goddess Lakshmi on their side. They have no educational qualifications or age limits to adhere to.
Sportspersons: Once they have made their mark in their field then the world is at their field. Advertisements are a second option to generate more money.
Actors: An actor has all the adulation and money to fall back on however, short their career span is. They are the most highly paid of individuals.
Posted in General.
Tagged with jobs, paying, payscale.
The Unix epoch (or Unix time or POSIX time or Unix timestamp) is the number of seconds that have elapsed since January 1, 1970 (midnight UTC/GMT), not counting leap seconds (in ISO 8601: 1970-01-01T00:00:00Z). Literally speaking the epoch is Unix time 0 (midnight 1-1-1970), but ‘epoch’ is often used as a synonym for ‘Unix time’. Many Unix systems store epoch dates as a signed 32-bit integer, which might cause problems on January 19, 2038 (known as the Year 2038 problem or Y2038).
| Human readable time |
Seconds |
| 1 minute |
60 seconds |
| 1 hour |
3600 seconds |
| 1 day |
86400 seconds |
| 1 week |
604800 seconds |
| 1 month (30.44 days) |
2629743 seconds |
| 1 year (365.24 days) |
31556926 seconds |
Posted in Miscellaneous.
Tagged with epoch time, Php, unix.
Java Script Code:
jQuery and Ajax script take a look at dataString
<script type=”
text/javascript” src=”
http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js“
>
</script>
<script type=”
text/javascript”
>
$(function() {
$(”
.submit“).
click(function() {
var name = $(
“#name”).val();
var username = $(
“#username”).val();
var password = $(
“#password”).val();
var gender = $(
“#gender”).val();
var dataString =
‘name=’+ name +
‘&username=’ + username +
‘&password=’ + password +
‘&gender=’ + gender;
if(name==” || username==” || password==” || gender==”)
{
$(‘.success’).fadeOut(200).hide();
$(‘.error’).fadeOut(200).show();
}
else
{
$.ajax({
type: “POST“,
url: “join.php“,
data: dataString,
success: function(){
$(‘.success’).fadeIn(200).show();
$(‘.error’).fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
HTML Code
<form method=”
post” name=”
form“
>
<ul><li>
<input id=”
name” name=”name” type=”text” />
</li><li>
<input id=”
username” name=”username” type=”text” />
</li><li>
<input id=”
password” name=”password” type=”password” />
</li><li>
<select id=”
gender” name=”gender”>
<option value=”">Gender</option>
<option value=”1″>Male</option>
<option value=”2″>Female</option>
</select>
</li></ul>
<div >
<input type=”submit” value=”Submit” class=”
submit“/>
<span class=”
error” style=”
display:none“>
Please Enter Valid Data</span>
<span class=”
success” style=”
display:none“>
Registration Successfully</span>
</div>
</form>
join.php
<?php
if($_POST)
{
$name=$_POST['name'];
$username=$_POST['username'];
$password=$_POST['password'];
$gender=$_POST['gender'];
mysql_query(”SQL insert statement…….“);
}else { }
?>
Posted in Ajax.
Tagged with Ajax, function, jquery, submit.
Example 1
Index.html
Contains javascript and HTML code. Take a look at load(”record_cound.php”)
<script type=”
text/javascript” src=”
http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js“
></script>
<script type=”
text/javascript“
>
var auto_refresh =
setInterval(
function
()
{
$(’#load_tweets‘).load(’record_count.php‘).fadeIn(”slow“);
}, 10000); // refresh every 10000 milliseconds
<body>
<div id=”load_tweets“> </div>
</body>
</script>
record_count.php
Just printing “9lessons | programming” every 10 seconds
<?php
echo “9lessons | Programming blog…………..”;
?>
Example 2
index.php
Contains PHP code you have to pass the search box value twitter.com/search?q=”some thing” to $search_word in facebook pass the user id or user session value.
<script type=”
text/javascript” src=”
http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js“
></script>
<script type=”
text/javascript“
>
var auto_refresh =
setInterval(
function
()
{
$(’#load_tweets‘).load(’record_count.php?q=<?php echo $search_word; ?>‘).fadeIn(”slow“);
}, 10000); // refresh every 10000 milliseconds
<body>
<div id=”load_tweets“> </div>
</body>
</script>
record_count.php
Counting tweets/posts from the database.
<?php
$search_word=$_GET['q'];
$sql = mysql_query(”Select id form Messages where message
LIKE ‘%$search_word%’“);
$record_count=mysql_num_rows($sql);
//Display count………
echo $record_count;
?>
Posted in Ajax.
Tagged with Ajax, refresh, reload.
Making .htaccess file
Very simple open any editor like notepad just file save as into .htaccess with in double quotations(”.htacess”). You have to upload this file in to hosting root folder, my experience .htaccess file supports only Unix based servers.
Download Sample .htaccess File
Hide .php extension with URL Rewriting
For example if we want to project like Twitter API URLs (Note: Twitter API Developed in Ruby on Rails)
Add this following code in your .htaccess file
RewriteEngine on
RewriteRule ^(.*)\$ $1.php
We can Rewrite index.php into index.html,index.asp,index.sri also
Below code for index.php to index.html
RewriteEngine on
RewriteRule ^(.*)\.html$ $1.php
If you want .asp extension just replace html to asp
Redirecting www URL to non www URL
If you type www.twitter.com in browser it will be redirected to twitter.com.
Add this Following Code:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.srinivas.com
RewriteRule (.*) http://srinivas.com/$1 [R=301,L]
Rewriting ’site.com/profile.php?username=foxscan’ to ’site.com/foxscan’
My twitter profile http://twitter.com/foxscan its original link passing GET values (http://twitter.com/profile.php?username=foxscan) but this URL is ugly in browser address bar, For user friendly we can change like this.
If you want change like this see the below code
RewriteEngine On
RewriteRule ^([a-zA-Z0-9_-]+)$ profile.php?username=$1
RewriteRule ^([a-zA-Z0-9_-]+)/$ profile.php?username=$1
Posted in Apache Web Server, Open Source Software.
Tagged with .htaccess.
Javascript code
$(’#signup’).click(function(){} - signup is the ID of the radio. Using $(”#login_block”).hide() hide the login block and $(”#signup_block”).show() shows signup block.
<script type=”
text/javascript” src=”
http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js“
></script>
<script type=”
text/javascript“
>
$(
document).
ready(
function()
{
$(’#signup‘).click(function()
{
$(‘#password’).val(”);
$(‘#login_block’).hide();
$(‘#signup_block’).show();
});
$(‘#login’).click(function()
{
$(‘#newpassword’).val(”);
$(‘#signup_block’).hide();
$(‘#login_block’).show();
});
});
</script>
HTML Code
Contains simple html code. signup_block style display none.
<form method=”post” action=”loginup.php“>
<div>
<label>Email</label> <br/>
<input type=”text” name=”email“/><br />
<input type=”radio” name=”choose” id=”login” checked=”checked“/> I have an account <br />
<input type=”radio” name=”choose” id=”signup“/> I am new!<br />
</div>
<div id=”login_block“>
<label>Password</label><br />
<input type=”password” name=”password” id=”password“/><br/>
<input type=”submit” value=” Login “/>
</div>
<div id=”signup_block” style=”display:none“>
<label>Choose password</label><br/>
<input type=”password” name=”newpassword” id=”newpassword” /><br/>
<input type=”submit” value=” Signup “/>
</div>
</form>
loginup.php
<?php
if(
$_POST)
{
$email =
$_POST['
email'];
$password =
$_POST['
password'];
$newpassword =
$_POST['
newpassword'];
if($_POST['password'] && $_POST['email'])
{
$sql=mysql_query(“SQl select statement”);
echo “Login success”;
}
else if($_POST['newpassword'] && $_POST['email'])
{
$sql=mysql_query(“SQl Insert values statement”);
echo “Registration Success”;
}
}
?>
Posted in Ajax.
Tagged with Ajax, function, jquery.
Database Design
user table contains user_id, username, password and profile.
CREATE TABLE `users` (
`user_id` INT NOT NULL primary key AUTO_INCREMENT ,
`username` VARCHAR(45) NULL unique,
`password` VARCHAR(45) NULL ,
`profile` TEXT,
);
updateprofile.php
Contains javascript, HTML and PHP code. Take a look at bold blue color class names.
<script type=”
text/javascript” src=”
http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js“
></script>
<script type=”
text/javascript“
>
$(
document).
ready(
function()
{
//Edit link action
$(‘.edit_link’).click(function()
{
$(‘.text_wrapper’).hide();
var data=$(‘.text_wrapper’).html();
$(‘.edit’).show();
$(‘.editbox’).html(data);
$(‘.editbox’).focus();
});
//Mouseup textarea false
$(“.editbox”).mouseup(function()
{
return false
});
//Textarea content editing
$(“.editbox”).change(function()
{
$(‘.edit’).hide();
var boxval = $(“.editbox”).val();
var dataString = ‘data=’+ boxval;
$.ajax({
type: “POST“,
url: “update_profile_ajax.php“,
data: dataString,
cache: false,
success: function(html)
{
$(‘.text_wrapper’).html(boxval);
$(‘.text_wrapper’).show();
}
});
});
//Textarea without editing.
$(document).mouseup(function()
{
$(‘.edit’).hide();
$(‘.text_wrapper’).show();
});
});
</script>
//body part
<div class=”mainbox”>
<a href=”#” class=”edit_link” title=”Edit”>Edit</a>
// Displaying profile data from the users table
<?php
include(“db.php”);
$user_id=$session_id;
$sql=mysql_query(“select profile from users where user_id=’$user_id’”);
$row=mysql_fetch_array($sql);
$profile=$row['profile'];
?>
<div class=”text_wrapper“><?php echo $profile; ?></div>
<div class=”edit” style=”display:none“>
<textarea class=”editbox” cols=”23” rows=”3” ></textarea>
</div>
</div>
update_profile_ajax.php
Contains PHP code updating profile field at users table.
<?php
include(“db.php”);
if($_POST['data'])
{
$data=$_POST['data'];
$data = mysql_escape_String($data);
$user_id=$session_id;
$sql = “update users set profile=’$data’ where user_id=’$user_id’”;
mysql_query( $sql);
}
?>
db.php
Database configuration file.
<?php
$mysql_hostname = “localhost”;
$mysql_user = “username”;
$mysql_password = “password”;
$mysql_database = “database”;
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
or die(“Opps some thing went wrong”);
mysql_select_db($mysql_database, $bd) or die(“Opps some thing went wrong”);
?>
CSS code
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.mainbox
{
width:250px;
margin:50px;
}
.text_wrapper
{
border:solid 1px #0099CC;
padding:5px;
width:187px;
}
.edit_link
{
float:right
}
.editbox
{
overflow: hidden;
height: 61px;
border:solid 1px #0099CC;
width:190px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding:5px
}
Posted in Ajax.
Tagged with Ajax, edit, function.
Javascript and HTML Code
I had implemented this on labs.9lessons home page.
<script type=”
text/javascript” src=”
http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js“
></script>
<script type=”
text/javascript“
>
$(
document).
ready(
function()
{
var i =
0;
$(
‘#imagesdiv img’).
clone().
appendTo($(
‘#imagesdiv’));
$(
‘#imagesdiv img’).
each(
function()
{
var me =
this;
$(
this).
hide()
var j = i;
setTimeout(
function()
{
$(
me).
fadeIn(
1000);
}, i)
i +=
100
});
});
</script>
//HTML Code
<div id=”imagesdiv“>
<img src=’1.jpg‘ />
<img src=’2.jpg‘ />
<img src=’3.jpg‘ />
<img src=’4.jpg‘ />
<div/>
Posted in Ajax.
Tagged with Ajax, function, Javascript.
Comment system with jQuery, Ajax and PHP
javascript code.
<script type=”text/javascript” >
$(function() {
$(“.submit”).click(function()
{
var name = $(“#name”).val();
var email = $(“#email”).val();
var comment = $(“#comment”).val();
var dataString = ‘name=’+ name + ‘&email=’ + email + ‘&comment=’ + comment;
if(name==” || email==” || comment==”)
{
alert(’Please Give Valid Details‘);
}
{
$(“#flash”).show();
$(“#flash”).fadeIn(400).html(’<img src=”ajax-loader.gif” />Loading Comment…‘);
$.ajax({
type: “POST“,
url: “commentajax.php“,
data: dataString,
cache: false,
success: function(html){
$(“ol#update”).append(html);
$(“ol#update li:last”).fadeIn(“slow”);
$(“#flash”).hide();
}
});
}return false;
}); });
</script>
comment.php
Contains HTML code here class timeline li{display:none}
commentajax.php
Contains PHP and HTML code.
if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$comment=$_POST['comment'];
$lowercase = strtolower($email);
$image = md5( $lowercase );
mysql_query(”SQL Comment table insert statement“);
}
else { }
<img src=”http://www.gravatar.com/avatar.php?gravatar_id=
<?php echo $image; ?>“/>
<?php echo $name;?><br />
<?php echo $comment; ?>
Posted in Ajax. Tagged with Ajax, comment function, jquery.
3 comments