Code form jsfiddle doesn't work

262
November 26, 2016, at 9:05 PM

I need a piece of code to use in my website (that I hardly found), but when I use it inside my html file, it doesn't work.

I tried placing it before <html> , in head and in body, doesn't work either way.
Also tried $(document).ready(function() { ... });

I'm using:

<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

but maybe I need another one

Here is the jsfiddle: http://jsfiddle.net/Tgm6Y/1447/.

var windw = this;
$.fn.followTo = function ( elem ) {
    var $this = this,
        $window = $(windw),
        $bumper = $(elem),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};
$('#one').followTo('#two');
Answer 1

It works fine in the document ready function. It's possible your javascript is erroring out because that ajax script is 404ing. I just tested this code verbatim and it worked fine:

<html>
<head>
<style>
body, html{
    height:200%;
}

#one {
    width:100%;    
    height: 200px;
    background-color: aqua;
    position: fixed;
}

#two {
    width: 100%;    
    height:50px;
    background-color: red;
    margin-top:150%;
    position:absolute;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function() {
    var windw = this;
    $.fn.followTo = function ( elem ) {
        var $this = this,
            $window = $(windw),
            $bumper = $(elem),
            bumperPos = $bumper.offset().top,
            thisHeight = $this.outerHeight(),
            setPosition = function(){
                if ($window.scrollTop() > (bumperPos - thisHeight)) {
                    $this.css({
                        position: 'absolute',
                        top: (bumperPos - thisHeight)
                    });
                } else {
                    $this.css({
                        position: 'fixed',
                        top: 0
                    });
                }
            };
        $window.resize(function()
        {
            bumperPos = pos.offset().top;
            thisHeight = $this.outerHeight();
            setPosition();
        });
        $window.scroll(setPosition);
        setPosition();
    };
    $('#one').followTo('#two');
});
</script>
</head>
<body>
    <div id="one">FIXED...</div>
    <div id="two">...BUT STOPS HERE</div>
</body>
</html>

If it's still not working check the console in your browser, you may just have a random syntax error in your javascript somewhere. Pasting this code into a file will demonstrate the same thing that jsfiddle is doing.

Answer 2

what you want same jsfiddle work then it's working fine, if your using whatever code you provided here your missing quotes @second js file path, or if you want any thing else more than this fiddle can you mention here ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

the following code working fine

<!DOCTYPE html>
<html>
<head>
    <style>
       body, html{
        height:200%;
        }

        #one {
            width:100%;    
            height: 200px;
            background-color: aqua;
            position: fixed;
        }

        #two {
            width: 100%;    
            height:50px;
            background-color: red;
            margin-top:150%;
            position:absolute;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</head>
<body>
    <div id="one">FIXED...</div>
    <div id="two">...BUT STOPS HERE</div>
    <script>
        var windw = this;
        $.fn.followTo = function ( elem ) {
            var $this = this,
                $window = $(windw),
                $bumper = $(elem),
                bumperPos = $bumper.offset().top,
                thisHeight = $this.outerHeight(),
                setPosition = function(){
                    if ($window.scrollTop() > (bumperPos - thisHeight)) {
                        $this.css({
                            position: 'absolute',
                            top: (bumperPos - thisHeight)
                        });
                    } else {
                        $this.css({
                            position: 'fixed',
                            top: 0
                        });
                    }
                };
            $window.resize(function()
            {
                bumperPos = pos.offset().top;
                thisHeight = $this.outerHeight();
                setPosition();
            });
            $window.scroll(setPosition);
            setPosition();
        };
        $('#one').followTo('#two');

    </script>
</body>

READ ALSO
jQuery Validate not showing all error messages at once, only displaying one at a time

jQuery Validate not showing all error messages at once, only displaying one at a time

I've searched the web and read through the jQuery Validate Docs and I'm not finding out what I'm doing wrongI apologize in advance if I've posted too much code or not enough - let me know what I can get rid of or add and I'll take care of it

181
Initially i connect to phonegap&#39;s database but when i move to the second html page i can;t connect

Initially i connect to phonegap's database but when i move to the second html page i can;t connect

I am using phonegap's database API in my html/css/js code and i have a problemAlthough in the index page i manage to create tables,insert data,select and display them,when i proceed to my second html file i can't access anything from the database

185
iframe height not downsizing after longer page content

iframe height not downsizing after longer page content

Using the David Bradshaw iFrame Resizer code for dynamic iframesInitially, it works and set's the appropriate height of the iframe to the content

246