CODEWITHSUNDEEP
jqueryhtml
Mad coder.
Mad coder.

Reputation: 2175

How to run the following jQuery code

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.

Upvotes: 0

Views: 109

Answers (3)

jfriend00
jfriend00

Reputation: 707238

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).

Upvotes: 1

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

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

});

Upvotes: 1

noob
noob

Reputation: 9202

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

Upvotes: 2

Related Questions