Javascript-Jquery-Ajax ticker message is truncated

Question

In the following JavaScript code, when I pass the message is too big that spans more than one screen width, message is being truncated. I have put the alert statements and found out that the whole message is coming from web method to javascript code, but while displaying it, it is truncating the messsage. Since I am novice to JavaScript (this code is concoction of code bits I got from the web), any help is greatly appreciated. Thank you in advance for your help.

$(document).ready(function() {

    //initialize ul;
    $("#scroller").html("");
    var tkhtml = '';
    var successReq = false;


    $.ajax({
        type: "POST",
        url: "GetDataFromWebMethod.aspx/GetDataForTicker",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            var y = msg.d;
            var x = y.split('~');
            alert(x.length);

            if (x != '') {
                for (n = 0; n < x.length; n++) {
                    tkhtml = tkhtml + '<li>' + x[n] + '</li>';
                }
                alert(tkhtml);
                $("#scroller").html(tkhtml);
                successReq = true;
            }
        },
        error: function(msg) {
            alert("Entered Failure");
        }

    });


    var successReq = false;

    var interval = setInterval(function() {
        if (successReq) {
            clearInterval(interval);
            javacode();
        }
    }, 100);

    function javacode() {
        var speed = 2;
        var items, scroller = $('#scroller');
        var width = 0;

        scroller.children().each(function() {
            width += $(this).outerWidth(true);
        });
        scroller.css('width', width);
        scroll();
        function scroll() {
            items = scroller.children();
            var scrollWidth = items.eq(0).outerWidth();
            scroller.animate({ 'left': 0 - scrollWidth }, scrollWidth * 100 / speed, 'linear', changeFirst);
        }
        function changeFirst() {
            scroller.append(items.eq(0).remove()).css('left', 0); scroll();
        }
    }


});

My css is:

<style type="text/css"> 
    #scroller { height: 100%; margin: 0; padding: 0; line-height: 30px; position: relative; } 
    #scroller li { float: left; height: 30px; padding: 0 0 0 10px; list-style-position: inside; }
    #scrollerWrapper { height: 30px; margin: 30px; overflow: hidden; border: 1px #333 solid; background: #F2F2F2; } 
</style>

what does your CSS look like? – JKirchartz Feb 10 '12 at 21:53 — JKirchartz, Feb 10 '12 at 21:53

JKirchartz · Answer 1 · 2012-02-10T22:06:45.680

0

Sounds to me like you have your #scroller set to width:100%, assuming your body or html is set as such it'll truncate to the window width. You should try width:auto

edit::

Ok, so each li is float:left, that takes it out of the standard flow of the document. Try using display:inline or display:inline-block

edited Feb 10 '12 at 22:06

answered Feb 10 '12 at 21:54

JKirchartz

17,612
7
60
88

I have added width:auto in CSS. But it looks like how ever big my browser window is, the message is being trucated to that much width. I think the problem is at var scrollWidth = items.eq(0).outerWidth();. But I dod not know how to fix it. :-( – Howdy Feb 10 '12 at 22:06
You are correct, JKirchartz! After I set the command to scroller.css('width', 10000); instead of scroller.css('width', width); it worked. I greatly appreciate your help. – Howdy Feb 10 '12 at 22:12
Hi JKirchartz, I have one more question, if you don't mind. When I run this program on my computer, the message stays with in the box. but when i published it on IIS server, the message overflows out side of the box on both sides. Could you please suggest any remedies? Thank you for your help. – Howdy Feb 13 '12 at 18:46
And also the strange things is that it works ok on Firefox and Chrome but not on IE from the server. But it works fine on all browsers from my machine when I run the program. – Howdy Feb 13 '12 at 19:17
I'm not sure, IIS shouldn't screw up your CSS... Might have to make a new question for that... – JKirchartz Feb 13 '12 at 19:43
It seems it's getting interesting by the hour. Finally, I found out that because the setting called "Compatibility View" is on on IE browser window, it is overflowing out of the container. Because other browsers were not set to compatibility view, it was working fine with them. After I started undoing the compatibility view on my IE browser, it started working on IE too! But this code should work with either of the settings, though! Any help is greatly appreciated. – Howdy Feb 13 '12 at 20:49
Compatibility View is probably quirks mode, which is extremely broken and doesn't render CSS properly, best to avoid it. for more check out http://stackoverflow.com/questions/1695787/what-is-quirks-mode to fix this usually involves a bunch of tricks like the css star hack. Paul Irish has a nice article explaining why old broken browsers get an old broken experience here http://paulirish.com/2011/tiered-adaptive-front-end-experiences/ – JKirchartz Feb 14 '12 at 13:36
By adding in section of the HTMLfixed the problem for some applications. Thank you very much for your help. – Howdy Feb 14 '12 at 19:45

Javascript-Jquery-Ajax ticker message is truncated

1 Answers1