Saturday, September 25, 2010

Cannot make the website html validate? try HTML Tidy

Sometimes you cannot seems to find the line where the validation errors come from. In such cases you can try using HTML Tidy to do a auto clean up.



W3C Markup Validation Service also has this option. or you an check out the project page.

http://tidy.sourceforge.net/

Tuesday, September 7, 2010

Magento Video Tutorials: Thanks Armando Roggio :)

Cannot express how greatful I am to this guy. http://www.ecommercedeveloper.com/articles/1540-Building-a-Magento-Theme-Start-to-Finish-Part-One-Prolegomena

I tried to start Magento several times and just got frustrated with the issues with locahost and complex nature of the file structure.
but thanks to above tutorial Magento is like riding a bike.

Videos are on version 1.3 but after reading this note about version 1.4 you can follow the tutorials easily on 1.4

Magento's Theme Hierarchy--Changes in CEv1.4 and EEv1.8

Thursday, September 2, 2010

Mangento Sample Data - 404 Page Error

I see few solutions for this error in the web but for me following steps corrected my error.
Magento Version - 1.4.1.1

Admin -> System -> Index Management -> Reindex all given Indexes

Sri Lanka District and City List Sql File

For a recent project I had to find all the Sri Lankan District and related Cities to populate in two drop downs. The list is not fully complete and Kilinochchi District is not in the list.
Districts - 24
Cities - 2044

Two tables, city table refer district table by did.

Download Sri Lankan District - City Sql file

You can easily import this sql file to mysql using phpmyadmin.

Tuesday, August 31, 2010

Mysql insert multiple/batch of rows using single query

You don't need to loop a mysql insert query to add multiple records to a table. mysql insert support multiple inserts in one query.

Let say you have a table called students with two fields fname and age.

insert into students (fname, age) values
('Kusal', '26'),
('Tom', '18'),
('Ann', '23')

Remember to give the column names in the query.

Quick, Simple and Easy Image Gallery Using jQuery

This is a simple image gallery I wrote for a project. Its small and easy to implement. Ideal if you need to build a simple and quick gallery.
You can improve the code by adding a loading.gif

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to add table rows using jQuery</title>
<style>
.thumb{vertical-align:top; padding:2px; border:1px #CCC solid;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>

$(document).ready(function(){    
    
    $(".image").click(function() {    
        //$('#main').hide();
        var image = $(this).attr("href");
        $('#main').attr("src", image);
                
        $('#main').load(function() {            
              $('#main').fadeIn('slow');
        });
        
    return false;
    });
});    

</script>
</head>

<body>
<a href="images/image1.jpg" class="image"><img alt="Image1" src="thumb/image1.jpg" class="thumb" border="0"/></a>
<a href="images/image2.jpg" class="image"><img alt="Image2" src="thumb/image2.jpg" class="thumb" border="0"/></a>
<a href="images/image3.jpg" class="image"><img alt="Image3" src="thumb/image3.jpg" class="thumb" border="0"/></a>
<a href="images/image4.jpg" class="image"><img alt="Image4" src="thumb/image4.jpg" class="thumb" border="0"/></a>
<div id="container" style="height:400px; padding-top:20px;"><img id="main" src="images/image1.jpg" /></div>

</body>
</html>


View Demo


Sunday, August 29, 2010

Wait till a dynamically loaded image fully load using jQuery

I had this problem when I was creating simple jQuery gallery with thumbs. Once the thumb is clicked I wanted to wait till the image is fully loaded until I called the fadeIn.
we can use jQuery load to achieve this.

$('#image').hide();
$('#image').attr("src", image); //next image path
//still in hide
$('#image').load(function() {    
    $('#image').fadeIn('slow');
});        


How to round numbers in JavaScript

JavaScript number rounding is done using Math.round
This will round a given number to the nearest whole number

<script type="text/javascript">

var number = 100.58;
number = Math.round(number);
alert(number); //101

</script>


If you do need some decimal points preserved, following code will round the number to the nearest tenth.

<script type="text/javascript">

var number = 100.58;
number = Math.round(number*10)/10;
alert(number); //100.6

</script>