My contemplations and diurnal novelties are publicized here

Archive for May, 2012

Relative positioning not working ie7


I just came across a problem, where I have two hidden panel that show up when required. This works fine in all browsers except IE7. Have a look

See. The footer remains at its position. Footer was given the attribute

Position: relative

As well

Solution:-

    All I did is to add

overflow: hidden

in the parent container that contains this footer

References:-

http://stackoverflow.com/questions/2473171/ie7-relative-absolute-positioning-bug-with-dynamically-modified-page-content

Centering elements using CSS / How to Center Anything With CSS


Reference:- Copied and modified from
http://designshack.net/articles/css/how-to-center-anything-with-css/

Being a web developer you should know how to play with CSS to make you pages work smoothly.

Horizontally Center an Element

We will try to center a div

div
{
height200px;
width200px;
background#cfc;
}

As you can see, by default, our div pops up in the top left of the viewport.

We want this div to be centered. We will be using margins with auto attribute.

Margin shorthand starts at the top and works its way around clockwise.

Here’s another look at our centered div, this time with the margins declared using three separate but perfectly equivalent methods.

As you can see, our element is void of top and bottom margins, but the left and right are set to auto, which keeps the item perfectly centered.

Things to Keep In Mind

There are some important things to remember about using the auto margins trick. First of all, you must have a specific width declared for the element that you’re centering. The height declaration is not necessary, you can allow the content to determine the height if you wish, which is the default setting, but the width must always be set.

It’s important to note that while this trick will work on most block level elements, not just divs, it won’t help you out with vertical centering. As an example, let’s throw a paragraph inside of a div, then attempt to center that paragraph in the space.

div { 
 height: 400px; 
 width: 400px; 
 background: #eee; 
 margin: auto; 
} 

p { 
 width: 60%; 
 margin: auto; 
 font: 14px/1.5 Helvetica, sans-serif; 
} 

As you can see, I have auto margins set both on the paragraph and its parent div. This centered everything nicely horizontally, but it didn’t have any effect on the vertical position.

Center An Absolutely Positioned Element

The method above works to automatically center one item inside another, but the method assumes that you’re using the default positioning context: static. If you have absolute positioning applied, this method goes out the window.

Using the absolute and relative positioning methods we learned last week, we can apply a simply formula to solve this issue.

Here we see that on an absolutely positioned item contained inside of a relatively positioned item, we need to set the left property by plugging some numbers into this formula. Here’s a test case:

.container { 
 height: 300px; 
 width: 300px; 
 background: #eee; 
 margin: 10px auto; 
 position: relative; 
} 

.box { 
 height: 100px; 
 width: 100px; 
 background: #222; 
 position: absolute; 
} 

Let’s see if we can center the black box horizontally. Using our formula, we can see that the left property needs to be set to 100px.

.container { 
 height: 300px; 
 width: 300px; 
 background: #eee; 
 margin: 10px auto; 
 position: relative; 
} 

.box { 
 height: 100px; 
 width: 100px; 
 background: #222; 
 position: absolute; 
 left: 100px; 
} 

With this code, we’ve set the distance between the left side of the box and the edge of its parent container to 100px, which centers it perfectly.

With Fluid Width

The method above only works if the parent container has a static width. Given the popularity of responsive design though, more and more containers are going the fluid route lately. This means that we’ll need another way to center the child that isn’t dependent on the width of the parent.

To accomplish this, we need to use a percentage for the left value. The obvious answer is to use 50%, but that won’t really work because you’re not accounting for the width of the element that you’re centering. To make it work, we need to add in a negative left margin of half the width of the child element.

Using this logic, we apply a left margin of negative fifty pixels along with a left value of 50% and our div is once again perfectly centered on the x-axis.

.container { 
 height: 300px; 
 width: 70%; 
 background: #eee; 
 margin: 10px auto; 
 position: relative; 
} 

.box { 
 height: 100px; 
 width: 100px; 
 background: #222; 
 position: absolute; 

 /*Centering Method 2*/ 
 margin: 0px 0 0 -50px; 
 left: 50%; 
} 

It’s important to note that this would also work if our child element had a fluid width. We use the same steps as before and come up with something like the following:

.container { 
 height: 300px; 
 width: 70%; 
 background: #eee; 
 margin: 10px auto; 
 position: relative; 
} 

.box { 
 height: 100px; 
 width: 70%; 
 background: #222; 
 position: absolute; 

 /*Centering Method 2*/ 
 margin: 0px 0 0 -35%; /* Half of 70% /* 
 left: 50%; 
} 

Dead Center an Element

Now that we have a few simple and complicated centering methods in our tool belt, it’s time to tackle the puzzle of perfectly centering an element both horizontally and vertically.

Fortunately, to pull this off, we can use the same method that we just learned, we just have to account for height. This time around we’re also going to center both the parent and the child both vertically and horizontally. Here’s the code to pull it off:

.container { 
 height: 300px; 
 width: 300px; 
 background: #eee; 
 position: absolute; 

 margin: -150px 0 0 -150px; 
 left: 50%; 
 top: 50%; 
} 

.box { 
 height: 100px; 
 width: 100px; 
 background: #222; 
 position: absolute; 

 /*Centering Method 2*/ 
 margin: -50px 0 0 -50px; 
 left: 50%; 
 top: 50%; 
} 

There are a few things that you need to notice here. First, this time both the parent and the child are absolutely positioned. From here, I used our negative margins trick with the left property on the container div, then did the same for the box div.

The result is that our content is completely centered and will stay that way as the browser changes size in any direction (even vertically!). Click on the image below to tinker with a live demo.

Centering Text

For my next trick, I’ll teach you something cool about centering text. We’ll start with a simple h1 element inside of a container div.

Now, I’m sure that you already know how to center this text horizontally in the space. It’s typically one of the first things you learn in CSS. Just set the text-align property to center.

.container { 
 height: 400px; 
 width: 400px; 
 background: #eee; 
 margin: 50px auto; 
} 

h1 { 
 font: 40px/1 Helvetica, sans-serif; 
 text-align: center; 
} 

Easy right? But now let’s say we want to center this line of text vertically as well. If this were a paragraph, we would probably take the methods above into account, but since it’s only a single line, we can use a nifty trick.

All we have to do is set the line-height property to the height of the container. I accomplished this below using the shorthand font syntax.

.container { 
 height: 200px; /*Set line-height to this value*/ 
 width: 400px; 
 background: #eee; 
 margin: 150px auto; 
} 

h1 { 
 font: 40px/200px Helvetica, sans-serif; 
 text-align: center; 
} 

Warning: This trick only works with a single line of text, and is a bit hacky so it may not be appropriate for all situations.

Centering a Background Image

The last thing that we’re going to learn to center is a CSS background image. To get started with this, we’ll create another container div, but this time we’ll keep in empty and toss in an image using CSS.

.container { 
 height: 300px; 
 width: 300px; 
 margin: 150px auto; 
 background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat; 
} 

As you can see, the default place for an image to appear if no repeat is set is the top left. It turns out though that you can move it to one of nine different preassigned slots. These are shown below:

We accomplish this movement through the use of the background-position property. Simply call this property and set any of the values listed above.

.container { 
 height: 300px; 
 width: 300px; 
 margin: 150px auto; 
 background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat; 
 background-position: top center; 
} 

As an alternative, we can use the shorthand syntax for this. Simply toss in one of the values at the end of your stream of values on the background property.

.container { 
 height: 300px; 
 width: 300px; 
 margin: 150px auto; 
 background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat center; 
} 

Conclusion

There you have it! You should now be completely confident in your ability to tackle almost any centering situation with CSS, from dead centering a div to vertically centering a line of text within its container and beyond.

How twitter can play a role in Software engineer(s) career


Twitter if used (properly) can play a major role in your career (Believe me it’s not just specific to Software Engineer. This can be any occupation).

Following are some steps I would suggest if you are new to twitter

  1. Make a twitter account. I think you already have one. (twitter.com)
  2. Following some good source here I am mentioning just a few
    1. https://twitter.com/#!/hellowahab (Obviously i do post several technology articles J)
    2. Open Source Software
      1. https://twitter.com/#!/sourceforge
      2. https://twitter.com/#!/NewsNodejs (NODE JS)
    3. Web design and UI
      1. https://twitter.com/#!/DesignMagTweets
      2. https://twitter.com/#!/smashingmag
  3. Make sure to unfollow the one who tweet thing out of your career scope.
    1. Indian Actors: (I just un followed J)
      1. https://twitter.com/#!/ameesha_patel
      2. https://twitter.com/#!/realpreityzinta
      3. https://twitter.com/#!/AnupamPkher
      4. https://twitter.com/#!/juniorbachchan
      5. https://twitter.com/#!/bipsluvurself
      6. https://twitter.com/#!/NargisFakhri
      7. https://twitter.com/#!/TandonRaveena
      8. https://twitter.com/#!/priyankachopra
      9. https://twitter.com/#!/ajaydevgn
      10. https://twitter.com/#!/DuttaLara
      11. https://twitter.com/#!/shahidkapoor
      12. https://twitter.com/#!/Minissha_Lamba
      13. https://twitter.com/#!/Jackie_alien
      14. https://twitter.com/#!/amuarora
      15. https://twitter.com/#!/deepikapadukone
      16. https://twitter.com/#!/TusshKapoor
      17. https://twitter.com/#!/deespeak
      18. https://twitter.com/#!/kapoorkkunal
      19. https://twitter.com/#!/imarshadwarsi
      20. https://twitter.com/#!/akshaykumar
  4. Whenever you find a website, blog, person pioneer in your field add it/him to you following list
  5. Be mature to post only stuff related to career. Don’t post what you eat and when you sleep. People will take you blithely, either they will kick you out of their following or will ignore your tweet.
  6. Try reading the post and express you view also to take part in tech discussions.

Getting started with JS Fiddle


I did come across JS fiddle couple of months ago and didn’t find a meaningful use. So I left it. Now after reading some useful article from Chris Coyier I realized the power of jsFiddle.

Introduction:-

    JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc. All this statement is useful if you are unable to use the system or don’t know what it can achieve so here are few live demonstrations:-

Some worthy examples:-

You might have guessed so far how we can use it for our own ease. Let me explain a more for your ease.

The jsFiddle environment:-


Once the site is loaded, web page seems divided into various sections. The left portion of the page is the menu area where you can configure the jsFiddle environment. The main section of the site (on the right) is divided into four areas:

CSS: Enter CSS to be applied to the HTML used in your tests. It is placed between <style> elements in the header portion of the page.

HTML: This area allows you to enter HTML to be used in your tests. By default, it will appear between <body> elements on the page unless overridden by options in the left pane. It works directly with the CSS and JavaScript entered in their respective areas. JavaScript entered within <script> elements may be entered here as well.

JavaScript: JavaScript source is entered in this area. It appears within <script type=”JavaScript”> tags in the header portion of the page. The options on the left allow you to choose which libraries/frameworks are used, so the code in this section does not have to include those.

Output: The results of executing the CSS, HTML, and JavaScript entered into the sections of the page.

Working with the jsFiddle interface

The top of the page includes a line of buttons to use some of these features. These buttons include:

Run: Executes the code entered in the areas on the page and display the results in the output area.

Fork:
Creates a new example using the current code as the base.

Reset: Clears all the areas of the jsFiddle interface.

TidyUp: Cleans up your JavaScript code by indenting code blocks.

JSLint: Uses the JSLint tool to perform static code analysis of the code in the JavaScript area of the page.

Share: Allows you to share code from the jsFiddle page with other users. The options include Facebook and Twitter, it and provides a link and the code to embed it on a website (for example, in a blog).

The left pane of the jsFiddle interface allows you to set up the development environment. The following list provides a sample of the available features:

JavaScript placement: The first dropdown defines where the JavaScript code is placed and executed. The default is onLoad, which means it is executed via the web page’s onLoad event. Other options include placing it in the page’s header or body.

JavaScript library: The second dropdown allows you to use one of various JavaScript frameworks, which include MooTools, jQuery, Prototype, YUI, and much more. Also, it supports the various versions of these tools. This is a great feature because you can play with these libraries without downloading and setting up your own environment.

Panels: The jsFiddle interface includes the three code areas, but there are options for the CSS and JavaScript areas. You can choose to utilize SCSS instead of CSS and use CoffeeScript instead of JavaScript.

Info: Enter a title and description that are important when saving/sharing. In addition, you can specify the body tag and DTD utilized.

Examples: This selection makes it easy to get up and running with the tool so you can get a feel for its features and how it may be used.

References:-

  1. http://doc.jsfiddle.net/
  2. http://www.techrepublic.com/blog/programming-and-development/jsfiddle-an-online-playground-for-your-javascript-html-css/5258
  3. http://jsfiddle.net

Using jquery to get favicon from a URL


Let say if you have following links present on you webpage

<href=https://hellowahab.wordpress.com>hellowahab</a>
<href=http://www.google.com>Google</a>

And you want favicons to be displayed with links then you can use following line of code

function getDomain(url) {
return url.match(/:\/\/(.[^/]+)/)[1];
}

$(“a[href^=’http’]”).each(function() {
$(this).css({
background“url(//favicon.yandex.net/favicon/” getDomain(this.href) +
“) left center no-repeat”,
“padding-left”“20px”
});
});

A bit of css

displayblocktext-decorationnonepadding5px; }

You can view demo here http://jsfiddle.net/hellowahab/bTQaa/

References:-

  1. http://jsfiddle.net/6Vg7t/20/
  2. http://css-tricks.com/favicons-next-to-external-links/?utm_source=dlvr.it&utm_medium=twitter

Getting started with Node.js


I have Windows 7 Ultimate installed. Following are the steps how I achieved my first program up and running

  1. Download Node.js installer from here http://nodejs.org/#download
    1. Follow default setup steps to install this installer.
  2. Once installed you will find nodejs located some where here C:\Program Files\nodejs
  3. Save the code below inside in example.js and save it inside same location at C:\Program Files\nodejs\

    var http = require(‘http’);
    http.createServer(function (request, response) {
    response.writeHead(200, {‘Content-Type’: ‘text/plain’});
    response.end(‘Hello World\n’);
    }).listen(8124);

    console.log(‘Server running at http://127.0.0.1:8124/‘);

  4. Run command prompt Run -> cmd
  5. Point to the same location in command prompt C:\Program Files\nodejs\ and
    type node example.js

  1. You page is up and running

Safer event handling with jQuery namespaced events


How you apply and remove event handlers may also cause problems that can be really hard to troubleshoot. E.g if you had attached a function to the window.resize event. Calling the following script will remove all window.resize handlers:

$(window).unbind(‘resize’);

jQuery provides an easy way to avoid this: Namespaced Events. When binding a function to an event, simply add a namespace:

$(window).bind(‘resize.mynamespace’, function () {

// Do something useful

});

Now if you need to unbind the function from the event, you can do it safely without affecting other scripts that use the same event:

$(window).unbind(‘resize.mynamespace ‘);

References:-

http://www.456bereastreet.com/archive/201205/safer_event_handling_with_jquery_namespaced_events/

%d bloggers like this: