Saturday, April 14, 2012

Magento base system principle

Blocks

Block updates is set in config.xml
config > layout > updates > [modulename] > file
#files tag will point to a layout xml file in app/design/frontend/[themename]/layout/[modulename].xml

in [modulename].xml contains:
layout > [modulename] > [controllername] > [actionname] > reference [name=content] > block

block attributes available are:
type: To base this block on a class in your module. naming is case sensitive
@format: [Modulename]/[Block name]
@example: type="ProductLister/Lister" points to app/code/local/[namespace]/[Modulename]/Block/[Block name].php, with class name: [namespace]_[Modulename]_Block_[Block name]
name: a name which can be retrieved by calling $this->getChild('name') or $controller->getLayout()->getBlock("name")
template: points to the actual path of the phtml template file
@location: app/design/frontend/[themename]/template/[path]

Thursday, April 12, 2012

jquery height() or width() gotcha!

When a jQuery(target).height() is called in jQuery.ready event,
will return the height of the target, excluding the size of the image inside.
the only way to do it properly is to wait for the images to be loaded, therefore,
replacing it with jQuery(window).load(...) works best :)

Wednesday, April 11, 2012

jquery 1.7.2 bug?

I've a dom which is set to position: relative, style.left to 0

console.log($(target)); //return array of 1 object

$(target).css("left", "100px");
console.log(dom.style.left); //seems to return 100px, which is correct

but when i run
$(target).css("left"); // return 110px

Updates:
$(target).position() - returns position from parent offset
$(target).offset() - returns position from the screen

Example:
The only work around method i could think of is to directly set:
position: relative;
top: 0;
left: 0;
Or
jQuery(target).offset(jQuery.target.offset());

Then use dom.style.left or dom.style.top directly.


Please note that this is tested on linux chromium browser 18.

Wednesday, April 4, 2012

javascript || operator gotcha

the OR operator of javascript might not execute the entire condition to complete it.
If it detected that the earlier condition meet, it will automatically abardon the check.

Example:
var x = true;
x = x || runmyfunction();

if x is true, runmyfunction will not be checked or executed. But if x is false, then runmyfunction will be executed to return the value.