How to run the following jQuery code

Question

My friend gave the following code which is working awesome here http://jsfiddle.net/WVLE2/

I tried the same using a HTML page as below but its not working. I am in learning stage of jQuery. Anybody please help me how to perform chat scrolling in the below script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<script src="http://code.jquery.com/jquery-1.7.1.js" ></script>
<title>Chat scroll test</title>
<style type="text/css">
#chat
{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow-y: auto;
}
</style>
<script>
monitor = function() {
    var $this = $(this),
        wrap = $this.find('.wrapper'),
        height = $this.height(),
        maxScroll = wrap.height() - height,
        top = $this.scrollTop();
    if (maxScroll === top) {
        $this.addClass('atBottom');
    } else {
        $this.removeClass('atBottom');
    }
}
    window.setInterval(function() {
        monitor.call($('#chat').get(0));
    }, 350);
$('#chat').bind('addMessage', function(e, message) {
    var $this = $(this),
        top = $this.scrollTop(),
        scroll = $this.hasClass('atBottom');
    $this.find('.wrapper').append(message);
    if (scroll) {
        var wrap = $this.find('.wrapper'),
            height = $this.height(),
            maxScroll = wrap.height() - height
        $this.scrollTop(maxScroll);
    }
})
$('button').click(function() {
    $('#chat').trigger('addMessage', 'asdgagasdg<br/>');
});

</script>
</head>

<body>
<div id="chat">
    <div class="wrapper">
        adsgasgda<br/>
        adsgasg<br/>
        asd<br/>
        adsgasgda<br/>
        adsgasg<br/>
        adsgasgda<br/>
        adsgasg<br/>
        adsgasgda<br/>
        adsgasg<br/>
        adsgasgda<br/>
        adsgasg<br/>
        adsgasgda<br/>
        adsgasg<br/>
        adsgasgda<br/>
        adsgasg<br/>
    </div>
</div>
<button>Add a line</button>
</body>
</html>

And this results nothing not even a line adding on button click. The output is just as per HTML but jQuery is not working.

Do I need any compiler/anything in addition to run jQuery code? — Mad coder.
– Mad coder., Commented Dec 19, 2011 at 9:25
You inlude jQuery two times. One dev and one minimized. Just min is fine. — Emre Erkan
– Emre Erkan, Commented Dec 19, 2011 at 9:31
@EmreErkan - Thanks for that Emre. What's the difference between two? — Mad coder.
– Mad coder., Commented Dec 19, 2011 at 9:33
Their content is same but .min is minified. Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. More info — Emre Erkan
– Emre Erkan, Commented Dec 19, 2011 at 9:36

noob · Accepted Answer · 2011-12-19 09:24:37Z

2

jQuery(document).ready(function($) {
    /* your jQuery code */
});

answered Dec 19, 2011 at 9:24

noob

9,2224 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard Neil Ilagan · Accepted Answer · 2011-12-19 09:25:43Z

1

Adding it inside document.ready might get it to work. You're selecting some stuff right off the bat; you have to wait for the DOM to be ready to do that correctly.

jQuery(function($) {

    // your jquery code goes here

});

answered Dec 19, 2011 at 9:25

Richard Neil Ilagan

14.8k6 gold badges52 silver badges68 bronze badges

1 Comment

Mad coder. Over a year ago

Found the same from micha. Thanks anyways! :)

jfriend00 · Accepted Answer · 2011-12-19 09:28:48Z

Your code is executing before the document is ready, thus when $('button').click() executes, the button does not exist yet so the jQuery function to resolve your selector finds no matching objects and therefore the code does nothing. You have several options:

1) You can move your <script> tags and resulting code after the HTML (at the end of the <body>) so that the objects already exist when the code executes.

2) You can wrap your event handler code in a ready handler that waits for the document to be ready before calling your code like this:

$(document).ready(function() {
    // put your code here
});

This is similar to using window.onload = function() {}; to wait for the document to load, but jQuery's method will execute sooner than window.onload (jQuery's method doesn't wait for all images to load, just for the DOM to be parsed and ready for manipulation).

Collectives™ on Stack Overflow

How to run the following jQuery code

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related