smugblog: Web Tricks

So part of the new design is out, and no major problems that could not be solved But I wonder if anyone has taken a look at the source code and has seen what the future holds? Gone are the tables and inline styles, everything is now controlled by CSS and DIVs. If you look at the home page source, that is what the markup for galleries will soon look like, everything will be open for editing and moving around.

For example, let’s say that you want to move the header to the footer; using javascript you can do so easily:

header = document.getElementById("header").innerHTML;
footer = document.getElementById("footer").innerHTML;
document.getElementById("footer").innerHTML = header+footer;

Or something similar, placing IDs all over the place will not only allow you to restyle them, they will allow you to reference the data contained within them. You can also edit out the data you don’t want shown; for example if you have the “mini” footer that we place after your custom footer and don’t want the link to the cart; you could use this function in your javascript section; launch it onload of the page:

onload = replaceFooter;
function replaceFooter() {
     footer = document.getElementById("cobrand_footer").innerHTML;
     /* Firefox sees it as normal */
     footer = footer.replace('<a href="http://www.smugmug.com/cart/" class="nav">shopping cart</a> | ',' ');
     /* IE moves the nav class to one side */
     footer = footer.replace('<a class=nav href="http://www.smugmug.com/cart/">shopping cart</a> | ',' ');
     /* Safari caps the A tags, so this replaces Safari, WordPress does not leave them capped in my example, so cahnge them */
     footer = footer.replace('<a href="http://www.smugmug.com/cart/" class="nav">shopping cart</a> | ',' ');
     //when in doubt and it does not work in a certain browser, show the code the browser is getting and see what to replace
     //alert(footer);
     document.getElementById("cobrand_footer").innerHTML = footer;
}

So there are just two little things you can do with only part of the new code; let me know how it goes!

This entry was posted on Monday, July 11th, 2005 at 1:08 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.