Sometimes you don’t realize how a simple matter can take so much of your time, this small issue took 6 hours to figure out and finally I had to sit down, give it some deep thought, and find a solution myself. I was trying to use the <script></script> tags to show the link when JavaScript is there and show nothing when it’s not supported. But that didn’t work, i tried using <noscript><span style=”visibility:hidden”><a>bookmark</a></span></noscript>but that didn’t work either, as it did not display the link when JavaScript was enabled.   Can’t really remember how many things I tried in that six hour.

What I finally did was the easiest solution possible, but it just doesn’t come to you easily when you are new to something, in my case CSS and JavaScript.

I made the bookmark invisible in my external css file and wrote a simple javascript code that will be called on body load and if JavaScript is on it will change the visibility to visible, so if there is no javascript support there is no bookmark link to annoy the user, and if user has javascript enabled they will be able to use this extra functionality of the website.

So as I said because the script was simple and understandable I was able to modify it and simply add an else statement to at least notify the user that their browser does not support this functionality.

else
{
alert(“Sorry! Your browser doesn’t support this function.”);
}

When I thought OK I’m done here and I can now add the script to my website and call the bookmarksite(title, url) from my pages, I noticed that because I have the “add bookmark” link in every page of my website with about 7-8 pages, now I have to add the title and url of every page when ever I want to call the function. Actually the bookmarksite function from “Dynamic Drive DHTML” is written to book mark a site not a page and I want to use it to bookmark a page. What if I want to upload my content to another site, what if the url changes, what if the titles changes, etc. In all these case I have to go through each page and modify the parameters required for the function.

So what I did was to find out how I can read/get the url and title of a page by programming. I was a nice journey and I learned a lot. To get the url the “document.location.href”  will do the trick and the “document.title” will give you the title.

So I changed the bookmarksite(title,url) to bookmarkpage(), and added var title = document.title; and var url = document.location.href; inside the function. Nicely done. This was impossible if I had decided to use the complicated but ultimate script that I mentioned before.

My script looks like this:

function bookmarkpage()
{
var title = document.title;
var url = document.location.href;

if (window.sidebar) // firefox
{
window.sidebar.addPanel(title, url, “”);
}
else if(window.opera && window.print)
{ // opera
var elem = document.createElement(‘a’);
elem.setAttribute(‘href’,url);
elem.setAttribute(‘title’,title);
elem.setAttribute(‘rel’,'sidebar’);
elem.click();
}
else if(document.all)// ie
{
window.external.AddFavorite(url, title);
}
else
{
alert(“Sorry! Your browser doesn’t support this function.”);
}
}

The  code above is a modified version of this  http://www.dynamicdrive.com/dynamicindex9/addbook.htm.

It uses a little bit of JavaScript and is mostly managed by CSS.

Out there on the net there are a lot of free javascript codes that you can use. I personally don’t like the popup to have the look and feel of a window. However, most simple JavaScript codes, open a new window which can be programmed to be resized with the picture dimensions.

Here you can find information on these kind of popups:
Image Popup Window/DHTML Picture Pop up Java Script
Auto-Sizing Image Popup Window Script
Cut & Paste JK Pop-up image viewer
Javascript Popup Image Window

For more complex examples check these out:

visuallightbox.com

highslide js

http://www.blog.spoongraphics.co.uk/tutorials/encoding-a-photoshop-mockup-into-xhtml-css

http://www.talk-mania.com/web-layouts/43999-old-paper-layout-great-portfolio-layout.html

http://blog.plasticmind.com/design/creating-mockups-in-photoshop/

http://line25.com/tutorials/create-a-clean-modern-website-design-in-photoshop

http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

Anyway I want to share few things about uses cases that I learned from a very dear lecturer at UTS ‘Bhuven Unhelkar’.

Use cases and use case diagrams are a way of capturing requirements. Use case diagrams provides a visual overview of the requirements of the system through actors, use cases and their interactions (Practical Object Oriented Analysis, Bhuvan Unhelkar).

The main elements of a use case diagram are: Actors, Use cases, Relations, System boundary.

Who is an actor? It is often shown by a Stickman symbol. An actor is anything that is outside the system and interacts with the system. Anything initiates a transaction. Anything sends and receives messages. Any External devices and systems that the system interfaces with. Devices such as ATMs, printers, keypads, card readers can be actors. Systems might be government regulatory systems, private health insurance systems, etc. An example of an actor in a hospital management system would be a patient.

What is a use case? A use case is a series of interactions of an actor with the system. It describes what the system does, not how it does it. An example of a use case in a hospital management system would be “patient books an appointment”.

What is a system boundary? It separates the actors from the use cases. Separates inside and outside the system. Is often shown by a box.

Relations are four types: association, include, extend, inheritance and need to be covered in details. I might write a new post on relations in future.

Association is the most important and straight forward one which shows the interaction of the actor with the use cases.

For those who want to know about use cases in a simple and effective way I strongly recommend reading the book ” Practical Object Oriented Analysis by Bhuvan Unhelkar” or have a look at “Use Cases: Good & Bad” and “Practical Object Oriented Analysis“.

I don’t know what the problem was, I just kept receiving an error. Simply on the top of my page after pressing the “leave message” button, the word “Error” appeared and the program gave me no more information. It was quite frustrating to find out what the error is, when you can not debug and trace your code. So I had to start from the beginning on a new file. This time it simply worked.

I had a form with a textfield, submit and reset button.

<form id=”form1″>
<input id=”name” name=”name” type=”text” />
<input id=”submit” name=”submit” type=”submit” value=”Send” />
<input id=”reset” name=”reset” type=”reset” value=”Reset” />
</form>

When I was loading my web page in firefox, I found out if I put a value in the textfield and before submitting or resetting the form, refresh the page, the textfield value will not disappear.

So, I thought of resetting/clearing the form every time the page is loading. To do this I found information on this page: http://www.java2s.com/Tutorial/JavaScript/0200__Form/Resettingaformonpageload.htm

I happily added this code to my HTML doc:

<script type=”text/javascript” language=”javascript”>
<!– //
function ClearForm(){document.MyForm.reset();}
// –>
</script>

and called the ClearForm() function in the body tag:

<body onload=”ClearForm()”>

BUT I got this error message in Firebug : document.form1.reset is not a function

Can you guess why I was receiving this error message?

Because I had named a form element “reset”!!

So, I changed the code to:
<input id=”resetButton” name=”resetButton” type=”reset” value=”Reset” />
</form>

Problem solved

Remember those hard days that you needed to keep track of the articles, web pages, etc that you needed to reference in your essays and articles, now with Zotero life is easier.

Zotero is a research tool that enables you gather and organise resources. Visit its website: http://www.zotero.org/

Zotero is that it is free and will find and automatically save the full reference information in separate fields. You can use it for online books, journal articles, web pages and other resources with a single click.

For me the best part is that I don’t need to bookmark the pages that I want to reference later, and find the bibliographies, anymore. I just add them to Zotero and later when I want to do the referencing, they are neatly there, just need to export data as formatted bibliographies.