ProIcons   -  Jan 23, 2013

Edited: [Solved]
[Solution]
CSS:

.popover-content {
    max-height: 300px;
    overflow-y: auto;
}

[Question]

So I was wondering... I'm using Twitter's Bootstrap for my Project and I made a small notification Popover / Clickover (http://www.leecarmichael.com/bootstrapx-clickover/examples.html) feature. I was wondering how I can manage to make it on a static height with a custom scroll bar in it...

My basic Concept of creating this popover/clickover is:

    $(function () {
        $("[rel='tooltip']").tooltip({container: 'body'});
    });
    $("#notices").clickover({
        content:data,
        html:true,
        container:'body'
        ,onShown: function () {$("#notices").tooltip("destroy");},
        onHidden: function () {$("#notices").tooltip({container:'.navbar'});},
        template: '\
            <div class="popover notices">\
                <div class="arrow"></div>\
                <div class="popover-inner">\
                    <div class="popover-header">\
                        <h3 class="popover-title"></h3>\
                        <h3 class="popover-settings"><a href="/notifications.php?act=settings">Settings</a></h3>\
                    </div>\
                    <div class="popover-content">\
                        <p></p>\
                    </div>\
                    <h3 class="popover-footer"><center><a href="/notifications.php">See All</a></center></h3>\
                </div>\
            </div>'

    });

With HTML

<div id='userbar' class='btn-group input-prepend input-append'>
        <button class='btn'></button>
        <button class='btn'></button>
        <button class='btn'></button>
        <button class='btn'></button>
        <button class='btn'></button>
        <button class='btn'></button>
        <button class='btn'></button>
        <button id='notices' class='btn' rel='tooltip' data-placement='bottom' data-original-title='Notifications'> <i class='icon-exclamation-sign icon-large'> <span class='badge badge-important'>102</span></i></button>
    </div>

So I made a post on JSFiddle about that. I have not included bootstrap directives from bootstrap's site but I have posted the code in the Javascript Section because tooltips are a bit modified. So may be a lot of code lines, though my main code is at the end...

The link is: http://jsfiddle.net/6GRHa/3/

The button with the Popover is the "Exclamation mark"

And like I said I want to Apply to it a custom height and a scrollable bar to be there for more content... Thank you in advance...

SReject  -  Jan 25, 2013

Be careful with the backslash to concat strings...
1: Its part of the ES5 standard which isn't supported by all browsers yet.
2: Depending on the browser it will include white space aswell:

"a\
    b\
    c"

//concats to:
"a[tab]b[tab]c"
ProIcons  -  Jan 25, 2013

Actually i don't know why but in JavaScript is the only way supports multiline Command..

SReject  -  Jan 25, 2013

Yes, There is no way to do block strings in javascript.

ProIcons  -  Jan 25, 2013

Yes :-). Btw if you know and you can , answer please to my Question i made just now :D

Sign in to comment

Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.