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.
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).
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.
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.
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.
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.
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. )
“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.