IE 6 “position: relative” fix
August 22nd, 2008 Filed Under CSS, Good to know, Technology, Tips & Tricks, browser
I got a big-time fix for IE6 bug which doesn’t behave properly for the position: relative elements.
Problem:
When you give some position:relative style to any element in the page and resize the browser, it behaves as if that element had a position: fixed assigned.
The Fix:
Simply add position: relative to your body tag and make that your habit to have it in the first place whenever you start a new css sheet.
Hope that helps people getting frustrated with this problem.
Enjoy Madi !!
Post Linx
Permalink | Trackback |
|
Print This Article | Leave a Comment
Skin for shopping.aol.com
April 18th, 2008 Filed Under CSS, Javascript, browser, snippet, utilities
Using Greasemonkey, I have tried to skin http://shopping.aol.com. The skin is only for the homepage. This is just a try and beginning to mySkins project for firefox. I am thinking to build a plugin which will be a collection of skins for different websites.
To use this skin you need to have Firefox 1.5 or higher and Greasemonkey (Check your popup blocker if you have not seen after clicking this link… If you see the blocker .. click edit options and click on allow button) already installed.
Once you have both of these, download the script from here. And visit http://shopping.aol.com.
Post Linx
Permalink | Trackback |
|
Print This Article | Leave a Comment
Explicit Inheritance in CSS
April 10th, 2008 Filed Under CSS, Javascript, Thinking Out Loud
Many of us might have come across a problem of not able to include an already declared class in another class in CSS.Technically speaking, “Explicit inheritance is not possible in CSS”.I have created a small javascript utility, which, if you include in your page, you can break the ice.It is very simple to use. Just include the js file and write your css in the way you wanted to.To illustrate I will show you the problem first and then the solution:I have the following CSS:
.basic{float:left;margin: 0;padding: 0;}.appBG{background: lime;}#div_1{background: lime; /* REPEAT FROM .appBG */float: left; /* REPEAT FROM .basic */margin: 0; /* REPEAT FROM .basic */padding: 4px; /* REPEAT FROM .basic */}
Ideally inheritance concept says, it should be like this:
.basic{float:left;margin: 0;padding: 0;}.appBG{background: lime;}#div_1{import: .basic;import: .appBG;}
This js utility leverages you with this behaviour of your css.But the syntax is a bit different from what I have shown just now.Please note that the property “import” works only in IE and other browsers don’t support import property in a css class and simply ignore it.So, instead of ‘import’ (shown in the two lines above), we will use an almost never used property called “content” for this purpose.So your code looks something like this:
.basic{float:left;margin: 0;padding: 0;}.appBG{background: lime;}#div_1{content: ".basic, .appBG";font-family: arial;}
But if you still feel that ‘content’ property should not be used for this purpose, please comment me. I’ll have some hack to it, so that you can to use the content property in the same way along with css inheritance(I want to do this anyways).My suggestion is to use this utility if you are building or rewriting your css from the scratch. The cause is that you might have already repeated and duplicated many class properties.I have tested this utility only in Firefox 2.0, Firefox 3.0, IE 6.0, IE 7.0 Please notify me if anyone finds any bugs in any other environment(including different combinations of OS and Browsers)Known Issues:If you disable your javascript, it wont work, but then, that would be same as attaching classes to elements using jquery and disabling javascript.Please let me know what you feel and please comment on the idea.Find the files here to test an example.
Post Linx
Permalink | Trackback |
|
Print This Article | Leave a Comment
JSON for idiots
February 27th, 2008 Filed Under CSS, Javascript, Tips & Tricks, json, snippet
Please forgive me for the title of this article. It doesn’t mean you are an idiot. And if you think you are … after reading this article you will not be one any more.
This is for all my friends who are into UI but don’t know the proper usage of JSON Object. Or the people who have heard about JSON but never been exposed to it.
JSON stands for Java Script Object Notation. JSON is a shorthand notation for declaring or constructing a custom object in Javascript.
“At first you must
Shake off the rust”
Let us be clear about what is an object in javascript. First question first… Can we create class, object etc in javascript?? Actually speaking “NO”. Javascript is not a Object Oriented Language. But it allows you to declare custom objects in addition to its primitive object types. So we can say that javascript is an object based language. So like other OO languages you cannot declare a class and then its constructor and then its object.
But what you can certainly do is, you can straight-away create a constructor which acts like a class and a constructor both.
So how can we create a class-constructor and instantiate an object out of it will be discussed some other time.
But for now we dig down to the definition of an object.
An object is an entity or collection of key & value pairs. A value can be of any kind of primitive data type. It can be even another object too.
Now I will cite an example of an object entity called “student”. We take a student whose name is Vivek and his age is 16 yrs.
So our object is having a key called “name” and the value for that key is “Vivek”. There is another key called age and the value of this key is “16″.
So if we translate that to JSON it becomes like this:
var student = {name: "Vivek", age:16};
So, if you need to access this object you say “Give me the student name and his age”.
And using javascript you translate it in the following syntax to alert one-by-one:
alert(student.name);
alert(student.age);
Now you feel like a programmer, isn’t it? Kewl.
Now lets check if we can go a bit more complex in it. The student has two phone numbers to get contacted. Actually he also has an email address. So if you create a category called “contacts” you can club all these items in it. So this also can become a key value pairs and hence, become an object:
What I mean is this:
var contacts = {landline: "918041278882", mobile: "919243176274", email: "vivek.pohre@gmail.com"};
But wait we actually wanted this to be a part of the student object… right? OK thats fair … we will push this to the student object.
So now after pushing the contacts to the student object, it looks like this:
var student = {// YOU CAN INFACT INDENT THE JSON OBJECT IN THIS WAY FOR BETTER READABILITY
name : "Vivek",
age : 16,
contacts :
{
landline: “918041278882″,
mobile : “919243176274″,
email : “vivek.pohre@gmail.com”
}
};
Wow, Now you know what is all that hi-fi code in the javascript libraries… hurray!!
OK but how do you access it again?
See how:
alert(student.contacts.landline);
alert(student.contacts.mobile);
alert(student.contacts.email);
So lets revisit the whole thing and use the technical terms to impress your colleagues:
I have an object called student which have different attributes(keys we say) like name, age, contacts and we can have some methods too for it. OK till attributes it was clear but what the well is method?
A method is a process which does something. What does it do? For example, if you want the student object to speak something about itself. Say when you command the student to speak it tells you his name, his age and his email id.
var student = {// YOU CAN INFACT INDENT THE JSON OBJECT IN THIS WAY FOR BETTER READABILITY
name : "Vivek",
age : 16,
contacts :
{
landline: "918041278882",
mobile : "919243176274",
email : "vivek.pohre@gmail.com"
},
speak: function()
{
alert(”My name is ” + this.name);
alert(”My age is ” + this.age);
alert(”My email id is ” + this.contacts.email)
}
};
OKAY… so now when you command by saying:
student.speak();
It throws 3 alerts which says My name is Vivek, My age is 16 and My email id is vivek.pohre@gmail.com.
Grreeeeeeeeeeat.
Have you ever heard people speaking about sending and receiving data in JSON using ajax?
So it is not so very big deal. You must be knowing that in ajax you get a string. Now if you assign this string to a temporary variable and evaluate it … you get a readymade object.
That means:
If you have a list of students on the HTML page and when a user clicks on a link. The interaction should be the speak command for that particular user.
Oho… how do you do that? Very simple… create an ajax call like this:
function commandStudent(name)
{
var returnText = ajax.gets("http://www.something.com/student?name=" + name);
if(returnText)
{
var tempStudent = eval(returnText);
tempStudent.speak();
}
}
Great man … now you are an ajax guru. Ask your manager to reevaluate your salary.
I ll explain sometime about how to send data from client side to the server using ajax and JSON.
“Your heart bears the fruit
When you go to the root”
Post Linx
Permalink | Trackback |
|
Print This Article | Leave a Comment
New Features in Firefox 3 (part 1)
February 22nd, 2008 Filed Under CSS, Javascript, Technology, browser
Hot and Cool features in Firefox #1
Right now firefox 3 is in its beta stage and the beta 3 is being pulled currently by the developers to test. Till now I didn’t find any thing which should say its a firefox bug.
Today I am going to present you some of the most discussed features and changes of firefox 3.
HTML: If you have ever come across the character set problem in Firefox; Be happy its fixed. For those who didn’t know this, I will explain a bit. Let us say you have a particular character set for a page declared. Now if you have a frame or an iframe in your page, let us say from a third party or from your own resources which needs to show a different character set .. it used to inherit the character set from the parent. For a long time, FF was not releasing any patch for this. Thank god somebody reported and its fixed now.
Javascript: Now Firefox supports javascript version 1.8. But as always, I am so skeptical about the usage. No body will forget Internet Explorer not having javascript 1.8 and hence how many people develop web apps and sites to run only on Firefox? But surely some of the features keeps the browser aside from others and may be considered for this. Let’s go ahead. Know more about javascript 1.8
Online/Offline events: Now I came to know the Google’s idea of having Gears at the place. Since FF was developing this feature Google Gears has clubbed this and two more features from FF and made it a plugin for all the browsers a user have. Although its not a bad idea. Egoistic Microsoft wouldn’t have done this at all. O.K. so let me tell you this feature in detail: This feature lets you know when the connection with the internet/intranet is available/unavaialble. This saves you from writing your own rings and eylets to check the connection availability. Very useful for offline apps capability. It is a property which sits in the navigator object and can be accessed by the syntax ‘navigator.onLine’ and the possible values are “ONLINE”/”OFFLINE”. The events can be fired from document, window or document.body. That means on the body tag you can write ononline=”” or onoffline=”” and from event attaching javascript you can write window.ononline or document.onoffline etc.
Cross-Site-Ajax: Yeah.. now thats possible. No need to use friendly iFrames(good name, no hifi technology). The W3C’s implementation guidline for access control states the control over who-can and can-not request from a browser. For example if I have a web service and I want my subscriber to use my service through ajax, I need to implement this: Access-Control: allow <jayanthsharma.com> on your page/servlet header. Now my subscriber can use my data to do mashups or whatever way he wants to present the data. No idea when IE will have the same capability. Untill then we may just endup by saying, “You must use Firefox 3 to access this site” … not a good statement though.
CSS Changes: FF3 now have alternative stylesheet support. This I read as a recommendation by W3C way back in 2000 or 2001. The new CSS implementation have some cool features, I’ll just discuss few of them:
a) rgba() and hsla(): red,green,blue,alpha and hue,saturation,luminosity,alpha. Whoot photoshop users. Time to celebrate!!
b) kerning and ligatures for text: Again its a feature from image editors like photoshop. It now supports the kerning and anti-aliasing for your text to look as good as in Photoshop. A bit slower process but worth having in the browsers. I don’t see the time away when banner ads can be designed using browser capabilities(Adobe has to purchase mozilla).
c) Hyphenation: Again something like photoshop. This feature was too much awaited for years. Now you can have a single string continuous which will ultimately break if there is no space horizontally. But what about previous versions? Can’t do anything about it… (booohooo) It will take at least 2 years to forget about the current browsers I presume.
Protocol Handling: There is a cool and certainly bad feature this time in FireFox 3. This features allows you to specify the protocol handler. For example if you have declared a protocol handler the “mailto” protocol like this:
navigator.registerProtocolHandler(”mailto”, “https://mail.google.com/mail?view=cm&tf=0&to=%s”, “GMAIL”);
and suppose you have a tag in your page like this:
<a href="http://www.vivekpohre.com/wp-admin/%E2%80%9Dmailto:vivek.pohre@gmail.com%E2%80%9D">Vivek Pohre</a>
Then instead of having his preferred email client a user will be thrown to the gmail application. Can’t digest this amore.
This list isn’t quite exhaustive. For more information, check out CSS Improvements in Firefox 3.
There is a lot more in Firefox 3 .. the other parts I would publish in subsequent posts.
Post Linx
Permalink | Trackback |
|
Print This Article | Leave a Comment