i have tried your code. its not changing anythnig. here is my 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-US" lang="en-
US">
<head>
<style>
body {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana,
Arial,
Helvetica, sans-serif;
}
#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:300px;
height:344px;
margin:0 auto;
}
#NewsTicker h1{
padding:6px; margin:0; border:0;
background:#dfe9d5;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width: 300px;
height: 300px;
display: block;
overflow: hidden;
position: relative;
}
/* --------------- */
/* Ticker Vertical */
#TickerVertical {
width: 300px;
height: 300px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerVertical li {
display: block;
width: 288px;
color: #333333;
text-align: left;
font-size: 11px;
margin: 0;
padding: 6px;
float: left;
}
#TickerVertical li .NewsTitle{
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
margin-bottom:6px;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
margin-bottom:6px;
text-decoration:none;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
}
#TickerVertical li .NewsFooter{
display: block;
color: #000000;
font-size: 10px;
margin:6px 0 14px 0;
}
</style>
<script language="javascript" src="mootools.svn.js" type="text/
javascript"></script>
<script language="javascript" type="text/javascript"
src="newsticker.js"></script>
<script language="javascript" type="text/javascript">
var Ticker = new Class({
Implements : [Options],
options : {
speed: 1500,
delay: 5000,
direction: 'vertical'
},
initialize: function(el,options){
this.setOptions(options);
this.el = $(el).addEvents({
'mouseover' : this.over.bind(this),
'mouseout' : this.out.bind(this)
});
this.items = this.el.getElements('li');
var w = 0;
var h = 0;
if(this.options.direction.toLowerCase()=='horizontal') {
h = this.el.getSize().y;
this.items.each(function(li,index) {
w += li.getSize().x;
});
} else {
w = this.el.getSize().x;
this.items.each(function(li,index) {
h += li.getSize().y;
});
}
this.el.setStyles({
position: 'absolute',
top: 0,
left: 0,
width: w,
height: h
});
this.fx = new Fx.Morph(this.el,
{duration:this.options.speed,onComplete:function() {
var i =
(this.current==0)?this.items.length:this.current;
this.items[i-1].injectInside(this.el);
this.el.setStyles({
left:0,
top:0
});
}.bind(this)});
this.current = 0;
this.next();
},
next: function() {
this.current++;
if (this.current >= this.items.length)
this.current = 0;
var pos = this.items[this.current];
this.fx.start({
top: -pos.offsetTop,
left: -pos.offsetLeft
});
this.timeoutId =
this.next.bind(this).delay(this.options.delay
+this.options.speed);
},
over : function(){
this.fx.pause();
$clear(this.timeoutId);
},
out : function(){
this.fx.resume();
this.next();
}
});
window.addEvent('domready',function(){
var vert = new
Ticker('TickerVertical',{speed:1000,delay:
2000,direction:'vertical'});
})
</script>
</head>
<body>
<div id="NewsTicker">
<h1>What's news?</h1>
<div id="NewsVertical">
<ul id="TickerVertical">
<li>
<img src="img/U0000.png" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="http://woork.blogspot.com/2008/07/tips-to-design-
your-site-for-mobile.html">Tips to design your site for mobile
devices</a>
</span>
Some day ago my friend Lucas asked to me some suggest to
design a mobile version of his blog.
So, in this post I want to illustrate some simple tips
about how to develop a mobile version of
your site.<span class="NewsFooter"><strong>Published July
25</strong> - 324 comments</span> </li>
<li>
<img src="img/U0001.png" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="http://woork.blogspot.com/2008/07/useful-tips-to-
enrich-your-html-forms.html">Useful tips to enrich your HTML Forms</a>
</span>
In this post I want to share some simple tips useful to
enrich your forms with various elements
such as suggest messages, autosuggest feature, simple check
during data input and how to
show hidden fields selecting a radio element option.
<span class="NewsFooter"><strong>Published July 22</strong>
- 265 comments</span>
</li>
<li>
<img src="img/U0002.png" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="http://woork.blogspot.com/2008/07/navigation-bar-
with-tabs-using-css.html">Navigation bar with tabs using CSS and
sliding doors effect</a>
</span>
My friend William asked to me to design for his project a
simple navigation bar with
tabs using CSS. I prepared for him this navbar (with status
effects active, hover, link):
<span class="NewsFooter"><strong>Published July 18</strong>
- 342 comments</span>
</li>
<li>
<img src="img/U0003.png" border="0" class="NewsImg"/>
<span class="NewsTitle"><a href="http://woork.blogspot.com/
2008/06/form-elements-design-using-css-and-list.html">FORM elements
design using CSS and list (ul and dl)</a></span>
In this post I would show another way to design FORM using
list elements.
In any case, if you want to use pure CSS code instead of
HTML table to design your FORM
I think this is a good way to do it.
<span class="NewsFooter"><strong>Published July 18</strong>
- 342 comments</span>
</li>
</ul>
</div>
</div>
</body>
</html>
could you please tell me what can i do so it will be working?
On Aug 31, 4:05 pm, Deepali <deeps...@gmail.com> wrote:
> Thanks for your reply nwhite.
>
> Great! thats what i want to do i ll give try and let you know if i ll
> stuck somewhere.
>
> Thanks a lot once again!
>
> On Aug 31, 3:28 pm, nwhite <changereal...@gmail.com> wrote:
>
> > this code seems to be 1.11 I made some changes to make it 1.2 compatible.
>
> >http://mooshell.net/sB7vD/
>
> > Changes:
>
> > 1. used Implements : [Options] instead of the recreating the 'setOptions'
> > method. this removed the object.Extend reference
> > 2. There was some weird stuff with element dimensions el.getSize().size.x
> > ??? should be el.getSize().x
> > 3. Change Fx.Styles -> Fx.Morph
> > 4. where this.el get set I added 'mouseover' and 'mouseout' events this
> > allows for pausing.
> > 5. in the 'next' method I capture the timeoutId from 'delay'
> > 6. added 'over' and 'out' method to handle pausing and resuming.
>
> > The Fx transition has an oncomplete that adds elements in to give the
> > perception of an endless scroll. Problem is this is independent of the
> > 'next' delay loop. So when you rollover and then back out there is a jumping
> > going on right now. This can be corrected with a little better engineering
> > on how the periodical works in conjunction with the Fx transition. I'm too
> > tired to dive into that at the moment. This should give you a bit of
> > direction in the meantime.
>
> > On Mon, Aug 31, 2009 at 1:56 AM, Deepali <deeps...@gmail.com> wrote:
>
> > > Hello,
>
> > > Using following effect, i am able to get the perfect effect to show my
> > > recent feeds on my site.
>
> > >http://woork.blogspot.com/2008/07/fantastic-news-ticker-newsvine-like...
>
> > > but now i want on mouse hover the scrolling should stop moving.
> > > because sometimes its to fast so somtimes one can not read the
> > > content.
>
> > > here is the demo for it.
>
> > >http://woorktuts.110mb.com/newsticker/index.html
>
> > > Can anyone tell me how can i stop scrolling on mouse hover?
>
> > > Thanks in advance
