FaraJoomla Web Design and Development » Blog

Cross-browser transparency

Faramarz Kolivand — Mon, 14 Jun 2010 17:42:02 +0000

How to do it? You can make any element transparent by using “opacity” property and a value the only thing is, this declration is treated totally differently in all browsers. With four separate declrations, you can cover all browsers and fortunately they don’t interfere with each other. In this example I’ve used 70% transparency:

.transparent_element {
	-moz-opacity: 0.7;
	opacity: 0.7;
	-khtml-opacity: 0.7;
	filter:alpha(opacity=70);
}

Here is what each of these properties is for:

-moz-opacity: 0.7;
This one is used to support old versions of the Mozilla browsers like Netscape.

opacity: 0.7;
This is the current standard in CSS. It works for all browsers supportting current standards such as most versions of Firefox, Safari, and Opera.

-khtml-opacity: 0.7;
This is for very old versions of Safari (1.x).

filter:alpha(opacity=70);
And you need this one for our dear stupid IE.

Accordion with jQuery and CSS

Faramarz Kolivand — Mon, 24 May 2010 15:30:47 +0000

The jQuery accordion plugin works with nested lists or just nested divs. There are also some options available to specify the structure, the active element (to display at first) and to customize animation.

This plugin will come in handy when you are dealing with orgonizing a good chuck of content.

HTML Markup

In this markup I’m using nested divs, an

is the heading of accordion items and a nested

to show the content of each item.

Web Design

  
    Custom Website Designs
    If your looking for a fresh eye-catching custom website design then we can develop a professional high quality website for you which is designed to your exact specifications.
    Great websites do not need to cost an arm and a leg. Our process is that of getting to know your business and proposing the best fit for you in terms of features and budget, while never compromising on quality. We simply enjoy creating beautiful websites. Find out more about our services.
    Do you require a world class corporate site, a friendly welcoming community site, or even something just plain funky? Whatever your design requirements, our design and development team caters for all audiences and markets. We have a wide range of designers at our disposal all from a variety of different design backgrounds, offering you a unique and beautifully designed website.

CSS

h3.click_accordion {
	padding: 0;	
	margin: 0 0 5px 0;
	background: url(../images/h2-bg.png) no-repeat;
	height: 46px;	line-height: 46px;
	width: 500px;
	font-size: 2em;
	font-weight: bold;
	float: left;
}

h3.click_accordion a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0 0 0 35px;
}

h3.click_accordion a:hover {
	background: url(../images/h2-bg.png) no-repeat;
	background-position: 0 -46px;
}

h3.active {
	background-position: 0 -92px;
}

.container_accordion {
	margin: 0 0 5px; 
	padding: 0;
	overflow: hidden;
	font-size: 1.2em;
	width: 498px;
	clear: both;
	background: #f0f0f0;
	border: 1px solid #d6d6d6;
	-webkit-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-border-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.container_accordion .content_accordion {
	padding: 20px;
}

Setting up jQuery

You can download jQuery from the jQuery site, or you can use the hosted one on Google.

Directly after you called your jQuery, start a new

View Demo

Dropdown with jQuery and CSS

Faramarz Kolivand — Sun, 16 May 2010 21:42:37 +0000

Here is a solution for a very simple drop down menu system. All you need is jQuery and these below few lines of JavaScript and CSS.

The features of this menu system are:

Unordered list as menu structure
Absence of mouse events within html
Timeout effect
Cross-browser compatible (even IE 6)
Multi-level and retains “trail”
Easy to adopt styling
Minimal JavaScript

How to do it

First thing you do is to include jQuery library (before )

I am using the jQuery library hosted on google codes, but you can download your own copy of jQuery and link it to your page.

Next step is to include the simple drop-down menu plugin. You can either include the code before , or save the code as an external JavaScript fine and include a link to it in your web page.

Note: if you are using as an external file, then you don’t need to enclose the code in .

Here is the HTML markup:

	   	   
        
        	Business News
        		
        			 Companies
        			 
        				Economy
        				
        					International
        					The Buzz
                            International
        					The Buzz
                            International
        					The Buzz
        				
        			 
        			 Street Sweep
        			 Corrections
                     Street Sweep
        			 Corrections
					 
        				Economy
        				
        					International
        					The Buzz
                            International
        					The Buzz
                            International
        					The Buzz
        				
        			 
        		
        	
        	Markets
        		
        			Pre-Market Training
        			After Hours Training
        			US Stocks
        			 
        				Currencies
        				
        					Euro
        					US Dollar
        					British Pound
        				
        			 
        			 Pre-Market Training
        			After Hours Training
        			US Stocks
        			 
        				Currencies
        				
        					Euro
        					US Dollar
        					British Pound
        				
        			 
        		
        	
        	Personal Finance
        		
        			 
        				Money Magazine
        			 
        				Real Estate
        				
        					Jobs
        					Taxes
        					Autos
        					Jobs
        					Taxes
        					Autos
        				
        			 
        			 
        				Loan Center
        			 
        				Best Places to Live
        				
        					Paris
        					Sweeden
        					Ireland
        				
        			 
					 
        				Money Magazine
        			 
        				Real Estate
        				
        					Jobs
        					Taxes
        					Autos
        					Jobs
        					Taxes
        					Autos
        				
        			 
        			 
        				Loan Center
        			 
        				Best Places to Live
        				
        					Paris
        					Sweeden
        					Ireland
        				
        			 
        			 
        		
        	
        	Technology
        		
        			 Apple
        			 Google
						 
						 	Gchat
							Ad Server
							Analytics
						 
					 
        			 Techmate
        			 TechTalk
        		
        	
        	Preferences
        		
        			 Login
        			 Register
        			 Account

And here is the CSS:

* 									{ margin: 0; padding: 0; }
#page-wrap							{ width: 100%; margin: 25px auto; } 
a									{ text-decoration: none; }
ul									{ list-style: none; }
p                                   { margin: 15px 0; }
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover		            { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
	 								  color: #222; }
ul.dropdown li:last-child a         { border-right: none; }
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F4B737; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }
ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; 
									  border-bottom: 1px solid #ccc; float: none; }
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

That’s it.

View Demo

Conditional Stylesheets for IE

Faramarz Kolivand — Fri, 14 May 2010 02:32:52 +0000

We all have dealt with IE issues and bugs but you don’t have to keep banging your head against the wall when you can fight with IE problems with conditional stylesheet. This way you can code hack-free and you don’t have to worry about how dangerous hacks will behave in future, you also get to keep your main stylesheet clean and valid.

You can also use conditional tags for loading JavaScript and HTML or any other content or message in IE.

Conditional tags structure is the same as an HTML comment () and all other browsers will see them as normal comments and will ignore them entirely but explorer Windows, has been programmed to recognize the special syntax, resolves the if and parses the content of the conditional comment as if it were normal page content, bingo!

Note: since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. You’d have preferred to put the special styles in the CSS file, but that’s impossible. You can also put an entire new tag in the conditional comment referring to an extra style sheet.

How it works?

The code should go in the section with all the other regular CSS CSS files. Below are examples of different codes for different IE versions.

Everytthing except IE

Only IE 7

Only IE 6

Only IE 5

Only IE 5.5

Only IE 6 and lower

IE 7 and lower

IE 8 and lower

IE and higher

IE 7 and higher

IE 8 and higher

ALL versions of IE

Useing glob() to Find Pathnames

Faramarz Kolivand — Wed, 12 May 2010 02:47:35 +0000

The glob() function searches for all the pathnames matching pattern according to the rules used by the libc glob() function, which is similar to the rules used by common shells.

The downside of this function is it will not work on remote files as the file to be examined must be accessible via the server’s filesystem and it isn’t available on some systems (e.g. old Sun OS).

glob()

  array glob  (  string $pattern  [,  int $flags = 0  ] )

Pattern

The pattern. No tilde expansion or parameter substitution is done.

Flags

GLOB_MARK – Adds a slash to each directory returned
GLOB_NOSORT – Return files as they appear in the directory (no sorting)
GLOB_NOCHECK – Return the search pattern if no files matching it were found
GLOB_NOESCAPE – Backslashes do not quote metacharacters
GLOB_BRACE – Expands {a,b,c} to match ‘a’, ‘b’, or ‘c’
GLOB_ONLYDIR – Return only directory entries which match the pattern
GLOB_ERR – Stop on read errors (like unreadable directories), by default errors are ignored.

Return Values

Returns an array containing the matched files/directories, an empty array if no file matched or FALSE on error.
Note: On some systems it is impossible to distinguish between empty match and an error.

Example

It works like scandir() function but it is more capable and flexible. It can let you search for files by using patterns.

  $files = glob('*.php'); 
  print_r($files); 
Array 
  ( 
  [0] => phptest.php 
  [1] => pi.php 
  [2] => post_output.php 
  [3] => test.php 
  )

And to fetch multiple file types, you should use it like this:

  $files = glob('*.{php,txt}', GLOB_BRACE);
  print_r($files);
  Array 
  ( 
  [0] => phptest.php 
  [1] => pi.php 
  [2] => post_output.php 
  [3] => test.php 
  [4] => log.txt 
  5] => test.txt 
  )

Redirecting with .htaccess

Faramarz Kolivand — Wed, 12 May 2010 00:31:59 +0000

Using the following .htaccess code, you can redirect your users to another destination. In this example we are redirecting the visitors to a "Under Construction" page (construction.php).

Make sure you upload your .htaccess files in ascii mode, sending it up as binary will break it and usually make your server unhappy and don’t forget that .htaccess does not work if you’re on a windows server. Also, make sure to change “domain.com” in this example with your own website URL and you’ll be all set.

The code below blocks all visitors from accessing any page besides the "construction.php" page.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^/construction\.php$
RewriteRule ^(.*)$ http://domain.com/construction.php[R=307,L]

The below code sends all users to construction.php except those with the specified IP. If you need to test your website while others were locked out, then you can use the below code with your IP address. When you are done with maintaining your website you can just remove the .htaccess code and the site will be back up again immediately!

RewriteEngine On
RewriteBase /
RewriteCond %{REMOTE_ADDR} !^11\.111\.111\.111
RewriteCond %{REQUEST_URI} !^/construction\.php$
RewriteRule ^(.*)$ http://domain.com/construction.php [R=307,L]

By the way, you can use this website to figure out what your IP address is: http://www.ipchicken.com/

How jQuery Works

Faramarz Kolivand — Tue, 04 May 2010 17:31:39 +0000

In past JavaScript is used by developers for client side scripting, but now developers have several option to add the functionality of JavaScript by using other tool and libraries. jQuery is also one of the best libraries for adding javascript, ajax features in the application, although the same task can be performed through javascript but jQuery provide the readymade easy to use functions.

What is jQuery?

jQuery is very rich library of functions and methods which does the same task like JavaScript but the difference is that jQuery is easy too use and give too much flexibility to the developers. The jQuery can be used in web application irrespective of the language or technology, it can be used with PHP,asp,jsp,servlets,CGI and almost all the programming languages.

The definition mentioned in jQuery official Web Site
“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript”

The Basics

This is a basic tutorial, designed to help you get started using jQuery. If you don’t have a test page setup yet, start by creating a new HTML page with the following contents:

Edit the src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:

Launching Code on Document Ready

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

window.onload = function(){ alert("welcome"); }

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn’t run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML ‘document’ isn’t finished loading yet, when you first try to run your code.

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event:

  $(document).ready(function(){
  // Your code here
  });

Inside the ready event, add a click handler to the link:

$(document).ready(function(){
  $("a").click(function(event){
  alert("Thanks for visiting!");
  });
  });

Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser’s alert pop-up, before leaving to go to the main jQuery page.

For click and most other events, you can prevent the default behaviour – here, following the link to jquery.com – by calling event.preventDefault() in the event handler:

$(document).ready(function(){
  $("a").click(function(event){
  alert("As you can see, the link no longer took you to jquery.com");
  event.preventDefault();
  });
  });

Complete Example

The following is an example of what the complete HTML file might look like if you were to use the script in your own file. Note that it links to Google’s CDN to load the jQuery core file. Also, while the custom script is included in the , it is generally preferable to place it in a separate file and refer that file with the script element’s src attribute









jQuery

Adding and Removing an HTML Class

Important: The remaining jQuery examples will need to be placed inside the ready event so that they are executed when the document is ready to be worked on. See Launching Code on Document Ready above for details.

Another common task is adding (or removing) a class.

First, add some style information into the of your document, like this:


[sourcecode]
Next, add the addClass call to your script:
[sourcecode language='javascript']$("a").addClass("test");

All your a elements will now be bold.

To remove the class, use removeClass

$("a").removeClass("test");

* (HTML allows multiple classes to be added to an element.)

Special Effects

In jQuery, a couple of handy effects are provided, to really make your web site stand out. To put this to the test, change the click that you added earlier to this:

$("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

Now, if you click any link, it should make itself slowly disappear.

Callback and Functions

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes.

Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.

Callback without arguments

For a callback with no arguments you pass it like this:

 $.get('myhtmlpage.html', myCallBack);

Note that the second parameter here is simply the function name (but not as a string and without parentheses). Functions in Javascript are ‘First class citizens’ and so can be passed around like variable references and executed at a later time.

Callback with arguments

"What do you do if you have arguments that you want to pass?", you might ask yourself.

Wrong

The Wrong Way (will not work!)

 $.get('myhtmlpage.html', myCallBack(param1, param2));

This will not work because it calls

myCallBack(param1, param2)

and then passes the return value as the second parameter to $.get().

Right

The problem with the above example is that myCallBack(param1, param2) is evaluated before being passed as a function. Javascript and by extension jQuery expects a function pointer in cases like these. I.E. setTimeout function.

In the below usage, an anonymous function is created (just a block of statements) and is registered as the callback function. Note the use of ‘function(){‘. The anonymous function does exactly one thing: calls myCallBack, with the values of param1 and param2 in the outer scope.

 
$.get('myhtmlpage.html', function(){
  myCallBack(param1, param2);
  });

param1 and param2 are evaluated as a callback when the ‘$.get’ is done getting the page.

.htaccess Overview

Faramarz Kolivand — Tue, 04 May 2010 14:13:58 +0000

What is .htaccess?

.htaccess is a configuration file for use on web servers running the Apache Web Server software. When a .htaccess file is placed in a directory which is in turn ‘loaded via the Apache Web Server’, then the .htaccess file is detected and executed by the Apache Web Server software. These .htaccess files can be used to alter the configuration of the Apache Web Server software to enable/disable additional functionality and features that the Apache Web Server software has to offer.

Things you can do with .htaccess

Below are the common uses of .htaccess:

Error documents

Creating custom error pages is very useful, it allows you to show web site visitors a friendly error message, for instance if a URL on your web site does not work. This avoids the unfriendly ’404 File Not Found’ error and allows you to display a friendly error, explaining possible solutions and guiding the visitor back into your web site content, rather than leaving them frustrated and lost.

Redirects

Redirects enable us to direct web site visitors from one document within your web site to another. This is useful for example, if you have moved your web site content and would like to redirect visitors from old links to the new content location.

Password protection

The password protection and authentication systems offered by the Apache Web Server are probably the most important use of .htaccess files. Very easily, we can password protect a directory (or multiple) of a web site which require a username and password to access. The login procedure for these secure directories is handled automatically by the web browser using a pop-up login interface (you’ve probably seen these before). Passwords are also encrypted using one of the best encryption methods available which ensures login credentials are kept secure. In this section we will discuss the details of the .htaccess authentication system, we will explain how to set-up password protection, and a variety of helpful related information, we will also explain a variety of pre-made software which can be used to accomplish these tasks.

Deny visitors by IP address

The visitor blocking facilities offered by the Apache Web Server enable us to deny access to specific visitors, or allow access to specific visitors. This is extremely useful for blocking unwanted visitors, or to only allow the web site owner access to certain sections of the web site, such as an administration area.

Deny visitors by referrer

The visitor blocking facilities offered by the Apache Web Server enable us to deny access to specific visitors based on where they have come from. If you’ve ever looked at your logs and noticed a surprising increase in traffic, yet no increases in actual file requests it’s probably someone pinching content (such as CSS files) or someone attempting to hack your web site (this may simply mean trying to find non public content).

Note, this functionality requires that ‘mod_rewrite’ is enabled on your server. Due to the demands that can be placed on system resources, it is unlikely it is enabled so be sure to check with your system administrator or web hosting company.

Hot link prevention

Hot link prevention refers to stopping web sites that are not your own from displaying your files or content, e.g. stopping visitors from other web sites. This is most commonly used to prevent other web sites from displaying your images but it can be used to prevent people using your JavaScript or CSS (cascading style sheet) files. The problem with hot linking is it uses your bandwidth, which in turn costs money, hot linking is often referred to as ‘bandwidth theft’.

Using .htaccess we can prevent other web sites from sourcing your content, and can even display different content in turn. For example, it is common to display what is referred to as an ‘angry man’ images instead of the desired images.

Blocking offline browsers and ‘bad bots’

Offline browsers are pieces of software which download your web page, following the links to your other web pages, downloading all the content and images. The purpose of this is innocent, so the visitor can log off the Internet and browse the site without a connection, but the demand on the server and bandwidth usage can be expensive. Bad bots as they are often called refers to programs which visit your web site, either to source content, look for security holes or to scan for email addresses. This is often how your email address ends up on ‘Spam’ databases, because they have set a ‘bot’ to scan the Internet and collect email addresses. These programs and ‘bots’ often ignore the rules set out in ‘robot.txt’ files.

DirectoryIndex uses

The directoryindex command allows you to specify a default page to display when a directory is accessed. For instance, if a visitor requests a directory on your web site, you can specify the file to load when the directory is accessed (if a filename is not specified in the initial request). For example, to display a ‘index.html’ file rather than showing directory listings or to load a ‘index.php’ file rather than an ‘index.html’ file.

Adding MIME types

MIME types set what a file is, or rather what file extensions refer to what file types. For example, a ‘.html’ file extension refers to a HTML document, a ‘.zip’ file extension refers to a ZIP archive file. The server needs to know this so it knows how to deal with the file. This is often used to create custom file extension for common file types.

Enabling SSI (Server Side Includes)

SSI stands for server side includes, these are special HTML tags which you can include in your HTML documents to call CGI scripts or other HTML content. This is particularly useful, for example to include a navigation menu in your HTML documents, it allows you to use one document to display the navigation menu in all your other documents. This saves disk space and means if you need to update the content, you only need to modify one file.

Enabling CGI outside of the cgi-bin

If your web server does not allow you to run CGI scripts outside of the ‘cgi-bin’ directory, you can enable CGI. Check with your system administrator or web hosting company before doing so.

Disable directory listings

Preventing directory listings can be very useful if for example, you have a directory containing important ‘.zip’ archive files or to prevent viewing of your image directories. Alternatively it can also be useful to enable directory listings if they are not available on your server, for example if you wish to display directory listings of your important ‘.zip’ files.

Setting server timezone

To set your web servers date timezone.

Changing server signature

To change the server signature which is displayed as part of the default Apache error documents.

Preventing access to your PHP includes

If you have a directory containing PHP includes, that you do not wish to be accessed directly from the browser, there is a way of disabling the directory using Mod_Rewrite.

Prevent access to php.ini

If you run the risk of someone accessing your php.ini or php.cgi files directly through their browsers, you can limit access to them using .htaccess.

Forcing scripts to display as source code

If you need to display scripts as source code, instead of executing, for example to allow review, this can be achieved with the Remove Handler function.

Ensuring media files are downloaded instead of played

It is possible to ensure that any media files are treated as a download, rather than to be played by the browser.

Setting up Associations for Encoded Files

Some browsers are capable of uncompressing encoded information as they receive it.

Preventing requests with invalid characters

If you wish, you can use Mod_Rewrite to deny requests containing invalid characters, please be aware that with certain site setups this may break links.