code works in JSFiddle but not browser

Question

I'm trying to move a fixed div containing an image of an airplane to the right and fade to 0 as the page is scrolled down from the top.

site: http://wp.ccrcc.org

I works fine in JSFiddle (http://jsfiddle.net/G4t4f/77/) but on in the footer of my Wordpress site. I'm obviously missing something here. This may not be the best way to do it anyway since the site is running on bootstrap 3.0.3 with bootstrap.min.js?

<style>
    #header-plane {
    z-index: 5;
    width: 400px;
    position: fixed;
    right: 550px;
    top: 200px;}
</style>

<div id="header-plane">
<img src="http://wp.ccrcc.org/wp-content/themes/ccrcc/images/plane-1.png" 
alt="R/C plane" width="400" height="162">
</div>

<div id="footer">
<script type="text/javascript">
  $( document ).ready(function() {
    function flyOut() {
        var top = $(document).scrollTop();
           if (top < 30) {
                 $('#header-plane').animate({
                    'right': '0',
                    'opacity': 0
                 }, 'slow', function() {
                 });        
              }
    }

    $(window).scroll(function () {
      flyOut();
    });
 });
</script>
</div>

Have you tried not wrapping the JS in the document ready function? Depending on how WordPress assembles your site, it may not be executing that code. — David Fleeman, Jan 30 '14 at 06:13

score 2 · Accepted Answer · answered Jan 30 '14 at 06:17

2

It looks like something is breaking $ by the time your code runs. You could work around that in the short term by using jQuery instead of $, like this:

  jQuery( document ).ready(function() {
    function flyOut() {
        var top = jQuery(document).scrollTop();
           if (top < 30) {
                 jQuery('#header-plane').animate({
                    'right': '0',
                    'opacity': 0
                 }, 'slow', function() {
                 });        
              }
    }

    jQuery(window).scroll(function () {
      flyOut();
    });
 });

answered Jan 30 '14 at 06:17

Dave Ward

59,815
13
117
134

Thanks! That did the trick! One day, I'd like to get the plane to fly back to position from the left when scrolling back to scrollTop() but that's another dream. For now, this works great! – user3192829 Jan 30 '14 at 07:18
@user3192829 have a look at: http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event this can give you an idea how to detect scroll direction. – axel.michel Jan 30 '14 at 18:12

score 0 · Answer 2 · answered Jan 30 '14 at 06:45

The reason for this is how wordpress initialize jQuery. Have a look here: jQuery noConflict Wrappers. In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used. The following construct is a timesaver:

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

code works in JSFiddle but not browser

2 Answers2

Linked

Related