What is Listify?

Listify is a very simple free service for web developers and designers, which allows you to convert raw text to html’s ‘list’ or ‘option’ elements by choosing various options like delimiter, type of lists and ignoring digits. I got this idea when I was working on the Clinova project. I had to insert the names of all the countries in the landing page of the site. To do that, I had to insert all the names within a <select> tag. You can very well understand the kind of time that would have been wasted doing it manually. So I went ahead and wrote a short piece of code in C, which would accept a text file with the country names and generate another text file with the <select> tags appended to the names. It saved a great amount of time which I utilized to do something else (I most probably saw an episode from How I Met Your Mother). Anyway, so when I started with Codeigniter, I thought, rather than wasting my time on creating a demo useless project, why not convert that C program to an online tool. Hence, came Listify.

This is still in Alpha stage and we would love to hear some suggestions for new features that you would like. Drop us a feedback here feedback@code-pal.com or leave a comment here.

How will it help?

Using listify you can speed up your HTML coding process when you need to include large lists or option elements in your code. For example, if you require option elements like country names, then you would have to add the tags to 257 names, which obviously will take some time. Using Listify, it would take just three seconds.

How to use it?

Using Listify is pretty easy. All you have to do is paste the text in the text box above, configure your options as per your requirements and just click on the generate button. You can place any raw text and choose a delimiter to divide it into the list / option elements. Basically, it involves three steps to generete list via Listify:

• Copy text from your desired source and paste it in the text box.
• Paste it in the text box, configure the options.
• Copy the generated list from the dialog box, paste it in your code

Now you can utilise your saved time the way you want to

What are these options?

List Type
This option enables you to choose what kind of list you want generated. Whether it is a list element  for an unordered / ordered list or an option element <option> element for the <select> tag.

Ignore Digits
Many a times there are unwanted numerical digits present in the text which we do not want to be included in the list / option item. This option enables generating the list ignoring the digits present in the text. For example, if you want to convert a numbered list to an unordered list, then just copy the list, select this option and the list items will be generated without the numbers.

Delimiter
A delimiter is a sequence of one or more characters used to specify the boundary between separate, independent regions in the text you want to be converted. It means that how you want your text to be divided into the list elements. For example, if a text is a,b,c and the delimiter is , then the list will be generated as<li>a</li><li>b</li><li>c</li> By default, if no delimiter is entered then it will consider “return” or “new line” as the delimiter. For space as a delimiter, you need to enter space etc.

Let me know if it was useful and feedback for improvements and bugs are most welcome.

Use Listify!

Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery, I will show you how to build a nifty effect to enhance your forms.

Am sure that this cool Neon blink effects in forms are going to be useful for a lot of purposes so don’t miss my tutorial on 1stWebDesigner.com.

In this tutorial, we have made use of @-webkit-keyframes which works only in browsers using the Webkit layout engine like Chrome and Safari. For browsers like Firefox and Opera, where there is no alternative, we will have to gracefully degrade the effect, which in this case will be just a box-shadow on focus. Internet Explorer ( till version 8 ) cannot render most of what we will learn here, but IE 9 does seem to be very promising from what I’ve seen in the recent platform preview.

Psdnation.info is a site dedicated to tutorials, articles, resources and artworks on photoshop. They provide many freebies which includes high quality PSD website templates. They made Grunge available as a fully editable, layered, grunge PSD website template. Professionally designed by them and developed by us, this high-quality freebie from PSDNation is a now also available as a xHTML/CSS template for the web development community. It can be used as a blog template or can also form a basis for CMS integration.

I wrote a tutorial for 1stwebdesigner.com It is about how to use CSS3 to achieve goals which were only possible using javascript libraries like jQuery and Mootools. In this tutorial, we create a slide out subscribe panel.

Once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor. All of this will be done by just using CSS3.

Don’t miss my tutorial on 1stWebDesigner.com if you want to bypass using javascript to achieve this cool sliding effect.

Formworks Company is a private construction company based in the United Kingdom. After completing the branding and the concept of their site, Buck Design Ltd. required us to convert their design into a static yet dynamic brochure website.

The Challenge

The site was designed in such a way that it contained a number of blocks distributed all over the page. It was the requirement of the design to give that look and feel to the site and it was our job to implement those blocks in the most efficient way possible. The primary requirement was to implement a gallery which would enable the user to update images and the details for different projects just by uploading the images via a FTP client. In some of the pages, the images were to be made dynamic such that they keep rotating with time.

The Solution

We implemented the site in the most efficient manner possible. Minimum amount of images were used to reduce bandwidth usage and enable super fast loading of the site. Most of the design boxes were implemented using purely cascading styles. The gallery was implemented using a PHP based open source gallery which was modified according to the design’s requirement. It enabled the user to update images and information related to a project by creating a folder by the project’s name. The gallery would do the job of fetching the data and images from the folder and displaying it in the website according. The rotating images implemented in the ‘Portfolio’ and the ‘Company Documents ‘ was implemented using jQuery.

Clinova is an international pharmaceuticals company. They approached Buck Design Ltd. to get their online identity renovated to a very professional one. They required highly customized pages because of the variety of products they have.

The Challenge

Being a pharmaceutical company, they have a large variety of medical products. Their requirement was that the whole site should be based on a content management system such that they themselves can update the site in a very easy manner. They also required the site to be multi-lingual. The primary challenges that we faced were in the three most important parts of the site, the products area, news area and research area.

The products page required to be pretty complex with each product having its own customized styling according to the product. The news page was pretty simple as it just required three different categories to be listed in the same page and also in the homepage. The research page was the tricky one as they had a particular demand for a graph representing the different stages of their research cycle. This graph would be dynamic and they should be able to update the stage of the research for any particular product through the content management system itself.

The Solution

The complete project required a detailed hierarchical structure of how the data should be organized in the content management system. We used the Google’s translate API to enable multilingual support of around fifty seven international languages. The site was developed keeping efficient user interactivity in mind such that maximum time is spent in browsing through the content. After chalking out the structure, our primary goal was to implement the interactivity required for the research graph. The structure was planned out in such a way that all the primary details for a product, the graphics related to it and all its meta-data were encapsulated together to represent a single entity. Then this single entity could be accessed anywhere in the site to represent the data in any format required as per the design.

The research stages of a particular product were also included as meta-data to the product. This enabled them to easily update the research stage which would reflect in the research graph in the appropriate manner. The site also required implementations of other categories like details about the company, partnerships, careers, connect and contact us with integrated Google map. The backend administration panel of the site was also customized to give a professional look and feel to the employees.

The Project

In this recent project of mine, I was required to construct a landing page. In this landing page, there would be a list of languages and after the user selects any particular language, the homepage of the site would open automatically in the respective selected language. It was also required to style the select list box in the way it was given in the design of the landing page. So I opted for the jqTransform jQuery plug-in, which I used once to style some forms. jqTransform is very nice plug-in to customize the forms in a very easy way and the end product is no doubt beautiful. But in this case, it became a minor speed breaker to my progress.

The Problem

The drop down list control of the html form contains the ’select’ tags which enclose the various ‘option’ tags. Here is a form which I am using in this tutorial to explain the problem:

<form>
	<h4>Select Box Without jqTransform</h4>
	<div id="box-city" class="select-menus">
		<label>City</label>
		<br/>
		<select name="select-country">
  		        <option>Gotham</option>
			<option>New York City</option>
			<option>Smallville</option>
		</select>
		<div class="clear"></div>
	</div>
</form>

What jqTransform does is, it scans the whole ’select’ tag and creates an unordered list containing hyper-links of the options in the drop-down-list. It then hides the original ’select’ tag and its content.

<form class="jqtransform jqtransformdone">
	<h4>Select box with jqTransform and normal select change method</h4>
	<div class="select-menus" id="box-name">
		<label style="cursor: pointer;">Name</label>
		<div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
			<div>
				<span style="width: 119px;">Batman</span>
				<a class="jqTransformSelectOpen" href="#"></a>
			</div>
                        <ul style="width: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;">
				<li><a index="0" href="#" class="selected">Batman</a></li>
				<li><a index="1" href="#">Robin</a></li>
				<li><a index="2" href="#">Superman</a></li>
				<li><a index="3" href="#">Spiderman</a></li>
			</ul>
			<select name="select-country" class="jqTransformHidden" style="">
	 				<option>Batman</option>
					<option>Robin</option>
					<option>Superman</option>
					<option>Spiderman</option>
			</select>
		</div>
		<div class="clear"></div>
	</div>
</form>

This does not create a problem when we use the ’select’ tag generally for selecting a particular value and then performing the form submission by using a submit button. It creates a problem when we want to perform some function when the value of the drop down list is changed.

This is normally achieved in javascript by using the ‘change’ method of the select control. The ‘change’ method captures the value-change event and we can access the value selected by the user in the following manner.

// Capturing the change event of the Non-Transformed Select Box.
$("#box-city select").change(function(){
	var value= $(this).val();
    alert("Value Selected = "+value);
});

But after using the jqTransform plugin, the ’select’ tag is no more there to apply the change method on.

The Solution

The solution to this, is a very simple one. We can simulate the change event for the jqTransformed drop down list by applying a click function to the hyper-link element within the unordered list. Then we can have the selected value by accessing the text of the span tag where the selected element is set or displayed.

// Capturing the change event of the Transformed Select Box using the modified method of capturing the value change event.
$("#box-age div.jqTransformSelectWrapper ul li a").click(function(){
	var value= $("#box-age div.jqTransformSelectWrapper span").text()
	alert("Value Selected = "+value);
	return false; //prevent default browser action
});

Conclusion

This is one way of simulating the change function for drop-down-list boxes after using jqTransform to customize them. The other option is to modify the jqTransform plugin itself to properly access the onChange event of the ‘Select’ boxes. I hope the jqTransform plug-in developers can fix this problem in their next release of the plug-in. Though this is not a very important or common bug but I do hope that this was of some help.

Buck Design Ltd. wanted a single page website developed for their new client, Proactive Solutions. This single page website would act as an online business card which would just contain the contact details about the company.

The Challenge

Overall the project was a simple single paged static site but the design team had a particular specification about the design. They wanted the blue abstract box in the design to be exactly at a certain distance from the logo when the page loads and they wanted it to touch the right edge of the browser at all time.

The Solution

The design of the webpage was made for a particular resolution. But web pages can be viewed in a variety of screen resolutions. Now if the screen resolution of the computer was higher than the one designed for, then obviously the abstract blue box would move away from the logo as it needed to be attached to the right edge of the browser.

After discussing it with the design team, we came to the conclusion that the first impression of the site should be such that, the box is at that much distance from the logo as it was in the design. The only possible way to achieve this was to reset the browser window to a size which would bring the blue abstract box closer to the logo. This fulfilled their first demand of the blue abstract box being near the logo when the user first opens the site. If the user increases the web browser’s size, the blue abstract box is always attached to the right edge of the browser which satisfies their second demand.