on hover pause stop scroll effect for ticker
814 views
Skip to first unread message
Deepali
Aug 31, 2009, 4:56:31 AM8/31/09
to MooTools Users
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.html
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
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.html
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
nwhite
Aug 31, 2009, 6:28:37 AM8/31/09
to mootool...@googlegroups.com
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.
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.
Deepali
Aug 31, 2009, 7:05:37 AM8/31/09
to MooTools Users
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.
>
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...
>
> > Hello,
>
> > Using following effect, i am able to get the perfect effect to show my
> > recent feeds on my site.
>
Deepali
Aug 31, 2009, 7:26:41 AM8/31/09
to MooTools Users
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?
<!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?
Deepali
Aug 31, 2009, 7:40:27 AM8/31/09
to MooTools Users
I am sorry, now its working. but its not stopping when i keep cursor
on on of my feed. why is it so?
could you please tell me?
on on of my feed. why is it so?
could you please tell me?
nwhite
Aug 31, 2009, 11:00:24 AM8/31/09
to mootool...@googlegroups.com
you'll probably need to update your version of mootools. I was working with 1.2 I think the original code base is for 1.1
Deepali
Sep 1, 2009, 2:34:14 AM9/1/09
to MooTools Users
Good morning nwhite
I have added the following files
<script type="text/javascript" src="<?=$retpath;?>/mootools-1.2.3.1-
more.js"></script>
<script type="text/javascript" src="<?=$retpath;?>/mootools-1.2.3-
core.js"></script>
<script type="text/javascript" src="<?=$retpath;?>/mootools.svn.js"></
script>
<script language="javascript" type="text/javascript"
src="newsticker.js"></script>
and replace newsticker.js the way you have shown in your example.
still its not working.
could you please tell me why its not working?
On Aug 31, 8:00 pm, nwhite <changereal...@gmail.com> wrote:
> you'll probably need to update your version of mootools. I was working with
> 1.2 I think the original code base is for 1.1
>
> ...
>
> read more »
Deepali
Sep 2, 2009, 12:27:46 AM9/2/09
to MooTools Users
Anyone help me??
> ...
>
> read more »
Deepali
Sep 3, 2009, 3:23:10 AM9/3/09
to MooTools Users
I have tried the suggestions as well they have given in comment but
its not worknig for me
here is the like for it,
http://woork.blogspot.com/2008/07/fantastic-news-ticker-newsvine-like.html?dsq=15850380#comment-15850380
its not worknig for me
here is the like for it,
http://woork.blogspot.com/2008/07/fantastic-news-ticker-newsvine-like.html?dsq=15850380#comment-15850380
actually this effects includes only
mootools.svn.js
newsticker.js
then why you are suggested me to use 1.2 version and for which js file
core or more???
> ...
>
> read more »
Reply all
Reply to author
Forward
0 new messages