To make your javascript code beautiful, just use jsbeautifier.

Paste your compressed, unreadable code into the text-editor, and simply push "Beautify Javascript or Html" on the top.

Jquery split & join example

Here I will show you how you can use jquery in order to wrap every 2nd word of a paragraph in a span.

So, if you have for example the following paragraph into your html:


and your stylesheet is:


by putting this:




your final result will be:

This is a test paragraph.

First you use split method, to split your sentence into single words. Then you store into a variable called numWords the size of the array. In a for loop, you check if your number is even and if that's the case, you wrap the specific element in a span. After this iteration, you use join, in order to show whole sentence.

Fireworks Favicon

If you are using Adobe Fireworks CS4 and want to create a favicon for your site, just follow the steps below.

1. Go to http://johndunning.com/fireworks/about/ExportAsFavicon and download the favicon extension
2. Open Fireworks -> click Help -> Manage Extensions
3. Choose Fireworks from the left side and then the install button on top
4. Locate the extension you downloaded before and you are ready.

How can we use it

1. Go to Commands -> Favicon -> New Favicon - 16x16 to create your favicon
2. Choose Commands->Favicon -> Export as Favicon to export it

Responsive Web design

Take a look at the following link and watch a very good video (25 minutes) about Responsive Web Design!
http://css-tricks.com/video-screencasts/102-braindump-on-responsive-web-design/

 

                                            jsfiddle.net 

In the above picture you can see jsfiddle.net, an online editor for the web, which allows you to see how your code runs in action. Really very helpful!

Jquery fadeToggle

In this example, I will show you how we can use jquery fadeToggle function to achieve the behaviour described below!

What we have here, is some menu blocks, which show a lager block with more details, when we click on them. You can see a demo here. Only first block works, as it is under construction.



                         Before we click the first menu block

                           After we click the first menu block


Html markup

As you can see below, we have a div with class "box", and inside this div we have 2 main elements:

1. an anchor tag, with a background-image as you can see in the css style later
2. div with class "box_details" , which has an absolute position.

Css styles

Below you can see the css styles for our example. Just to say, that box_details has an absolute position. (accordingly, div with id "box1", has relative position) and display:none, which will change to block, when div with class box is clicked.



Javascript

Finally, we use javascript and fadeToggle function. I think it's pretty easy and self-explanatory. Wheneverer we click the box div, we find next box_details div, and make it fade in. When we click on the appeared div, it fades out. This is achieved with the use of fadeToggle.

Media Queries and Internet Explorer

Media queries, which are part of the CSS3 draft spec, don’t work in Internet Explorer 6, 7 or 8. Hardly surprising, but certainly annoying. So, we need a JavaScript solution.

Css3-mediaqueries.js is a JavaScript library , which makes CSS3 Media Queries work in all browsers. I dowloaded the plugin, but I had no success.

Fortunately I found the following article, http://richardshepherd.com/css-media-queries-jquery/ and downloaded the plugin from there!

Now everything works great, even using Internet Explorer! I will post an example of implementing media queries, when I have some free time:-)

PhotoFluid - fluid layouts and adaptive CSS using Media Queries

ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries. It works within your website, HTML5 app or game in the form of a single JavaScript include. ( http://protofluid.com/).

All you have to do, is include jquery and photofluid in your head, BEFORE any other javascript.

ProtoFluid does not automatically launch. Type #protoFluid after your web address and refresh the page!