Oct 19, 2012

Centering image in the middle of the browser window with CSS

Recently I needed to center an image in the middle of the window browser, just to make a loading screen for a Phonegap app.

After googling for almost an hour and trying many ways, I just couldn't find the way to center it both vertically and horizontally. Finally , after reading this and trying many of the alternatives that the users have posted, it did the trick.

The CSS code to use is:

#yourimageid{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

That's it, you don't need to put any more code in order to center your image! It will be always centered and in the middle of the browser, without any stretching applied.

I guess you can use it to center also a div in the middle of the screen, in case you need to put other stuff centered.

Oct 14, 2012

Disabling days in Magento calendar

Sometimes you need to modify the way Magento calendar works, so the user can't choose a holiday or a weekend day. This is not specifically explained by the Magento community or documentation, so I decided to post it here.

My version of Magento is 1.7, just to let you know, but should work with others.

Let's say you call your calendar via javascript like this:

    <script type="text/javascript">
        //<![CDATA[
        Calendar.setup({
            inputField: "sdate",
            ifFormat: "%Y-%m-%d",
            showsTime: false,
            button: "_dob_trig",
            align: "Bl",
            singleClick: true      
        });      
        //]]>
    </script>      

Then you get a functional calendar, but the user can choose any day of the year, and that's something we want to prevent.

So, what you have to do is to add a "disableFunc"  function to this calendar setup.

disableFunc: function(date) {
 //return true if you want the day disabled, false otherwise
 ...
}

For example, you could do something like this to disable sundays (remember, in javascript's Date object, Sunday is 0, Monday 1, ... until Saturday that is 6!


    <script type="text/javascript">
        //<![CDATA[
        Calendar.setup({
            inputField: "sdate",
            ifFormat: "%Y-%m-%d",
            showsTime: false,
            button: "_dob_trig",
            align: "Bl",
            singleClick: true,

            disableFunc: function(date) {
                  //disable all sundays and New Year day
                  var month = date.getMonth() + 1; //add 1 because January = 0 and so on
                  var day = date.getDate(); //get day number
                  if (month==1 && day == 1) return true;
                  return date.getDay() == 0;  //0 for sunday, 1 for monday, etc
            }
     });
     //]]>
     </script>

So the code above checks (the disableFunc is called for every day in the current month displayed by the calendar!) if the day is 1-1, if so, the day is disabled. Otherwise, it checks if the day is a Sunday, and if so, the day is also disabled.

Hope this code helps you out with calendar manipulation in Magento!
 

Oct 6, 2012

Phonegap + iScroll: solving keyboard issues

First of all, i must say that I'm using iScroll 4.2 with Phonegap 2.1 on an android project (eclipse), but this hack should work with other platforms and versions.

If you tried to click an input field (text box, select, etc) when using iScroll and phonegap, you will find out that you can't. That's because iScroll prevents the default behaviour of your click, making impossible to enter text or select anything.

I found the fix for this at Stack Overflow, however a new problem appears: the keyboard doesn't hide by itself when you put text inside the box!

To fix this, i hacked a bit the code from Stack Overflow. The final result is like this:

Step 1: change this code on iscroll.js :

    onBeforeScrollStart: function (e) { e.preventDefault(); },

and put this:

            onBeforeScrollStart: function (e) {
                var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'');
               
                if(nodeType !='select' && nodeType !='option' && nodeType !='input' && nodeType!='textarea' && !showkey) {
                     e.preventDefault();    //prevents showing keyboard - scrolling
                }//otherwise, show keyboard, do default
                if(!showkey) showkey = true;
            },           

Then you must declare the variable "showkey" at the beginning of iscroll.js:

var showkey =true;

Then on your "onblur" events of your inputs you must put:

    <input onblur="showkey=false" .../>

So when you make onblur, the "e.preventDefault()" code can't be executed just one time, making default behaviour (hiding keyboard) possible.