Wednesday, November 23, 2011

Comparing 10-digit unix date with other date format in MySQL

If the date is stored in the database in 10-digit Unix format such as "1203683582" and you wish to do comparision with other date formats, do something like this:

SELECT *
FROM mytable
WHERE date BETWEEN UNIX_TIMESTAMP('2005-02-12') AND UNIX_TIMESTAMP('2010-01-01');
Remember to use the date within UNIX_TIMESTAMP() function in yyyy-mm-dd international standard (this is a default format used by MySQL anyway). Passing the date in dd/mm/yyyy format does not work. If you do not pass the time in the UNIX_TIMESTAMP(), the time defaults to 00:00:00.

Checkbox toggling with jQuery

<input id="mycheckbox" name="mycheckbox" type="checkbox" value="Y" />My Checkbox - click to toggle
<div id="mydiv" style="display:none;">This is a div that's to be shown/hidden.</div>
$('#mycheckbox').change(function(){ 
       $("#mydiv").slideToggle('slow');
  });
  
  if($('#mycheckbox').is(':checked')){ 
       $("#mydiv").slideToggle('slow');
  };
Here "mycheckbox" is the checkbox id and "mydiv" is the id of div that you want shown/hidden when toggling the checkbox.

See example below:

My Checkbox - click to toggle

Sunday, November 13, 2011

CSS Hack: Opacity on IE

If you want to get opacity to work on all IE browsers, use the following IE filters in the order:
.opaque {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // for IE8/9
  filter: alpha(opacity=50);  // for IE5-7
  opacity: .5;  // for all other browsers    
}

Note: opacity gets inherited by child elements. So it's better to use background-color:rgba(r,g,b,alpha). For IE browsers, use gradient filter with #argb.

CSS Hack: Using RGBA in IE

background-color: rgba(r,g,b,alpha) is not supported by IE browsers up to IE9. But there is a workaround- by converting rgba() into #argb and using gradient filter.

More information on rgba() to #argb conversion and a simple conversion utility can be found here: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/. 

Once rgba() is converted to #argb, you can then use the gradient opacity filter like this:
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;

Saturday, November 12, 2011

Internet Explorer (IE) CSS Hacks with Conditional Comments

This is self explanatory. I have only used this for CSS hacks. This may also work for HTML tags. See the examples below:

<!--[if IE]>
Conditional comment for IE
<style type="text/css">
.ie { padding:5px; }
</style>
<![endif]-->
<!--[if IE 6]>
<p>
Conditional comment for IE 6
</p>
<![endif]-->
<!--[if IE 7]>
Conditional comment for IE 7
<![endif]-->
<!--[if IE 8]>
Conditional comment for IE 8
<![endif]-->
<!--[if IE 9]>
Conditional comment for IE 9
<![endif]-->
<!--[if gte IE 8]>
Conditional comment for IE 8 or higher
<![endif]-->
<!--[if lt IE 9]>
Conditional comment for IE lower than 9
<![endif]-->
<!--[if lte IE 7]>
Conditional comment for IE lower or equal to 7
<![endif]-->
<!--[if gt IE 6]>
Conditional comment for IE greater than 6
<![endif]-->
<!--[if !IE]> -->
Conditional comment NOT for IE
<![endif]-->

Tuesday, October 25, 2011

CSS positioning: IE hack

.myfloat {
  background-image:url(image.jpg);
  background-repeat:no-repeat;
  background-position:top;
  width:522px;
  height:249px;
  position:relative;
  left:-17px;
  left /*\**/: -18px\9; /* IE8 */
  ^left:-17px; /* IE6/7 */
}

Tuesday, August 30, 2011

Removing index.php in Codeigniter using XAMPP on Windows

Using the method below, you can access your site http://localhost/Mysite/index.php/welcome without the index.php like this: http://localhost/Mysite/welcome

I did this in Code Igniter 2.0.3 using XAMPP 1.7.1 on Windows 7.

Create .htaccess file in the root folder of code igniter. I got the code below from http://codeigniter.com/wiki/mod_rewrite/. Make sure you use your site folder name in Rewrite Base below:

    RewriteEngine On
    RewriteBase /Mysite/

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]
    
    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^application.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]


    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.
    # Submitted by: ElliotHaughin

    ErrorDocument 404 /index.php  

In config.php within the application folder, set index_page as blank:
$config['index_page']    = '';

In the same file, make sure uri_protocol is set to this:
$config['uri_protocol']    = 'AUTO';

If the above does not work, you may try this:
$config['uri_protocol']    = 'REQUEST_URI';

Sunday, August 14, 2011

URL for all the featured items in K2

  • Create a menu item of type "K2 » Itemlist / Category".
  • In Parameters (Basic), select one or more categories whose featured items you want to display.
  • On the "Featured items" dropdown, select "Show only featured items".
  • Save the new menu item.
  • Note the ItemId for this new menu item.
  • Your link will be something like this: index.php?option=com_k2&view=itemlist&layout=category&Itemid=

Creating an item without a category in K2

You can create an item without a category by combining K2 and Joomla features.

For all the items that need to have categories, use K2's categories. Use Joomla articles for creating all the uncategorized articles. By doing this, you can display all the category-related items by using K2's mod_k2_tools. This will also prevent K2 from showing all the uncategorised articles, which are created by using Joomla's native article feature.

For displaying uncategorised articles at module position, you can then create a new menu and have it display at a particular module location.

Synchronising web server files in Windows 7

I tried several tools for synchronising files and folders between 2 computers running Windows 7. My purpose is to sync web server files between 2 computers- basically "htdocs" and database folders of XAMPP.

When you try syncing web sever files that you want to use on both the computers, you have to create the same directory structure on the destination computer. For instance, if your source folder is C:\Program Files\xampp\htdocs, then you should install xampp in the same directory structure on the destination computer. Otherwise your synced webserver will not work on the destination computer.

Out of few tools I tried, I found command-based Robocopy the most reliable and ideal for my sync purpose. This is my concise review of the tools I tried.

Sync Toy - Good and easy to use with Synchronize, Echo and Contribute modes but I have noticed it's not too reliable when transferring large number of files.

Sync Center - Comes with Windows 7. It creates an offline file access, which allows you to access the files even when the network is disconnected. I wanted to sync "htdocs" in PC1 with "htdocs" in PC2. It creates its own "sync folders" on the destination, which is not suitable for my purpose.

Karen's Replicator - Does not allow good folder exclusion function. Only has global exclude but not per-task.

RichCopy - Failed to work on my computer when I tried running after installing it. So I just gave up.

Robocopy - comes with Windows 7. This is by far the best tool I have come across. It is a command-line utility. You must run this command as an Administrator. This is the syntax I used:
robocopy C:\YourPath\sharedfolder \\NetworkPC\sharedfolder /MIR /ZB /R:2 /V /FP /LOG:logfilename /TEE 
  • /MIR - mirror a directory tree
  • /ZB - restartable mode- often used for copying files over a network.
  • /R:2 - number of retries, in case the network connection fails.
  • /V - verbose mode, shows skipped files
  • /FP - show full pathname of files in the output.
  • /LOG:filename -  output status to log file (overwrite existing file)
  • /TEE - display log to the standard output.
    To make sync job easier, I created a batch file that can then be double-clicked or scheduled to run at specific times to do the sync job. Creating a batch file is easy. Open up the Notepad and copy and paste the code below and save the file with .bat extension:
    @ECHO OFF
    SETLOCAL
    
    SET _source=C:\YourPath\xampp\htdocs
    
    SET _dest=\\NetworkPC\htdocs
    
    SET _options=/MIR /ZB /R:2 /V /FP /LOG:D:\Robocopy\robocopylog.txt /TEE
    
    ROBOCOPY %_source% %_dest% %_options%
    
    ENDLOCAL
    

    Issues:
    1) Don't save the file as robocopy.bat
    I first saved the file as robocopy.bat and when I tried to run it, it gave me the message "Maximum setlocal recursion level reached". I then renamed the file something else and the error is gone.

    2) Running the batch file as Administrator
    The newly created batch file may not run in Windows 7 even though you are logged in as Administrator. This is because of the UAC settings. The batch file needs to be run explicitly as administrator. To do this, follow the steps below:
    1. Create a shortcut of the batch file by right-clicking on the batch file and selecting "Create Shortcut" from the menu. This will create a shortcut of the batch file. 
    2. Right-click on the shortcut file. Select "Properties" and click on "Shortcut" tab. Click on "Advanced..." button and choose "Run as administrator". Click "Ok".
    3. Now every time you want to run the batch file, make sure you run the shortcut file.

      Tuesday, June 21, 2011

      CSS: Removing the space at the bottom of relatively positioned elements

      The relatively positioned element like this adds a space at the bottom of the element:

      #bottom {
        z-index: -1;
        position: relative;
        top: -100px;
      }
      

      The above CSS adds a 100px empty space below the #bottom element.
      The easy way to get rid of that empty space is to replace top with margin-top, like this:

      #bottom {
        z-index: -1;
        position: relative;
        margin-top: -100px; 
      }