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
The slider, its tabs and arrows are working fine for me. What browser are you on? I’m using Firefox.
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
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. 
hi, here is the same template:
OK, what exactly did you do between it working and not working?
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
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).
I took them off but it’s still the same
The tabs pop up when I mouseover. I’m using FF5 on Win7.
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?
also i tryed it on a friends laptop and they don’t bounce on there either
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.
mmm v annoying, and strange since it’s working for skunkbad. Thanks for trying tho
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.
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.
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 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.
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. )
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.
“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.