CODEWITHSUNDEEP
jqueryjquery-pluginspositionqtipqtip2
Keir Simmons
Keir Simmons

Reputation: 1684

jGrowl - like plugin using qTip 2.0 (jQuery). Positioning problems

Okay, I am trying to simulate the jGrowl notification plugin using qTip. qTip have a demo of how such a feature can be made:

http://craigsworks.com/projects/qtip2/demos/#growl

However, this positions the notifications in the top right corner, I want them in the bottom right corner. I have tried to mess around with the positioning, and it's good up to a point, I just can't get the updating position effect to work properly. If there are at least 3 notifications on the page, when one disappears, the second repositions perfectly, the others don't.

Can someone please help me get the updatePos function to work as expected?

Here is a fiddle: http://jsfiddle.net/bCcAB/

Upvotes: 0

Views: 708

Answers (2)

edu
edu

Reputation: 126

Why don't you just change the style of the container? The original code is here: http://jsfiddle.net/craga89/YCfx4/ so just change 

#qtip-growl-container{
    position: fixed;
    top: 10px; right: 10px;
}

to

#qtip-growl-container{
    position: fixed;
    bottom: 10px; right: 10px;
}

Upvotes: 1

Daniel Lewandowski
Daniel Lewandowski

Reputation: 41

In Create function instead of 

my: target.length ? 'bottom center' : 'bottom right',
at: target.length ? 'top center' : 'bottom right',

type 

my: 'bottom right',
at: target.length ? 'top right' : 'bottom right',

In Update function instead of

api.options.position.target = !i ? [$(window).width() - 5,$(window).height()] : [
                    pos.left + width,
                    pos.top - height - 5
                ];
api.set('position.at', !i ? 'bottom right' : 'top center');
api.set('position.my', !i ? 'bottom right' : 'bottom center');

type 

api.options.position.target = !i ? [$(window).width() - 5,$(window).height()] : [
                    pos.left + width,
                    pos.top
                ];
api.set('position.at', !i ? 'bottom right' : 'top right');

Check this out: http://jsfiddle.net/bCcAB/1/

Upvotes: 1

Related Questions