Kathirvel K

Archive for the ‘Web Design’ Category

It might be a chance you can face some problems that because of meta tag, so just know about some things to resolve your problems quickly… 

  • Problem:

The character encoding of the HTML document was not declared.The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.

Solution:

Add this as a first line in the HEAD section of your HTML template
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">

  • Problem:

Forces the browser to render as that particular IE version's standards

Solution:

Add this meta tag in the HEAD section of your HTML template
<meta http-equiv="X-UA-Compatible" content="IE=8" />

  • Problem:

Forces the browser the render at whatever the most recent version's standards are

Solution:

Add this meta tag in the HEAD section of your HTML template
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

  • Problem:

Adding "chrome=1" will allow the site to render in ChromeFrame

Solution:

Add this meta tag in the HEAD section of your HTML template
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

Default paragraphs in this page have yellow background. In any of the following test cases a blue background is set with a special (hack) rule. When the background is blue, the hack is applied.
Note: “All” == IE5+/Win, Op6+, Moz, Saf

IE6- (and IE7+ quirks) only
/*\*/ * html selector { property: value; } /**/

IE5.5- only
selector { property: value; p\roperty: normal-value; }

IE7 standard only
*:first-child+html selector { property: value; }

All except IE6- and IE7+ quirks
html>body selector { property: value; }

IE6+ quirks and IE5 (= all IE/Win quirks) only
* html selector { property /**/: value; }

All except IE6 standards
selector { property /**/: value; }

All except IE5.0
selector { property/**/: value; }

All except IE5.5
selector { property: /**/value; }

jQuery Code:

<script type="text/javascript" >
jQuery(document).ready(function()
{
jQuery(".AccordionMenu .AccordionHeader").click(function()
	{
	jQuery(this).css({backgroundImage:"url(Open.png)"}).next("div.AccordionContent").slideDown('slow', function() {
	if (jQuery(this).is(':visible')) {
		jQuery(this).siblings("div.AccordionContent").slideUp("slow").siblings(".AccordionHeader").css({backgroundImage:"url(Close.png)"});
		jQuery(this).prev(".AccordionHeader").css({backgroundImage:"url(Open.png)"})
	} else {
		jQuery(this).siblings(".AccordionHeader").css({backgroundImage:"url(Close.png)"});
	}

});
	});
});
</script>

CSS Code:

<style>
.AccordionHeader { background: transparent  url(Close.png) center right  no-repeat;  position:relative;padding: 7px 10px; cursor: pointer;  margin:1px; font-weight:bold;color:#FFFFFF;height: 22px;  }
.AccordionContent { display:none;  background: #FFFFFF !important; border: 1px solid #B0C5CE; padding: 5px; }
</style>

HTML Code:

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

This is explained how to do show more / show less option using jQuery for dynamically generated texts/links/lists.

jQuery code:

<script type="text/javascript" >
jQuery(function() {
var adjustheight = 40; var moreText = "Show More";
var lessText = "Show Less";
jQuery(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
var listItem_size = jQuery(".more-block a").length
if (listItem_size < = 8 ) {
if (listItem_size < = 4 ) {
jQuery(this).find(".more-block").css('height', adjustheight1).css('overflow', 'hidden');
}
} else {
jQuery(".more-less").append('');
jQuery("a.adjust").text(moreText);
}
jQuery(".adjust").toggle(function() {
jQuery(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
jQuery(this).text(lessText);
}, function() {
jQuery(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
jQuery(this).text(moreText);
});
});
</script>

CSS Code:

<style>
#Tabs a.adjust{text-align:center; padding:5px;background: #333333 ; color:#FFFFFF; font-size:11px ; display:block ; width:65px ; cursor:pointer; height: 13px;line-height: 13px ; text-decoration:none; clear:both;} #Tabs { padding: 0 0 2px 0; margin: 0; display:block;border:1px solid #999999; padding:6px; float: left; width:550px; clear:both;} #Tabs ul{ display: block;float: left;margin: 0; padding: 0;} #Tabs ul li{float:left; width:130px; list-style:none;} #Tabs a{text-align:center; padding: 3px 10px;margin:5px;display:block;text-decoration: underline;font-size: 11px; color:#800000; word-wrap: break-word; float:left; width:100px; } #Tabs a:hover{background:#A41B1B; color:#FFFFFF; text-decoration:none;} </style>

HTML Code:

 <div class="more-less">
  <div class="more-block">
  <ul>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  </ul>
  <div>
</div>

Internet Explorer conditionnal comments

<!--[if IE]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

You can also target only a certain version of IE:
<!--[if IE6]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Internet Explorer hacks

.class {
  width:200px; /* All browsers */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */
}

Targeting Opera only

@media all and (min-width: 0px){
    .classname {}
}

Targeting Safari only

html:lang(en)>body  .classname {}

Targeting Google Chrome only

body:nth-of-type(1) p{
   color: #333333;
}

IE6 crash

<style>*{position:relative}</style><table><input></table>

A. What are SEF URLs?

SEF means “search engine friendly.” Websites are considered search engine friendly if the pages can easily be found by search engines. One part of this is non-parameterized URLs. In version 1.5, Joomla! offers three different options you can choose to build SEF URLs.

Let’s have a look at the normal Joomla! URLs:


These URLs are very long and contain a lot of parameters. This makes it obvious the pages are constructed dynamically. Some believe Google and other search engines often ignore these URLs or don’t place them at the top of the result list.

Other than search engine impact, there are other advantages of SEF URLs:

  • The URLs contain keywords.
  • The URLs are much shorter.
  • The URLs are more “human friendly.”

This is an advantage for search engines, because indexing your site is more accurate. Long URLs break in blogs and in emails where the shorter SEF URLs do not. Even for humans, SEF URLs are better because increased readability makes it easier to remember the address or to share a web page with friends. Combined, these benefits translate to more site visitors.

B. Search Engine Friendly URL Configuration

You have to do all important changes in the “Global Configuration” dialog.

Step-By-Step-Introduction

  1. Log in as an administrator using the Joomla! Back-end.
  2. Click on the “Global Configuration” icon.

  1. Locate the right panel called “SEO Settings.”
  2. Activate the options desired in the following order.


 

Option 1. Search Engine Friendly URLs
Choose ”Yes” for the first option in the panel.
Confirm selection by clicking on “Apply”.

Let’s look at the URL. How has it changed? (You can check this by clicking on “Preview”.)
The URL is now much shorter and there isn’t any “?” in there anymore. It looks like a normal URL. The only difference is that there is a PHP file name, index.php, instead of a directory name, inside of the URL.

Option 2. Use Apache mod_rewrite.

If you wish to get rid of the /index.php/ value embedded in the URL, you can activate the second option. To use this option, you must also rename the htaccess.txt file in the root of your Joomla! Website to .htaccess Attention: If you need help with your .htaccess file, read the section,

D. Activating and Using Apache mod_rewrite.

By using this option, the “/index.php/” disappears from the URL.

Option 3. Add Suffix to URLs

If you also activate the option “Add suffix to URLs” you will get an URL like this:

Now there is a file extension at the end of the URL. This might make the SEF better for some search engines.

All three SEF URL options

If you activated all three SEF options, your URL should look like a permanent HTML document, located in a subfolder. The URL will look like this:

Testing Your SEF URL Configuration Options

After setting options desired, verify your configuration by testing the front end links. If you do not get any errors, you do not need to read the rest of this guide. If you get “404 page not found” or “Error 500 – Internal Server Error” errors, read on for additional configuration and troubleshooting information.

C. SEF URL Troubleshooting Steps

Use this if you activated SEF URLs according to the instructions, but get “404 Not Found errors” or “Error 500 – Internal Server Errors” when clicking the links.

  1. Verify you are using a PHP version that meets the Joomla! V 1.5 minimum system requirements. http://help.joomla.org/content/view/1938/302/
  2. If you are using a Beta or RC version, upgrade to Final, if available, or use the latest nightly build http://dev.joomla.org/content/view/17/60/#download
  3. If you use the 2nd and/or 3rd SEF URL options, make certain you renamed your .htaccess file correctly at the root of your website. Use the htaccess.txt file delivered with Joomla!. Simple rename it to .htaccess (The name is: a period followed by the literal “htaccess” with nothing before or after.) You can rename the file using an FTP client or, on Windows, you can rename the file from a command prompt.
  1. Verify Apache rewrite is working by adding this line to your .htaccess file: RewriteRule (.*) http://www.google.com/ Navigate to your website. If rewrite is working, you will end up at Google. If you do not, Apache rewrite is not working, which means Joomla!’s SEF URLs cannot work. See D. Activating and Using Apache mod_rewrite for more help configuring Apache rewrite.

     

  2. If mod_rewrite is working but the URLs are not, you might need to update the .htaccess RewriteBase if you have installed in a sub-folder (ex. /joomla). Open the “.htaccess” file, locate the RewriteBase line, remove the # and add the name of your sub-folder, as shown with this example:

    RewriteBase /joomla

Still doesn’t work?

If you followed these troubleshooting steps and are still are unable to get SEF URLs working, post in the Joomla! V 1.5 Administration Board for assistance. http://forum.joomla.org/index.php/board,431.0.html

Remain calm, provide an informative title, and include the following in your post:

  1. The specific error message or problem;
  2. A link to your site, if possible;
  3. Steps to recreate the error, if possible.
  4. Your system information: including Apache, PHP, and MySQL versions;
  5. Confirmation that your system meets Joomla!’s minimum requirements;
  6. The version of Joomla! you are using and verification you have updated to final (if available) or the latest nightly;
  7. The specific SEF URL options you selected of the three available;
  8. Confirmation your .htaccess file is correctly named and located at the root of your website;
  9. Results from testing your .htaccess for redirect to Google (Before posting, read the next section for help if mod_rewrite is not working.);
  10. Confirmation that RewriteBase was not needed or did not work.

    D. Activating and Using Apache mod_rewrite

If you followed the troubleshooting steps in the previous section and were unable to successfully navigate to Google, your Apache mod_rewrite function is not working. This results in an “Error 500 – Internal Server Error” when you click a link from the Frontend of a Joomla! Website that has the 2nd and/or 3rd SEF URL options turned on.

If you use shared-hosting, you will not likely be able to activate mod_rewrite. Instead, you must contact your web host provider and request activation. If you use your own server, these steps will help you activate mod_rewrite.

To configure Apache for mod_rewrite (if you have system access):

  1. Locate the “httpd.conf” file which you can find in the “conf” folder of your Apache installation.
  2. Search for a line with this content:

LoadModule rewrite_module modules/mod_rewrite.so

     

  1. Delete the “#” at the beginning of the line.
  2. Restart your Apache web server.
  3. Verify Apache rewrite is working by adding this line to your .htaccess file:
     

    RewriteRule (.*) http://www.google.com/

     

Navigate to your website. If rewrite is working, you will end up at Google. If you do not, Apache rewrite is not working.

To learn more about mod_rewrite use the official mod_rewrite documentation:

http://httpd.apache.org/docs/1.3/mod/mod_rewrite.html

E. Frequently Asked Questions

What do the numbers in the URL mean?

By comparing the old and the new URL we can see numbers in the old URL,

but also in the new URL:

This numbers are the parameters, which are needed by Joomla! to get the internal URL and show you the page you want to see. (In this case, the first on is the id of the category, the second one is the id of the article.)

There is no “index.php” in the URL anymore. Can I delete the file now?

No! The URL may doesn’t contain the “index.php” anymore, but internal the mod_rewrite will only redirect to the original path without showing it to you.

What is the Alias value? And how does it get created?

Alias is listed beneath the Title field in Articles, Categories, Sections and Menu Items. Joomla! Can automatically create the alias for you. An automatic alias begins with the title; all upper case letters are changed to lower case; spaces and special characters not allowed in a URL are changed to a dash.

I want to specify my own value for Alias.

If you do not like the Alias provided by Joomla!, you can enter a value of your choosing into that field. Many believe using good keywords in your URL helps search engine optimization. You can do so by including those keywords in your title, and allowing Joomla! to create the alias, or by creating the alias yourself.

How is Alias used in a URL?

For a menu item, Joomla! uses the alias as the URL plug. Assuming you use the first two SEF URL options and you create a menu item called Products, your URL would be example.com/products.

Joomla! also uses the primary key values of data within the URL to help the router navigate to the correct page. Continuing with the previous example, if your products menu item was for an Article-Category Blog, the link for the Article Title and/or Read More link would be three parts:

  • The menu item URL – example.com/products;
  • Plus, the primary key for the Category and the Category alias – 32-fruit;
  • Plus, the primary key for the Article and the Article alias – 1-apple;
  • The complete URL is: http://example.com/products/32-fruit/1-apple

How can I get rid of the numbers in the SEF URLs?

The numbers in the SEF URL are needed by Joomla!’s router to know how to direct site traffic. Once the router logic stabilizes, simple third party system plugins can be developed to augment the router capabilities by allowing more choice. At that time, numbers will likely be removed from the URL.

A named anchor inside an HTML document. Just used to navigate within the page. The name attribute specifies the name of an anchor.

Example 1: Simple HTML Scripts

Named Anchor:

<a name=”Top”> </a>

Call named anchor using href:

<a href=”#top”>Go Top</a>

Call named anchor in specific page that specific named #anchor:

<a href=”page2.htm#top”> Page2 #section</a>

Example 2: Page Load Named Anchor By Using Javascript

This need to include the function goToAnchor within head tag:

<script type=”text/javascript”>

function goNamedAnchor() {
location.href = “Page2.html#AnchorName”;
}

</script>

Then add this onload event to the body tag of html page:

<body onload=”goNamedAnchor();”>

Then specific the #anchor name that we want it to jump to, when the page is loaded:

<a name=”AnchorName”></a>

HTML:

<div id=”NavBar”>
<ul>
<li><a href=”home.html” id=”ctl00_toolbar_hlHome”>Home</a></li>
<li><a href=”services.html” id=”ctl00_toolbar_hlSearch”>Services</a></li>
<li><a href=”about.html” id=”ctl00_toolbar_hlProducts”>About</a></li>
<li><a href=”contact.html” id=”ctl00_toolbar_hlServices”>Contact</a></li>
</ul>
</div>

CSS:

#NavBar{height: 30px;margin-bottom:2px; border-bottom:2px solid black;}
#NavBar ul{display: inline;padding: 0;margin: 0; width: 960px;}
#NavBar li{list-style-type: none;line-height: 28px;vertical-align: middle;display: block;
text-transform: uppercase;font-size: 12px;float: left;margin-left: 0px;}
#NavBar ul li a{ background: darkred repeat-x;height: 28px;display: block;
text-decoration: none;text-align: center;color: #FFFFFF;margin-right:2px;
padding:0 25px; font-weight:bold; border:1px solid #990200;}
#NavBar ul li a:hover{background: black repeat-x;height: 28px;display: block;
color: #FFFFFF;text-decoration: none;border:1px solid #000000}
#NavBar ul li a.activeMenuItem {background: black; height: 28px;display: block;
color: #FFFFFF;text-decoration: none;border:1px solid #000000}

JavaScript:

function extractPageName(hrefString)
{
var arr = hrefString.split(‘/’);
return  (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}
function setActiveMenu(arr, crtPage)
{
for (var i=0; i<arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != “DIV”)
{
arr[i].className = “activeMenuItem”;
arr[i].parentNode.className = “activeMenuItem”;
}
}
}
}
function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;
if (document.getElementById(“NavBar”)!=null)
setActiveMenu(document.getElementById(“NavBar”).getElementsByTagName(“a”), extractPageName(hrefString));
}

</script>

Finally call this JavaScript to all pages:

<script language=”javascript”>setPage()< /script>

Source:http://www.richnetapps.com/automatically_highlight_current_page_in/

First go and download XAMPP Lite from http://www.apachefriends.org/en/xampp.html. You can choose a larger package if you need, but for WordPress, the Lite package is fine.
You can choose one of two download packages – the ZIP or the EXE. If you are unsure, choose the EXE as this will install itself. (The EXE is also smaller).
Move the downloaded EXE file to the root of the drive. In my case, this is C:\

Double-click the file and the extract dialog will appear:


Click extract – and wait a few moments while it does it’s job.
You will then have the xampplite directory at root:

<html>
<head>
<script type=”text/javascript”>
function upperCase(x)
{
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type=”text” id=”fname” onkeyup=”upperCase(this.id)” />
</body>
</html>