Sunday, April 26, 2009

Problem with HTML table in blogspot post

Problem: Every time I try to insert a table, I create a huge space between the last line of text and the table. How do I prevent the space gaps?
This article will give solution for this problem.

Example of HTML table with empty space between the last line of text and the table when blogspot post is published:










A B
C D



This is problematic HTML code for table:

<table border="1" cellspacing="0" cellpadding="3" width="50%" align="center">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>



Problem is new lines. When you publish this code blospot will every new line represent with </br>. To resolve this problem in "Edit Posts" you should write all HTML table code in one line.

HTML code for table in blogspot post without unwanted empty space:

<table border="1" cellspacing="0" cellpadding="3" width="50%" align="center"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>


Example without empty space:

AB
CD


This rule also apply for writing javascript inside blogger post and jquery inside blogger post.



Wednesday, April 15, 2009

jQuery don't work but there is no error message

I installed IE 8 and take a look at cool new features. Everything seemed nice, but then I noticed that in my article with jQuery examples my demos which using jQuery code not working. It worked well in Firefox, Chrome and Internet Explorer 7. Compatibility view does not help. There was no error message but nothing happened when clicked on button which fired jQuery code. Testing html pages on my local computer with jQuery code don't work too.

i tried to go on jQuery documentation in Internet explorer 8 but couldn't find a working demo. But with other browsers same page have a properly working demo.

There are examples of web pages which uses jQuery and doesn't work well in IE 8 (without throwing error) but worked on other browsers:



Does jQuery work on Internet Explorer 8?


Yes! It looked like IE 8 is a source of problem but it is not.

Security setting is a reason why jQuery doesn't work. Active scripting must be enabled. It was disabled and because problem listed in this article appeared.

To enable Active scripting:

Click Tools --> Internet Options --> Security tab

Select Internet zone (world globe) --> Click Custom level

Internet options - Security tab

Click on Enable Active Scripting and clik OK.

Enable Active Scripting

Tuesday, April 14, 2009

IE developer tools - integrated in IE 8

Do you want to debug jscript, inspect and edit HTML code directly from web browser?
Internet Explorer 8 includes tools that Web developers need to efficiently debug
their sites directly in Internet Explorer. Developers can debug a site's HTML, CSS, and Microsoft® JScript from within Internet Explorer 8 (with developer tools), rather than switch between Internet Explorer and a separate development environment.
This article give a brief review why and how to use IE 8 developer tools.

Why use Developer tools?

You may want to quickly debug JScript, investigate a behavior specific to Internet Explorer, or test a new design or try solutions to a problem. In these and similar scenarios, Internet Explorer 8 includes easy-to-use Developer tools that have a few important characteristics:

  • Integrated and simple to use - An instance of the Developer Tools comes with every installation of Internet Explorer 8. This enables debugging on any machine running Internet Explorer 8. In addition, the tools only load when needed to limit the impact of the tools on browser performance.

  • Provide a visual interface to the platform - Instead of reverse engineering how your site works or modifying your site to output debug information, the Developer Tools let you look into Internet Explorer to view its representation of your site.

  • Enable fast experimentation - When prototyping a new design or testing fixes in previous versions of Internet Explorer, you likely edit your source, save it, refresh your page in the browser, and repeat. The Internet Explorer 8 Developer Tools streamline this scenario by letting you edit your site within the browser and see changes take effect immediately.

  • Optimize application performance - Identifying and fixing performance issues is usually an iterative approach done by focusing on one scenario at a time. With the Internet Explorer 8 Developer Tools script Profiler, you can collect statistics like execution time and number of times a JScript function was called as you test your application and use the profile report to quickly identify and fix performance bottlenecks.



How to use Developer Tools

To begin using developer tools, click the Developer Tools icon in the Tools drop down menu (or press SHIFT+F12):

Enable Developer tool in IE 8

The Developer Tools have three modes: HTML, CSS, and Script. Each mode provides tools for inspecting and debugging that content type.

HTML mode

HTML mode lets you explore the DOM tree exactly as it exists in Internet Explorer. The DOM tree lists elements as well as attributes and values.
For example we can go on www.google.com. Open Developer Tools and choose HTML tab.

HTML tag in developer toolbar in IE 8

Clicking an attribute or value makes it editable. If we click on title and change "Google" to "My Google Test" after removing focus from the editable value commits the change back to Internet Explorer and causes the page to update immediately.
Now title bar text is "My Google Test".

IE 8 changed title bar


To visual select an element, enable Select Element by Click (first icon (arrow) or CRTL + b) and click any area of the site.
In example below "Select Element by Click" is clicked (1) and then is clicked on Advanced Search (2). In the end Text is edited to "Advanced Search Test" (3).

Select element by click


The Layout tab displays a visual representation of the box model and corresponding values for the selected element:


Layout tab in IE 8


  • The offset values display the distance to the parent object as defined by the offsetLeft and offsetTop properties

  • The margin, border, and padding values display corresponding values specified by the author

  • The innermost values are the element's height and width as defined by the offsetHeight and offsetWidth properties<(li>


The Style tab and Trace Style tab are very similar. Style tab lists all style rules that apply to the selected element in cascade order, with overruled styles struck through while in Trace Style styles are grouped by property instead of by rule. This makes the computed value of a property immediately visible. So we can say that Style view is inverse of Trace Style.

Example of Style view:

IE 8 developer tools with selected Style tab

Example of Trace Style view on same HTML element:

Developer tools in IE 8 with selected Trace Styles

CSS mode


In CSS mode, choose any CSS file used on the site to view an expandable tree view of all style rules in the file.


Example of JScript debugging with developer tools in IE 8

To see how to debug java script code in IE 8 you can go on test page with IE 8 and follow instructions :

  1. Turn on Developer tools (press F12)


  2. Click on Script tab


  3. Insert breakpoint on line 10


  4. Debug jscript with developer tools in IE 8 - Script tag and breakpoint

  5. Click "Start Debugging"

    • To debug currently running script sessions that started with script debugging disabled, Internet Explorer must first refresh the page. Before refreshing, Internet Explorer displays a dialog box asking if users want to refresh or cancel.



  6. Click on button "Call function".

    • Button Call function calling jscript function "calculate"



    Click on Call function

  7. Now you are in debug mode. Click on tab Locals and you will see that value of variable is 1.


  8. Click on icon Step Into (F11) Next line to execute current line of jscript code and go on next

    • Step into - Executes the next line of script and pauses, even if the next line is inside a new method. (Keyboard shortcut: F11)

    • Step over - Executes the next line of script, continues until the next line of script in the current method, and then pauses. (Keyboard shortcut: F8)

    • Step Out - Continues executing script until the next line in the method that called the current method. (Keyboard shortcut: SHIFT+F11)

    • Continue - Continue running script without pausing until hitting another breakpoint (if any are set).(Keyboard shortcut: F5)

    • Break All: - Pause execution before the next script statement to be executed



  9. Now you are at line 11. Take a look at Locals and you will see that i has value 11 (this is because line 10 : i = i + 10, so 11 = 1 + 10)

    • The Locals tab within Script mode displays the name, value, and type of all variables available in the current execution scope. So with help of Locals tab you can track values of variables.

    Debuggin in IE 8 - Locals tab



  10. Go to line 11, move mouse pointer to i, right click and choose "Add Watch". You can see that variable "i" is added in Watch tab.


  11. Add Watch

    • Use the Locals pane to view local variables and the Watch pane to monitor a custom list of variables. You can add variables to this list by right-clicking in the source and clicking Add Watch or typing the variable name in the Watch pane.


  12. Click on Call Stack pane and you should see that "JScript - onclick function" fired "calculate" function.


  13. After two more steps (click "Step Into" two times), function "calculate" called function "divide", we are at line 20 inside function "divide". Call Stack pane provides a list of execution contexts : divide is called by calculate which is called by "JScript - onclick function"


  14. Debugging jscript - Call stack pane

    • To jump to any stack item, double-click the item. The debugger will bring that method into view in the Primary Content Pane. On the picture calculate function is clicked in Call Stack pane (call to divide function line 20 is highlighted in green color)


Profiler

The Profiler gives you data on the amount of time spent in each of your site's JScript methods. Since you can start and stop the JScript Profiler at any time during application execution, you can collect multiple profile data for the specific scenario that interests you.
Let's see on example:
  1. Go on test page with IE 8, choose profiler pane and click on button "Start profiling"

  2. On test web page click button "Call function"


  3. Click on Call function

  4. Clik Ok to close Message Box


  5. Click Stop Profiling in Profiler Pane


  6. Now we have list of functions and their spent of time. Function divide is very simple so it takes 0 ms. Function calculate takes time needed to click Ok on message box. Even onclick is event that fired function calculate. Maybe this is not best example but it is good enough to understand main concept of Profiler.

    Profiling with IE 8 developer tools

    The profile reports can be viewed with either the Functions or the Call Tree view, which can be selected from the Current View drop-down list.

    - The Functions view lists all the functions used

    - The Call Tree view provides the hierarchy of calls



Related articles on this blog:
New features in Internet Explorer 8



Related articles from other sources:
Discovering Internet Explorer 8 Developer Tools on MSDN


Sunday, April 5, 2009

New features in Internet Explorer 8

Windows Internet Explorer 8 (abbreviated IE8) is the latest web browser developed by Microsoft. The Internet Explorer 8 is out, and clearly there have been some big advances since IE 7.

You can ask yourself : Why do I want to use Internet explorer 8?
The answer may be : because of new features and improvements.

So let's see new features:


  • Integrated developer tools


  • Do you want to debug jscript, inspect and edit HTML code directly from web browser? Now developers can debug a site's HTML, CSS, and Microsoft® JScript from within Internet Explorer 8 (with developer tools), rather than switch between Internet Explorer and a separate development environment. Developer tool exists in early versions of IE as a add-in, now it is integrated in IE 8. If you want to know more about developer tools visit article How to improve efficiency in web design with IE 8.


  • Increased performance


  • Internet Explorer 8 includes many performance improvements that contribute to a faster, more responsive web browsing experience in the areas that matter most. Internet Explorer 8 starts quickly, loads pages fast and instantly gets you started on what you want to do next with a powerful new tab page. In addition, the script engine in Internet Explorer 8 is significantly faster than in previous versions, minimizing the load time for webpages based on JavaScript or Asynchronous JavaScript and XML (AJAX).

    Google has commented on IE8 Beta 1 improvements (IE 8 team claim that Internet Explorer 8 is even faster since then):

    "Some of the tests we have done show pure JScript performance improvements up to 2.5 times. We also measured the performance gains on common Gmail operations, like loading the inbox (34%), opening a conversation (45%) and opening a thread (27%) compared to IE7."

    For more details about Internet Explorer 8 performance see article IE8 Performance.

    Microsoft published a report “Measuring the Performance of Browsers”. Published document explain the various benchmarking components and how they impact the performance, document also outline how to setup their own benchmarking environment to test browser performance. For further details Measuring the Performance of Browsers is available for download over the Microsoft download Website. Below is a result for first five webs from report "Measuring the Performance of Browsers".


    Summary of Browser Load Times (in seconds)

    Website

    Chrome 1.0

    Firefox 3.05

    IE 8

    google.com

    0.28

    0.22

    0.20

    yahoo.com

    2.15

    1.30

    1.32

    live.com

    3.48

    3.42

    3.40

    msn.com

    0.55

    0.97

    0.83

    youtube.com

    3.07

    2.80

    2.55



    If you don't believe Microsoft you should take a look at independent article Beta Browser Battle 2: Page-load times.


  • Accelerators


  • The new Accelerators in Internet Explorer 8 help you quickly perform your everyday browsing tasks without navigating to other websites to get things done. Simply highlight text from any web page, and then click on the blue Accelerator icon that appears above your selection to obtain driving directions, translate and define words, email content to others, search with ease, and more.

    For example you can use easily call accelerator Translate with Live Search in few clicks and get translated web page without navigating to Live Search page. You just need right click on visited web page, choose "Translate with Live Search", choose language and you will get translated page.

    Sample of using accelerator Translate with Live search

    You can find list of accelerators that you might want to add to your IE8 with their brief description here:


    Firefox users can find implementation of IE8 Activities (now called Accelerators) as Firefox Add-on which is near direct replication of Accelerators.


  • Enhanced navigation



    • Compatibility View

    • Internet Explorer 8 is a new release and some websites may not yet be ready for Internet Explorer 8. Click the Compatibility View toolbar button to display the website as viewed in Internet Explorer 7, which will correct display problems like misaligned text, images, or text boxes. This option is on a per site basis and all other sites will continue to display with Internet Explorer 8 functionality.

      Microsoft has provided a list of web sites that are most likely to be displayed better in Compatibility View in Windows Internet Explorer 8. This list have over 3,000 web sites.

      When users install Windows Internet Explorer 8, they have a choice about opting in to a list of sites that will be displayed in Compatibility View. Sites are listed on the Compatibility View list in response to feedback from other Internet Explorer 8 customers. Specifically, the feedback is based on the high-volume sites for which other users clicked the Compatibility View button. This list updates automatically and helps users who are not Web-savvy have a better experience with Web sites that are not yet Internet Explorer 8-ready.

    • Enhanced Tabbed Browsing

    • Internet Explorer 8 introduces Tab Groups, which make tabbed browsing easier. When one tab is opened from another, the new tab is placed next to the originating tab and color coded, so that you can quickly see which tabs have related content. If you close a tab that's part of a group, another tab from the same group is displayed, enabling you to remain within the context of the current task rather than suddenly looking at an unrelated site.

      Example of grouped tabs in IE 8

    • Better Find On Page


    • The toolbar is integrated below the tab row, so that it does not obscure any content on the page. Instead of waiting for you to type an entire search term and hit Enter, the toolbar searches character-by-character as you type. Matches are highlighted in yellow on the page so that they're easy to identify.

    • Smarter Address Bar


    • Type a few characters in the new Address Bar and Internet Explorer 8 will automatically recall sites you've already visited based on your entry. It searches across your History, Favorites, and RSS Feeds, displaying matches from the website address or any part of the URL. As you type, matched characters are highlighted in blue so you can identify them at a glance. In addition, you can delete any address in the drop-down box by clicking on the red X. This is especially useful for getting rid of misspelled URLs.


    • Improved Zoom


    • Adaptive Page Zoom improves upon traditional zoom-in/zoom-out functionality in the browser by intelligently relaying out the page content and eliminating the need to scroll left and right. This will improve your ability to magnify pages with small fonts and be able to read more on the web.



  • Improved favorites and history management



    • Enhanced Favorites Bar


    • Now there's a better place to keep track of your top favorites. You can save Favorites, RSS Feeds, and Web Slices to the Favorites bar that appears across the top of the browser, quickly navigating to the sites and content that you care about most.

      Favorites bar in IE 8


    • One Click Favorites


    • Press the One Click Add to Favorites bar button and immediately add the page you're browsing to the Favorites Bar, saving you extra clicks.

    • RSS feeds on Favorites bar


    • The Favorites bar has been updated so you can drag an RSS feed to your Favorites bar, making it easier to see when important feeds are updated.

    • History sorting


    • The new Browsing History view allows you to sort your history by Site Name, Most Visited Sites, Order Visited Today, and Date, making it easier to organize and locate sites in your history.

    • History searching


    • In Internet Explorer 8, you can search for pages in history by typing keywords, making it easier to locate sites when browsing your history.



  • Instant search


    • Search suggestions


    • The new search capabilities in Internet Explorer 8 will offer relevant suggestions as you type words into the search box to help save time. Click on a suggestion at any time to immediately execute the search without having to type the entire word or phrase.

    • Visual search


    • Internet Explorer 8 is partnering with top search providers like Live Search, Wikipedia, Yahoo, Amazon, and more to deliver "visual search" images that provide you with immediate answers. For example, typing "Obama" with Live Search will instantly show you a preview of the current weather directly in the Search Box drop-down. You can choose providers with click on "Find more providers". In picture bellow Wikipedia visual search is selected.

      Visual search in internet explorer 8


  • Web Slices


  • Using Web Slices, you can keep up with frequently updated sites directly from the new Favorites Bar. If a Web Slice is available on a page, a green Web Slices icon will appear in the upper-right hand corner of the browser. In this moment ebay site uses web slices. Click on this icon to easily subscribe and add the Web Slices to the Favorites Bar so you can keep track of that "slice" of the web.

    Add web slice from ebay

    After Web Slices is added you can click Web Slice on Favorites Bar to preview relevant information without visits web site. In example on those two pictures user track bids for laptop with help of Web Slice.

    Web Slice in favorites bar



  • Automatic crash recovery


  • If a website or add-on causes a tab to crash in Internet Explorer 8, only that tab is affected. The browser itself remains stable and other tabs remain unaffected, thereby minimizing any disruption to your browsing experience.
    If one or more of your tabs unexpectedly closes or crashes, your tabs are automatically reloaded and you are returned to the site you were on before the crash.


  • Browse privately



    • InPrivate Browsing


    • When checking e-mail at an Internet cafĂ© or shopping for a gift on a family PC, you don't want to leave any trace of specific web browsing activity. InPrivate Browsing in Internet Explorer 8 helps prevent your browsing history, temporary Internet files, form data, cookies, and usernames and passwords from being retained by the browser, leaving no evidence of your browsing or search history.

      You can start InPrivate Browsing by opening a new tab and selecting Browse with InPrivate or selecting it from the Safety button on the top right corner of the browser window. Once you complete this action, Internet Explorer 8 will launch a new browser session that won't record any information, including searches or webpage visits. To end your InPrivate Browsing session, simply close the browser window.

      Firefox fans can use Private Browsing 1.2.0 which enables not only private no history browsing, but the ability to clear certain, part or all of browsing history when closing Firefox. This will work in Firefox 3.0.8, however the Beta build of Firefox 3.1 has Private Browsing built right in.

    • InPrivate Filtering


    • Today websites increasingly pull content in from multiple sources, providing tremendous value to consumer and sites alike. Users are often not aware that some content, images, ads and analytics are being provided from third party websites or that these websites have the ability to potentially track their behavior across multiple websites. InPrivate Filtering provides users an added level of control and choice about the information that third party websites can potentially use to track browsing activity.

      InPrivate Filtering is off by default and must be enabled on a per-session basis. To use this feature, select InPrivate Filtering from the Safety menu. To access and manage different filtering options for Internet Explorer 8, select InPrivate Filtering Settings from the Safety menu. To end your InPrivate Browsing session, simply close the browser window.

For Firefox users I recommend very interested article Duplicate IE 8 Features in FireFox 3.

Related articles on this blog:
IE developer tools - integrated in IE 8


Related articles from other sources:
Microsoft Internet Explorer 8: the good the bad and the ugly


Thursday, April 2, 2009

jQuery selectors samples

jQuery selectors are one of the most important part of jQuery. Their main purpose is to allow users to quickly and easily identify and manipulate any set of page elements.
The selector is a string expression that identifes the set of DOM elements that will be collected into a matched set to be operated upon by the jQuery methods (but we will focus on selectors). In this article you will find samples of using jQuery selectors.

Basics



#id

Matches a single element with the given id attribute.

Sample:

$('#SelectMe')

This selector select element with id SelectMe.

<p id="SelectMe" style="display:none">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>





element

Matches all elements with the given name.

Sample:

$("p")

This selector select all paragraph (p) elements.

<p id="SelectMe" style="display:none">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<button id="butSelect">Select</button>


For example if we call:

$("p").toggle();

both paragraphs will be toggled.




.class

Matches all elements with the given class.

Sample:

$(".testClass")

This selector select all elements with class testClass.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<button id="butSelect" class="testClass">Select</button>




*

Matches all elements.

Sample:

$("*")

Matches all elements.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<button id="butSelect" class="testClass">Select</button>





selector1, selector2, selectorN


Matches the combined results of all the specified selectors.

Sample:

$("#SelectMe, .testClass")

This selector select element with id #SelectMe and elements with class testClass.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<button id="butSelect" class="testClass">Select</button>



Hierarchy




ancestor descendant

Matches all descendant elements specified by "descendant" of elements specified by "ancestor".

Sample:

$("div p")


This selector select all paragraph (p) elements which are in div element.

<div id="divToSelect">
<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="testInput" />
</div>
<button id="butSelect" class="testClass">Select</button>



parent > child


Matches all child elements specified by "child" of elements specified by "parent".

Sample:

$("div > p")

This selector select all paragraph (p) elements which are in div element.

<div id="divToSelect">
<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="testInput" />
</div>
<button id="butSelect" class="testClass">Select</button>



prev + next

Matches all next elements specified by "next" that are next to elements specified by "prev".

Sample:

$("p + input")

This selector select all input elements which are next to paragraph element.

<div id="divToSelect">
<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="testInput" />
</div>
<button id="butSelect" class="testClass">Select</button>
<input id="noSelect" />




Selectors/siblings

Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.

Sample:

$("#NotSelectMe ~ input")

This selector select all input elements after element with id NotSelectMe.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<input id="testInput" />
<p id="NotSelectMe">This paragraph will not be selected</p>

<input id="noSelect" />
<button id="butSelect" class="testClass">Select</button>



Basic filters



:first

Matches the first selected element.

Sample:

$("input:first")

This selector select first input element.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<input id="testInput" />
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="noSelect" />
<button id="butSelect" class="testClass">Select</button>



:last

Matches the last selected element.

Sample:

$("input:last")

This selector select last input element.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<input id="testInput" />
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="noSelect" />
<button id="butSelect" class="testClass">Select</button>



:not(selector)

Filters out all elements matching the given selector.

Sample:

$("input:not('#noSelect')")


This selector select all input element without element with id noSelect.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<input id="testInput" />
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="noSelect" />
<button id="butSelect" class="testClass">Select</button>



:even

Matches even elements, zero-indexed.

Sample:

$("tr:even")

This selector select all even tr elements, zero-indexed.

<table border="1" class="style1">
<tr>
<td>
Row 0</td>
</tr>
<tr>
<td>
Row 1</td>
</tr>
<tr>
<td>
Row 2</td>
</tr>
<tr>
<td>
Row 3</td>
</tr>
</table>



:odd

Matches odd elements, zero-indexed.

Sample:

$("tr:odd")

This selector select all even tr elements, zero-indexed.

<table border="1" class="style1">
<tr>
<td>
Row 0</td>
</tr>
<tr>
<td>
Row 1</td>
</tr>
<tr>
<td>
Row 2</td>
</tr>
<tr>
<td>
Row 3</td>
</tr>
</table>



Related articles:
jQuery hello world
jQuery on blogspot (blogger) post
Basic web effect with jQuery