Azharkamar.com

Tutorials

8 Mar 11

Left Click ‘Save Target As’ PHP Script

Here’s an easy peezy PHP script to mimic the Right click > Save Target As… (or Save Link As, Save Image As, etc.) action in browsers. This script allows you to simply left click and the file dialog box will pop out. Read more

10 Feb 11

Cool & Creative Facebook Profiles

Alright I bumped into Mashable’s post http://mashable.com/2010/12/14/new-facebook-profile-hacks and got totally eager to create one for my own Facebook profile. Previous Facebook layouts didn’t allow for this, only the new one that was launched in late 2010 did because of the new featured photo thumbnails at the top. Read more

31 Jan 11

Write Arabic Text in Photoshop

Ok, I was designing an e-newsletter and all was going well until I had to do an Arabic version of that newsletter. I did it in Thai and Russian without any problems but I couldn’t seem to write Arabic text in my Photoshop CS3 Extended. Copying the text from my email either returned stupid square shapes with Xs inside, or what seemed like Arabic text on steroids. Read more

25 Jan 11

How to Remove ‘Powered by Drupal’ in Drupal 7 – The Easiest Way

I searched online for ‘remove powered by drupal‘ and came across so many different ways to remove the text. Some aren’t well explained, some are quite tedious and some don’t even work at all. Read more

4 Jan 11

Using JavaScript to Write into a DIV or SPAN

Here’s a very simple way to insert words or letters or numbers into a DIV or SPAN using JavaScript.

For me, I usually only use this for debugging my JavaScript codes. Here’s one example on how to count the number of clicks on a button and display the increasing/decreasing click hits in a DIV simultaneously.
Read more

3 Nov 10

Solving jQuery Conflicts with other JavaScript Libraries

I was developing a page that for some reason had to use 3 different JavaScript libraries (jQuery, MooTools and Highslide) and got into so much problems. Largely because the different libraries were conflicting with each other. Read more

10 Oct 10

Get Selected Value from Drop Down List – Fabrik, Joomla

I usually create my own PHP scripts for my Fabrik forms, because a lot of the websites I develop require massive customization for most of the form actions.

Things were ok, until I came across this damn drop down list. Read more

12 Apr 10

How to Display a List of Random Post Titles in WordPress

A list of random post titles! Yeah, sometimes displaying random posts in your WordPress blog might be good. There’s a few tutorials lurking out there in the web but some aren’t really quite comprehensive and straight forward. So, I’ll do the best I can here. Read more

30 Mar 10

How to Make Simple 3D Buttons Using Only CSS and HTML

Here’s a very simple tutorial on how to make a button using just CSS and HTML.

Well what exactly is a button (in terms of computing)? A button is defined as an element in the graphical user interface (GUI) which provides the user a way to trigger an event like querying in a search engine or submitting a contact form. A typical button is a rectangle or rounded rectangle with text in it usually describing the use or function of the button. And that’s exactly what I’m going to create using CSS and HTML.

Nowadays most buttons you see online are some sort 3D as this enhances the user interface design and also captures the user’s attention, hence also making a 3D button more user-friendly than a flat 2D button.

Note: If you’re not using Mozilla Firefox, Chrome, Safari or Konqueror, you won’t see any text shadows or rounded corners.

Now, look at these 2 buttons:

Button Good and Button Bad

Now which one looks more appealing to you? The first one right. Why? Because it has the 3D effect! And rounded corners too. And shadows. No graphics involved, just plain CSS. The CSS properties that are responsible for the sweet 3D look are text-shadow, -moz-border-radius, -webkit-border and border.

Here’s how you create that button (without using a CSS stylesheet):

<span style = "padding: 5px 20px; font-weight: bold; background: #0079ce;
color: #fff; -moz-border-radius: 20px; -webkit-border: 20px;
text-shadow: #00487a 0px -1px 0px; border-bottom: 1px solid #333;
border-right: 1px solid #333; letter-spacing: 1px">Button Good</span>

So if you integrate it with a link, it would be like:

<a href = "/index.php"><span style = "padding: 5px 20px; font-weight: bold;
background: #0079ce; color:#fff; -moz-border-radius: 20px; -webkit-border:
20px; text-shadow: #00487a 0px -1px 0px; border-bottom: 1px solid #333;
border-right: 1px solid #333; letter-spacing: 1px">Button Good</span></a>

And here’s how you should do it (using a CSS stylesheet):

.myBtn a {
     padding: 5px 20px;
     font-weight: bold;
     background: #0079ce;
     color: #fff;
     -moz-border-radius: 20px; /* for rounded corners in Firefox */
     -webkit-border: 20px; /* for rounded corners in Safari */
     text-shadow: #00487a 0px -1px 0px; /* for the 'engraved text' effect */
     border-bottom: 1px solid #333;
     border-right:1px solid #333;
     letter-spacing: 1px
}

[adsense]And that’s it! Simple.

However, only Firefox, Chrome, Safari, Opera, Konqueror and iCab browsers support the text-shadow CSS property.

And for the rounded corners, current compatible browsers are Firefox, Chrome and Safari.

Both CSS properties aren’t supported by Internet Explorer…

Why, IE why? Aren’t you guys doing something to keep up with the world? Microsoft, what are you guys doing?! Haha! Anyway… it doesn’t really matter. Mozilla Firefox will conquer the Internet! ;-)

22 Mar 10

Auto Update the Copyright Year in a Website using PHP or JavaScript

If you have been creating websites for years (or more than a year) I am pretty sure you have encountered the ‘copyright year’ issue. Read more