Incorporating fade in/out of rss items - gajaxrssticker

1) Script Title: gajaxrssticker

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...xrssticker.htm

3) Describe problem: I use this script, along with "gfeedfetcher.js" as a means for implementing an rss news ticker on both my personal website and for a mobile rss ticker widget that I put together for the iPhone. It works great for both, but I would like to do a little styling. Specifically, in the way the news items are displayed... I'd like to do a fade in/out effect. Can anyone provide some guidance on how to get this done? I've tried doing it via CSS, but have gotten nowhere. Any help you all could give would be much appreciated!

If the page doesn't already use jQuery, add this to the head of the page as shown (highlighted), and change the reference to gajaxticker.js to one to gajaxtickerfade.js (also as shown, highlighted and red):

Code:

---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript" src="gfeedfetcher.js"></script>

<script type="text/javascript" src="gajaxtickerfade.js">

/***********************************************
* gAjax RSS Ticker- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS tit . . .

---

If the page already uses jQuery, just make sure that the external script tag for jQuery comes before the one for the Google API (before this: <script type="text/javascript" src="http://www.google.com/jsapi"></script>), and still make the change to the reference to gajaxticker.js as shown above.

Also download and use tho gajaxtickerfade.js script (right click and 'Save As'):

Attachment 5221

If you want to adjust the length of time it takes to fade in or out, just let me know.

Or use this variation (same instructions as before, just use its filename in the script tag):

Attachment 5225

The difference is that instead of fading out, then in, it simply fades out the current item(s) over the next one(s), which are already there, unseen beneath it. Requires that the ticker have background (a background color and/or image that completely fills its background)

If you want to adjust the length of time this one takes to fade out, just let me know.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Thanks so much John! I actually was able to figure out how to do it using CSS3 Animations, but your advice seems like the better way to go about things. I'll try things out later today and let you know if I have any troubles, but it sounds straightforward enough.

Those CSS 3 animations can be tricky, and they don't work cross browser (due to legacy browsers like IE 8 that don't support them), sometimes not even in modern browsers that should and may even claim to support them.

But congratulations on working it out!

Quote:

---

Originally Posted by jscheuer1

Those CSS 3 animations can be tricky, and they don't work cross browser (due to legacy browsers like IE 8 that don't support them), sometimes not even in modern browsers that should and may even claim to support them.

---

This is exactly the reason I said your prescribed method is the better path. For grins, I tested things out at work earlier (we still use IE8 but thankfully they also support Firefox) and noticed things weren't working with IE8. Sure, the CSS3 animation method that I used "worked" but it seemed a bit hacky, considering it only worked for MY use on Firefox. Most of my friends who also visit the site are still loyal IE users, so I want to make it work for them as well.

Thanks again for your help!

OK, I had a few minutes to do a quick tryout. Everything works swimmingly! Now, I want to mess with the aesthetics of it all...

Just to give you a bit of background, I have things set up as a ticker in the footer section of my webpage. It is configured to only display the feed label and headline title, as such:

Attachment 5223

As you'll see, I've already tweaked the gajaxtickerfade.js file to output as itemlabel(ESPN) + itemtitle(headline). Simple. Now, what I would like to do is make it so only the itemtitle fades in/out as the ticker does its work and keep the itemlabel solid as it goes through the feed items until it goes to the next loaded feed. Basically, I think what I'm really wanting to do is, have the itemlabel work like it did in the original ajaxticker.js while having the fade in/out effect only apply itself on the itemtitle. The way I accomplished this with my original CSS3 solution was to apply the animation to only the itemlabel class in the CSS. Can this be done? Also, since you already mentioned it in your original response, I'd like to know how to adjust the fade in/out timing.

Thanks in advance!!!

This will only work with 1 item shown at a time, fortunately, that's what your image indicates you have:

Attachment 5224

I've made the other changes indicated by your image and explanation, to show label without the brackets, then title.
For simplicity's sake I've added variables near the top of the script to control the timing:

Code:

---

// -------------------------------------------------------------------
// gAjax RSS Ticker- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Created: Aug 2nd, 2007 Updated: n/a
// REQUIRES: gfeedfetcher.js class, available at http://dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htm
// -------------------------------------------------------------------

var gfeedfetcher_loading_image="indicator.gif", //Specify full URL to "loading" image. Overwrites same var from gfeedfetcher.js
titlefadeouttime = 1000, //milliseconds to fade out old title
titlefadeintime = 1000; //milliseconds to fade in new title

function gfeedrssticker(divid, divC . . .

---

Their use should be self explanatory. It should be noted that the amount of time it takes for the old title to fade out, plus the amount of time it takes for the new one to fade in will be in effect added to the delay between items. That's because the the timeout delay for the next item isn't set until the animation for fading in the new title is complete.

Also, the other script I had (gajaxtickerfade2.js) had a flaw in it, I'm updating it. Though it probably isn't a good choice for this. It would make the label constant (fading the same thing out from over the same thing looks constant) and appear to fade in when changed, but the look of a single title/item fading out over a single title/item isn't great. So script 2 is best suited to multiple items per cycle. But, as I say, I'm updating it in my previous post. That's so anyone trying it will not have the flaw (only Chrome was copying the required background). Still you might want to try it out for comparison purposes.

Thanks John! This really helped! It works great on Firefox, IE10 and even the mobile browsers I've tested with.

It still doesn't appear to work for IE8, but that's not a big deal because if you're still using IE8, god help you...

That's odd, it should work in IE 8. It won't be as pretty because in IE 8 text loses its anti-aliasing quality during fade-in/out.

But I will check it out in a real IE 8 to be sure. It works fine in IE 10's IE 8 mode.

Anyways, I tried out version 2 with a few more modifications (including your custom label/title bit) and it looks pretty good, you should try it:

Attachment 5226

By slowing down the transition and giving the inserted element 100% width, it looks good with single items and the label does what I said it would, appears constant until it changes, then fades in with the new label.

OK, you're right, it doesn't work in IE 8. I don't know why, but I will try to find out. Oddly the version 2a I just posted here:

http://www.dynamicdrive.com/forums/s...670#post299670

Does work in IE 8.

The situation with IE 8 is that, if you're still using Windows XP, IE 8 is the latest IE browser you can have. And there are still a lot of folks either stuck with or clinging to XP, so IE 8 will be around for a good long while.

I figured out why the one that fades in and out just the title doesn't work in IE 8. It's because IE 8 requires that the element have "layout" (a proprietary use of the term, with special rules required for the element to use filters). For that it must be display: block (well inline-block will do, but IE 7 cannot render that properly). So for IE 8 and less we can add a conditional stylesheet to the head of the page:

Code:

---

<!--[if lt IE 9]>
<style type="text/css">
.titlefield{ /*CSS for RSS title link in general*/
display: block;
float: left;
}

.labelfield{ /*CSS for label field in general*/
display: block;
float: left;
margin-right: 0.5em;
}
</style>
<![endif]-->

---

But, since other browsers can do it this way as well, we could simply add these rules to the existing selectors for those elements. One way or another, IE 8 and less need those styles in order to do the fading out and in of the title.

I also developed the script a little further:

Attachment 5228

In this version it acts as before fading the title out and then in for each transition unless there's a new label. Then it fades out everything, then fades in the new label, and then fades in the new title.

Just a reminder here, this will only work if the ticker is showing only one item at a time. I know you probably already knew that, and that's what the ticker you're using does, but just in case you are thinking of changing that, or for others reading this post. If there are more than one item at a time, you can use the version 2 or 2a scripts from earlier in this thread.