SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31

Thread: jquery enigma

  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    jquery enigma

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The slider, its tabs and arrows are working fine for me. What browser are you on? I'm using Firefox.

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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?)

    Quote Originally Posted by hantaah View Post
    do you ever get rest?
    No. Rest is for wimps.

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hi, here is the same template:

    Lee Ann Fashions | Ladies Fashion manufacturing

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, what exactly did you do between it working and not working?

  7. #7
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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).

  9. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I took them off but it's still the same

  10. #10
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The tabs pop up when I mouseover. I'm using FF5 on Win7.

  11. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    also i tryed it on a friends laptop and they don't bounce on there either

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  14. #14
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    mmm v annoying, and strange since it's working for skunkbad. Thanks for trying tho

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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:
    Code:
    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:

    Code javascript:
    // 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?

    Code javascript:
    $.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-conte...ess/js/init.js

    In there you will find the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Wow, great post, Paul. Does that mean this needs to be removed?

    Code:
    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.

    Quote Originally Posted by paul_wilkins View Post
    Let's replace the minified serialScroll code with the full code, and find out what's causing the problem.
    Is that done with de-obfuscate source?

    Here's where the error is occurring in serialScroll:
    Code javascript:
    // 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.

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Wow, great post, Paul. Does that mean this needs to be removed?
    That's right.

    Quote Originally Posted by ralph.m View Post
    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?
    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 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:

    Code html4strict:
    <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.

    Quote Originally Posted by ralph.m View Post
    How did you find that bit of code? It doesn't seem to appear in serialScroll.js.
    In the packed version of the code it is:
    Code:
    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.
    Last edited by paul_wilkins; Jul 30, 2011 at 19:41.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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. )

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,714
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Soon you will learn the ways of the force, young padawan.
    "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.

  21. #21
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    wow, i'm really impressed however have got a clue lol!!!

    What file do I have to look for to edit the above?

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You need to go here:

    http://organicwebdesigns.co/wp-content/themes/eBusiness/js/init.js

    and chop out the code noted in post #16.

  23. #23
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok sorry I found the init.js and deleted the above that ralph.m posted and I'm stuck on the de-obfuscate bit, what do I need to look for or add or delete there

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    I'm stuck on the de-obfuscate bit, what do I need to look for or add or delete there
    Don't worry about that bit. That was just Paul explaining the process he followed to discover the problem, which was the extra code in the init.js file. All you need to do is remove that code (it's still there, as I see from your first link in this thread).

  25. #25
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I removed the code from the init.js file. All that is left there is the following:

    // Easing equation, borrowed from jQuery easing plugin
    // jQuery Easing Plugin
    jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
    };

    if (jQuery("#slider-nav").length != 0) {
    if (!($("#wrapper2").length === 0)) {

    };
    });
    };


    do I need to remove this also as it was inbetween the code you said to delete but I left it there as It wasn't mentioned in the code you said to delete?

    if (!($("#wrapper2").length === 0)) {


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •