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!

Site Inspiration using Media Queries

http://foodsense.is/

http://foodsense.js in a smaller device

http://www.bostonglobe.com/

 http://www.bostonglobe.com in a smaller device

http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign in a smaller devive

You can also checkout http://mediaqueri.es/popular/. The site contains a curated collection of responsive web designs!

So, have a look and get inspired!

Browser detection using Jquery

The $.browser property provides information about the web browser that is accessing the page, as reported by the browser itself. It contains flags for each of the four most prevalent browser classes (Internet Explorer, Mozilla, Webkit, and Opera) as well as version information. (http://api.jquery.com/jQuery.browser/).

Available flags are:

• webkit (as of jQuery 1.4)
• safari (deprecated)
• opera
• msie
• mozilla

Well, in my case, when I tested my code to all browsers, there was no problem, except from Internet Explorer:-(

I had a div (class=box_details) with height 306px, which should be higher in IE. So, I wrote the following code and the problem was solved:-)

Click & Hover Effect with Jquery

Suppose you have a menu at your site, and you don't want to reload the whole page to see the content of a certain div. Instead, you want to load it using jquery and ajax!

What I will show you here is, how we can achieve the hover effect, without affecting the clicked element. Don't you understand what I mean?

Go to http://www.snap2design.com, and have a look at the menu. When you mouseover a menu item, you see that its background-color becomes black and when you mouseout, it becomes grey again, except of course from the clicked menu, which remains black!

How can we achieve this? The answer is by using Jquery! A fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Here we will use the click and hover function of this wonderful library.


Click Function


Seems all this strange to you? Well, let me explain you a little bit what I am doing here.

Firstly, when we click the h3 element of a navigation_item,

• we remove "selected" class and 
• change background color of each item to #424242

 ***Just to say that selected class is defined in a seperate css file


Finally we add "selected" class to the clicked item.


***I want to clarify that I refer to the situation of a menu which loads content via AJAX, and not by reloading whole page. The link with the example  I gave you above, has a menu with submenus. I explain the case of the first level menu. The same technique is used for the second level as well. You can see the html markup below:



So til now, when we click a navigation item,  its background-color becomes black(selected class). The other ones have a grey background-color (#424242).


Hover Effect



Well, let's explain the hover effect now! When we mouseover a menu item, we make its backround-color black. That's easy!
When we mouseout, we have to make a check. The menu item that has "selected" class, keeps its black background-color, otherwise it becomes grey (#424242).

What would happen, if we didn't make the check? Every menu item would become grey and we wouldn't know, which one was the selected one.



Conclusion

Well, in the above example I wanted to show you the technique I use, in order to check which menu item is the selected one when we use AJAX, and keep its "selected" class, when we mouseover that!

I am glad to hear, what you do in a similar situation!

Adding an App to a Facebook Page

If you want to add an app to your Facebook page and for some reason you can't find View App Profile Page at the left part of the page when you registered it at http://www.facebook.com/developers, you can do it by typing in the addess bar the following:

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

where YOUR_APP_ID and YOUR_URL can be found in your app settings.