Mohammad Sayeed

Icon

Expertise in Usability, User Experience Design, Information Architect & Front-End Technologies

How poor are the Web Designers (VS Web Developers)

web-designers-vs-developers

IE7 bug ‘overflow:scroll’ does not works, if inside div have ‘position:relative’

I recently came across a IE7 bug that I thought I’d like to share. This bug occurs, if the main div have the ‘oberflow:scroll’ & inside div have the ‘position:relative’.

I believe the easiest way to recreate this bug would be the following:

lorem ipsum

The easiest fix would be to add ‘position: relative’ to the main div. This will make IE7 work as intended. So finally, It should be:

lorem ipsum

Learn more about the CSS Overflow Property, browse the interesting post click here.

Difference between jQuery ‘$(document).ready()’ and ‘$(window).load()’ function & usage

This post lead me to write, when i was using the jQuery ‘$(document).ready()’ function & struck with the issue. I was adding the css class

To know the difference, it’s important to understand the three things:

  1. $(document).ready()
    Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

    
    
  2. What is DOM?
    DOM stands for Document Object Model, It defines the logical structure of documents and the way a document is accessed and manipulated. It is based on an object structure that closely resembles the structure of the documents it models. For instance, consider this table, taken from an HTML document:

    Shady Grove
    Over the River, Charlie

    In the above example, the root node is table. The table node has two child nodes; tr and td.

    DOM is the logical structure which is very much like a tree; to be more precise, which is like a “forest” or “grove”, which can contain more than one tree.

  3.  $(window).load()
    
    

    The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

    Sometimes if you want to manipulate pictures. For example you want to verticaly and horizontaly align a picture and you need to get the width and height of the picture in order to do that. With $(document).ready() you won’t be able to do that if the visitor doesn’t have the image already loaded, in this case window.load can initialize the jquery alignment function when the image finishes loading.

Simple image mouseover through jQuery

Mouseover is common behavior for the images, required in any website across the pages. So it’s a good idea to keep this functionality in common script file. Simple jQuery code can make the life easier, just follow the below steps:

Step1: Add the jquery library, if not added

Step2: Add the below code with the script tag

Step3: Add the css class ‘rollover’, in which image you want mouseover

Step4: Add the images ‘normal’ & ‘mouseover’ in same location, ending with ‘imagename_off.gif’& ‘imagename_on.gif’.


Image file type(gif, jpg, png) can be anything, just be careful add the both images (normal/mouseover) with the same file type & in the same location.

Customizing the Accordion header background color in Flex 3

I was really stuck with to change the accordian each item header color, i was trying with

accordion.getHeaderAt(0).setStyle("backgroundColor","red");
accordion.getHeaderAt(1).setStyle("backgroundColor","green");

Thanks to Peter deHaan for the post ‘Customizing the Accordion header in Flex 3′. See the example below for the Customizing the Accordion each item header background color in Flex 3.




  [CDATA[
   private function init():void {
     accordion.getHeaderAt(0).setStyle("fillColors", ["red", "red"]);
     accordion.getHeaderAt(1).setStyle("fillColors", ["haloOrange", "haloOrange"]);
      accordion.getHeaderAt(2).setStyle("fillColors", ["yellow", "yellow"]);
      accordion.getHeaderAt(3).setStyle("fillColors", ["haloGreen", "haloGreen"]);
      accordion.getHeaderAt(4).setStyle("fillColors", ["haloBlue", "haloBlue"]);
            }
        ]]>
 


        
        
        
        
        


New Buzz!

Greetings Visitor…!!!

This is my first post but I have the lots of ideas behind this. This blog mainly concern in the area of web trends & technologies and new development in web.

Feel free to nose about and keep visiting. You can drop me your comment about my Blog or to contact me click on Contact us. Lets keep good work going…….hope you will enjoy touring my site in coming time…!!!

Categories

Random Quote

All your dreams can come true. It s not easy but not impossible either. — Robert Rodriguez