Kathirvel K

jQuery Accordion with expand/collapse images

Posted by: Kathirvel K on: July 1, 2011

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>
Tags: , , , ,

jQuery show more / show less option

Posted by: Kathirvel K on: July 1, 2011

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>
Tags: , , ,

CSS hacks tips for various browser

Posted by: Kathirvel K on: July 1, 2011

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>
Tags: , , , ,

Search Engine Friendly URLs (SEF URLs) – Joomla

Posted by: Kathirvel K on: March 21, 2011

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.

Tags: , ,

Go to named anchor while page (body) loads

Posted by: Kathirvel K on: January 20, 2011

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>

Tags: , , , , ,

Highlight Current page in menu using Javascript

Posted by: Kathirvel K on: July 13, 2010

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/

Tags: , , ,

Installing Xampp and WordPress

Posted by: Kathirvel K on: May 19, 2010

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:

Tags: , ,

Change Uppercase in Js (HTML DOM)

Posted by: Kathirvel K on: April 6, 2010

<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>
Tags: , , ,

Make fancy buttons using CSS sliding doors technique

Posted by: Kathirvel K on: January 21, 2010

What is sliding doors technique?

The technique is very simple. If we want to have a dynamic-width button, we have to find a way to stretch it horizontally. We will accomplish this if we create two background images that will define the button: one for the left side and one for the right side – like in the example below.

LEFT                                                                                                           RIGHT

Smaller, right image will slide on the top of the larger, left image (that why it is called sliding doors). The more right image slides to the left, the narrower button will be and vice versa. The image below shows the technique.

Styling the button

First, let’s take a look at the HTML elements that will simulate button. We have <span> element within the <a> element. Span element contains left, wider image and text. The width of the text will determine the size of the button.

<a class="button" href="#"><span>Submit</span></a>

Now let’s take a look at the CSS code. We have a .button class that will be applied to <a> element and .button span class that will be applied to <span> element within <a> element. We also have.button:hover span that will change the font style within <span> element.  And that’s all. Simple, eh? The comments in the code below describes each element.

a.button {
    /* Sliding right image */
    background: transparent url('button_right.png') no-repeat scroll top right;
display: block;
float: left;
height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.button span {
/* Background left image */
background: transparent url('button_left.png') no-repeat;
display: block;
line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding: 7px 0 5px 18px;
}
a.button:hover span{
text-decoration:underline;
}

The result will look like the examples below.

You can see it “in action” on example page.

source

Tags: , , ,

Top 10 CSS buttons tutorial list

Posted by: Kathirvel K on: January 21, 2010

How to make sexy buttons with CSS

» Source

Scalable CSS buttons with PNG images and background colors

» Source

Sexy CSS Hover Button

» Source

CSS Submit buttons

» Source

Simple Round CSS Buttons ( Wii Buttons )

» Source

Make fancy buttons using CSS sliding doors technique

» Source

Beautiful CSS buttons with icon set

» Source

Sliding Doors buttons using only 1 image

» Source

Rediscovering the button element

» Source

Using sliding doors in WordPress

» Source

Tags: , , , ,
Older Entries

 

February 2012
S M T W T F S
« Jul    
 1234
567891011
12131415161718
19202122232425
26272829  

Blog Stats

  • 15,382 hits

Blog at WordPress.com.

Theme: Albeo by Design Disease.

Follow

Get every new post delivered to your Inbox.