Richard Jordan

Hello there

I was wondering if you might be able to help. I have been using your  free
XML importing script inside a mac osx widget that displays an  rss feed. It
works really well and I am very pleased with how it's  working, you did a
great job.

As you know RSS feeds can also contain a image tag inside and item  tag in
an xml file. I would really like to display the image along  with the rest
of the xml data being passed. However I am not a java  script expert and
don't know how to edit your xml script to add a  line telling the script to
also include the item image in the output.  Also I would then need to create
a div tag in the css file to tell  the script where to place the image.

Can you help in anyway or is it just not possible? The widget I am  working
on is available with a screen shot on the apple website, if  it helps for
you to see what I have done so far:

[URL]

I look forward to hearing from you and I do hope you are able to  help, it
would really improve the widget greatly

Kind regards

Richard

Hi there

So Sorry I Meant To Write Enclosure Tag And Not Image Tag, You Are  Totally
Right, The Channel Tag Is The Only Place You Can Have An  Image Tag.

The Feeds We Have On Our Site Use The Enclosure Tag To Add A Image To  The
Rss Feed. Please Feel Free To Have A Look Here: [URL]

Many Apologies For Confusing The Situation. So Is It Possible To Pass  The
Enclosure Tag As Can Be Seen On Tour Site Using Your Script?

Thanks For Your Reply And I Look Forward To Hearing From Again Soon

Kind regards

Richard

Hello there

Many thanks for the revision to include enclosures, that's fantastic.

I have implemented most of the code revisions into the widget, but
there is one little section I am having trouble with. I'm afraid I am
not a java script expert at all and somebody else made a few tweaks
to get the type of output we needed for the use of the code in a
widget. This person is no longer able to help.

Basically it's this array section, i'm not sure where to include the
if( displayEnclosures == 1 ) { oFeedStr += oEncl; } statements. Here
is what my code looks like:

[snippet of my RSS parser code]

As you can see I have placed in some of your code, but I still need
to add in the last bits below:

oFeedStr += '<div class="feeditem"><h3><a href="'+y['link']+'">';
        if( displayEnclosures == 1 ) { oFeedStr += oEncl; }
        oFeedStr += (y['title']?y['title']:'Untitiled')+
        '<\/a><\/ h3><div>'+y['description']+'<\/div>';
        if( displayEnclosures == 2 ) { oFeedStr += oEncl; }
        oFeedStr += '<\/div>\n';
    }



As you can see this is the area of code that has changed a lot so it
can work as a widget. Any idea where I should add these last few bits
into our code above? I have had a few goes but I just get the code
printed out in the title section of the feed.

Again many thanks for your help, I really appreciate it. I look
forward to hearing from you soon

Kind regards

Richard

Hi Tarquin

Thank you so much, now I see it written out. I can see where I was
going wrong.

Ah, so I could add the enclosure to <h2> (this would be better for me
I think), so to do this, would I change the <h3> to <h2> in your string
below, or do I need to move the code elsewhere?

Also is it possible to control the enclosure in a css file using a
div? If so what would I need to call the div tag so it knows that I
want to control the enclosure item in the feed?

This has been a massive help and I am so very grateful, again thank you.

Kind regards

Richard

Hi again

I am getting there, I just have one small crease to iron out and I  think
it's done.

I have kept it as it was in H3 and am allowing the css to control the 
enclosure. I have created a div to control the enclosure, but what is 
happening is that the enclosure div style is also effecting the h3  div
formatting.

So if my enclosure div is set to this:
div.encl { margin-right: 5px;  width: 38px; height: 38px; float: left }
the title (H3) is also  squished into the 38px box with the enclosure.

If I set the enclosure div to this:
div.encl  { margin-right: 5px;  float: left }
then the margin and alignment is applied to the title  (H3) as well,
which insets it into the H2

I just need to separate the two and I think it will work. Any ideas?

Again your help is invaluable and I am learning with each change and 
addition. Again thank you for your help it is really appreciated

Kind regards

Richard

Hi there

I solved it, had a slight typo in the string which was causing the  display
problem. Now it is displaying as it should do.

I was just wondering, is your script able to display only a set  number of
feed results? For instance only displaying say the first 10?

I am hoping to avoid having a large RSS file being loaded into the  widget
when activated.

Thanks again for your help, I hope I haven't been too much of a pain

All the best

Richard

Hi

Nice, as soon as the feeds start to get too large I can shrink them
down to make loading of the xml file quicker.

Thank you again for all your help.

All the best

Richard

Hello Tarquin

A while ago you helped me get the RSS feed to support enclosures so I  may
use it to display images in the feed for my Apple Dashboard  widget. The
changes have been warmly supported and everyone was  really pleased, so
again thank you.

I was wondering if I may be able to pose another question to you, in  order
to further the functionality of the Feed, your code and our  widget. I would
like to allow people to be able select the number of  feed stories from a
popup list, for instance the first 5, 10. 20 or all.

I know I need to change this section of the code from this: for( var  x = 0,
y; y = newsItems[x]; x++ ) {

to something like this: for( var x = 0, y; ( x < 10 ) && ( y =  newsItems[x]
); x++ ) {

in order to see the first 10 news stories.

However I am finding it difficult to incorporate a popup list that  will
allow me to select the option of 10, 15, 20 etc, without just  hard coding
to only display the first 10. I have tried a number of  ways but so far
nothing has worked, I just managed to break the code.  Do you think it can
be done? If so any help would be fantastic.

Some back ground info: The widget uses a .JS file to save the options  for
the current options for the feed in a preference file once you  make your
choices and press the done button. It then recalls them on  activation, the
code used to generate the preference file looks like  this.

(Options currently available: Feed URL and Refresh time)

function saveFeedPref(){
    if (window.widget){
        widget.setPreferenceForKey(document.formName.feedURL.value,  feedKey);
    }
}

function saveTimePref(){
    if (window.widget){
        widget.setPreferenceForKey(document.formName.interv.value,  timeKey);
    }
}

function restoreSavedPrefs(){
    updateArea = document.getElementById('lastUpdate');
    if (window.widget){
        savedFeedValue = widget.preferenceForKey(feedKey);
        savedTimeValue = widget.preferenceForKey(timeKey);

        if (savedFeedValue != ''){
            for( i = 0; i < document.formName.feedURL.length; i++){
                if (document.formName.feedURL.options[i].value ==  savedFeedValue){
                    document.formName.feedURL.options[i].selected =  true;
                }
            }
        }

        if (savedTimeValue != ''){
            for( i = 0; i < document.formName.interv.length; i++){
                if (document.formName.interv.options[i].value ==  savedTimeValue){
                    document.formName.interv.options[i].selected =  true;
                }
            }
        }

    }
}

When the widget loads it checks for the latest preferences with this string
in the HTML body:
<body onload="onshow();
window.defVal=document.getElementById ('contents').innerHTML;
restoreSavedPrefs();>

The current pop up lists are a simply affair and the code looks like  this:

<form id="formName" action="ficm.html" method="post" name="formName"
  onsubmit="Go(); return false;" target="_self">Choose a feed:
  <select  name="feedURL" onChange="saveFeedPref();">
   <option value="http://www.ficm.org.uk/ficmnews.xml">Ficm  News</option>
   <option value="http://www.ficm.org.uk/ ficmevents.xml">FICM Events</option>
  </select>
 <!-- <br />How many headlines:
 <select name="headlines"  id="" onblur="" onChange="saveStoryPref();">
 <option value="5">Top 5</option>
 <option value="10">Top 10</option>
 <option value="15">Top 15</option>
 <option value="60">All</option>
 </select> -->

<br />
            Refresh: <select name="interv" id="interv"
  onblur="var oNum=parseFloat(this.value);if(isNaN(oNum)||oNum<0) {oNum=0;}
  	this.value=oNum;" onChange="saveTimePref();">
    <option value="15">15 mins</option>
    <option value="30">30 mins</option>
    <option value="45">45 mins</option>
    <option value="60">60 mins</option>
</select>

</div>
<div id="doneButton"></div>
    <script>
    createGenericButton (document.getElementById ('doneButton'), 'Done',
    hidePrefs, 67);
</script>

As you can see I have commented out the 'Headline Number' pop up list 
because I can't get it to work.

I hope I haven't confused you totally, but I thought it was about  time I
contacted an expect.

I look forward to hearing from you soon and many thanks for your time

Kindest regards

Richard

Hello Tarquin

thanks for the reply, I'm glad to know I was on the right track. At  least I
can say I am starting to understand Java a little bit ;-)

Okay I implemented your changes to how I think each file should now  be bet
up and unfortunately I've broken it some how. Basically it is  not importing
the RSS feed anymore, it just displays the message,  "updating from FICM UK
now..." (which I set).

I've been back over what you said and checked it against my code  yesterday
and today and to me it looks right, but clearly I have made  a mistake
somewhere. Can you help in anyway? I don't want to take up  too much of your
valuable time.

Here's the changes I made tot he three relevant files:

Edits to the FICM.js file:

// JavaScript Document
var month_names = new Array("January", "February", "March", "April",  "May",
"June", "July", "August", "September", "October", "November",  "December");

var feedKey = 'savedFeedURL';
var timeKey = 'savedRefreshTime';
var headlinesKey = 'savedheadlines';



/* Apple Javascript from Dashboard Tutorial Document   */

function saveFeedPref(){
    if (window.widget){
        widget.setPreferenceForKey(document.formName.feedURL.value, 
feedKey);
    }
}

function saveTimePref(){
    if (window.widget){
        widget.setPreferenceForKey(document.formName.interv.value, 
timeKey);
    }
}

function saveheadlinesPref(){
    if (window.widget){
        widget.setPreferenceForKey (document.formName.headlines.value,
headlinesKey);
    }
}

function restoreSavedPrefs(){
    updateArea = document.getElementById('lastUpdate');
    if (window.widget){
        savedFeedValue = widget.preferenceForKey(feedKey);
        savedTimeValue = widget.preferenceForKey(timeKey);
        savedheadlinesValue = widget.preferenceForKey(headlinesKey);

        if (savedFeedValue != ''){
            for( i = 0; i < document.formName.feedURL.length; i++){
                if (document.formName.feedURL.options[i].value == 
savedFeedValue){
                    document.formName.feedURL.options[i].selected =  true;
                }
            }
        }

        if (savedTimeValue != ''){
            for( i = 0; i < document.formName.interv.length; i++){
                if (document.formName.interv.options[i].value == 
savedTimeValue){
                    document.formName.interv.options[i].selected =  true;
                }
            }
        }

        if (savedheadlinesValue != ''){
            for( i = 0; i < document.formName.headlines.length; i++){
                if (document.formName.headlines.options[i].value == 
savedheadlinesValue){
                    document.formName.headlines.options[i].selected  = true;
                }
            }
        }

    }
}

function Go(){
    theForm = document.formName;
    if(window.myInterval){
        window.clearInterval(window.myInterval);
    }
    if(importXML(theForm.feedURL.value,'parseRSS',false,2000)){
        if(parseFloat(theForm.interv.value)){
            window.myInterval=window.setInterval('importXML
(theForm.feedURL.value,\'parseRSS\',false,2000);',parseFloat
(theForm.interv.value)*60000);
        }
    }
    else{
        alert('Your browser cannot import XML, so it cannot view RSS  feeds
using this script');
    }

}


Edits made to rss.js file:

//headers
    var oFeedStr = "";//'<div id="rssarea">' + '<\/div><div  align="left"
id="newsitems">\n';
    var oList = document.formName.headlines;
var numToShow = parseInt(oList.options[oList.selectedIndex].value);
for( var x = 0, y; ( x < numToShow ) && ( y = newsItems[x] ); x++ ) {
    {

Edits to the HTML form:

<div id="configurationForm">
                <form id="formName" action="ficm.html" method="post" 
name="formName" onsubmit="Go(); return false;" target="_self">Choose  a
feed: <select name="feedURL" onChange="saveFeedPref();">
            <option value="http://www.ficm.org.uk/ficmnews.xml">Ficm 
News</option>
            <option value="http://www.ficm.org.uk/ ficmevents.xml">FICM
Events</option>
            </select>

            <br />How many headlines: <select name="headlines" 
id="headlines" onblur="" onChange="saveheadlinesPref();">
            <option value="5">Top 5</option>
            <option value="10">Top 10</option>
            <option value="15">Top 15</option>
            <option value="60">All</option>
        </select>


        <br />
                    Refresh: <select name="interv" id="interv"  onblur="var
oNum=parseFloat(this.value);if(isNaN(oNum)||oNum<0)
{oNum=0;}this.value=oNum;" onChange="saveTimePref();">
            <option value="15">15 mins</option>
            <option value="30">30 mins</option>
            <option value="45">45 mins</option>
            <option value="60">60 mins</option>
        </select>

        </div>
        <div id="doneButton"></div>
            <script>
            createGenericButton (document.getElementById ('doneButton'),
'Done', hidePrefs, 67);
        </script>
    </div>

Again thank you for your patients, I know I must seem like an idiot,  but I
am learning all the time and if I'm honest, I'm enjoying it a lot.

I look forward to hearing from you when you can

Kindest regards

Richard

Good morning Tarquin

Many thanks for the reply. I am a little relieved that the problem is  not
obvious to an expect let alone me, I was beginning to think that  I wasn't
learning like I thought I was.

Yeah I realise it's javascript, sorry my mistake. I've been told  Javascript
is easier than Java... flipping heck!

Oh the line of code that's not part of yours (r month_names = new 
Array("January", "February", "March" etc...)  I think works with a  display
that tells you when the rss feed for was last updated. I  could be wrong
though.

I tried adding the extra code, but still nothing. I don't get an  error
message, the feed just doesn't display.

I have attached the widget for you (with these new changes I made and  not
the old one that works), so feel free to go through it and see  what you can
find and make any necessary changes. If you get the  chance to add in some
comments to let me know what's going on in your  change, that would be
great. I can then go through the code and try  to understand for myself why
it stopped working and how you fixed it.

Again, thanks for your help and I look forward to hearing from you in  a few
weeks or so.

Kind regards

Richard

Hi Tarquin

thanks for the really quick reply and...

... I found it! Woohoo! It was one of the edits I included yesterday  and
there was a extra { block at the end of the line. I remembered  looking at
it and thinking... I'm not sure if I need that or not. I  deleted it and it
fired up straight away. Fantastic!

I don't really have a way of checking the syntax with anything. I use 
Golive to make all my edits and create the files. It does have a  syntax
checker but it didn't find this one so it must be naff. I do  have access to
Xcode (cam with the iMac G5's disks), but I don't  think I can use that to
check Javascript syntax?

 Object/support detection and code branching sounds like serious  stuff. I'm
only just getting to terms with reading and editing  Javascript. I'm hoping
to get to a point where I can write the code  from start to finish, but
finding an easy to understand step by step  guide/book is proving difficult.
Most expect you to have a PC and  some code experience already.

Again thank you for your help, there is no way I could have figured  that
out for myself (not yet anyway).

If I come up with any bright ideas for extending the use of your RSS  code
in our widget in the future and I get stuck with trying to make  it work,
would be okay to give you a shout again? Don't worry it  won't be anytime
soon. There is only so much use can do we RSS.

Kind regards

Richard

Hello Tarquin

Me again, I trust your are well since the last time I emailed you.

I was hoping you might be able to help out with a small problem I've 
developed with the title link in our RSS feed.

Our new title link uses and anchor point in order to go direct to a 
particular point on a html page. so the url looks something like this:

[URL]/products.html#a05

On our webpage the RSS feed displayed works fine, when clicking the  link
your are taking direct to the product anchor (we use Carp RSS  for the
website RSS passing). However using our widget which employs  your cool RSS
Javascript passer the link will not work.

What's happening is, is that the # symbol is not being recorgnised in  the
url and is being passed as %23 so the complete url it's passing is:

[URL]/products.html%23a05

Do you have any idea how we can solve this? I'm not sure if it's  something
that can be done in the actual xml file, or if something  needs changing in
your Javascript passer?

Any help you can offer would be fantastic. We would hate to remove  the xml
feed from our widget as it's proved very popular and we love  how your
script works so well.

Looking forward to hearing from you

Richard

Hi Tarquin

Many thanks for the quick reply.

You are right the feed does work in Safari on our site and using your 
RSS/Atom paser on your site. It goes wrong when we use our widget, we  get
the following error:
Not Found

The requested URL /acatalog/
[URL].html#aCS182 
was not found on this server.

This link is correct in the error message, but if you look at the URL  it's
trying to go to in the URL box of Safari at it's looking for:

[URL].html%23aCS182

As you can see, from clicking the title link in the widget, the #  symbol
gets passed as %23. I think it's something to do with the  encoding in the
widget or maybe the xml file? But I can't see why as  your site displays it
just fine.

Feel free to download the widget here: [URL].wdgt.zip and select the Events
feed from the options  on the
back and have a look at what's happening. It has me stumped,  I've tried
various ideas all day but as yet nothing has worked.

Thanks again for your continued support, it really is appreciated.

Looking forward to hearing from you

Richard

Good morning Tarquin

thanks for your reply, I had already left the office by the time you  e-mail
came through.

I did what you said this morning and changed the clicked function,  and
indeed, it did the same again. So all signs are pointing to a  dashboard
limitation or bug. I shall head over to the Apple  discussion forums and see
if it is a known issue, if not, report it  to Apple and hopefully they will
fix it in there soon to be released  10.4.3 update.

Thanks again for your help. I do try to solve these things on my own,  but
sometimes you just need an expert to point things out for you.  Thank you.

I guess the reason why you couldn't access the options on the widget  was
due to the preview version of Tiger you are running. No worries  there. If
you can though, upgrade to the full version, Tiger has made  life a lot
easier as things just seem to work now, unlike previous  iterations of OSX.

Oh, just a quick question, I know your parser can handle enclosures  now
(You helped me implement it a while ago), FIC are looking at  doing small
video podcasts and are hoping to implement it into the  widget as well. Now
this is simple of course, but the question is, is  it possible for the
enclosed video file to be downloaded and played  inside the widget, rather
than the file just being downloaded and  then you having to find the file,
and then play it in Quicktime? I am  guessing I need to create some kind of
script to say, if a video  enclosure is found in the rss feed, play it in
the content div ? Any  thoughts would be great.

Again thanks again and have a great week

Kind regards

Richard

Good morning Tarquin

Cheers for the reply. I know what you mean about affording Tiger, I  had to
beg borrow and save, only to find out Apple are bringing out  another one,
OSX 10.5 Leopard, 12 months from now. Still, the Mac  runs so much better
now, so I am pleased none the less.

Okay I had a go at implementing your code for a video feed and alas I 
failed. For some reason it stops the feed from working. I though at  first I
had an extra } somewhere as it seems to be still waiting  something, but I
couldn't find one. I also had a go at altering it so  it will except audio
files as well as video in the else function so a  standard podcast could
also be used in the parser, but that just  broke it completely. With the
standard version of tiger I have there  doesn't seem to be anything I can
use to debug the script and see  where it's falling down.

I have attached two files, rss.js and rssedited.js. The rss.js is the 
original working file, and rssedited.js is the implementation of your  video
code (minus my bad  extra audio coding) that has stopped  working. If you
get the time, as I'm sure you are very busy, maybe  you wouldn't mind taking
a peak at the edited version and see if you  can spot the problem. Please
don't feel obliged to, you have helped  me more than enough over the past
few months and I am very grateful.

I look forward to hearing from

Kind regards

Richard

Hi Tarquin

Ah, you say it can be done with flash? Hmmm.. you know I might be  able to
get the video into a flash format. The video may not be as  good quality but
it would be watchable.

So was the code you sent okay, or did it have a slight problem,  because I
didn't try it with any video feeds I was just trying to  view the current
rss feeds already implemented and working?

So if I can get the flash to run video, should I change the code to  this:

if( q['url'] && q['type'] ) {
    if( q['type'].match(/^image\/(gif|png|jpeg)$/i) ) {
        oEncl += '<img src="'+q['url']+'" alt="Image">';
    } else if( q['type'].match(/^video\/flash$/i) ) {
        oEncl += '<object data="'+q['url']+'" '+
          'type="video\/flash"><param name="autoplay" '+
          'value="false"><\/object>';
    }
}

or is there, like I said above, an error in this code. It looks fine  to me.

Again thank you for your support and help

All the best

Richard

Thanks Tarquin

I shall look into converting the video into a flash format and see if  I can
implement it, thanks for your help again

Kind regards

Richard

Hi Tarquin

Long time no speak, I trust you are well and getting ready for the festive
season. I'm looking forward to a break from work more than anything else ;-)

Remember you helped me get enclosures working with your RSS script a little
while ago, and I have to say, it's worked very well indeed. However the
people I built the widget for are looking to use the <content:encode> tag as
a way of formating the rss feed and using an image in this part of the feed,
instead of an image as an enclosure.

Do you think your RSS script could be converted to run out the RSS
<content:encode> tag instead? If it can I will probably test it with a
current feed before implementing the new tag into their RSS file, something
like this one: [URL] (as I am a [brand] fan), but I would need to control
the image size and width just incase they use images that are not correctly
sized.

Look forward to hearing from you

Kind regards

Richard

Hi Tarquin

Thanks for getting back to me. That seemed to do the trick, I tested if with
the spurs feed I sent you and the images and text seemed to come in fine.

All I need to do is control the size of the image and text. I am guessing
this can be done with a DIV in a CSS file? Do you think I can force the
formatting this way rather than having to use the formatting generated in
the feed?

Thanks again for your help, it's always very much appreciated.

Kind regard

Richard

Hi Tarquin

Thanks for that, I've had a good play with it and think I have managed to
force the formatting okay. There is just one odd thing happening, the title
is displaying below the description. The feed brings it in first and your
code deals with this first, so I can't see why this would be happening.

Any ideas on how I can sort this? These are the changes I have made to your
code:

    var oFeedStr = "";//'<div id="rssarea">' +
      '<\/div><div align="left" id="newsitems">\n';
     var blah;
  alert(blah = document.formName);
  alert(blah = blah.headlines);
  alert(blah.selectedIndex);
  alert(blah.options[blah.selectedIndex]);
  alert(blah.options[blah.selectedIndex].value);
    var oList = document.formName.headlines;
var numToShow = parseInt(oList.options[oList.selectedIndex].value);
for( var x = 0, y; ( x < numToShow ) && ( y = newsItems[x] ); x++ )
    {
    var oEncl = y['content:encoded'] ? (
  '<div class="foobar">' + y['content:encoded'] + '<\/div>'
  ) : '';
        if( displayEnclosures && y['enclosure'] ) {
          for( var p = 0, q; q = y['enclosure'][p]; p++ ) {
            if( q['url'] && q['type'] &&
              q['type'].match(/^image\/(gif|png|jpeg)$/i) ) {
                oEncl += '<img src="'+q['url']+'" alt="Image">';
            }
        } }
        oFeedStr += '<div class="feeditem" onClick="clicked(\'' +
  newsItems[x]['link'] + '\');"><div class="feeditemtitle">';
if( displayEnclosures == 1 ) { oFeedStr += '<div class=\"encl\">'+oEncl+
  '<\/div>'; }
oFeedStr += (newsItems[x]['title']?newsItems[x]['title']:'Untitled') +
  '<\/div><div class="feeditemdescription>' + newsItems[x]['description'] +
    '<\/div>';
if( displayEnclosures == 2 ) {
  oFeedStr += '<div class=\"encl\">'+oEncl+'<\/div>'; }
oFeedStr += '<\/div>\n';
    }

As you can see I have removed the <h2><h3> tags and replaced them with divs:

div.feeditemtitle:hover {
    margin-left: 0px;
    background-color: #F1EDED;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

div.foobar {
  font-size: 9px;
    margin-left: 0px;
    margin-top: 0px;
    font-family: Lucida Grande;
    color: #303C58;
    background-color: transparent;
}

div.foobar img {
  max-height: 100px;
  max-width: 75px;
  margin-left: 0px;
  margin-top: 0px;
}

div.feeditemtitle { font-size: 12px; margin: 0; font-family: Lucida Grande;}
div.feeditemtitle a { font-size: 12px; color: #303C58;
text-decoration: none; display: block; margin: 0; padding: 0px; }

Apart from this small anomaly, I reckon that will just about do it. Again
thank you for all your help

Kind regards

Richard

Hi Tarquin

Happy New Year to you, hope you had an enjoyable and relaxing festive
season.

Thanks for the replying on this. Oddly changing displayEnclosures to 2
instead of 1 sorted the problem. Like you say it must be a CSS error but
it's working for the moment so I am happy.

I just need to test it on their new feed now. Thanks again for all your help
and I hope you have a great 2007

All the best

Richard