Results 1 to 4 of 4

Thread: Great script for Headlines ...

  1. #1
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Great script for Headlines ...

    Hi ....

    look to this site http://www.thedailybeast.com/. and see to the Movement of the headlines box
    it's great ....

    Can I have script like that ???

  2. #2
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    you can use this for the slide:

    Content Glider

    For the tooltips you can use this one:

    balloon tooltips

    good luck.
    _____________________

    David Demetrius // davejob
    _____________________

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #tst {
      position:relative;overflow:hidden;width:397px;height:457px;border:solid black 1px;
    }
    
    .tst {
      position:relative;width:397px;height:457px;float:left;background-Color:#FFFFCC;
    }
    
    .slide {
     position:absolute;left:0px;top:0px;width:1000000px;
    }
    
    #pages {
     width:150px;height:30px;border:solid black 0px;
    }
    
    .page {
      width:30px;height:30px;background-Color:#FFFFCC;float:left;text-Align:center;
    }
    .pageon {
      background-Color:#FFCC66;
    }
    /*]]>*/
    
    </style>
    <script type="text/javascript">
    // Animate (01-October-2009)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.update([10,800],5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                     (variable)
    //  parameter 1 = an array defining the start and finish values of the effect.                    (array)
    //                 field 0 the start value. (digits, for opacity minimum 0, maximum 100)
    //                 field 1 the finish value. (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds.     (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.             (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                               (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.58K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,fin){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[fin||0];
     return this;
    }
    
    zxcAnimate.prototype.update=function(srtfin,ms,scale,c){
     clearTimeout(this.to);
     this.time=ms||this.time||0;
     this.data=[srtfin[0],srtfin[0],srtfin[1]];
     this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
     this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcAnimate.prototype.cng=function(){
     var oop=this,ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.c=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.c=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
     this.apply();
     if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Complete) this.Complete(this);
     }
    }
    
    zxcAnimate.prototype.apply=function(){
     if (isFinite(this.data[0])){
      if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function Slide(id,ms,hold){
     var obj=document.getElementById(id);
     this.frames=zxcByClassName(id,obj);
     this.slide=new zxcAnimate('left',this.frames[0].parentNode,0);
     this.nu=0;
     this.ms=ms||1000;
     this.hold=hold||this.ms*4;
     this.pages=[];
    }
    
    Slide.prototype.GoTo=function(nu){
     clearTimeout(this.to);
     this.Slide(nu);
    }
    
    Slide.prototype.Slide=function(nu){
     if (this.frames[nu]){
      if (this.pages[nu]){
       this.pages[this.nu].className=this.cls[0];
       this.pages[nu].className=this.cls[1];
      }
      this.slide.update([this.slide.data[0],-this.frames[nu].offsetLeft],this.ms);
      this.nu=nu;
     }
    }
    
    Slide.prototype.Pages=function(id,off,on){
     var obj=document.getElementById(id);
     for (var z0=0;z0<this.frames.length;z0++){
      this.pages[z0]=document.createElement('DIV');
      this.addevt(this.pages[z0],'mouseup','GoTo',z0);
      this.pages[z0].className=off;
      this.pages[z0].appendChild(document.createTextNode(z0+1));
      obj.appendChild(this.pages[z0]);
     }
     this.cls=[off,off+' '+on];
     this.Slide(this.nu);
    }
    
    
    Slide.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
     else  o.attachEvent('on'+t,function(e){ return oop[f](p); });
    }
    
    Slide.prototype.Auto=function(run,hold){
     clearTimeout(this.to);
     if (run){
      var oop=this,nu=this.nu;
      nu=++nu%this.frames.length;
      this.hold=hold||this.ms*4;
      oop.Slide(nu);
      this.to=setTimeout(function(){ oop.Auto(run); },this.hold);
     }
    }
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    /*]]>*/
    </script>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function Load(){
     S=new Slide('tst',1000,2000);
     S.Pages('pages','page','pageon');
     S.Auto(true);
    }
    /*]]>*/
    </script>
    
    </head>
    
    <body onload="Load();">
    <div id="tst">
     <div class="slide">
      <div class="tst"><img src="http://www.tdbimg.com/files/ads/ligneroset/2009/mainfeature.jpg?seed=9.30-live-Q" /></div>
      <div class="tst"><img src="http://www.tdbimg.com/files/2009/10/17/img-hp-main---pakistan_081147762297.jpg" /></div>
      <div class="tst"><img src="http://www.tdbimg.com/files/2009/08/14/img-hp-main---siegel-limbaugh_161538360238.jpg" /></div>
      <div class="tst"><img src="http://www.tdbimg.com/files/2009/10/16/img-hp-main---miller-gaza_183609367973.jpg" /></div>
      <div class="tst"><img src="http://www.tdbimg.com/files/2009/10/16/img-hp-main---viral-video_182945645868.jpg" /></div>
     </div>
    </div>
    <div id="pages"></div>
    <input type="button" name="" value="Pause" onmouseup="S.Auto();"/>
    <input type="button" name="" value="Auto" onmouseup="S.Auto(true);"/>
    
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    vwphillips Thank you very much....It's a great work ... Thank you again...

    plz.... your help again ... I'm really using vivvo script you can see the scrip HERE ... Plz look to the headlines box .... How can I use our script "that you write it" in my vivvo ? .....this is the JS & css files the make headlines move

    JS
    Code:
    vivvoRotatingHeadlines = Class.create ();
    		
    Object.extend (vivvoRotatingHeadlines.prototype,
    	{
    		element : null,
    		rotationPe : function() {},
    		current : 0,
    		
    		initialize : function (id, time){
    			if (time){
    				this.time = time;
    			}else{
    				this.time = 5;
    			}
    			this.elementId = id;
    			this.element = $(id);
    			this.playerElement = $(id + '_player');
    			if (this.playerElement){
    				this.tabs = new Control.Tabs(this.playerElement, {afterChange: this.onHeadlineChange.bind(this)});
    				this.tabLinks = $A(this.playerElement.getElementsByTagName('a'));
    				if (this.tabLinks.length > 0){ 
    					Event.observe(this.element, 'click', this.stopRotation.bind(this));
    					this.startRotation();
    				}
    			}
    		},
    		
    		onHeadlineChange: function (key){
    			var index = key.id.split('_').last(); 
    			var summary = $$('#' + this.elementId + '_' + index + ' .headline_body').first();
    			if (summary) resizeShort($(this.elementId + '_article_' + index), summary);	
    		},
    		
    		startRotation : function (){
    			var _ = this;
    			this.rotationPe = new PeriodicalExecuter(function(pe) {
    				_.tabs.next();
    			}, this.time);
    		},
    
    		stopRotation : function (){
    			this.rotationPe.stop();
    		}
    	}
    );
    CSS
    Code:
    .box_headline {margin: 6px 12px 6px 0px; padding: 6px; background-color: #eee; height: 384px;}
    
    .box_headline h1 { padding: 4px 0px;}
    
    .headline_article_holder { width: 100%; overflow:hidden;}
    
    .headline_image { 
    	width:318px;
    	height: 236px; 
    	overflow: hidden; 
    	position: relative; 
    	display: block; 
    	text-align: center;
    }
    
    .headline_image div.image_caption { 
    	position: absolute; 
    	bottom: 0; 
    	left: 0;
    	width: 312px; 
    	text-align: left;
    	font-size: 11px; 
    	color: #FFFFFF; 
    	background-color: #000000;
    	padding: 3px;
    	z-index: 999;
    	opacity: .60;               /* Standard style for transparency */
    	-moz-opacity: .60;          /* Transparency for older Mozillas */
    	filter: alpha(opacity=60);  /* Transparency for IE */
    }
    
    .headline_body { padding: 6px;}
    
    .headline_link { text-align: right; font-weight: bold;}
    
    .player { background: url(../img/headlines_player_top_bg.gif) top repeat-x; margin: 6px 0px; padding: 6px;}
    
    .player ul { padding-top: 6px;}
    
    .player li {display: inline;}
    
    .player a {padding: 2px 6px;}
    
    .player a:link, .player a:visited {
    	color: #fff;
    	background-color: #A5A5A5;
    	text-decoration: none;
    }
    
    .player a:hover {
    	color: #C90404;
    	background-color: #B7B8B8;
    	text-decoration: none;
    }
    
    .player a.active, .player a:visited.active {
    	background-color: #C90404;
    	color: #FFFFFF;
    	font-weight: bold;
    }

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
  •