Show/hide details on web pages
Posted on Tuesday, July 17, 2007 at 9:57 PM
It's always nice to include lots of text containing keywords on a web page. But it is so easy to overdo the amount of text. Indeed, it can be very offputting to a visitor.
Is there a way to include text such that the veiwer can elect to read it or not ? YES THERE IS ! And I found it at the HTMLcenter web site.
It's all rather easy actually. First of all yopu need a small amount of JavaScript programming, which should be put in the <head> section of your web page. Here is the code.
<script> function show_hide(the_layer)
{
if(document.getElementById(the_layer))
{
if(document.getElementById(the_layer).style.display
== 'none')
{
document.getElementById(the_layer).style.display =
'inline';
}
else
{
document.getElementById(the_layer).style.display
= 'none';
}
}
}
</script>
Right, having sorted that out you need to code your HTML in a special way as follows. By the way, this example code is taken from my Agatha Christie web site where you can see it in operation on the home page and also on each novel summary page. Do have a look and then return to this posting.
<p><a href="javascript:show_hide('foobar');">Show/hide Agatha Christie's biography<'/a><br /><br /></p><div style="display: none; text-align: justify;" id="foobar"><p>Agatha Mary Clarissa Christie (Lady Mallowan) DBE is known throughout the world as the Queen of crime.......</div>
You will see that the coding is in several parts. A call to the JavaScript routine, the link text I wanted to display on the page, a <div> with various formatting commandes to hold my text, and the text itself.
As you will see from my example page(s) the effect is great.
HAVE FUN !
Technorati Tags: gbtamc, show/hide, layers
Post-it notes on web pages
Posted on Tuesday, July 17, 2007 at 1:57 PM
Post-it notes are in every day use on desktops (including monitor desktops) and are a useful reminder of important details needing action. Well. How about post-it notes on a web page ? Why, you ask ? Well, they are a very good way of temporarily displaying information without having to clutter up the page on a permanent basis.
I have searched for a long time for a simple way of implementing post-it notes on web pages, and finally found a rather nice solution by Benjamin Keen.
If you open the home page of this blog you will see at the top just underneath the yellow box a link "About this site..." If you click this link a post-it note will open. Clicking the note will close it.
This solution uses a JavaScript file together with special formatting of the HTML code. This link contains all the information you need (I suggest you inspect the source code) together with a download link to the JavaScript file.
To assist you here is a summary.
NOTE that all postits on a single page MUST have unique ID's such as postit1, postit2 etc
First of all you will need to download the JavaScript file and upload it to your web server. Then you will need to add <script type="text/javascript" src='postit.js'></script> to the <head> section of your web page. I would also suggest that you add <style type='text/css'> #postit1 { display: none; } to the <head> section to make absolutely sure that the postit (or a list of postits separated by commas) do not display when the page loads.
Right. Now we are in a position to add out postit. The example contained on my home page consists of the following HTML code.
REM this is the call to the JavaScript file
<div
id="postit1" onclick="return showPostit(this.id)">
REM This puts a nice bar header at the top and
then comes the actual text (which can include hyperlinks
<div
style="background-color: #336699; padding: 2px; color: white">About this
site...</div>
REM Now the actual text of the postit, which may
include hyperlinks
<br>This site
contains just a few of my random thoughts on computers, software, the
web, and much, much more. <br><br> It is updated on an occasional basis,
and I have an RSS feed available. <br><br> This RSS feed will keep you
informed of all new postings. <br><br> To access the feed, simply copy
<a href="http://www.gbtamc.co.uk/blog/rss.xml">THIS LINK</a> into your
feed reader. <br><br> <b>Click this panel to close...</b><br><br></div>
REM and finally the actual link that appears on
the web page
<br><a href="#"
onclick="showPostit('postit1')" style="width: 300px;">About this
site...</a>
Of course you can adjust the colour of the header bar to suit your web page design.
HAVE FUN !
Technorati Tags: gbtamc, postit, post-it, postits, post-its, postit notes, post-it notes
Tooltips on web pages
Posted on Tuesday, July 17, 2007 at 12:37 PM
Tooltips on web pages ? Whatever would I use those for ? Well, they are a very good way of temporarily displaying information without it cluttering up the page on a permanent basis. But how on earth would I do it ? Recently I was browsing the CSSplay web site, and I came across a very simple, elegant way. However, as with most of the CSSplay examples, there is very little in the way of explanation as to how to implement it, merely an example page (which is situated here). So here is a little bit of help on how to produce tolltips using purely CSS.
First of all a little example. Place your mouse over this linkThis is the tooltip.. Voila. A lovely little tooltip that disappears when the mouse moves away. So what is needed to work this little piece of magic ? First of all a simple style sheet in the <HEAD> section of your web page or your default CSS file if you prefer. The code for this follows. Simply copy and paste the following purple text.
<style type="text/css">
a.tooltip
{color:#c00;}
a.tooltip b {display:none;}
a.tooltip:hover
{border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:hover
b {display:block; position:absolute; top:20px; left:-25px; padding:5px;
font-weight:normal; color:#000; border:1px solid #888; background:#ffc;
width:150px;}
a.tooltip:hover b em {position:absolute; left:20px;
top:-6px; width:11px; height:6px; background:#fff url(tooltip.gif) 0 0;
display:block; font-size:1px;}
</style>
How to display the tooltip ? Here is the HTML code that I used in the above example. Place your mouse over <a class="tooltip" href="#">this link<b>This is the tooltip.</b></a>.
Right. Now here is a little variation which make the box of the tooltip a little bit more appealing. We shall use a small "carat" graphic (available HERE - click the link, download and upload to your web server, changing the CSS URL to point to it) and a couple of changes to the HTML code. AFTER the <b> add <em></em>. I know this appears to be a little strange but yes, you do put these two tags together with NOTHING in between ! See this example. Place your mouse over this linkThis is another tooltip. Note the top "carat" graphic..
HAVE FUN !
Technorati Tags: gbtamc, tooltip, tooltips
Diana Princess of Wales
Posted on Sunday, July 01, 2007 at 3:57 PM
Above compilation picture of Diana and Althorp - her resting place.
July 1st 2007 saw a massive five hour concert at Wembley Stadium in celebration of what would have been the 46th birthday of Diana, Princess of Wales. 63,000 people attended the concert which was televised in full by the BBC.
Organized by Princes William and Harry, many of Diana's favourite musical artists took part including Elton John, Tom Jones, Bryan Ferry, 'Status Quo', Rod Stewart and 'Take That'. Also performing were 'Duran Duran', Will Young, Joss Stone, Nelly Fortado, Lily Allen, 'The Feeling', James Morrison, P Diddy, Natash Beddingfield, Orson, Kayne West, Pharrell Williams, The English National Ballet and Roger Hdgson of Supertramp, and many, many more.
Funds raised will go to charities supported by Diana and the two princes, including Centrepoint, HIV charity Sentebale, The Diana Memorial Fund and others.
Technorati Tags: gbtamc, television, diana, princess, wales, princess of wales, diana princess of wales, wembley, wembley stadium, BBC
