/* * v16-xml-news-ticker.js,v 1.0 2009/02/15 15:30:07 janetka * News ticker, data pulled from XML. * Owner: Jan Janetka/Slovakia/Contr/IBM */ (function ($) { // namespace 'news' for news ticker var news = { preferences: { // default title title: 'L\'informatique, c\'est parfois une usine à gaz. Affrontez la réalité !', // translation for link 'Previous', previous: "Indietro", // translation for link 'Next', next: "Avanti", // rotation time in seconds time: "4", // should we generate also "previous" / "next" container ? pn: true }, storage: { // number of boxes to display n: 0, // currently displayed box c: 0, // interval ID interval: null }, // load XML data from file getData: function () { news.storage.n = $ ('div.v16-newsTicker-news').length; news.createBox (); news.createButtons (); $ ("div.v16-newsTicker-news").css ({ position: "absolute", top: "0px", left: "-170px", zIndex: "0", width: "168px" }); $ ("div > p.ibm-extend-bottom").each (function () { var h = $(this).height(); $(this).height( h + 5); }); // prepare 'leaving-ibm' popup if ( $( "a.ibm-external-link", "#v16-newsTicker-holder").length > 0) { if (typeof (ibmCommon.leavingIbm) !="object" || ibmCommon.leavingIbm == null) { jQuery.getScript("//www.ibm.com/common/js/leaving-ibm.js"); } } // everything is ready // now we will display the first news news.adjustHeight (0); $("div.v16-newsTicker-news:eq(0)").animate ({left: 0}, "slow"); var title = $("div.v16-newsTicker-news:eq(0)").attr('title'); if (title) { $('#v16-newsTicker-holder > h2:first').text (title); } else { $('#v16-newsTicker-holder > h2:first').text (news.preferences.title); } // and we can initialize the ticker news.run (); }, createBox: function () { // box is ready // now we need to set some CSS to container-body $ ("#v16-newsTicker-holder > div:first").css ({width: "168px", height: "70px", overflow: "hidden", zIndex: "0", position: "relative"}); }, // will create and apped 'Next' / 'Previous' buttons createButtons: function () { $ ("#v16-newsTicker-holder").append ('
'); $ ("#v16-newsTicker-buttons").css ({textAlign: "center"}).append ('

' + news.preferences.previous + ' | ' + news.preferences.next + ''); // set CSS and attach event handler for each link $ ("a.newsTicker-previous").css ({ background: "url(http://www.ibm.com/common/js/rssdisplaymodule/buttons/default/back.png) no-repeat 0 -2px", height: "1%", padding: "0px 0px 0px 18px"}) .click (function () { news.rotatePrevious () }); $ ("a.newsTicker-next").css ({ background: "url(http://www.ibm.com/common/js/rssdisplaymodule/buttons/default/next.png) no-repeat right -2px", height: "1%", padding: "0px 18px 0px 0px"}) .click (function () { news.rotate () }); }, // this function will take care of showing the first news and cycling through them run: function () { news.storage.interval = setInterval (this.rotate, this.preferences.time * 1000); // make sure we stop hovering once user is over the box with mouse $ ("#v16-newsTicker-holder").hover (function () { // mouse over -> clear interval clearInterval (news.storage.interval); }, function () { // mouse out -> set interval again and do one rotation right now news.storage.interval = setInterval (news.rotate, news.preferences.time * 1000); }); }, // the cool efect for cycling through news rotate: function () { // which box should we display now var n = (news.storage.c + 1) % news.storage.n; // move current box to right, so it will dissapear $("div.v16-newsTicker-news:eq(" + news.storage.c + ")").animate ({left: 180}, "slow", function () { // now that it's in right, we will return it to basic position, left from the box, hidden $ (this).css ({ left: "-170px" }); }); // at the same time, move new box to center, so we can see it $("div.v16-newsTicker-news:eq(" + n + ")").animate ({left: 0}, "slow"); news.adjustHeight (n); var title = $("div.v16-newsTicker-news:eq(" + n + ")").attr('title'); if (title) { $('#v16-newsTicker-holder > h2:first').text (title); } else { $('#v16-newsTicker-holder > h2:first').text (news.preferences.title); } // set current values to storage news.storage.c = n; }, // and go back rotatePrevious: function () { // which box should we display now var n = (news.storage.c - 1) % news.storage.n; if (n == -1) { n = news.storage.n - 1; } // move the new box to the right $("div.v16-newsTicker-news:eq(" + n + ")").css ({left: 180}); // move current box to left, so it will dissapear $("div.v16-newsTicker-news:eq(" + news.storage.c + ")").animate ({left: -180}, "slow"); // at the same time, move new box to center, so we can see it $("div.v16-newsTicker-news:eq(" + n + ")").animate ({left: 0}, "slow"); news.adjustHeight (n); var title = $("div.v16-newsTicker-news:eq(" + n + ")").attr('title'); if (title) { $('#v16-newsTicker-holder > h2:first').text (title); } else { $('#v16-newsTicker-holder > h2:first').text (news.preferences.title); } // set current values to storage news.storage.c = n; }, adjustHeight: function (n) { // now the tricky part // if text we are about to display is too long, some part of it might get lost beneath the box // so we need to get it's height and compare to current box height // and set it so it would fit $ ("#v16-newsTicker-holder > div:first").height ($("div.v16-newsTicker-news:eq(" + n + ")").height () ); }, // function for displaying error messages. error: function (t) { $ ("#ibm-content-main > *:first").before ('

' + t); return; } }; $ (document).ready (function () { // make sure that 'id' where to append box exists //if ( $ ("#" + news.preferences.id).length == 0 ) { //news.error ("ID where to append box was not found ! Please add an empty div with ID \"" + news.preferences.id + "\" and reload the page."); //} // get XML and append news to created box. // after ajax is done, it will call everything else, so follow "success" function in getData news.getData (); }); }) (jQuery);