And this one:

These awesome logos (along with tons of others. See: the post thumbnail) are being created in pure CSS over at ECSSpert. So far there are designs for Twitter, Adidas, Adobe, an awesome animated Atari, and well… just go look for yourselves.

Speaking of increible CSS achievements, check out these 3 links to be in even further awe:

Apple iOS Icons in CSS

iPhone in CSS

Opera Logo in CSS

Note: you might want to view these using Safari or Chrome, though Firefox is OK, too. Don’t even bother if you are using IE. Sorry, IE peeps (though you were probably just going to go look at the Windows icon and leave, anyway).

Got any others?

Post them in the comments so everyone can see. No use in keeping incredible stuff like this under wraps!

Rocking HTML5

This presentation use HTML5 techniques to create a very informative and easy to use overview of the HTML5 elements.

HTML5test

HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect.

Wave Motion

This experiment, made by Hakim el Hattab, makes a wave motion rendered using the canvas element. Each bubble holds a tweet with the word water in it. Clicking on them we can read the tweets.

Cross Browser HTML5 Drag and Drop

In order to save other developers from the headaches we got deciphering cross browser drag and drop, here are the following guide that shows how to do in five easy steps.

Ball Pool

This is a great example of canvas using. This script use the mouse click and mouse drag for moving or creating other balls into the page.

Browser Ball

The main window should also have a beach ball. Fling that puppy around. Make neat spaces for the ball to bounce around in. Create complicated layouts that may crash your browser.

The Cloth Simulation

The cloth is really then just a collection of constraints and point masses in a never ending struggle.

Blowing up HTML5 Video and Mapping it into 3D space

The API lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime. Two concepts instantly came to mind that seemed like fun to try and figure out, here they are below.

Learning About HTML5 Local Storage

This video tutorial shows how to build a simple to-do list with local storage. HTML5′s local storage is a new functionality which we can save data in browsers even the browser is refreshed or closed.

Tetris With HTML5

Now we can play at this game online with the experiment of Bruno Garcia developed using HTML5′s Canvas.

Video for Everybody

This is a simply chunk of HTML code that embeds a video into a website using the HTML5 <video> element. It works on many browser and platforms.

One Page Website Template

Single-page websites have been commonplace on the web for a few years now. First made popular by designers seeking a clean, simple way to showcase portfolios, the one-page website now has a number of uses, including advertising software and promoting events. It’s a great way to have a large impact with a small amount of content.

Hybrid Column Layout

You can easy to make website with liquid columns that use percentage.

Design & Code a Cool iPhone App Website in HTML5

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

Create an HTML5 iPhone App

You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation. You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript.

Have a Field Day with HTML5 Forms

Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.

HTML5 Canvas Element Guide

In this guide, you can get started to understanding the canvas element and what kinds of things are required and expected in this associated code.

Canvas Paint

CanvasPaint is a near pixel-perfect copy of Microsoft Paint in HTML, CSS and JavaScript, using the <canvas> tag.

Canvas in 3D

In this script we will see an amazing 3D interface with random Flickr photos loaded by clicking on surface.

Detecting HTML5 Features

Sometime HTML5, cannot running well on several browsers. As we know, not all  browsers  support html5 features.  this information will let you know about how to Detecting HTML5 Features

Adding Default Datepicker

Step 1

Create a standard HTML file first.

Step 2

You should link the default datepicker JS and CSS files within the <head> section of your HTML file. You can download these files at the end of this article. Here is the code:

<link rel="stylesheet" typePreview post="text/css" href="demos.css">

<link rel="stylesheet" type="text/css" href="jquery-ui.css">

<script src="jquery-1.5.1.js"></script>

<script src="jquery.ui.core.js"></script>

<script src="jquery.ui.widget.js"></script>

<script src="jquery.ui.datepicker.js"></script>

You can customize the demo.css file to change the layout and positioning of datepicker. In addition, you can extract the CSS code used in the HTML from it and add it within style tag for integrating the datepicker in your Website. We suggest you not play with the jquery-ui.css file as it is a member of jQuery libraries and Google AJAX APIs.

Step 3

Now, you have to add a container in the body tag to create the datepicker. Following is the code for it:

<div>

<p>Select the date: <input type="text"></p>

</div>

The scripts mentioned in above JS file works automatically and adds the datepicker in the input box created. When a user clicks the box, the datepicker will appear.

Complete Code of default datepicker

<html>

<head>

<title>Default jQuery Datepicker</title>

<link rel="stylesheet" type="text/css" href="demos.css">

<link rel="stylesheet" type="text/css" href="jquery-ui.css">

<script src="jquery-1.5.1.js"></script>

<script src="jquery.ui.core.js"></script>

<script src="jquery.ui.widget.js"></script>

<script src="jquery.ui.datepicker.js"></script>

<script>

$(function() {

$( "#datepicker" ).datepicker();

});

</script>

</head>

<body>

<div style="width:500px; height:auto; font-size:small;">

<div class="demo">

<p>Select the date: <input type="text"></p>

</div>

</div>

</body>

</html>

Output

Following is a screenshot of the output:

Screenshot of default jQuery datepicker

Date Format Options

In the default jQuery datepicker, the date is displayed in the default format MM/DD/YYYY after selecting any date. jQuery allows you modifying the date format. Let us have a look how to customize the date format for datepicker.

Step 1

Change the default script code with this one:

<script>

$(function() {

$( "#datepicker" ).datepicker();

$( "#format" ).change(function() {

$("#datepicker").datepicker( "option", "dateFormat", $( this ).val() );

});

});

</script>

The jQuery provides following date formats:

1. mm/dd/yy like 06/12/10
2. yy-mm-dd like 10-06-12
3. d M, y like 6 Jun, 10
4. d MM, y like 6 June, 10
5. DD, d MM, yy like Sunday, 6 June, 2010
6. ‘day’ d ‘of’ MM ‘in the year’ yy like day 6 of June in the year 2010

Step 2

Add the follow code in the HTML below the div demo code:

<p>Select the format to display date:

<select>

<option value="mm/dd/yy">Default - mm/dd/yy</option>

<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>

<option value="d M, y">Short - d M, y</option>

<option value="d MM, y">Medium - d MM, y</option>

<option value="DD, d MM, yy">Full - DD, d MM, yy</option>

<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the ye ar' yy</option>

</select>

</p>

Restricting the Date Range

You can restrict the date ranges on and specify the interval in which one can select the dates. Make use of minDate and maxDate options to set the beginning and end dates of the interval.  For example, if you are using June 6 as current date then minDate = -20D will be 20 days before June 6 and maxDate = +1M 5D will be one month 5days after June 6. The dates will be disabled before minimum date and after maximum date.

You can use following script code and change the minDate & maxDate as per your requirement.

<script>

$(function() {

$("#datepicker").datepicker({minDate: -40, maxDate:"+2M +5D" });

});

</script>

Output

Displaying the Inline Datepicker

Well till now we have worked to display the datepicker only when user clicks textbox. There is no scripting for this as you just have to show the datepicker div without any input box. Following is the HTML code to display inline datepicker:

Select the Date: <div></div>

Datepicker with Drop-down Boxes of Years & Months

To have the drop-down boxes or menus of years and months in a datepicker, you just have to add two Boolean options changeMonth & changeYear and set them to true.

<script>

$(function() {

$( "#datepicker" ).datepicker({

changeMonth: true,

changeYear: true

});

});

</script>

Conclusion

You can easily add a datepicker using the codes mentioned above. The datepicker is not limited to the above features only. You can also add following features to the datepicker:

●      Populating another text field on selecting a date

●      Displaying buttons on the datepicker

●      Showing dates of other months in the current month

●      Showing weeks of the year

●      Displaying multiple months

●      Adding icon trigger to launch datepicker

●      Date Range with two datepickers one for ‘from’ and another for ‘to’

Demo & Download

jQuery Datepicker Demo: Click here

Download the files: demo-jquery-datepicker.zip

The zip file will also have the code of above listed features. Please read the readme.txt for details of the contents of zip file.

Unlike MB6-202 training program, our best 70-441 tests and MB4-212 training courses provide you quick success in first try of 70-506.

Before getting started, be sure to view the demo to see how the ticker works. Here’s what the finished project will look like:

HTML Demo

Tutorial Details

• Technologies: HTML, CSS, JavaScript, jQuery
• Difficulty: Intermediate
• Estimated Completion Time: 20-30 minutes

Intro: Preparations

You should create an empty HTML file and save it somewhere convenient now; we’ll be working with it throughout this tutorial. We’ll be working exclusively with client-side code, so there’s no need for a server – you can preview directly on your computer. In the demo files we’ll use inline CSS and JavaScript, but you can externalize these if desired.

Tip: For this type of tutorial, it can be helpful to use jsBin or jsFiddle to follow along. These free online tools let you experiment with HTML, JavaScript and CSS without having to create any files on your computer. Best of all, you can save, version and share your experiments. It’s a great way to perfect a technique without cluttering up your computer with tons of files.

If you’re creating your own HTML file, here’s the code you should have to start:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>jQuery News Ticker</title>
  <style type="text/css">
  /* CSS will go here */

  </style>
</head>

<body>

  <!-- Markup will go here -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script type="text/javascript">
  // JavaScript will go here

  </script>
</body>
</html>

Note the designated places for markup, CSS and JavaScript. Additionally, note that we have included jQuery 1.6 from Google’s CDN.

Step 1: The HTML Markup

We’ll use a dedicated <div> to hold the ticker. The links will be contained within an unordered list (<ul>). By using an HTML list to define the links, we ensure that the ticker will gracefully degrade for users with JavaScript disabled, and that search engines will still be able to see and follow all of the links. Add the following HTML markup to your page:

<div id="ticker" class="newsTicker">
    <a href="#">Newsroom</a>
    <span class="divider">|</span>
    <ul>
        <li><a href="#story1">Story headline 1</a></li>
        <li><a href="#story2">Another Story headline 2</a></li>
        <li><a href="#story3">Some third story headline</a></li>
        <li><a href="#story4">A final, fourth headline</a></li>
    </ul>
</div>

Update the list to contain an <li> for each of the links you want in the ticker. I’ve chosen to put a ‘Newsroom’ link at the start, but that’s up to you.

Step 2: Styling

Now it’s time to make the scroller look nice. In the <style> tag in the <head>, add the following CSS:

#ticker
{
    border: 1px solid #666;
    background: #DDD;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #333;
    font: 13px/16px Arial,Verdana,sans-serif;
    padding: 3px 7px;
    width: 400px;
}
#ticker .divider {
    padding: 0 4px;
}
#ticker a, #ticker a:visited
{
    color: #333;
    text-decoration: none;
}
#ticker a:hover
{
    color: #930;
}

This adds some background and border to the overall ticker, and styles the links. These styles are just to get you started – if you want, you can add some creativity at this point! As we style, keep in mind that the <ul> won’t be present in the rendered HTML – it will be replaced with a single link that changes. That’s why there are only link styles and no list-related styling.

Step 3: Making It Work

Now we’re ready to add the jQuery-enhanced JavaScript to make the ticker actually work. I’ll show you the overall chunk first, then break down what each portion is doing.

Add the following chunk of JavaScript to the <script> tag at the bottom of the page:

$(function()
{
    $('#ticker').each(function()
    {
        var ticker = $(this);
        var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
        var links = ticker.find('ul>li>a');
        ticker.find('ul').replaceWith(fader);

        var counter = 0;
        var curLink;
        var fadeSpeed = 600;
        var showLink = function()
            {
                var newLinkIndex = (counter++) % links.length;
                var newLink = $(links[newLinkIndex]);
                var fadeInFunction = function()
                    {
                        curLink = newLink;
                        fader.append(curLink).fadeIn(fadeSpeed);
                    };
                if (curLink)
                {
                    fader.fadeOut(fadeSpeed, function(){
                        curLink.remove();
                        setTimeout(fadeInFunction, 0);
                    });
                }
                else
                {
                    fadeInFunction();
                }
            };

        var speed = 5500;
        var autoInterval;

        var startTimer = function()
        {
            autoInterval = setInterval(showLink, speed);
        };
        ticker.hover(function(){
            clearInterval(autoInterval);
        }, startTimer);

        fader.fadeOut(0, function(){
            fader.text('');
            showLink();
        });
        startTimer();

    });
});

If you preview now, you should see a working ticker that cycles through all of your links. If you hover over the ticker, it will pause; if you move your mouse away again, it will restart. Now, let’s break down what all of that code is doing.

Breaking Down the JavaScript – Overview

In plain English, here’s what the JavaScript is doing:

• Everything is wrapped in a document-ready trigger, so it will be called once the document is ready for manipulation
• We locate the news ticker
• We create an array that references the links, then replace the unordered list element in the document with a holder span. That holder will be used for displaying the current link.
• We define a function that transitions from one link to the next
• We create a timer, and set it to automatically pause when the user hovers over the ticker
• We show the first link and start running the timer

Breaking Down the JavaScript – Details

Now, lets take an in-depth look at what each of these pieces of code is doing.

Note that we use the #ticker selector to locate the ticker. If you had multiple tickers in your page, you could change this to div.newsTicker instead, since we applied a class of newsTicker to our ticker.

Chunk 1 – Finding the content, Preparing the document

var ticker = $(this);
var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
var links = ticker.find('ul>li>a');
ticker.find('ul').replaceWith(fader);

In this first chunk, we create a jQuery reference

to the current ticker. Then, we create a new <span> that will be used to hold the current link. The fader class is applied, to enable styling if desired. Note that we set the display property of the span to inline-block. This is important to enable fading of the text in Internet Explorer. Without some annoyingly-complex trickery (treating the text as a block-level element to be precise), IE fails to fade the text. Next, we create a jQuery list that references all of the link elements that were defined in the markup, so we can use them later on. Having created this list, we destroy the unordered list, replacing it with the fader span.

Chunk 2 – Creating the "Show me a new link" function

var counter = 0;
var curLink;
var fadeSpeed = 600;
var showLink = function()
    {
        var newLinkIndex = (counter++) % links.length;
        var newLink = $(links[newLinkIndex]);
        var fadeInFunction = function()
            {
                curLink = newLink;
                fader.append(curLink).fadeIn(fadeSpeed);
            };
        if (curLink)
        {
            fader.fadeOut(fadeSpeed, function(){
                curLink.remove();
                setTimeout(fadeInFunction, 0);
            });
        }
        else
        {
            fadeInFunction();
        }
    };

In this next major chunk, we define the method that will fade the link in and out. A counter keeps track of which link we’re on. The fadeSpeed variable specifies how fast the fade effect should be. By default, we use 600 milliseconds (0.6 seconds). Next, we define the function that will swap out the links. In this function we increment the counter and select the next link in the earlier-created list, automatically cycling back to the first by using the modulus operator (%). Then we define a temporary function that updates the reference to the current link, adds it to the fader span, then fades it in. Note that we fade the fader, not the link itself; this is part of the trickery to make the fading work properly in IE. Finally, we check to see if a link already is being displayed. If so, we first fade out the fader and remove that link upon effect completion. Then, after a microscopic delay to avoid item reference problems, we call the method to display the new link. On the other hand, if no link exists, we just display the new link directly.

Chunk 3 – Configuring Automatic progression, Starting it up

var speed = 5500;
var autoInterval;

var startTimer = function()
{
    autoInterval = setInterval(showLink, speed);
};
ticker.hover(function(){
    clearInterval(autoInterval);
}, startTimer);

fader.fadeOut(0, function(){
    fader.text('');
    showLink();
});
startTimer();

In the final chunk, we start things running. The speed variable defines (again, in milliseconds) how long each link should be visible when the ticker is automatically progressing. By default, we use 5500 (5.5 seconds). We define a startTimer method that creates an interval to call the earlier-defined showLink method every few seconds. Next, we add the listener that will automatically pause and restart the ticker when the user hovers over and leaves it. Then, to start the initial display, we instantly fade out the fader, empty its existing contents (a space character that’s required to force it to fade), and use showLink to fade in the first link. Finally, we start the timer.

Summary

You’ve now created a simple, compact news ticker to display newsworthy links on your site. The ticker functions properly in all browsers (including IE!) and automatically pauses when hovered-over, to ensure a good user experience. To enhance the ticker, you could use a server-side script (like PHP) to dynamically output the links. There are many possibilities! Moreover, you’ve learned about how jQuery’s document manipulation and effect tools can be leveraged to create nifty, useful widgets for your page. Have fun with your new knowledge!

1. Introduction
2. The Code
3. Why reverse()?
4. Conclusion

Introduction

htmlspecialchars is an extremely useful PHP function. It’s use is defined by the PHP manual as such:

Certain characters have special significance in HTML, and should be represented by HTML entities if they are to preserve their meanings. This function returns a string with some of these conversions made; the translations made are those most useful for everyday web programming…

This function is useful in preventing user-supplied text from containing HTML markup, such as in a message board or guest book application.

The translations performed are:

• ‘&’ (ampersand) becomes ‘&amp;’
• ‘"’ (double quote) becomes ‘&quot;’…
• ‘<’ (less than) becomes ‘&lt;’
• ‘>’ (greater than) becomes ‘&gt;’

However, this function proves useful in more languages that just PHP. It is necessary to use these HTML entities whenever you want HTML to display as plain text instead of being parsed, in whatever language you may be using to output it. In my news slider tutorial, I used this function to store HTML as an image’s alt attribute.

<img alt="<a href="http://www.charlesstover.com/">Charles Stover</a>" src="..." />

The above is not valid markup. The quotes inside the alt attribute will cause it to end the attribute after href=, ignoring the rest of the string. To successful store symbols such as " inside of double-quoted strings, we must [or at least should] convert them to HTML entities.

<img alt="&lt;a href=&quot;http://www.charlesstover.com/&quot;&gt;Charles Stover&lt;/a&gt;" src="..." />

The above is valid markup.

A more realistic JavaScript example would be outputting user input on the screen. Say you have some custom-built command prompt that allows user input and displays a history of commands entered. You can’t merely display what they type in, because if they were to type <strong>command</strong>, it would output as command. It is precisely situations like these that htmlspecialchars was invented.

Unfortunately, this function does not exist by default in all languages. For this reason, I have ported a similar (but not exact, as I have never needed an exact) copy in JavaScript.

What it does is take a string, such as <strong>command</strong>, and converts it to its HTML-entities form, such as <strong>command</strong>, so that it may be output safely.

I added a useful second parameter reverse that was necessary in the news slider. When reverse is set (boolean true works fine), the function will convert an HTML-entitied string, such as <strong>command</strong>, and convert it back to HTML, such as <strong>command</strong>. This was necessary to retrieve and output the "translated" alt value of the images as HTML.

The Code

This is a very short code, and as such I will condense the code down to a single section with the comments on the functionality inside the code itself. The only exception being the explanation for the need to use reverse() is explained at the end of this article in Why reverse()?

// Create the function.
// First parameter: the string
// Second parameter: whether or not to "undo" the translation
var htmlSpecialChars = function(string, reverse)
	{

		// specialChars is a list of characters and that to which to translate them.
		// specialChars["<"] = "&lt;";
		// x is merely a variable used in for loops.
		var specialChars = {
				"&": "&amp;",
				"<": "&lt;",
				">": "&gt;",
				'"': "&quot;"
			}, x;

		// If we are reversing the translation...
		if (typeof(reverse) != "undefined")
		{

			// We need to create a temporary array.
			reverse = [];

			// Put each special character in the array.
			for (x in specialChars)
				reverse.push(x);

			// Reverse the array.
			// ["<", ">"] becomes [">", "<"]
			reverse.reverse();

			// For each of the special characters,
			for (x = 0; x < reverse.length; x++)

				// Replace all instances (g) of the entity with the original.
				// e.g. if x = 1, then
				// reverse[x] = reverse[1] = ">";
				// specialChars[reverse[x]] = specialChars[">"] = "&gt;";
				string = string.replace(
					new RegExp(specialChars[reverse[x]], "g"),
					reverse[x]
				);

			// Return the reverse-translated string.
			// Returning a value ends the function,
			// therefore no code after this line will execute,
			// therefore no need to use the else conditional.
			return string;
		}

		// If we are not reversing a translation,
		// For each of the special characters,
		for (x in specialChars)

			// Replace all instances of the special character with its entity.
			// Remember, unlike in the reverse algorithm where x is an integer,
			// x here is the key value (e.g. &, <, >, and ")
			string = string.replace(new RegExp(x, "g"), specialChars[x]);

		// Return the translated string.
		return string;
	};

Why reverse()?

For those wondering why the temporary array was reversed (or why the temporary array even needed to exist), nothing explains better than an example. The ampersand in a regular (i.e. not reverse) translation must be translated before the other three characters, because the ampersand is a part of the entity!

// Translating ampersand first:
var string = "<"; // <
string = string.replace(/&/g, "&amp;"); // <
string = string.replace(/</g, "&lt;"); // &lt;
alert(string); // &lt;

// Translating ampersand last:
var string = "<"; // <
string = string.replace(/</g, "&lt;"); // &lt;
string = string.replace(/&/g, "&amp;"); // &amp;lt;
alert(string); // &amp;lt;

Since &lt; contains an ampersand, the ampersand in it will be translated. Thus, we translate the ampersand before we translate anything else.

That settled, why reverse the array? For the exact same reason. If it’s the first to translate going forward, it must be the last to translate going in reverse. This is most noteable when using HTML entities.

If the user types <, you’ll want < to display, not <. But let’s say we’re in a scenario where want to reverse this code to actual HTML. Perhaps it’s the alt attribute of an image in the aforementioned news slider. Perhaps it’s the HTML code in a textarea that allows users to embed the video on their websites. Wherever it came from, we have HTML that contains entities, and we want to remove them. We want to convert < to <!

// Reverse translating ampersand first:
var string = "<"; // <
string = string.replace(/&/g, "&"); // <
string = string.replace(/&lt;/g, "<"); // <
alert(string); // <

// Reverse translating ampersand last:
var string = "&amp;lt;"; // &amp;lt;
string = string.replace(/&lt;/g, "<"); // &amp;lt;
string = string.replace(/&amp;/g, "&"); // &lt;
alert(string); // &lt;

When ampersand translates first, the process will translate one time too many. Just like with forward-translation, where < (translating <) becomes &lt (translating &) becomes < when translated out of order, reverse translation undergoes the same problem: < (reverse translating &) becomes < (reverse translating <) becomes <.

Conclusion

Go forth and be prosperous. This code, being so short, is free for you to use and distribute. Just don’t claim ownership of it and all that other legal jargon. I hope you all find great use for it.

Cut down your exam stress by using our latest testking microsoft high quality exam and 70-557. We provide updated questions with 100% pass guarantee along with MB7-224 and 70-647.