SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Random Quote Widget Needs Improvements

    I'm creating a random quote widget for the first time. I want my widget to work off-line, and be fueled by JavaScript. I've taken apart other similar widgets to figure out the code, but they're all to complicated. This is the code I'm using:

    Code:
    <html>
    
    <head>
    
    <style>
    	body {
    		margin: 0;
    	}
    
    	.helloText {
    		font-size:xx-small;
    		font-family: "Lucida Grande";
    		font-weight: bold;
    		color: white;
    		text-align: center;
    		position: absolute;
    		top: 10px;
    		left: 18px;
    		width: 180px;
    		
    	}
    </style>
    
    </head>
    
    <body>
    		
    		<img src="Default.png">
    		
    		<div class="helloText">
            <SCRIPT LANGUAGE="JavaScript">
    document.write('<form><input type=button value="Refresh" onClick="history.go()"></form>')
    </script>
    <br />
            
            <SCRIPT LANGUAGE="JavaScript">
    //store the quotations in arrays
    quotes = new Array(6);
    authors = new Array(6);
    quotes[0] = "I have a new philosophy. I'm only going to dread one day at a time.";
    authors[0] = "Charles Schulz";
    quotes[1] = "Reality is the leading cause of stress for those in touch with it.";
    authors[1] = "Jack Wagner";
    quotes[2] = "Few things are harder to put up with than the annoyance of a good example.";
    authors[2] = "Mark Twain";
    quotes[3] = "The pure and simple truth is rarely pure and never simple.";
    authors[3] = "Oscar Wilde";
    quotes[4] = "There's no business like show business, but there are several businesses like accounting.";
    authors[4] = "David Letterman";
    quotes[5] = "Man invented language to satisfy his deep need to complain.";
    authors[5] = "Lily Tomlin";
    
    //calculate a random index
    index = Math.floor(Math.random() * quotes.length);
    
    //display the quotation
    document.write("<DL>\n");
    document.write("<DT>" + "\"" + quotes[index] + "\"\n");
    document.write("<DD>" + "-- " + authors[index] + "\n");
    document.write("</DL>\n");
    
    //done
    </SCRIPT>
            
            
            </div>
    
    </body>
    
    </html>
    Basically, the javascript will insert a quote, and the author, once the widget is refreshed. The widget is refreshed by the javascript on the refresh button. Everything works exactly like I want it to on Mac OS 10.4, but not on Leopard.

    Can anyone help me improve my widget, and make it work on all platforms?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Here's what I'd do with it.

    • Store the array as object pairs
    • Set a background color to see what's happening in the example
    • The language attribute isn't used anymore, it's now type="text/javascript"
    • The document.write's have to go, use DOM elements instead
    • A button doesn't have to be in a form


    Code HTML4Strict:
    <html>
    <head>
    <style>
    	body {
    		margin: 0;
    		background: black;
    	}
     
    	.helloText {
    		font-size:xx-small;
    		font-family: "Lucida Grande";
    		font-weight: bold;
    		color: white;
    		text-align: center;
    		position: absolute;
    		top: 10px;
    		left: 18px;
    		width: 180px;
    	}
    </style>
    </head>
    <body>
    <img src="Default.png">
    <div class="helloText"> <br />
        <dl>
            <dt id="quote"></dt>
            <dd id="author"></dd>
        </dl>
    <script type="text/javascript">
    var elInput = document.createElement('input');
    elInput.setAttribute('type', 'button');
    elInput.setAttribute('value', 'Refresh');
    elInput.setAttribute('onclick', 'history.go()');
    document.body.appendChild(elInput);
    </script>
    <script type="text/javascript">
    //store the quotations in arrays
    quotes = [
    	{quote: "I have a new philosophy. I'm only going to dread one day at a time.", author: "Charles Schulz"},
    	{quote: "Reality is the leading cause of stress for those in touch with it.", author: "Jack Wagner"},
    	{quote: "Few things are harder to put up with than the annoyance of a good example.", author: "Mark Twain"},
    	{quote: "The pure and simple truth is rarely pure and never simple.", author: "Oscar Wilde"},
    	{quote: "There's no business like show business, but there are several businesses like accounting.", author: "David Letterman"},
    	{quote: "Man invented language to satisfy his deep need to complain.", author: "Lily Tomlin"}
    ];
     
    //calculate a random index
    var index = Math.floor(Math.random() * quotes.length);
     
    //display the quotation
    document.getElementById('quote').appendChild(
    	document.createTextNode(quotes[index].quote)
    );
    document.getElementById('quote').appendChild(
    	document.createTextNode(quotes[index].author)
    );
    </script>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code helped clean up everything. I'll let you know if it worked. Thank you.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still this widget does not work on the new OS X Leopard. It will install, and once it's open you can see a quote, but the button is not refreshing.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    I suspect that the history.go() part is causing issues on there.

    If may help to put the code to display the quote into a function, and call it onload as well as from the button.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would prefer a button that could get the text and display it, rather than having to refresh each time. The refresh function is causing problems with the widget flipping from back to front.

    I know I could have a javascript function open a web page and get an element by id, but this would go against my objective of making the widget work off-line. Do you have any ideas of how I can achieve this?

    Thank you.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    [QUOTE]Put the code to display the quote into a function.[\QUOTE]

    It will work offline with no trouble.

    When the page loads, have it call the function.

    Code HTML4Strict:
    <body onload="displayQuote()">

    When the button is clicked, have it display the function.

    You don't need to use scripting to create a button.

    Code JavaScript:
    var elInput = document.createElement('input');
    elInput.setAttribute('type', 'button');
    elInput.setAttribute('value', 'Refresh');
    elInput.setAttribute('onclick', 'history.go()');
    document.body.appendChild(elInput);

    The above can be easily be removed and replaced with normal HTML, that also calls the quote function.

    Code HTML4Strict:
    <input type="button" value="Display new quote" onclick="displayQuote()" />

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's working, but it's adding a quote each time instead of replacing the quote. I haven't tested it in Leopard yet.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    That's this part here.

    Code JavaScript:
    //display the quotation
    document.getElementById('quote').appendChild(
        document.createTextNode(quotes[index].quote)
    );
    document.getElementById('quote').appendChild(
        document.createTextNode(quotes[index].author)
    );

    Change it to (currently untested)

    Code JavaScript:
    //display the quotation
    var quote = document.getElementById('quote');
    quote.replaceChild(
        document.createTextNode(quotes[index].quote),
        quote.firstChild()
    );
    quote.replaceChild(
        document.createTextNode(quotes[index].author),
        quote.firstChild()
    );

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can not get that to work for the life of me.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    That's why I stated it was untested.

    The first time around it's going to be empty so there's nothing to replace.
    A better way is to create a new node and replace the old one with that.

    Code JavaScript:
    //display the quotation
    var oldQuote = document.getElementById('quote');
    var newQuote = oldQuote.cloneNode(false);
    newQuote.appendChild(document.createTextNode(quotes[index].quote));
    newQuote.appendChild(document.createTextNode(quotes[index].author));
    oldQuote.parentNode.replaceChild(newQuote, oldQuote);

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for helping me create my first widget. Here is a link to the zipped file if you want to see the final product. Of course to use it you have to have Win Zip, Stuff It, and at least OS X.


    http://www.itracedesigns.com/testlink.html

  13. #13
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    damn too late to this thread
    Mashups, DOM Scripting and all the things we call Web2.0 blogger
    http://www.heavyweightgeek.org/
    http://twitter.com/heavyweightgeek

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can still help if you want. I have an addition to make to the widget. Since the widget is designed to work off-line, and doesn't pull from a database, it makes updating it difficult. So the next phase will be to add a button that will grab new content from a web site to replace the old quotes, or add new functionality.

    I haven't started any work on this yet, but if you have any ideas I'd like to hear them.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    That's sounding like Ajax to me, where you'll need a server to receive the request and feed it the updated quotes, quite possibly in JSON format.

  16. #16
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I remember my first widget.

    If you want it to access the web, save the qoutes to a file and then read them. There are a few preferences you have to set in Info.plist.

    AllowFileAccessOutsideOfWidget must be set to true, since the widget storage built in can be somewhat cumbersome and comes with a few restrictions.
    You also need: AllowInternetPlugins to be set to true (i think) and you have to set AllowNetworkAccess to true too. If you are lazy and don't want to add three entries you can just go with: AllowFullAccess set to true.

    Good luck.
    (function(){arguments.callee()})()


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •