Refreshed and redesigned DCW
by Arthur
Posted on Wednesday, August 30th, 2006 at 8:06 pm CET
These last weeks I have been working on my site Disney Comics Worldwide (which I’ve had since 1995). DCW is a popular website with information on Disney comics and magazines from around the world. I’ve completely updated the design and user interface and added new functionality here and there. I’ve optimised the source code by moving from a table-based design to CSS-based DIV boxes that are positioned relatively on the page.
Disadvantages of the old design were that it was only 780 pixels wide, there were lots of nested tables and tiny images that made the pages very large, and the font size was very.
I’ve now changed the width of the page to 960 pixels, which gave me more space and allowed me to increase the font size. Along with the rounded corners and bright colors the site now has a more web 2.0-type look.
A new ‘Leave a comment’ area on each of the 1,000+ title pages lets users leave comments. I rebuilt the site from ASP to PHP earlier this year, and I just *love* PHP!
For instance, the function strip_tags allows me to strip all HTML code from the message field. I could never do that easily in ASP, but now it’s just one simple line. What I actually did is compare the length of the message with the length of the message with the HTML code stripped out, and if this is not the same then I give an error message “Please remove the HTML tags from your message”.
Another brilliant PHP function that I actually didn’t use but may use later, is to check that an email address is correctly formatted. I found the following function to do this:
if (ereg("[[:alnum:]]+@[[:alnum:]]+.[[:alnum:]]+", $email)) { echo "email correctly formatted"; }
I’ve also added some JavaScript and CSS in places to hide and unhide certain information on the page. On the country pages, for instance, I have a list of all the titles in that country, and titles can either be active or cancelled. What I’ve done to allow users to dynamically change the list between all, active and cancelled titles, is give each row in the table a unique ID based on the title ID number from the database, like this:
Earlier on the page I have used PHP to put all, active and cancelled titles in three seperate arrays, and then put these arrays in a JavaScript that will output like this:
function toggle(action) {
var allTitles=new Array("227","681","682",...);
var allActive=new Array("845","226","1180",...);
var allInactive=new Array("227","681","682",...);
if (action=='all') { switchRows(allTitles,''); }
if (action=='active') { switchRows(allActive,''); }
if (action=='cancelled') { switchRows(allActive,'none'); }
}
The switchRows JavaScript function goes through an array and switches the display value of each row in the array to ” (visible) or ‘none’ (invisible):
function switchRows(theArray,value) {
for (i=0; i < theArray.length; i++) { document.getElementById('r'+theArray[i]).style.display=value; }
}
Fun stuff. The next thing I plan to add is RSS feeds to all title pages and country pages to keep track of the comments. I already made an RSS feed of all comments for myself, which was surprisingly easy to set up.
These last weeks I have been working on my site Disney Comics Worldwide (which I’ve had since 1995). DCW is a popular website with information on Disney comics and magazines from around the world. I’ve completely updated the design and user interface and added new functionality here and there. I’ve optimised the source code by moving from a table-based design to CSS-based DIV boxes that are positioned relatively on the page.
Disadvantages of the old design were that it was only 780 pixels wide, there were lots of nested tables and tiny images that made the pages very large, and the font size was very.
I’ve now changed the width of the page to 960 pixels, which gave me more space and allowed me to increase the font size. Along with the rounded corners and bright colors the site now has a more web 2.0-type look.
A new ‘Leave a comment’ area on each of the 1,000+ title pages lets users leave comments. I rebuilt the site from ASP to PHP earlier this year, and I just *love* PHP!
For instance, the function strip_tags allows me to strip all HTML code from the message field. I could never do that easily in ASP, but now it’s just one simple line. What I actually did is compare the length of the message with the length of the message with the HTML code stripped out, and if this is not the same then I give an error message “Please remove the HTML tags from your message”.
Another brilliant PHP function that I actually didn’t use but may use later, is to check that an email address is correctly formatted. I found the following function to do this:
if (ereg("[[:alnum:]]+@[[:alnum:]]+.[[:alnum:]]+", $email)) { echo "email correctly formatted"; }
I’ve also added some JavaScript and CSS in places to hide and unhide certain information on the page. On the country pages, for instance, I have a list of all the titles in that country, and titles can either be active or cancelled. What I’ve done to allow users to dynamically change the list between all, active and cancelled titles, is give each row in the table a unique ID based on the title ID number from the database, like this:
Earlier on the page I have used PHP to put all, active and cancelled titles in three seperate arrays, and then put these arrays in a JavaScript that will output like this:
function toggle(action) {
var allTitles=new Array("227","681","682",...);
var allActive=new Array("845","226","1180",...);
var allInactive=new Array("227","681","682",...);
if (action=='all') { switchRows(allTitles,''); }
if (action=='active') { switchRows(allActive,''); }
if (action=='cancelled') { switchRows(allActive,'none'); }
}
The switchRows JavaScript function goes through an array and switches the display value of each row in the array to ” (visible) or ‘none’ (invisible):
function switchRows(theArray,value) {
for (i=0; i < theArray.length; i++) { document.getElementById('r'+theArray[i]).style.display=value; }
}
Fun stuff. The next thing I plan to add is RSS feeds to all title pages and country pages to keep track of the comments. I already made an RSS feed of all comments for myself, which was surprisingly easy to set up.