Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    May 2011
    Location
    new york
    Posts
    118
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Sliding div works on jsFiddle but not live

    Hi there, I want to make a div that slides in when the user scrolls down past a certain point. The jsFiddle I have set up works well but when I export the code into my live dev site it does not work.

    Here is the jsFiddle. Edit fiddle - JSFiddle
    and here is the html of the jsFiddle: - jsFiddle demo

    Here is the code on the website: bit.ly1pek0ht


    Could anyone help or point me into the right direction?
    Last edited by phpchick; 04-17-2014 at 10:27 PM.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Check the javascript console. I can see "undefined is not a function" in Chrome and it's pointing to jQuery('li.link a').fancybox({. I think you forgot to include the js file for fancybox plugin?

  • #3
    Regular Coder
    Join Date
    May 2011
    Location
    new york
    Posts
    118
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Check the javascript console. I can see "undefined is not a function" in Chrome and it's pointing to jQuery('li.link a').fancybox({. I think you forgot to include the js file for fancybox plugin?

    I've commented that out, it does not appear to be working. I've also renamed the variables to unique names so that it does not interfere with any other variables in the code. Any other ideas?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Read this sticky and then look at and think about your source code again.

  • #5
    Regular Coder
    Join Date
    May 2011
    Location
    new york
    Posts
    118
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Read this sticky and then look at and think about your source code again.

    Yes, I just read that post and have used the noconflict function in the javascript that governs the sliding. Furthermore I did a check of the code and can confirm that there is only one jsquery.min call.
    There are similar sources, such as jsquery.qtip.min , but these are different no? Also, the noconflict should resolve this as well according to how to fix Conflicting Jquery sources? - Stack Overflow

    Am I missing anything else ?

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Did you update your live site? I can still see the "undefined is not a function" error for the missing fancybox plugin.

  • #7
    Regular Coder
    Join Date
    May 2011
    Location
    new york
    Posts
    118
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Did you update your live site? I can still see the "undefined is not a function" error for the missing fancybox plugin.
    Yes I did. - it must be your cache

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I did a hard reload and even tried using another browser but still the same error occurs.

  • #9
    Regular Coder
    Join Date
    May 2011
    Location
    new york
    Posts
    118
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    I did a hard reload and even tried using another browser but still the same error occurs.

    The section with fancybox is commented out, however I was also getting an error in regards to something being deprecated in the jquery.min that was included with the jsFiddle code, so I went to googleapis and updated the jquery.min call with this one:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    however, when I did this it created this new error:

    TypeError: $ is not a function
    var slideb = $("div[data-slide='true']");


    not sure how to troubleshoot this

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    you are calling jQuery's noConflict method, which will leave $ as undefined. Read about it here

    It would seem that you can remedy the situation by making your window load function like this:
    Code:
    jQuery( window ).load(function( $ ) {
    // then everything else

  • #11
    Regular Coder
    Join Date
    May 2011
    Location
    new york
    Posts
    118
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    you are calling jQuery's noConflict method, which will leave $ as undefined. Read about it here

    It would seem that you can remedy the situation by making your window load function like this:
    Code:
    jQuery( window ).load(function( $ ) {
    // then everything else
    I then get this error

    "Uncaught TypeError: object is not a function"

    Which points to the places where there is a dollar sign,

    such as this line: var slideb = $("div[data-slide='true']");

    If I remove the dollar signs completely, the javascript runs without an error but the desired effect does not occur.

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ah, yeah - instead of window load, can you use this:
    Code:
    jQuery( document ).ready(function( $ ) {

  • #13
    Regular Coder
    Join Date
    May 2011
    Location
    new york
    Posts
    118
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    ah, yeah - instead of window load, can you use this:
    Code:
    jQuery( document ).ready(function( $ ) {




    No errors, but no sliding in effect. Apologies for all the questions but am a little deep in the rabbit hole for me now.

    Code:
    <script type='text/javascript'>
       jQuery.noConflict(true);
    //<![CDATA[ 
    jQuery(document).ready(function($){
    var slideb = $("div[data-slide='true']");
    var openingb = false;
    var closingb = false;
    $(window).scroll(function() {
        var pos = $(window).scrollTop();
        console.log(pos);
        if (pos > 50) {
            if (!openingb) {
                openingb = true; closingb = false;
                slideb.stop().animate({
                    opacity: 1,
                    'margin-left': '-100%'
                }, 350, function() {
                    openingb = false;
                });
            }
    
        } else {
            if (!closingb) {
                closingb = true; openingb = false;
                slideb.stop().animate({
                    opacity: 0,
                    'margin-left': 0
                }, 500, function() {
                    closingb = false;
                });
            }
        }
    })
    });//]]>  
    
    </script>

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    here is a simplified version of your page which works, the only difference being that noConflict is called after the jQuery (and the javascript is in the body where it should be). I've never used noConflict, so I don't know much about it but I guess maybe that might be the problem here...
    Code:
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
    body{height:20000px}
    #slider{
        width:100%;
        background:red;
       position:fixed;
        top:0;
        left:100%;
    }
    
    </style>
    </head>
    <body>
    <div id="slider" data-slide="true">sasdfsfsdfsfsfs</div>
    <script type="text/javascript">
    //<![CDATA[ 
    jQuery(document).ready(function($){
    var slideb = $("div[data-slide='true']");
    var openingb = false;
    var closingb = false;
    $(window).scroll(function() {
        var pos = $(window).scrollTop();
        console.log(pos);
        if (pos > 50) {
            if (!openingb) {
                openingb = true; closingb = false;
                slideb.stop().animate({
                    opacity: 1,
                    'margin-left': '-100%'
                }, 350, function() {
                    openingb = false;
                });
            }
    
        } else {
            if (!closingb) {
                closingb = true; openingb = false;
                slideb.stop().animate({
                    opacity: 0,
                    'margin-left': 0
                }, 500, function() {
                    closingb = false;
                });
            }
        }
    })
    });//]]>  
    jQuery.noConflict(true);
    </script>
    </body>
    </html>

  • #15
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    You should not use jQuery’s noConflict function at all unless you really have no influence on the scripts that may be included in the site (which I don’t suppose is the case). On your site I see two calls to the jQuery core library (there’s even one more but it’s commented out), one is located on your very site (<script type='text/javascript' src='http://[your domain]/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>) and one on the Google CDN. These two versions are also pretty close together and I doubt the jQuery plugins you are using are that specific that they wouldn’t work with either of these two core versions. So, please remove one reference to jQuery (probably the one to the CDN) and familiarize yourself with how jQuery is included in Wordpress (with wp_enqueue_script in functions.php).

    Again: you barely need noConflict at all and should avoid it by all means if you have the power to do so.

    Also, you have errors in your HTML. You can’t write HTML comments inside tags like this:
    Code:
    <body class="home page page-id-10 page-template-default gecko" <!--onload="document.classic.reset();-->">
    That’s invalid HTML which could result in all kinds of issues.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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