Jquery toggle() function is not working with hoverwords() Sliding Letters extension

Question

i have 2 divs which toggles in every 3 seconds. now for the text in the div i am using an extension called sliding letters, as you can see in the demo available here. http://tympanus.net/Development/SlidingLetters/

The problem is, it works alone but now with toggle.

i have my working version located here http://webmaster.lk/n/

as you can see it is not showing the text "IMAGE 2" unless u hover it once.

can anybody please help me resolve this ?

i have the same created as a fiddle here, http://jsfiddle.net/KuW6K/5/

without hoverwords() - http://jsfiddle.net/KuW6K/4/ this is working correctly.

<body style="background:#cdcdcd;">
    <div class="sl_examples">
        <!-- need to show one of the links below every 3 seconds--> 
<a href="#" id="example2" class="tam" data-hover="image3">image4</a>
<a href="#" id="example1" class="sin" data-hover="image1">image2</a>
    </div>
</body>

Update

sample demo of the letter sliding extension - http://tympanus.net/Development/SlidingLetters/

Update 2

i removed the toggle() and re wrote it this was as in the answer 1 it was mentioned as toggle() is depreciated. but still no good.

 $(document).ready(function() {
    setInterval(function(){
    if($("#example1").is(":visible"))
       $("#example1").hide();
    else
       $("#example1").show();

    if($("#example2").is(":visible"))
       $("#example2").hide();
    else
       $("#example2").show();
    },3000);
 });

Update 3

I have attached the source here for reference, https://www.mediafire.com/?fi8547rhm1q8ixt

Update 4

actually it should only work when mouse enters and mouse leave. but here the problem is, (check this) http://webmaster.lk/n/ first it shows IMAGE 4 (red background) and when you hover it IMAGE 3 appears (light blue letters) then afer 3 seconds, Green color plain background appears without the text IMAGE 2. this is the problem why it is not working as IMAGE 4 works.

@MikeHometchko is that the problem of not working ? thanks for the info — dev1234, Nov 25 '13 at 14:13
The hoverwords plugin is outdated, relies on $.browser, and is terribly glitchy, so I would suggest you find something else, or rewrite it to remove the old dependencies and glitches. As a sidenote, the plugin isn't instanciated on hidden elements, you have to do something more like this -> http://jsfiddle.net/KuW6K/12/ — adeneo, Nov 28 '13 at 16:34
@Zeaklous yes exactly that is the issue, i tried calling the function when hovering on it but it didnt work. appreciate an example through jsfiddle.net — dev1234, Nov 28 '13 at 16:34
As a sidenote, the version of `toggle()` you're using is ***not*** deprecated, there was another version that toggled handlers on a click, and that has been deprecated. — adeneo, Nov 28 '13 at 16:38
This, http://jsfiddle.net/KuW6K/12/ still contains the issue know. :-| i think its very close now. when u hover on it for a longer, still the plain red or green is shown — dev1234, Nov 28 '13 at 16:40
That is the plugin messing up, as it was never built for this use case. — adeneo, Nov 28 '13 at 16:46
@adeneo ok so the bottom line as i understood is, i should find an alternative plugin for this letter sliding. let me know if you know any better plugin that can help me get the same effect. thanks a lot. — dev1234, Nov 28 '13 at 16:51
Well, yes! If you can find something else that is updated and works with this rather particular use case, that would be better, as this plugin seems to somewhat flawed, and as noted previously relies on old jQuery functions that have beem removed from jQuery. — adeneo, Nov 28 '13 at 16:58
This is the original extension demo : http://tympanus.net/Development/SlidingLetters/ — dev1234, Nov 29 '13 at 02:54

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

.toggle() is deprecated

http://api.jquery.com/toggle-event/

Check here for an equivalent

Equivalent of deprecated jQuery Toggle Event

UPDATE

So the real issue here is the way that the Sliding Letters library binds the event which triggers itself. This is the line doing the binding:

$el.bind('mouseenter.hoverwords mouseleave.hoverwords', function(e) {
    aux.toggleChars($el, settings);
});

As you can see it is only bound to fire on mouseenter and mouseleave. Since you want this to trigger on an interval you need to alter the existing or create a new binding.

edited May 23 '17 at 11:44

Community

1
1

answered Nov 25 '13 at 14:13

Mike H.

1,731
9
31

@mazraara so you want to cycle from Image1 to Image2 to Image3 to Image 4, like in the fiddle, but you want the Sliding Letters animation when it changes...right? – Mike H. Nov 25 '13 at 14:38
exactly! when hovering i need the letter sliding. you can see this for a better example of a working version. http://webmaster.lk/n/ – dev1234 Nov 25 '13 at 14:41
i am sorry i think you got it wrong. actually it should only work when mouse enters and mouse leave. but here the problem is, http://webmaster.lk/n/ first it shows IMAGE 4 (red background) and when you hover it IMAGE 3 appears (light blue letters) then after 3 seconds, Green color plain background appears without the text IMAGE 2. this is the problem why it is not working as IMAGE 4 works. sorry again and really appreciate your response. – dev1234 Nov 25 '13 at 15:40

Trevor · Accepted Answer · 2013-12-02T17:15:09.493

Your initial issue was caused because you were setting #example1 to display none;

   #example1 {
       background: green;
       display: none;
   }

And then you were calling

$('#example1').hoverwords();

This was causing the blank background.

So just remove the display:none; css and call hoverwords on example1 before it's hidden.

$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();

And then hide it after using jQuery.

It looks like you have a simillar working solution in your Update 4

http://jsfiddle.net/trevordowdle/KuW6K/15/

While it works well you can still trigger the error. This happens when hovering back and forth and the setInterval triggers at the same time. The toggle from the trigger and the hoverwords function if ran at near the same time interfere with each other and you don't get the desired result.

One option is to stop the words from changing while they are being hovered.

Like:

jQuery

var hover = false;

setInterval(function () {
    if(!hover){
        $('#example1').toggle();
        $('#example2').toggle(); 
    }
}, 3000);

$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();

$('.sl_examples').hover(function(){
    hover = true;    
},function(){
    hover = false;    
});

CSS

#example1 {
    background: green;
}

http://jsfiddle.net/trevordowdle/KuW6K/14/

And if you would would rather have it reset the timer.. Meaning that once your done hovering the 3 second timer starts from 0. Here is another example:

http://jsfiddle.net/trevordowdle/KuW6K/16/

@mazraara Can I please get some feedback on my answer? Is this what you are looking for? — Trevor, Dec 03 '13 at 04:39

Jquery toggle() function is not working with hoverwords() Sliding Letters extension

2 Answers2

UPDATE

Linked