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. 

Implementing Facebook Share in 2 different ways

Well, how often do we see in every website the commonly used "Share" button?

Don't you know how to integrate it into your website? Don't worry, I suggest you 2 ways, you can choose the one that suits you most!

Facebook Share button - No1

You can render the Facebook Share button in an anchor (a) tag that takes the following 3 attributes:

1. name: You must specify fb_share for this attribute.
2. type: The type of Share button or link to render, with or without a count included
3. share_url: The URL for the page you want to share

You can do this by firstly including following lines in the head section of your code:

and then by using the anchor tag with the appropriate attributes, exactly where you want it to appear on your page.



From the above attributes, only first one- name - is mandatory, the other ones are optional.

The "type" attribute can have one of the following values:

• box_count
• button_count
• button
• icon_link or
• icon

If none of them is specified, then the button defaults to the "button count" type. Experiment with them, and see which you like most!

Finally, regarding the anchor tag, if you don't specify a share_url, then this attribute defaults to the current page.



Facebook Share button - No2

Are you working with graphic designers, that want every button in your page to be customized according to the general design of your website?

Well in this situation, you can include your own button this way:

Let me explain a little bit. As you can see, you have an anchor tag, which, on click, calls a javascript function "fbs_click". Inside img tag, you locate your own image!

In your head section or just above the anchor tag, you define "fbs_click" function the way I did. The function, takes the url of your current page.

The url that is passed to the Facebook servers looks up certain HTML tags within it. If you don't tag your page, Facebook Share will grab the title of your page as specified in the title tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

In order to control the exact title, description, and thumbnail that Facebook Share uses, add the following meta tags to the head element in your page:




Conclusion
If you want to do this the simple way, use the first solution! If you want to put your own button, just use the second way!

There is also a third way to include a share button in your website. You have to include the Facebook JS SDK and invoke stream.publish or stream.share from the FB.ui() method. But I will explain it in more detail, in another post!


***You can read more about "Share button" at the official Facebook site.

Import large sql dump into Wamp

Do you want to import a huge sql file locally at Wamp?

Edit php.ini file and change(increase) the values of following variables

• upload_max_filesize
• post_max_size

Ckeditor & Greek entities

If you type a greek word in ckeditor and in source view you take some weird characters, then put this code in the config.js file and problem is gone: