.ready not working in real website but it works in jsFiddle

Question

I'm working on a website and I use this flipboard: http://jsfiddle.net/9yyVd/1490/.

Instead of letting it work on click, how it is originally coded, I changed the click to .ready. But that doesn't work in the webpage. I think it's because I have 2 .ready's in one jquery document now? Anyway, I don't now.

Now my code looks like this:

target.ready(function(e) {
            var next = fill(texts[k].split('')),
                prev = fill(target.data('prev').split('')),
                print = prev;

            $.each(next, function(i) {
                if (next[i] == prev[i]) {
                    return;
                }
                var index = alph.indexOf( prev[i] ),
                    j = 0,
                    tid = window.setInterval(function() {
                        if ( next[i] != arr[index] ) {
                            index = index == alph.length-1 ? 0 : index + 1;
                        } else {
                            window.clearInterval(tid);
                        }
                        print[i] = alph[index];
                        render(print);
                }, options.speed)
            });
            k = k == texts.length-1 ? 0 : k + 1;
        });

It works fine in the fiddle but when I implement it in the website, it doesn't work anymore. You can see the sourcecode here: http://www.babyq.be

So the goal is to let the flipboard flip when the page loads or when 'box5' is selected.

I hope someone can help.

Please don't post link to a website, it would discard your question when the site will be fixed and that's not the point of SO. The fiddle doesn't seem to work neither actually. As a side remark, congrats ! (or congrats to the parents) ;-) — Laurent S., Jul 04 '13 at 12:04
@PixelProof: Do you mean the tiles flipping on page load to stop at some message? — Aravind, Jul 04 '13 at 12:05
Yeah, that's exactly what I mean. So the tiles flip for a while when the page is loading and then they stop at the wanted message. Right now I only get it to work when I click the tiles, like this: http://jsfiddle.net/9yyVd/1491/ — , Jul 04 '13 at 12:10
@Bartdude Thanks! What's the best way to show the whole sourcecode? I'm pretty sure it's the javascript part that's causing trouble — , Jul 04 '13 at 12:11
You can use the developer console of your browser. The one from chrome is great, the built-in one from FF is also good, the one from IE is better than nothing, but I'm still attached to firebug though. — Laurent S., Jul 04 '13 at 12:13
Yeah, to be honest, I don't see anything wrong and I'm not good enough at jquery to understand every error I get. :s I use firebug too or the one from chrome, but I just can't solve it. :( — , Jul 04 '13 at 12:18

score 0 · Answer 1 · answered Jul 04 '13 at 12:02

0

Looks like you have error on you website which could stopping Query app running.

enter image description here

answered Jul 04 '13 at 12:02

David Allen

1,123
2
10
24

I checked line 69, but can't see anything wrong. The weird thing is it works fine when I change the .ready into .click. Any idea how to fix those errors? Thanks for the help already! – Jul 04 '13 at 12:05

Rohan Kumar · Answer 2 · 2013-07-04T13:10:09.580

0

You are using jquery 1.10.1.js and your js file is using if ($.browser.msie) at line 173 in file http://www.babyq.be/scripts/jquery.spritely-0.6.js

Also $.browser has deprecated from version 1.3 and removed from jquery 1.9

Read this http://api.jquery.com/jquery.browser/

May be it causes error.

One more error comes See the image have you tested it?

enter image description here

New updated I found the error you should replace the line

$('.text').ticker();

By

$('#text').ticker();

Use an Id here because,

return this.each(function() {
  var k = 1,
  elems = $(this).children(),// here is problem 
  // try the above line by replacing=>  elems = $(this).find('li')
  arr = alph.split(''),
  len = 0,
  fill = function( a ) {
  while( a.length < len ) {
    a.push(' ');
  }
  return a;
},

edited Jul 04 '13 at 13:10

answered Jul 04 '13 at 12:15

Rohan Kumar

40,431
11
76
106

Ok, thanks for this comment, really helped. So I changed the 'if ($.browser.msie)' & '$.browser' thing and now I only have one error left here. – Jul 04 '13 at 12:28
@PixelProof test the above one I've made changes in it. – Rohan Kumar Jul 04 '13 at 13:15
Thanks for the update, I tried but the .ready still doesn't work, on click it works fine. I seriously can't figure out what the problem is. I even tried changing 'target' by something else that will actually be clicked, but that doesn't work either. Or if there's another solution when you hover the board or something, that the tiles start flipping then, that would be great to, but it just doesn't work with anything else than target. – Jul 04 '13 at 13:26
I can get it to work when I use the setTimeout(function() function – Jul 04 '13 at 14:05

.ready not working in real website but it works in jsFiddle

2 Answers2