Useful and interesting web sites

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

How to improve efficiency in web design with IE 8

Increased performance

IE8 Performance

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

Beta Browser Battle 2: Page-load times

Accelerators

Sample of using accelerator Translate with Live search

10 Useful Internet Explorer 8 Accelerators

Social Networking and Online Communications Related IE8 Accelerators

IE8 Activities (now called Accelerators)

Enhanced navigation

Compatibility View

list of web sites

Enhanced Tabbed Browsing

Better Find On Page

Smarter Address Bar

Improved Zoom

Improved favorites and history management

Enhanced Favorites Bar

One Click Favorites

RSS feeds on Favorites bar

History sorting

History searching

Instant search

Search suggestions

Visual search

Web Slices

ebay

Automatic crash recovery

Browse privately

InPrivate Browsing

Private Browsing 1.2.0

InPrivate Filtering

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

Tuesday, March 24, 2009

Basic web effect with jQuery

In this article you can find demos and sample code for basic effect functions in jQuery. We have: hide and show effect, fadeIn and fadeOut (disappearing) effect, slide down and slide up effect and animate effect. On my blog you can find more guides for cool javascript effects.

First you need to reference jQuery library (for more information see my first article about using jQuery.

Example:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

Hide and show effect

Demo for show and hide function:

Code:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#butShowHide').click(function()
   {
       $('#pShowHide').toggle();
   });
});
</script>
<p id="pShowHide" style="display:none">This paragraph can be shown or hidden</p>
<button id="butShowHide">Show/Hide</button>

When butShowHide is clicked, toggle function is called on paragraph pShowHide.
Toggle function displaying matched elements. If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.
There are also show and hide function. Toggle function is easier to use because you don't have to check if element is showed or hidden.

Demo for show and hide function with slow argument:

This div can be shown or hided slow

Code:

<script type="text/javascript">
$(document).ready(function(){
    $("#butShowHideSlow").click(function () {
      
      $("#divShowHideSlow").toggle("slow");
    });
});
</script>
<button id="butShowHideSlow">Show and hide slowly</button>
<div style="width:300px;height:47px; border: solid 1px black;background-color:LightGrey;text-align:center;" id="divShowHideSlow">This div can be shown or hided slowly</div>

In this case we call toggle function with argument speed (toggle(speed)).
We set speed to slow.
Speed - A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

FadeIn and FadeOut effect

Demo for fade in and fade out:

This paragraph can fade in and fade out

Code

<script type="text/javascript">
  $(document).ready(function(){ 
      $("#butFadeOut").click(function () {
          $("#pFadeInOut").fadeOut(3000);
        });
        
        $("#butFadeIn").click(function () {
          $("#pFadeInOut").fadeIn(3000);
        });
   });
</script>

<button id="butFadeOut">Fade Out</button>&nbsp;&nbsp;<button id="butFadeIn">Fade In</button>
<br />
<p id="pFadeInOut">This paragraph can fade in and fade out</p>

When button butFadeOut is clicked fadeOut function is called on paragraph pFadeInOut
fadeOut(3000) - fadeOut effect will run for 3 seconds.

When button butFadeIn is clicked fadeIn function is called on paragraph pFadeInOut.
fadeIn(3000) - fadeIn effect will run for 3 seconds.

Slide up and Slide down

Demo for slide up and slide down:

This toggle can be slide up and down

Code:

<script type="text/javascript">
  $(document).ready(function(){ 
    $('#butSlide').click(function () {
      $('#divSlide').slideToggle("slow");
    });
   });
</script>

<button id="butSlide">Slide up/down</button>
<br />
<div style="width:300px;height:47px; border: solid 1px black;background-color:LightGrey;text-align:center;" id="divSlide">This toggle can be slide up and down</div>

When button butSlide is clicked slideToggle function is called on div divSlide with argument slow.

slideToggle(speed) - Toggle the visibility of all matched elements by adjusting their height.

Animate effect

Demo for animate:

This paragraph can move left and right

Code:

<script type="text/javascript">
  $(document).ready(function(){ 
      $("#butLeft").click(function () {
        $("#pMovingParagraph").animate({"left": "-=50px", "opacity": 1}, 500);
      });
    
      $("#butRight").click(function () {
        $("#pMovingParagraph").animate({"left": " =50px", "opacity": 1}, 500);
      });
   });
</script>

<button id="butLeft">move left</button>&nbsp;&nbsp;&nbsp;<button id="butRight">move right</button>

When button butLeft is clicked animate function is called on paragraph pMovingParagraph.

When button butRight is clicked animate function is called on paragraph pMovingParagraph.

animate( params, [duration])

params - A set of style attributes that you wish to animate, and to what end.

duration - A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

Related articles:
jQuery hello world
jQuery on blogspot (blogger) post
jQuery selectors samples

Saturday, March 14, 2009

jQuery on blogspot (blogger) post

You find some cool jQuery features but don't know how to include jQuery code into your blogspot blog? Here you will find two steps needed to jQuery work on your blog.

Two steps for implement jQuery on blogspot post

Reference jQuery library in your blogspot post

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

advices about uploading files for blogspot

jQuery code and style code should be in one line


<script type="text/javascript">
        $(function() 
        {
            $("#butToggle").click(function() 
            {
                $('#dvt').toggle(1000);
            });
        }); 
</script>

<script type="text/javascript">$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script>


<style type="text/css">
        #dvt
        { 
         width: 200px;
         height: 100px;
         border: solid 1px black;
         background-color:LightGrey;
         text-align:center; 
         display:none;           
        }     
</style>

This demo show jQuery that works on blogger.When you click toggle button div is shown or hidden.

This works on blogger

And here is code needed for this demo that should be in blogspot post:


<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script>

<style type="text/css">#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}</style>

<div id="dvt">This works on blogger</div>
<button id="butToggle">Toggle</button>

Tuesday, March 10, 2009

jQuery hello world

This text contain brief tutorial how to use jQuery on your web and have one demo and one short and simple example.

First let's see what is jQuery?
jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. jQuery is designed to change the way that you write Javascript.

To use jQuery you must have access to jQuery library. You can find jQuery library on http://jquery.com/. Choose production and download file.

To use jQuery you need to reference it on your page.

Example:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

There is jquery-1.3.2.min.js file but the next version will have different name (probably jquery-1.3.3.min.js) so you will must change name of the file when there will be newer version. This work when you have Jquery library in same directory as your html page.

Another option is to reference jQuery library directly from google code.

Example:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

Demo of disappearing paragraph with jQuery:

Example of Jquery, click paragraph
and it will fade away.

Code for disappearing paragraph with jQuery:


<html>
<head>
  <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
  <script>
  (function(){   
    $("#paragraph1").click(function () {
      $("#paragraph1").fadeOut("slow");
    });

  });
  </script>
  <style>
  #paragraph1 { font-size:150%; cursor:pointer; }
  </style>
</head>
<body>
  <p id="paragraph1">
    Example of Jquery, click paragraph
    and it will fade away.
  </p>
</body>
</html>

We have reference to jQuery library (see above for explanation)

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

There is paragraph with id paragraph1

 <p id="paragraph1">
    Example of Jquery, click paragraph
    and it will fade away.
  </p>

With this we determine style for element with id paragraph1.

<style>
  #paragraph1 { font-size:150%; cursor:pointer; }
  </style>

This code says :
when paragraph1 is clicked ( $("#paragraph1").click(function ())
then fadeOut method is called with parameter slow ($("#paragraph1").fadeOut("slow");).


  <script>
  (function(){   
    $("#paragraph1").click(function () {
      $("#paragraph1").fadeOut("slow");
    });
  });
  </script>

In the end paragraph disappear after user click on it. Instead parameter slow can stand normal or fast. Or time in miliseconds.

Related articles:
jQuery on blogspot (blogger) post
jQuery selectors samples
Basic web effect with jQuery

Useful and interesting web sites

Sunday, April 5, 2009

New features in Internet Explorer 8

Thursday, April 2, 2009

jQuery selectors samples

Tuesday, March 24, 2009

Basic web effect with jQuery

Saturday, March 14, 2009

jQuery on blogspot (blogger) post

Tuesday, March 10, 2009

jQuery hello world

Topics

Top 10 articles

Blog Archive

Followers

Categories

Support InterestingWebs blog

Counter

Contact me:

Useful and interesting web sites

Sunday, April 5, 2009

New features in Internet Explorer 8

Thursday, April 2, 2009

jQuery selectors samples

Tuesday, March 24, 2009

Basic web effect with jQuery

Saturday, March 14, 2009

jQuery on blogspot (blogger) post

Tuesday, March 10, 2009

jQuery hello world

Topics

Top 10 articles

Blog Archive

Followers

Subscribe To

Categories

Support InterestingWebs blog

Counter

Contact me: