JavaScript - Liverpoolfc.tv Style News Section
Hi, im fairly new to coding and need a little bit of help. Does anyone know ho to create a news section like the one on liverpoolfc.tv? Maybe someone knows of a tutorial that could help me or?
thanks Similar TutorialsHI I want to make a news section on right side of my webiste's main page, it can in dreamweaver, someone can help me in this regard thanks zami if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg Code: <html> <head> <title>expandable text area</title> <style type="text/css"> #expandable{ height: 100px; } </style> </head> <body> <form> <textarea id="expandable" cols="30" rows="10"></textarea> </form> </body> <script type="text/javascript"> document.getElementById('expandable').addEventListener('click',function(){ if(!this.style.height){ this.style.height = this.scrollHeight+'px'; } alert(this.style.height); }, true); </script> </html> In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element Hi! I'm using a site that is designed to have a horizontal scroll. I need the contents of each section to be centered horizontally with JS so if the resolution changes, the text is centered too. The site is www.big-band.com.ar Any help is very appreciated. Thanks a lot!! hi everyone! i downloaded a Facebook Page template recently. the template works great, but i wanted to add one thing. here is the demo of the code: http://www.facebooktemplates2u.com/d...best_business/ here is where you can download the template: http://www.schoolofrok.com/facebook/html.zip/ anyhow, the part i want to change is the link that directs it to the content. for example, when you scroll over About Us, the little pop up from the bottom comes out. when you click it, it takes you to the About Us content. what i wanted to do, is make it so that when you click the whole jpg, it can take you to the content also. i noticed that the small link that pops up is too tiny and people get confused on where to click. any suggestions? TIA! Hi, Is there away to alternate DIV rows in a specific section. When I try to alternate the DIVs it alternates everything that is a DIV on the page. I want to just alternate a DIV table. Is this possible? Thanks alot Joe I'm having trouble programming a radio button to enable a group of checkbox options. I want the group to be disabled unless the radio is selected. Can I use: Code: document.getElementById("").disabled=true/false for a <div> section? Here's what I have so far. function: Code: function disableSection() { if (document.forms.radio.checked) document.getElementById("optionalinfo").disabled = false; else document.getELementById("optionalinfo").disabled = true; } HTML: Code: <input type="radio" name="additionalinfo" value="yes"/>Yes! Please sign me up for the following items:<br/> <div><blockquote><input id="optionalinfo" type="checkbox" name="additional" value="newsletter"/> I wish to receive <font color="ff69b4"><i>AMT</i></font>'s monthly E-Zine, <b>"Glorious Morning Muffins"</b>.</br> <input id="optionalinfo" type="checkbox" name="additional" value="Updates"/> I wish to receive <font color="ff69b4"><i>AMT</i></font> updates.</br> <input id="optionalinfo" type="checkbox" name="additional" value="future"/> Keep me posted about future offerings at <font color="ff69b4"><i>AMT</i></font>.<br/> <input id="optionalinfo" type="checkbox" name="additional" value="userRegister"/>I need to register to log in</blockquote></div> In addition to this, I would like the section to fade when disabled. Thanks for any help... again! Hi. I'm trying to make a news slider for a website in js. This is what I currently have: Code: <script type="text/javascript"> var refresh = setInterval("refresh()", 5000); function refresh() { $('#top_news').load('top_ten.php').fadeIn("slow"); } </script> The id #top_news is an empty div, in which the news are shown, and the file top_ten.php gets top 10 news from the database, and outputs a random one. The script is working fine, but what I want is, for news to slide in and when a new article slides in, the old one slides out. It would be even better, if there is an excistant script, for news or divs (a small image and text). ALSO, when I refresh/load the site, it takes the time from setInterval, to load the news. Thanks Hi Guys, I am using the following script: Code: <script> JQTWEET = { // Set twitter username, number of tweets & id/class to append tweets user: 'username', numTweets: 3, appendTo: '#shine-tweet-content', // core function of jqtweet loadTweets: function() { $.ajax({ url: 'http://api.twitter.com/1/statuses/user_timeline.json/', type: 'GET', dataType: 'jsonp', data: { screen_name: JQTWEET.user, include_rts: true, count: JQTWEET.numTweets, include_entities: true }, success: function(data, textStatus, xhr) { var html = '<li class="tweet">TWEET_TEXT<div class="time">AGO</div></li>'; // append tweets into page for (var i = 0; i < data.length; i++) { $(JQTWEET.appendTo).append( html.replace('TWEET_TEXT', JQTWEET.ify.clean(data[i].text) ) .replace(/USER/g, data[i].user.screen_name) .replace('AGO', JQTWEET.timeAgo(data[i].created_at) ) .replace(/ID/g, data[i].id_str) ); } } }); }, /** * relative time calculator FROM TWITTER * @param {string} twitter date string returned from Twitter API * @return {string} relative time like "2 minutes ago" */ timeAgo: function(dateString) { var rightNow = new Date(); var then = new Date(dateString); if ($.browser.msie) { // IE can't parse these crazy Ruby dates then = Date.parse(dateString.replace(/( \+)/, ' UTC$1')); } var diff = rightNow - then; var second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24, week = day * 7; if (isNaN(diff) || diff < 0) { return ""; // return blank string if unknown } if (diff < second * 2) { // within 2 seconds return "right now"; } if (diff < minute) { return Math.floor(diff / second) + " seconds ago"; } if (diff < minute * 2) { return "about 1 minute ago"; } if (diff < hour) { return Math.floor(diff / minute) + " minutes ago"; } if (diff < hour * 2) { return "about 1 hour ago"; } if (diff < day) { return Math.floor(diff / hour) + " hours ago"; } if (diff > day && diff < day * 2) { return "yesterday"; } if (diff < day * 365) { return Math.floor(diff / day) + " days ago"; } else { return "over a year ago"; } }, // timeAgo() /** * The Twitalinkahashifyer! * http://www.dustindiaz.com/basement/ify.html * Eg: * ify.clean('your tweet text'); */ ify: { link: function(tweet) { return tweet.replace(/\b(((https*\:\/\/)|www\.)[^\"\']+?)(([!?,.\)]+)?(\s|$))/g, function(link, m1, m2, m3, m4) { var http = m2.match(/w/) ? 'http://' : ''; return '<a class="twtr-hyperlink" target="_blank" href="' + http + m1 + '">' + ((m1.length > 25) ? m1.substr(0, 24) + '...' : m1) + '</a>' + m4; }); }, at: function(tweet) { return tweet.replace(/\B[@?]([a-zA-Z0-9_]{1,20})/g, function(m, username) { return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>'; }); }, list: function(tweet) { return tweet.replace(/\B[@?]([a-zA-Z0-9_]{1,20}\/\w+)/g, function(m, userlist) { return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/' + userlist + '">@' + userlist + '</a>'; }); }, hash: function(tweet) { return tweet.replace(/(^|\s+)#(\w+)/gi, function(m, before, hash) { return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>'; }); }, clean: function(tweet) { return this.hash(this.at(this.list(this.link(tweet)))); } } // ify }; // start jqtweet! JQTWEET.loadTweets(); </script> To load the latest three tweets from a particular twitter account. I am trying to use newsticker.js to only display one at a time, and fade between different the three tweets. However, this is not working, it is working on any normal UL's but not these created using javascript. The page in question is at http://www.garethhardy.com/Shine/ Thanks in advance for any help guys. Dan Hi ! I would like to have a box in which to loop several html files (every 5 seconds or more) .. or to change the file by pointing buttons at the bottom at the box ... (without making click, just mouseover) I don't know if this is only based on JavaScript .. I don't know if the terms (box .. loop .. html .. buttons) describe exactly what I want to have ... I Googled it for hours .. To be more specific, you could see the well known radio site http://www.wabcradio.com/ and on the left there is Today's Top Stories .. That's what I'm looking for ... I would like to find some site with demos and codes (if possible). Thanks ! PS. I hope I didn't some kind of publicity by putting that link (I'll wipe it out if it's the case .. I've read the rules, and I posted the link because it's not my site and that isn't in any case an advertisement. And I think it is the best way to show what I am asking ... Thanks again ! ) Today, all major cell phone makers (exept apple) announced that they will support a common app standard based on html, css, and javascript. Article: http://news.yahoo.com/s/afp/20100215...owapplications This means that we can use our web skills to make applications for mobile phones. Previously, we would have to invest learning time into a closed-path system like the iPhone's Objective-C, or a minor player's API like webOS. Called BONDI, it's basically a webpage with some extra generic DOM handles for using system features like fetching contact lists, GPS, sending SMSs, playing a sound, etc. While I am not blown away by the demo widgets linked below, i realize they are little more than "hello world", as much actually as figuratively. I expect support and development to entrench around this simple standard, so more and more hardware features will gradually start working on more and more devices. It's the same notion as the JS/HTML software i wrote years ago for firefox that now works in IE8... Check it out: http://bondi.omtp.org/usebondi/Lists...Y/Gallery.aspx I encourage all to participate in developing for open source platforms like BONDI. While there's more money right now in iPhone, the future belongs to us. Don't support proprietary techs! Besides, i cannot imagine that Apple/some fan boy will not eventually add BONDI support to iPhones; they already have a browser! Hello, i wanna make animated news bar like the one in the top of site alibaba.com, so how can i do that, anybody have any kind of tutorial for any thing like this please ? thanks Hello, I built a fairly simple page using mioplanet's javascript code for a news ticker. It works fairly well on Chrome, Firefox, Safari and IE7, but IE8 and IE9 can't display it properly. The website is here, and I ran it through w3c validator that pointed out multiple errors with divs nor properly closed (> missing), but on the code they're all there. I suspect the js is doing something funny, but I don't have enough knowledge to understand it. I'm posting the js code as customised by me: Code: TICKER1_CONTENT = document.getElementById("TICKER1").innerHTML; TICKER1_RIGHTTOLEFT = false; TICKER1_SPEED = 5; TICKER1_STYLE = "font-family:inconsolata,courier new, courier, monospace; font-size:24px; color:#ff00cc; letter-spacing:1px"; TICKER1_PAUSED = false; TICKER1_start(); function TICKER1_start() { var tickerSupported = false; TICKER1_WIDTH = document.getElementById("TICKER1").style.width; var img = "<img src=TICKER1_space.gif width="+TICKER1_WIDTH+" height=0>"; // Firefox if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) { document.getElementById("TICKER1").innerHTML = "<TABLE cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER1_STYLE+"' ID='TICKER1_BODY' width='100%'> </SPAN>"+img+"</TD></TR></TABLE>"; tickerSupported = true; } // IE if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) { document.getElementById("TICKER1").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER1_STYLE+"' ID='TICKER1_BODY' width='100%'></SPAN>"+img+"</DIV>"; tickerSupported = true; } if(!tickerSupported) document.getElementById("TICKER1").outerHTML = ""; else { document.getElementById("TICKER1").scrollLeft = TICKER1_RIGHTTOLEFT ? document.getElementById("TICKER1").scrollWidth - document.getElementById("TICKER1").offsetWidth : 0; document.getElementById("TICKER1_BODY").innerHTML = TICKER1_CONTENT; document.getElementById("TICKER1").style.display="block"; TICKER1_tick(); } } function TICKER1_tick() { if(!TICKER1_PAUSED) document.getElementById("TICKER1").scrollLeft += TICKER1_SPEED * (TICKER1_RIGHTTOLEFT ? -1 : 1); if(TICKER1_RIGHTTOLEFT && document.getElementById("TICKER1").scrollLeft <= 0) document.getElementById("TICKER1").scrollLeft = document.getElementById("TICKER1").scrollWidth - document.getElementById("TICKER1").offsetWidth; if(!TICKER1_RIGHTTOLEFT && document.getElementById("TICKER1").scrollLeft >= document.getElementById("TICKER1").scrollWidth - document.getElementById("TICKER1").offsetWidth) document.getElementById("TICKER1").scrollLeft = 0; window.setTimeout("TICKER1_tick()", 30); } and this is how it's referred on the html file: Code: <div id=tick1> <div id="TICKER1" STYLE="overflow:hidden; width:1600px"> text here </div> <script type="text/javascript" src="webticker_1.js" language="javascript"></script> any help much appreciated. Thanks, H I'm performing a little maintenance on my news scroller. You can see the scroller on http://www.hogwarts-rpg.net (it's on the right side). Here's the JavaScript: Code: var pos = 300; var scrollTimer; function scroll() { if (!document.getElementById) { return; } var obj = document.getElementById("newsText"); pos -= 1; if (pos < 0 - obj.offsetHeight) { pos = 300; } obj.style.top = pos + "px"; scrollTimer = window.setTimeout(scroll,60); var myNewsText = document.getElementById("newsText"); myNewsText.onmouseover = function(){window.clearTimeout(scrollTimer);} myNewsText.onmouseout = function(){scroll();} } window.onload = scroll; Here's the CSS: Code: /******* NEWS TICKER *******/ #newsBody { width: 200px; height: 300px; color: #000000; font-weight: bold; background-image: url(/images/misc/parchment-scroller-background2.jpg); background-repeat: no-repeat; } /******* LINK COLORS FOR THE TICKER *******/ #newsBody a:link, #newsBody a:visited, #newsBody a:active { text-decoration: underline; color: #000000; } #newsBody a:hover { text-decoration: underline; color: #0000FF; } /******* WHERE THE ACTUAL TEXT APPEARS *******/ #newsWindow { width: 100px; height: 230px; overflow: hidden; position: absolute; top: 200px; left: 50px; } #newsText { width: 100px; position: relative; top: 25px; font-size: x-small; } Basically, I'm trying to make it where it A) resets quicker when it's done with a full scroll-through, and B) where it doesn't scroll up past its containing div (newsWindow in this scenario). I'm sure I'm missing something so simple, but I've been working on it all night without much headway, and I'm exhausted, so there's my excuse. I know that having pos set to reset at 300 might cause a delay in the text showing itself again, but that's to give the effect that it goes "all the way around," if you know what I mean. Even with it not resetting so high, the function still takes longer to reset than I would like it to. Hi I'm really new to this and don't really know if I'm in the right place as for posting. I'm trying to figure out if there is a way to have like a news column on each html page that can be updated by making changes to one file. Kinda like a embedded window that gives a sample of some of the text on the highlights page and then has a click to read more. I was thinking a javascript app would be best but I new at this and don't really understand everything. If someone has an idea or can help it'd be appreciated
Hey. Right, so I've just paid a guy to design and code just the layout files, not the content, panels, etc. I've coded a panel which will allow my staff to post news articles which will be displayed on the main website. Adding, Editing, Deleting news and all the rest works 100% fine however it appears that the designer has coded the news displayer into a .JS (javascript) file. The news displayer looks like this: ^ This is what it looks like when you hover over one of the 3 news items shown on the right. The image (blue box) changes depending on which news item you hover over This is what it looks like when you then hover over the image for that article: The HTML: Code: <div class="left"> <div id="headline_image_box"> <a href="#"> <img name="imagename" src="_images/_headlines/1.png" alt="Description" /> <span class="desc" id="description"> <script type="text/javascript">writetext(firsttext)</script> </span> </a> </div> </div> <div class="middle"> <a href="#"> <div class="headline" onMouseover="document.imagename.src=image1.src, writeDesc(desc1)" onMouseout="document.imagename.src=image1.src"> <strong>So far so good for Wiggins</strong><br /> Team Sky's Bradley Wiggins says he's going from strength to strength at the Vuelta a Espana. </div> </a> <a href="#"> <div class="headline" onMouseover="document.imagename.src=image2.src, writeDesc(desc2)" onMouseout="document.imagename.src=image2.src"> <strong>Spurs locked in Cahill talks</strong><br /> Bolton Wanderers and Tottenham Hotspur are locked in talks regarding a deal for Gary Cahill. </div> </a> <a href="#"> <div class="headline" onMouseover="document.imagename.src=image3.src, writeDesc(desc3)" onMouseout="document.imagename.src=image3.src"> <strong>Santon set for medical</strong><br /> Italy international Davide Santon has arrived in England to finalise a move to Newcastle United. </div> </a> </div> The Javascript File: Code: if (document.images) { image1 = new Image image2 = new Image image3 = new Image image1.src = "_images/_headlines/1.png" image2.src = "_images/_headlines/2.png" image3.src = "_images/_headlines/3.png" } var desc1='<strong>13th AUG</strong>Description 1' var desc2='<strong>12th AUG</strong>Description 2' var desc3='<strong>11th AUG</strong>Description 3' function writeDesc(what){ document.getElementById('description').innerHTML=''+what+''; } Database Structu Code: CREATE TABLE IF NOT EXISTS `news` ( `id` int(2) NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL, `author` varchar(100) NOT NULL, `category` varchar(100) NOT NULL, `article` varchar(50000) NOT NULL, `image` varchar(500) NOT NULL, `j` varchar(5) NOT NULL, `M` varchar(5) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ; j = Date with letters on end. Eg. 4TH M = 3 character form of month. ALL details submit into database fine, that is not my issue. My issue is that I want to get the latest three articles from the database and echo the values from the database into the javascript however this stuffs up the script completely. I'm not very experienced with using Javascript & PHP together but I noticed something was wrong when I echoed it into the script. Anyone with any ideas/suggestions it'd be very helpful and appreciated! I'd prefer not to have to change to a completely new script, so if you have a way to integrate the MySQL information into the Javascript it'd be great! I started using the Google News Web Element on my website. The website for Google News Web Element is: http://www.google.com/webelements/#!/news I want the links to open in a new window, which cannot be done with the iframe version. Their website only allows me to generate an iframe. I was told that this can be done by using the javascript version, but I have not been able to figure it out. This is their link to the documentation: http://code.google.com/apis/newssearch/newsshow/ I know very little about javascript, and have been trying to get it to work but have been unsuccessful. I want to use the Medium Rectangle size and I want the only topic to be "Swainsboro". The only modification that I want to make is for the links to open in a new window. If anyone can help me do this, it would be appreciated. This is the iframe data that was generated by the wizard: Code: <iframe frameborder=0 marginwidth=0 marginheight=0 border=0 style="border:0;margin:0;width:300px;height:250px;" src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&format=300x250&ned=us&hl=en&q=Swainsboro&element=true" scrolling="no" allowtransparency="true"></iframe> 1. I have code to show tip like: <a class="notvisible" onclick="mytip.disable();" href="javascript:void(0);">Close</a> How is correct Javascript code to Close this tip when clicked? 2. How to move next news feed with click on arror icon and back icon? <a onclick="mynews.previous();" href="javascript:void(0);">Previous</a> <a onclick="mynews.next();" href="javascript:void(0);">Next</a> How is correct Javascript code to move news item next and prevoius news? when clicked? <script type="text/javascript"> mynews.init(); mytip.init(); </script> Hi I'm looking for a simple ticker that scrolls horizontally across the top of the homepage of a site I'm working on. Ideally I would like one for both Twitter and RSS feeds, but either is good. If anyone knows where I can find one that's simple to implement that would be great. Kind Regards Using the Photoslide, GK News Image VI, as seen here tools.gavick.com/demo/ni6, however its in ID order, listed. I would like to change the order of ID to Random Order. Can you please help, what code would need changing. thank you its javascript. code below: Fx.Height = Fx.Style.extend({initialize: function(el, options){$(el).setStyle('overflow', 'hidden');this.parent(el, 'height', options);},toggle: function(){var style = this.element.getStyle('height').toInt();return (style > 0) ? this.start(style, 0) : this.start(0, this.element.scrollHeight);},show: function(){return this.set(this.element.scrollHeight);}});Fx.Opacity = Fx.Style.extend({initialize: function(el, options){this.now = 1;this.parent(el, 'opacity', options);},toggle: function(){return (this.now > 0) ? this.start(1, 0) : this.start(0, 1);},show: function(){return this.set(1);}}); // window.addEvent("load",function(){ document.getElementsBySelector(".gk_ni_6_wrapper").each(function(el){ // generowanie rdzenia var mainwrap = el; var elID = el.getProperty("id"); var $G = $Gavick[elID]; var wrap = $(elID); var mouseIsOver = false; var scrollValue = 0; // var addWidth = $E("div",el).getStyle("padding-left").toInt() + $E("div",el).getStyle("padding-right").toInt() + $E("div",el).getStyle("margin-right").toInt(); // el.setStyle("width",(el.getStyle("width").toInt() + addWidth) + "px"); // $G["actual_slide"] = -1; $G["actual_anim"] = false; $G["actual_anim_p"] = false; // var slides = []; var contents = []; var pasek = false; // if(window.ie && $E(".gk_ni_6_text_bg", wrap)) $E(".gk_ni_6_text_bg",wrap).setOpacity($G["opacity"].toFloat()); // wrap.getElementsBySelector(".gk_ni_6_slide").each(function(elmt,i){slides[i] = elmt;}); slides.each(function(el,i){if(i != 0) el.setOpacity(0);}); // if($E(".gk_ni_6_text_bg", wrap)){ var text_block = $E(".gk_ni_6_text_bg",wrap); $ES(".gk_ni_6_news_text",wrap).each(function(el,i){contents[i] = el.innerHTML;}); } // animacje var amount_c = contents.length-1; if($E(".gk_ni_6_text", wrap)) $E(".gk_ni_6_text",wrap).innerHTML = contents[0]; // var loadedImages = ($E('.gk_ni_6_preloader', wrap)) ? false : true; // if($E('.gk_ni_6_preloader', wrap)){ var imagesToLoad = []; // $ES('.gk_ni_6_slide',wrap).each(function(el,i){ var newImg = new Element('img',{ "src" : el.innerHTML, "alt" : el.getProperty('title') }); imagesToLoad.push(newImg); el.innerHTML = ''; newImg.injectInside(el); }); // var timerrr = (function(){ var process = 0; imagesToLoad.each(function(el,i){ if(el.complete) process++; }); // if(process == imagesToLoad.length){ $clear(timerrr); loadedImages = process; (function(){new Fx.Opacity($E('.gk_ni_6_preloader', wrap)).start(1,0);}).delay(400); } }).periodical(200); } var timerrr2 = (function(){ if(loadedImages){ $clear(timerrr2); // ---------- var NI2 = new news_image_6(); // $ES(".gk_ni_6_tab",mainwrap).each(function(elx,index){ var hover = $E(".gk_ni_6_hover" , elx); var opacity_anim = new Fx.Opacity(hover, {duration: 250, wait: false}); // elx.addEvent("mouseenter",function(){ hover.setStyle("display", "block"); opacity_anim.start(1); }); // elx.addEvent("mouseleave",function(){ opacity_anim.start(0); (function(){hover.setStyle("display", "none");}).delay(250); }); // elx.addEvent("click", function(){ if(!$G["actual_anim_p"]){ $E(".gk_ni_6_tab_active",mainwrap).setProperty("class","gk_ni_6_tab"); elx.setProperty("class","gk_ni_6_tab_active"); } // NI2.image_anim(elID,mainwrap,wrap,slides,index,contents,$G,false); }); }); $E(".gk_ni_6_tab",mainwrap).setProperty("class","gk_ni_6_tab_active"); NI2.image_anim(elID,mainwrap,wrap,slides,0,contents,$G,($G["autoanim"]==1)); /** Slider implementation **/ if($E('.gk_ni_6_tabsbar_slider',mainwrap)){ var $offset = $E(".gk_ni_6_tab",mainwrap).getStyle("height").toInt() + $E(".gk_ni_6_tab",mainwrap).getStyle("margin-bottom").toInt(); var scrollArea = $E('.gk_ni_6_tabsbar_wrap', mainwrap); var scrollableArea = $E('.gk_ni_6_tabsbar', mainwrap); var scrollAreaH = scrollArea.getSize().size.y; var scrollableAreaH = scrollableArea.getSize().size.y; var scroller_up = new Fx.Scroll(scrollArea, {duration: 250, wait: true, transition: Fx.Transitions.Circ.easeIn, onComplete: function(){scrollValue -= $offset;}}); var scroller_down = new Fx.Scroll(scrollArea, {duration: 250, wait: true, transition: Fx.Transitions.Circ.easeIn, onComplete: function(){scrollValue += $offset;}}); // $E('.gk_ni_6_tabsbar_up', mainwrap).addEvent("click",function(){ if(scrollValue > 0) { scroller_up.scrollTo(0, scrollValue-$offset);} }); // $E('.gk_ni_6_tabsbar_down', mainwrap).addEvent("click",function(){ if((scrollValue < (scrollableAreaH-scrollAreaH))) { scroller_down.scrollTo(0, scrollValue+$offset); } }); } }}).periodical(250); }); }); // var news_image_6 = new Class({ // text_anim : function(wrap,contents,$G){ var txt = $E(".gk_ni_6_text",wrap); if(txt){ if($G["anim_type_t"] == 0){ new Fx.Opacity(txt,{duration: $G["anim_speed"]/2}).start(1,0); (function(){ new Fx.Opacity(txt,{duration: $G["anim_speed"]/2}).start(0,1);txt.innerHTML = contents[$G["actual_slide"]]; }).delay($G["anim_speed"]); } else txt.innerHTML = contents[$G["actual_slide"]]; } }, // image_anim : function(elID,mainwrap,wrap,slides,n,contents,$G,play){ var max = slides.length-1; var links = $ES('.gk_ni_6_news_link', mainwrap); var readon = $E('.gk_ni_6_readmore_button a', mainwrap); if(!$G["actual_anim_p"] && n != $G["actual_slide"]){ $G["actual_anim_p"] = true; if(readon) readon.setProperty("href", links[n].innerHTML); var actual_slide = $G["actual_slide"]; $G["actual_slide"] = n; slides[n].setStyle("z-index",max+1); if(actual_slide != -1) new Fx.Opacity(slides[actual_slide],{duration: $G["anim_speed"]}).start(1,0); new Fx.Opacity(slides[n],{duration: $G["anim_speed"]}).start(0,1); this.text_anim(wrap,contents,$G); switch($G["anim_type"]){ case 0: break; case 1: new Fx.Style(slides[n],'margin-top',{duration: $G["anim_speed"]}).start((-1)*slides[n].getSize().size.y,0);break; case 2: new Fx.Style(slides[n],'margin-left',{duration: $G["anim_speed"]}).start((-1)*slides[n].getSize().size.x,0);break; case 3: new Fx.Style(slides[n],'margin-top',{duration: $G["anim_speed"]}).start(slides[n].getSize().size.y,0);break; case 4: new Fx.Style(slides[n],'margin-left',{duration: $G["anim_speed"]}).start(slides[n].getSize().size.x,0);break; } if(play){ $E(".gk_ni_6_tab_active",mainwrap).setProperty("class","gk_ni_6_tab"); $ES(".gk_ni_6_tab",mainwrap)[n].setProperty("class","gk_ni_6_tab_active"); } (function(){slides[n].setStyle("z-index",n);}).delay($G["anim_speed"]); (function(){$G["actual_anim_p"] = false;}).delay($G["anim_speed"]); var $this = this; if(!play) this.image_pause($G); if((play || $G["autoanim"] == 1) && ($G["actual_anim"] == false)){ $G["actual_anim"] = (function(){ n = (n < max) ? n+1 : 0; $this.image_anim(elID,mainwrap,wrap,slides,n,contents,$G,true); }).periodical($G["anim_speed"] * 2 + $G["anim_interval"]); } } }, // image_pause : function($G) { $clear($G["actual_anim"]); $G["actual_anim"] = false; } }); |