Mysticpixels

Living life…the cool way !

Browser Specific Hacks

leave a comment »

/***** Selector Hacks ******/

/* IE 6 and below */
* html #uno  { color: red }

/* IE 7 and below */
*:first-child+html #dos { color: red } 

/* IE 7 and modern browsers */
html>body #tres { color: red }

/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below */
html:first-child #cinco { color: red }

/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }

/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}

/***** Attribute Hacks ******/

/* ie6 and below */
#once { _color:blue }

/* ie7 and below */
#doce { *color: blue } /* or #color:blue */

/* 'Modern Browsers' includes IE8, whether you agree or not.. πŸ™‚ */

Written by Ranjith

April 26, 2009 at 5:05 am

Posted in UI

A gem of Indian IT

leave a comment »

Recession is taking its toll on an international basis and there is nothing much we can do about it except to go ahead with our daily life with a bit of cost cutting and recessionization involved. This is the time of cost cutting and lay offs and i somehow feel this is the tip of an Iceberg which would show off its mammoth dimension in times to come. Let the consequences be bare minimum and let the recession pass by in a not so tragic note and lets hope for the best.

Well, let me flip the coin a bit.

There are some good news too for the indian IT industry. It is not any bailout news / some big money deal. Rather it is some food for inspiration for the millions of indians and this makes us proud to be indian. I am talking about the latest news on our IT guru NRN (N R Narayanamurthy).

NRN appointed Sri Lankan President's IT advisor

NRN has been appointed as the SriLankan president’s IT advisor. With such masterminds within our community, india should be proud and its high time we should take some face-the-recession strategy with the help of such great personalities. For a nation to be in the genre of the leaders in IT industry, it should have a transparent and well managed head panel which i strongly believe could be a reality with the likes of NRN and other eminent IT gurus onboard.

Written by Ranjith

February 13, 2009 at 8:25 pm

Karutha Pakshikal – A malayalam classic

with one comment

If you are a malayalam movie fan, and have some time to spare for a quality movie, i would request you to watch this one. Even though malayalam film industry has no shortage for some touching stories, which we can recollect from the legendary list like Kireedam, Vadakkan Veera Gaadha, Chithram, Vaalsalyam, here comes another genius from the great actor in Mammootty !

Known for the class and magical touch in all the family roles he has taken up, this one should take up the center-stage in our adorable ‘Mammookka”s film list. Director Kamal has done his best in drawing the character of a poor man and his commitments and boundaries in a society where money and status stands in between all human emotions and relations. The emotional sequences here are simply the best ones i have ever watched. This movie clearly illlustrates the position such people are given in our society and how their daily life goes unnoticed.

Mammootty’s performance as Murugan in the film will be another milestone in his career, at par with his performances as Achootty in Amaram, Maada in Ponthanmaada and Vaarunni in Mrigaya

β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”

Cast: Mammootty, Padmapriya, Jagathy Sreekumar, Baby Malavika, Baby Suhaila, Master Thejus

Director: Kamal

β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”

Written by Ranjith

October 28, 2008 at 10:42 pm

Posted in Movies

Equal height columns using CSS

with one comment

Dealing with table-less layouts can prove to be tedious, when it comes to equal height multi-column layouts. There are a lot of ways in which you can create equal height columns and they all work pretty well. But when it comes to semantic coding and standard approach, a solution that is purely CSS based is most preferred.

Here is a CSS based solution for creating equal height columns.

The idea here is extending the smaller column with an arbitrary value (higher than the longest column), and applying overflow:hidden to the parent container, so as to hide the overflown content of the column that we had extended. Moving more closer to the concept, let me explain the approach. Refer to the screenshot given below while reading the rest of this post.

Here i have used a two column layout as example. In this layout, the body part of the page, is having lot of content than the navigation column to the left. Assuming that relevant clearing methods are used to develop this layout, normally, the navigation column to the left will be having much shorter length than the content container (unless you give a specified height for each page to match the heights, which is not preferrable). What we would do is, to give the navigation container an arbitrary padding-bottom value and confusing the browser by giving a negative margin-bottom, of the same value, so that the browser assumes that the height of the container is only same as the content in the container, but still the height increases taking into account the padding and margin specified. Now having given the desired height to the navigation container, we now need to hide the xtra height of the container. For this, we give overflow:hidden, to the parent container that holds both of the containers (content container and the navigation container)

Sample Code:

CSS for the parent container: outerWrapper{overflow:hidden; border:solid 1px 000;}
CSS for navigation container: navWrapper{background-color:#BDF0FF;margin:0 0 -500px 0;padding:10 10 500px 10;}
CSS for contentcontainer:contentWrapper{background-color:#FFFFEC;padding:10px;}

Hope this is useful

Written by Ranjith

October 20, 2008 at 8:26 pm

Posted in UI

Develop(gulp)ing yummy cutlets

leave a comment »

Well, readers dont be taken aback by this post which seems to be out of place πŸ™‚

Wont it be nice if we could get some creativity flowing in our real life too ? well, i’ve found cooking to be a best field to apply your creativity, and right away i’ve decided that i’ll create a new category for COOKING !Β 

This inspiration comes right from the tasty and yet so hot set of cutlets that is sitting pretty in front of me now and inviting me to take them through my taste buds…She (my wife) has just finished cooking some of them and i was tempted to take a bite even while taking the snap πŸ™‚ Ok, now lets move into the process of developing this set of plugins πŸ˜‰

Requirements
———–

  1. Spinach*
  2. OnionΒ 
  3. Potato
  4. Chilly Powder
  5. Rusk(Crispy Powder)
  6. Egg(Beaten up)
  7. Cooking Oil
  8. Salt

The Process
—————–

  1. Cook your set of potatoes well first
  2. Chop your onions and cook it dry with oil
  3. Add spinach and required salt + Chilly powder to the mixture, while they are still getting cooked and add adequate H2O to it πŸ˜‰
  4. Once the above mixture is cooked well, mix the contents in step 1 to it
  5. After mixing, make the mixture into sets of small oval shaped (these shapes are you creativity :)) pieces
  6. Dip each of these pieces into egg (you should already have mixed the egg up in another vessel ) completely and place them into another plate
  7. Cover each pieces with rusk powder by mxing them in the powder heapΒ 
  8. Now you have set of cutlets short of one step which would be giving your taste buds a new inspiration
  9. Fry each of these pieces in boiled oil till they are golden brown in color
* This is an interchangeable option, which you can use anything of your taste in replacement (Eg. Chicken, Meat, Vegetables, blah blah blah)Β 

Written by Ranjith

October 12, 2008 at 3:32 am

‘A’ wonderful ‘Wednesday’ !

with 3 comments

Hats off first of all. But im confused to whom i should take the hats off πŸ™‚

Movies like this would really bring about a revolution in indian cinema, i swear. Never before have i seen such a blend of sheer talent combined together in a movie. The actors were the best fit, the director was a born-director i hope, and the sequence was awesome. The highlight is that you wouldnt take your eyes off the screen till the end, believe me you wont !Β 

With the duoΒ Naseruddin Shah and Anupam Gher showing us what actually pure acting is, there was a air of genuinity throughout the one and a half hour of the flick. The story was a never thought of before one and it was one of the best climax one would ever see in world cinema. Based on the frustration of a common man on the growing terror network, this movie is also an eye opener for the public to really go out and fight the terror in their own way.Β 

β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”

Cast:Β Naseruddin Shah, Anupam Kher and Jimmy Shergill

Director:Β Neeraj PandeyΒ 

β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”

Written by Ranjith

October 4, 2008 at 7:19 pm

Posted in Movies

‘Rock on’ – Keep Rocking

leave a comment »

Movies can serve some other purposes apart from just entertainers. They can inspire people, rekindle the hope in them and serve the society, if it has a worthy message and has the talent being a part of it. This movie just falls in that category, a sheer entertainer and a messenger !

I was just blown away after seeing this movie, and was surprised on the existence of such a movie in bollywood where they rate movies on the number of item numbers and the exposure of Β the heroines. This would stand on the top list of the hindi movies i have ever seen. Living your dreams and going by the heart is what this one tries to impart on to you, and they have done it wonderfully well.

The music was really soothing to the ears and of course doesnt have any ITEM number πŸ˜‰ and would resemble watching a oscar winning hollywood movie in all sense. The screenplay, the camera and the locations are simply irresistable.

——————————————————————————

Cast:Β Farhan Akhtar, Prachi Desai, Arjun Rampal, Purab Kohli, Luke Kenny and Shahana Goswami;

Director: Abhishek Kapoor;Β 

——————————————————————————

This movie is a must watch for the young generation of india and they should follow their heart πŸ™‚

Written by Ranjith

October 4, 2008 at 6:57 pm

Posted in Movies

A wonderful day @ WONDERLA !

with 4 comments

There may be lots of ways in which you could shed your stress and worries for a day…but the way that we chose yesterday was perhaps the best choice that we had made and this day would remain evergreen in my life !

Wonderla – The rocking amusement park situated in the outskirts of the bangalore city in the mysore road is undoubtedly the craziest amusement parks that ive ever visited. This was our full day destination for a one day team event. I cant wait more to get into the wackiest rides here…

We, four of us, reached there by around 11.30, totally unaware that some crazy events are going to pounce upon us from then ! We changed and kept our belongings in the locker and started to explore the rides in this wonderful park.

The first shock came when we got into the broad ‘Wonderla Bamba’

Not that thrilling but yes, i definitely made us know that there are more to come πŸ™‚

Β 

Then came the ‘Wonderla Splash’

This could come into the league of rides that would make your hormones go for a ride ;). The moment we start our ride downwards from the steep rail..starts the thrill and fun . The highlight was the photo that was taken unaware on that moment and that would reveal the fun and thrill in our faces. Β I would love to go into this one a ten times !

Β 

Some High Profile thrillers

Β 

Drop Zone

This was not supposed to be a high profile thriller, but somehow found its place in the list. The trick was the uncertaintly on when we will be getting dropped from the hold of the lever and when we are freeflowing to the ground all of a sudden. I enjoyed it !

Β 

Insanity

The literally ‘Insane’ ride that the park has ! This masterpiece throws and juggles you around in the ai, ofcourse with the seat belt on, or else you would have found me somewhere in the outskirts of the city mountain range having got thrown out of the park premises itself πŸ˜‰ This one was AMAZINGGGGGGGG…… I felt all my blood cells bursting virtually…

Β 

Hurricane

If you see this ride from ground…you ll feel there are some mices fitted into the seats of the machine and they are just been thrown and played around insanely just like when they are caught within a hurricane. I would rate this one as the BEST in the rides in this park. Still i can feel the rush of blood through my vessels ! Never miss this one if you are thrill lover πŸ™‚

Β 

These are some of the rides that could amaze and amuse you…but this cool nice park has a host of other fun rides and lots of water rides that could virtually take away your worries for the day.Β 

Β 

Location

This wonderful place is located in the ourskirts of bangalorw, on the mysore road. Its around one and a half hour ride from the city, and is pretty well organised and clean to the core. I really like the way they have maintained the place and planning when i can go back for another exploring journey πŸ™‚

For more information you can log into http://www.wonderla.com

ENJOY MAADI !

Written by Ranjith

September 27, 2008 at 10:29 pm

The browser war has a new joinee – GOOGLE CHROME !

with one comment

Suddenly there has been an announcement and a sudden launch of a new browser to the world of hacks and compatibility, making life more challenging for the web developers around the world. Will it be a new ground of web experience for the netizens around ? Well…we need to wait and watch…

Im taking about the launch of the new browser ‘CHROME’ by google, Β yesterday.Β The service went live at 12 Noon PT yesterday and is available for Windows Vista and XP – for now. Mac and Linux versions are coming soon. It will launch in 122 countries and 43 languages. It is also fully open-source.

I just downloaded the app and this blog comes right from the Β cute and clean tab of CHROME. Its a clean and simple interface and google has kept its consistency around the theme that they normally follow – SIMPLE and EASY TO USE. Actually this sudden launch of this new member of the google family was reportedly because of a leakage of information about the browser project that was under progress in google for the last 2 years and the corporate has told that it is a ‘huge investment’ for the company.

Β 

There are many pros and cons about chrome, but one thing is clear. It has a long way to go,for being at par with the other players in the arena. Β Here are some updates

  • Tabbed browsing, as it has become a norm by now πŸ˜‰
  • Addressbar cum Search bar (In chrome it is the ‘omnibar’ that functions as both an address bar and a search bar)
  • Newly created tab showing recently visited site links and screeshots increasing the usability
  • Total security from intrusions through web, as chrome has an additional security layer that makes it inaccessible for those bad guys around to access your system registry via web

One major disadvantage would be the absence of effective extensions which firefox has in abundance. But never to underestimate, im expecting wonders from the search engine sultan !

Courtesy :Β ZDNET Blog

Written by Ranjith

September 3, 2008 at 12:21 am

Posted in Techie, UI

Matching HTMLs ‘Pixel Perfect’ly with visual design

leave a comment »

At times i have wondered, if there is a better way to match the visual comps from graphic designers to the HTML / XHTML pages that the web-developers code. Navigating using ‘Ctrl+Tab’ and using ‘Calipers’ are indeed working out, but there should be some other better ways to do that…and that is what exactly the page, that i happened to visit after googling for a while, had to tell me

PIXEL PERFECT

This firefox extension that allows web developers to easily overlay a web composition over top of the developed HTML/XHTML. By toggling the composition on and off, the developer can visually see how many pixels they are off in development. Pixel Perfect also has an opacity option, so that you can view the HTML below the composition. Being able to see both the composition and the HTML, you can now simultaneously use Firebug while Pixel Perfect is still in action.

http://www.pixelperfectplugin.com/about/

Written by Ranjith

August 26, 2008 at 9:46 pm

Posted in Techie, UI