Tag: website

jQuery to Add Content to a Column with Header Copy

I have recently had to use jQuery to add some copy to a column in a table. The problem I had was identifying which column. In my case the each column had it’s own class eg: –

<thead>
<tr>
<th class=”column-1″>Model Number</th>
<th class=”column-2″>Height</th>
<th class=”column-3″>Width</th>
<th class=”column-4″>Enquiry</th>
</tr>
</thead>

What I wanted to do was add some html (including a variable that represented the enquiry form) to the Enquiry column, in this case it would be column-4.

This all looks pretty simple if you have the same number of columns for each table, but I didn’t, so I needed to look for the enquiry column, then mark it to add the code to. The workflow is therefore: –

  • Find the column class where the column header (th) has the text Enquiry
  • Mark that column class by adding an extra new class, in this case enqcol
  • Add the additional code to the column with the enqcol class

Our code is as follows: –

var classname = $( “th:contains(‘Enquiry’)” ).attr( ‘class’ )
$(‘table tr td.’+ classname).addClass(‘enqcol’);
$(‘td.enqcol’).html(‘<a href=\”‘ + enquiryform + ‘\”><img src=\”http://simongriffiths.name/images/enquriy-icon.png\” alt=\”Quick Quote\” width=\”15\” border=\”0\”></a>’);

The first line defines a variable called classname. This is set as the name of the class of the table header (th) that contains “Enquiry”. The result in the example above would be that classname=”column-4″.

The second line uses the variable above. It adds the class enqcol to any table cell (td) with the classname=”column-4″. Therefore at this point our code would be modified by jQuery to become: –

<thead>
<tr>
<th class=”column-1″>Model Number</th>
<th class=”column-2″>Height</th>
<th class=”column-3″>Width</th>
<th class=”column-4 enqol”>Enquiry</th>
</tr>
</thead>

The last line essentially looks for a table cell with the class enqcol (td.enqcol) and adds the html shown. In this case we are adding: –

<a href=\”‘ + enquiryform + ‘\”><img src=\”http://simongriffiths.name/images/enquriy-icon.png\” alt=\”Quick Quote\” width=\”15\” border=\”0\”></a>

Note that the \ allows the ” to show as part of the text to be added rather than being part of the code.

In this case you can substitute the html above with anything you like, but I am a variable “enquiryform” which is the URL of a page I have set elsewhere as a link and I am adding an icon rather than copy to link from.

It should be noted that this relies on each column being marked with a class. If this isn’t the case, you can probably add classes with jQuery before you run this step. You may even be able to modify this code to use the child number rather than looking for a class.

Web Designer customer Cheat Sheet

These are some questions I normally ask clients when I am looking to develop a website.

I will expand on this post later to add in more details.

1. What is the website for?
Brochure, E-commerce, Business card, reinforcement
[Why: to see what the site need to include and what technologies should be involved]

2. Who are the customers?
Male, Female
Age range
What do they do
What is their job title
[Why: to try to profile the customer so that site design and content can be created to suit the audience]

2a. Who is the competition?
[Why: so we can look at their sites and see what we can learn about keywords, expected layout etc]

3. How would you expect the customer to find the site?
Search, word of mouth, literature/business card
[Why: to see how much emphasis needs to be placed on SEO/SEM]

4. If search, what would they be looking for to find the site?
[Why: so that keywords can be checked to see if there are more available]

5. What sort of device would they use to access the site?
PC, netbook, phone
[Why: to see what technologies need to be involved/avoided, to look at creating specific content for a device]

6. Where would they typically access the site from?
Office, home, out and about (using public wifi or mobile connection)
[Why: to see how much bandwidth the site can take without inconveniencing the user]

7. Are you geographically based?
What are the limitations you want to put on area.
[Why: to make sure content is written to make this clear, make sure Google is aware of this and to see what type of hosting is required]

8. What type of site are you thinking about?
Examples of sites that you like.
What do you like about these sites?
[Why: to get an idea of what you expect from the site]

9. What tone do you want to set with the site?
Professional (typically more subdued), light hearted, fun
[Why: to make sure that the tone of writing matches that of other literature or the image the company is portraying]

10. Do you have other literature/business cards?
[Why: so we can make sure the site matches the style and creates a total company image]

11. Would you want to be able to edit the site content?
All content, a blog, social media
[Why: to see what technologies we need to use and what you expect from updates]

12. What timeframe and budget is the site required in?
[Why: Timeframe will set what is there is time to do in terms of design and interaction, also whether the designer can actually do it or not. Budget will set again set what is possible to do].
[Note: Budget is always tricky as the client will not want the designer to design to a budget. Possibly ask for a range, or look at requested features and say roughly what each will cost].

Latency – A bigger issue than I thought

I have recently completed some tests to see whether a site that our sister company manages has a latency issue and is suffering from being hosted in Europe, rather than here is Australia.

I have to say that when I initially looked at the tests I did think that there would be some effect, having seen delays in the download of some files over the past year or so, however I was not really prepared for the effect that I actually saw.

Firstly to do the test I used Firefox with the web developer toolbar, Firebug installed. Web developer toolbar allows me to switch off caching, so that I could see files as they would be if they were coming to a new user. Firebug includes a “Net” feature that actually let you track when the browser made a request and when it was returned. It also looks at the total time it takes to complete the page.

So the test simply involved setting up a rough duplicate of the home page, hosting that locally, then navigating to both with cache turned off and checking the response time. Note that some of the local files did give errors (which actually resulted in a larger download), these were spacers etc I couldn’t find in the files.

The results….the time to load the page reduced from a massive 36.51 seconds for 300kB, to 14.7 seconds for 350kB when hosted in Australia.

I should also mention that I tested the European hosted page on a high speed connection, and got exactly the same speed. This would seem to indicate that speed on that site is latency limited. My feeling is that this 14.7 seconds for the Australian hosted site is bandwidth dependant (my work struggles at times). I will check this out further and update the posting.

The conclusion: It may seem reasonable to have a large corporate site hosted in a single location worldwide, where content can be tightly controlled. However judging by our tests, the customers user experience will be severely degraded to a point that the site may become unusable.

My advice would be host locally, or if you have to host overseas, check your speeds carefully to ensure you will have returning visitors.

Happy Easter

Hope you all have a great Easter. I am going to try to keep my hands off the eggs a bit tomorrow (I am writing this on Saturday night).To give you an update on tad.tw, handing out the cards in the city to commuters really didn’t have a significant effect on my stats. The mobile stuff is so tricky, as you can’t promote it as a traditional site, and there are very few avenues open. The next attack will be via traditional methods too. I am going to look at putting some press release in magazines and the paper, to see what that brings. I have also bought another domain brisbanetraintimes.com, which being international should help the organic page rankings, even though wouldn’t be that great for the user.btw – If you do have a look at tad and see the news and weather. I am also working on a way to get these more up to date. For some reason, even though I am using the same method the news comes through okay, but weather and TV are coming through sporadically or not at all.