Jquery enigma

hantaah 2011-07-30 08:46:54 UTC #1

my website has 4 tabs that used to pop up when rolled over but I added some content to the scroller and that doesn't work anymore. I've looked over and over the code and even put the old code back but it still doesn't work.

What do you think is wrong?

Quality Web Design, Web design packages, Wordpress web design and seo

ralphm 2011-07-30 08:51:33 UTC #2

The slider, its tabs and arrows are working fine for me. What browser are you on? I'm using Firefox.

hantaah 2011-07-30 08:55:18 UTC #3

hi there, do you ever get rest?

the arrows and tabs work when you click them but they used to jump when you roll the mouse over them

I'm using ff and also tried it in ie and chrome

ralphm 2011-07-30 09:03:38 UTC #4

they used to jump when you roll the mouse over them

Is there an online example of that (e.g. in the original slider code—as in a demo?)

No. Rest is for wimps. :lol:

hantaah 2011-07-30 09:13:20 UTC #5

hi, here is the same template:

Lee Ann Fashions | Ladies Fashion manufacturing

ralphm 2011-07-30 10:26:04 UTC #6

OK, what exactly did you do between it working and not working?

hantaah 2011-07-30 13:15:22 UTC #7

it's very weired, but all I did was add the last paragraph of the sliders about getting in touch to discuss an affordable price. Then they stopped working altogether so I went back and got the old code and put in my pics etc and although the sliders are working the tabs do not jump upon roll over

ralphm 2011-07-30 13:59:53 UTC #8

What happens if you remove the <p> tags from this paragraph?

<p>I know how hard it is to make it online so I feel it is VERY important to make these quality services available to individuals, small businesses or even students. GET IN TOUCH, tell me your situation, I will help</p>

I have a feeling the script is rejecting them (gawd knows why).

hantaah 2011-07-30 16:59:50 UTC #9

I took them off but it's still the same

skunkbad 2011-07-30 17:22:38 UTC #10

The tabs pop up when I mouseover. I'm using FF5 on Win7.

hantaah 2011-07-30 18:18:38 UTC #11

Strange as it's not working on any of my browsers but if it's working for you i'm happy. Is it working for you now ralph.m?

hantaah 2011-07-30 18:32:14 UTC #12

also i tryed it on a friends laptop and they don't bounce on there either

ralphm 2011-07-30 22:24:33 UTC #13

No, still not working for me, I'm afraid (in any of my Mac browsers). The <p> thing was just a shot in the dark, due to the fact that it's the last thing you changed and because I getting an error message report in one of your scripts that mentions a p element. But really, this isn't my area, I'm afraid. As far as I can see, everything seems to be in place for this to work, so I'm stumped. JS is a tricky beast.

hantaah 2011-07-30 22:34:26 UTC #14

mmm v annoying, and strange since it's working for skunkbad. Thanks for trying tho

Paul_Wilkins 2011-07-31 01:02:17 UTC #15

We have the template where it's working:
Lee Ann Fashions | Ladies Fashion manufacturing

And the page where it's not working:
Quality Web Design, Web design packages, Wordpress web design and seo

The working page has mouseover and mouseout events assigned to each of the tabs, but the non-working page doesn't.

So, the problem is that the mouse over/out events aren't even being assigned.

Are there any errors occuring on the non-working page? Here's one:

Uncaught TypeError: Cannot read property 'ssbound' of undefined

Let's replace the minified serialScroll code with the full code, and find out what's causing the problem.

Here's where the error is occurring in serialScroll:

// Custom events bound to the container
if( !pane.ssbound )// don't bind more than once

Why is pane undefined? Putting a breakpoint on the line shows us that it's okay the first time through that code, but the second time it's not.

The code is being run twice? How, and why?

$.fn.serialScroll = function( options ){
    return this.each(function(){

The first time it's called, the this.target value is '#sections' and the second time the this.target value is '.recent-scroll'
The serialScroll function is being called multiple times, with different targets. The second target doesn't even exist, which is the cause of the problem.

Where's it being called from? The init.js script
http://organicwebdesigns.co/wp-content/themes/eBusiness/js/init.js

In there you will find the problem.

ralphm 2011-07-31 01:25:31 UTC #16

Wow, great post, Paul. Does that mean this needs to be removed?

jQuery(function( $ ){
	
		$('#wrapper2').serialScroll({
			target:'.recent-scroll',
			items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
			prev:'div.prev2',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
			next:'div.next2',// Selector to the 'next' button (absolute too)
			axis:'xy',// The default is 'y' scroll on both ways
			duration:200,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
			force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
			onBefore:function( e, elem, $pane, $items, pos ){
				e.preventDefault();
				if( this.blur )
					this.blur();
			},
			onAfter:function( elem ){
			}
		});
		
	});

I'd love to learn to debug JS better, so tried to follow your process, but got stuck.

Is that done with de-obfuscate source?

Here's where the error is occurring in serialScroll:

// Custom events bound to the container
if( !pane.ssbound )// don't bind more than once

How did you find that bit of code? It doesn't seem to appear in serialScroll.js.

Paul_Wilkins 2011-07-31 01:38:55 UTC #17

That's right.

It can be. Recent versions of Google Chrome can automate some of that. This [Re-introduction to the Chrome Developer Tools is a very nice video that takes you through the nuts and bolts, with the de-obfuscating being at the [url="http://www.youtube.com/watch?v=N8SS-rUEZPg&feature=player_detailpage#t=1784s"]29:44](http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/) section.

Without that though, what can be done is to save the HTML source to a local page, and use the base element so that the test page retrieves all content from the appropriate location.

For example:

<head>
    <base href="http://www.exampledomain.com/webpage.html">

That allows me to make changes to the local test version, and test it as if it were at the specified location.

In the packed version of the code it is:

if(!p.ssbound){

The serialScroll.js on your page is a renamed version of the original serialScroll.min.js
Instead of using your serialScroll.js, I used the original serialScroll.js which is the unpacked version.

With that replaced, the error shows the appropriate line number, and also links you to that part of the code.

ralphm 2011-07-31 10:43:00 UTC #18

Great answer, Paul, and thanks for the insights into your methods. Very interesting. I look forward to watching that video. (Also, never knew you could link to a section of a YouTube vid like that. )

Paul_Wilkins 2011-07-31 10:46:19 UTC #19

Soon you will learn the ways of the force, young padawan.

The right-click button of your mouse, on the youtube video, gives you access to many useful and varied options.

ralphm 2011-07-31 11:04:53 UTC #20

"So, this is a lightsaber, eh? …" he says, staring intently at the end of the handle as he turns it on. The beam shoots out, piercing him though the head. "D'oh!"

The right-click button of your mouse, on the youtube video, gives you access to many useful and varied options.

Be darned! Thanks for pointing that out.

ThemesPodcastArticlesPremium