[jQuery] Cycle Plugin Typewriter effect
Hey, The cycle plugin is fantastic. I love using it, but would like to know if there's a typewriter effect for the transitions in order to build a news ticker using it. See here for typewriter effect: http://www.hungry-media.com/code/jQuery/tickerType/ Or, would anyone know how to create an effect like this for use with the cycle plugin? Thanks, Dave
[jQuery] Re: Cycle Plugin - Can't Get Pause To Work
Bump!
Same problem here. Code looks fine?
$('#feature .sim-link').toggle(function () {
$('#feature').cycle('stop');
}, function() {
$('#feature').cycle('start');
});
Anyone have a solution?
Dave
On Apr 27, 8:04 am, Nic Hubbard nnhubb...@gmail.com wrote:
Really? No one knows why the cycle pause is not working? Someone
must be using this!
On Apr 24, 8:25 am, Nic Hubbard nnhubb...@gmail.com wrote:
Anyone?
On Apr 23, 9:44 pm, Nic Hubbard nnhubb...@gmail.com wrote:
Shawn,
Yes, I havepauseon hover set, and this is correctly working. It is
when the overlay comes up, and it is suppose topausethe current
image, which, my code seems to be correct to do so $
('#artistCycleParent').cycle('pause'); but it just keeps cycling and
does not honor thepause.
I have it in my click function, and everything in the click function
does work, but not thepause. Once the user clicks off of the
overlay, it should resume.
On Apr 23, 9:22 pm, Shawn sgro...@open2space.com wrote:
Pauseis working for me, with a catch.
If my mouse is not over the image, it cycles. Placing my mouse over the
image pauses the cycling.
Clicking the link brings up an overlay (?) and a form - at this point
the mouse is not over the image, but over the overlay/form. So the
image cycles as it should.
I don't think you want thepauseoption here. I think you want to
progamatically start/stop the cycling. See the section Manually
Pausing a slideshow athttp://malsup.com/jquery/cycle/int2.html.
HTH.
Shawn
Nic Hubbard wrote:
I am using thecycleplugin, but for some reason I can't get thepause
feature to work. I am showing a hidden div, and when I do, I need to
pausethe slideshow.
Here is what I am using:
$('#artistCycleParent').cycle({
fx: 'fade',
speed: 3000,
timeout: 5000,
pause: 1,
next: '#artworkNext',
prev: '#artworkPrev'
});
//Pausethecycle
$('#pauseButton').click(function() {
$('#artistCycleParent').cycle('pause');
$(this).hide();
$('#resumeButton').show();
return false;
});
// Resume thecycle
$('#resumeButton').click(function() {
$('#artistCycleParent').cycle('resume');
$(this).hide();
$('#pauseButton').show();
return false;
});
The code looks ok to me, but it just does not seem topause.
Example:http://www.caldwellsnyder.com/artists/montoya-ortiz/view-artworks
Click on Contact about artwork
Thanks.
[jQuery] Don't 'X' if already 'X'd'
Hey,
I'm trying to get a little hover script running. It's using the
hoverIntent plugin, but substituting that for hover will work for this
example.
What I'm trying to do is hover a link which will fade out a paragraph,
change the contents of that paragraph, and then fade that paragraph
back in. I have that working in my code so far.
The bug I'm trying to fix is that when I hover over the now active
link again, it repeats the fadeOut change contents fadeIn script
again, but as the content has already been changed it just becomes an
annoying fadeOut fadeIn effect.
Any help would be greatly appreciated.
Here's my code.
$('ul.sub-text-points li a.point-1').hover(function() {
$('a.point-2, a.point-3').removeClass(current_point);
$(this).addClass(current_point);
$('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
start of the problem? */
$(this).html('Changed text');
$(this).fadeIn(300);
});},
function() {
});
[jQuery] Re: Don't 'X' if already 'X'd'
Liam,
Thanks for your reply. As soon as I posted this I also had that idea.
Guess a Mr Kipling and a coffee is brain food after all!
I haven't tried your code as I have it working now. Here's my code
incase anyone else would like it. Cheers Liam.
$('ul.sub-text-points li a.point-1').hoverIntent(function() {
$('a.point-2, a.point-3').removeClass(current_point);
$(this).addClass(current_point);
$('p.point-1').fadeOut(300, function(){
$(this).html('Changed text');
$(this).fadeIn(300);
$(this).removeClass(point-1);
$(this).addClass(point-2);
$(this).addClass(point-3);
});},
function() {
});
On Jan 15, 3:41 pm, Liam Potter radioactiv...@gmail.com wrote:
just noticed a mistake
forget to actually do anything with the if
try this
$('ul.sub-text-points li a.point-1').hover(function() {
if ( $(this).attr(class) == current_point) { }
else{
$('a.point-2, a.point-3').removeClass(current_point);
$(this).addClass(current_point);
$('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
start of the problem? */
$(this).html('Changed text');
$(this).fadeIn(300);
});},
function() {
});
}
Liam Potter wrote:
here is some untested code
$('ul.sub-text-points li a.point-1').hover(function() {
if ( $(this).class(current_point) {}
else{
$('a.point-2, a.point-3').removeClass(current_point);
$(this).addClass(current_point);
$('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
start of the problem? */
$(this).html('Changed text');
$(this).fadeIn(300);
});},
function() {
});
}
like I say, untested, but should give you a starting point.
Liam Potter wrote:
You could add a class say, nochange check for that on hover, if
found, no dothing, if not, continue to change.
davebowker wrote:
Hey,
I'm trying to get a little hover script running. It's using the
hoverIntent plugin, but substituting that for hover will work for this
example.
What I'm trying to do is hover a link which will fade out a paragraph,
change the contents of that paragraph, and then fade that paragraph
back in. I have that working in my code so far.
The bug I'm trying to fix is that when I hover over the now active
link again, it repeats the fadeOut change contents fadeIn script
again, but as the content has already been changed it just becomes an
annoying fadeOut fadeIn effect.
Any help would be greatly appreciated.
Here's my code.
$('ul.sub-text-points li a.point-1').hover(function() {
$('a.point-2, a.point-3').removeClass(current_point);
$(this).addClass(current_point);
$('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
start of the problem? */
$(this).html('Changed text');
$(this).fadeIn(300);
});},
function() {
});
[jQuery] Re: Don't 'X' if already 'X'd'
Chaining is a good idea!
I used your chain, but combined the addClass into a single line. eg
addClass('point-2 point-3')
Cheers again!
On Jan 15, 3:59 pm, Liam Potter radioactiv...@gmail.com wrote:
That always happens to me as well, as soon as I post something I'll
realise what I could do.
But you can chain a quite a bit of this, make a bit more efficient
$('ul.sub-text-points li a.point-1').hoverIntent(function() {
$('a.point-2, a.point-3').removeClass(current_point);
$(this).addClass(current_point);
$('p.point-1').fadeOut(300, function(){
$(this).html('Changed
text').fadeIn(300).removeClass(point-1).addClass(point-2).addClass(point-3);
});},
function() {
});
davebowker wrote:
Liam,
Thanks for your reply. As soon as I posted this I also had that idea.
Guess a Mr Kipling and a coffee is brain food after all!
I haven't tried your code as I have it working now. Here's my code
incase anyone else would like it. Cheers Liam.
$('ul.sub-text-points li a.point-1').hoverIntent(function() {
$('a.point-2, a.point-3').removeClass(current_point);
$(this).addClass(current_point);
$('p.point-1').fadeOut(300, function(){
$(this).html('Changed text');
$(this).fadeIn(300);
$(this).removeClass(point-1);
$(this).addClass(point-2);
$(this).addClass(point-3);
});},
function() {
});
On Jan 15, 3:41 pm, Liam Potter radioactiv...@gmail.com wrote:
just noticed a mistake
forget to actually do anything with the if
try this
$('ul.sub-text-points li a.point-1').hover(function() {
if ( $(this).attr(class) == current_point) { }
else{
$('a.point-2, a.point-3').removeClass(current_point);
$(this).addClass(current_point);
$('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
start of the problem? */
$(this).html('Changed text');
$(this).fadeIn(300);
});},
function() {
});
}
Liam Potter wrote:
here is some untested code
$('ul.sub-text-points li a.point-1').hover(function() {
if ( $(this).class(current_point) {}
else{
$('a.point-2, a.point-3').removeClass(current_point);
$(this).addClass(current_point);
$('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
start of the problem? */
$(this).html('Changed text');
$(this).fadeIn(300);
});},
function() {
});
}
like I say, untested, but should give you a starting point.
Liam Potter wrote:
You could add a class say, nochange check for that on hover, if
found, no dothing, if not, continue to change.
davebowker wrote:
Hey,
I'm trying to get a little hover script running. It's using the
hoverIntent plugin, but substituting that for hover will work for this
example.
What I'm trying to do is hover a link which will fade out a paragraph,
change the contents of that paragraph, and then fade that paragraph
back in. I have that working in my code so far.
The bug I'm trying to fix is that when I hover over the now active
link again, it repeats the fadeOut change contents fadeIn script
again, but as the content has already been changed it just becomes an
annoying fadeOut fadeIn effect.
Any help would be greatly appreciated.
Here's my code.
$('ul.sub-text-points li a.point-1').hover(function() {
$('a.point-2, a.point-3').removeClass(current_point);
$(this).addClass(current_point);
$('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
start of the problem? */
$(this).html('Changed text');
$(this).fadeIn(300);
});},
function() {
});
[jQuery] Re: Hover In/Out with quick mouse movements
Taking a look now. Cheers for the suggestion. On Oct 15, 5:51 pm, Martin Möller [EMAIL PROTECTED] wrote: davebowker wrote: Which when I mouseout delays the fadeout effect by 2 seconds by fooling the already faded in element to fade in some more, ie. do nothing, before fading out. Maybe hoverIntent is what you are looking for: http://plugins.jquery.com/project/hoverIntent Cheers Mate
[jQuery] Hover In/Out with quick mouse movements
So I have this bug...
I have an initial div set to hide on document init, and fadeIn when I
hover over the parent div, then fadeOut when I hover back out of the
parent div.
When I move the mouse fast in and out of the parent div, the child div
seems to queue up the movements so after I stop moving the mouse, the
fadeIn and fadeOut effects keep running until they have caught up with
the mouse movements. Any ideas how to fix this? Still getting my head
around jQuery and javascript, so any help would be greatly
appreciated.
Here's my code:
$(document).ready(function() {
$('.prev, .next').hide();
$('#topbar').hover(function() {
$('.prev, .next').fadeIn('slow');
},
function() {
$('.prev, .next').fadeOut('slow');
});
});
[jQuery] Hover In/Out with quick mouse movements
So I have this bug...
I have an initial div set to hide on document init, and fadeIn when I
hover over the parent div, then fadeOut when I hover back out of the
parent div.
When I move the mouse fast in and out of the parent div, the child div
seems to queue up the movements so after I stop moving the mouse, the
fadeIn and fadeOut effects keep running until they have caught up with
the mouse movements. Any ideas how to fix this? Still getting my head
around jQuery and javascript, so any help would be greatly
appreciated.
Here's my code:
$(document).ready(function() {
$('.prev, .next').hide();
$('#topbar').hover(function() {
$('.prev, .next').fadeIn('slow');
},
function() {
$('.prev, .next').fadeOut('slow');
});
});
[jQuery] Re: Hover In/Out with quick mouse movements
Thanks for the reply.
Looks a bit like overkill tbh, and I did quickly try it but couldn't
make it work.
What I have now is --
$(document).ready(function() {
$('.ticker-prev, .ticker-next').hide();
$('#topbar').hover(function() {
$('.ticker-prev,
.ticker-next').fadeIn(500);
},
function() {
$('.ticker-prev,
.ticker-next').fadeTo(2000, 1).fadeOut(500);
});
});
Which when I mouseout delays the fadeout effect by 2 seconds by
fooling the already faded in element to fade in some more, ie. do
nothing, before fading out.
What I'd like to be able to do still though is to cancel the quesue of
mousein/out effects, and also if a user mousein then out then in again
before the 2 second wait then the mouseout effect in the middle should
not run.
Hope someone can understand this little problem and help out.
Cheers!
