designing4u.de Yet Another Coding Blog

23May/083

jQuery drop down – loading content according to option

It was a really busy day for me today, so I came up with a simple code for displaying content according to the option our user chooses from drop down list. What we will try to accomplish is to provide a user a drop down list and load content from a remote PHP file using AJAX request. Additionally we will filter the data and display only the content relevant to the chosen option. We will also make use of chainability of jQuery and add a nice fade in effect after the text is loaded.

22May/085

Google maps, jQuery and XML – displaying a simple navigation

After I wrote my last example yesterday, I just realized, how easy you can add a simple navigation to your map, whereas after you click on the link an information window will be provided right above the according marker. I think it's a nice way to provide your visitors a possibility to choose what they want to see instead of randomly clicking on markers to find out what are they displaying. This time I will also show, how you can easily create an XML document using DomDocument class, which should be installed by default in your PHP5 version, which we will later use to display the markers.

21May/086

Setting boundaries for google map with more markers using jQuery

For a project I'm currently working on I had to display more markers in one google map. No problem at all, but only if all of them are placed in one city. You can just set up default level for the city and display as many markers as you want. In my case I had to display latest markers, which were saved all over the country. One would say no problem at all, just use default zoom level for the country and display the markers. What if 10 latest markers were placed in one city though? It would look stupid if they would be displayed covering each other. Additionally we do not want to use an onload event, therefore, we will use jQuery in this example. For this kind of problem google came up with a pretty nice solution.

19May/083

Class for retrieving region, city and geolocation

For one of the social platforms I was creating I had to provide profile display according to the location from which the request was made. There are plenty services in the internet, which provide you an accurate database, which will translate IP address into region, city and geographical lengths. I didn't want to spend any money for this kind of service, so I decided to find a free solution for this task. However, none of the services existing in the internet provides you 100% accuracy, the one that I've found locates my IP correctly. It would be nice, if you could give me some feedback, if this class is working for you as good as it works for me. This example requires URL file-access to be enabled on your server, because we will request the XML data through URL call. In this example we will also use SimpleXMLElement class, which should be enable by default in PHP5, to translate our XML file into an object. We will then recurse received object into a suitable array.

18May/081

Simple roll over gallery with jQuery

My girlfriend just asked me to redo her blog. Besides new design, she wanted me to give the users possibility to preview her images simply by rolling over the thumbnails and showing the original version right above them. The power of libraries such ThickBox or LightBox give you the possibility to display pictures in hundreds of different ways, but none of them supported the way in which I wanted to accomplish it. I know that there are tons of examples in the internet, which can probably do it better, but I just wanted to share with you, how you can do it in a simple and unobtrusive way using jQuery, which is probably already included in your site (and almost all sites I created:).

16May/080

User registration class – simple authorization of user

This days almost any site is providing the users a simple registration to provide certain services only for registered users. This way you can collect their e-mails and keep in touch with them. If you planing on developing a social platform or just web 2.0 project you need to authorize your users and ask them to provide a valid e-mail address. In this simple example I will show you, how you can do that using this simple class.

16May/085

Simple drop down menu with jQuery

I recently was looking at the online documentation of jQuery and I've found a really nice event listener, which helps you to provide interaction with the user. I'm writing about it, because couple weeks ago I've found myself trying to provide a drop down menu using jQuery. I was playing around with mouseover and mouseout effects, but I couldn't really find the right way to display my drop down menus. The solution is simpler than I thought. Here is how I've done that.