动态设置div offsetY

时间:2014-06-10 09:21:55

标签: jquery html offset

我做的事情就像聊天,我的div的z-index 1002,1003,1004 ....吃了 问题是我所有的div都设置在相同的顶部位置 我需要获得最后一个div位置加上div高度并将我的新div顶部位置设置在最后一个位置之下 这是我的控制

http://jsfiddle.net/7Qtmh/

html:

<input name="textfield" id="textfield">
<button id="entermsg" class="run btn btn-primary"></button>

javascript:

//this inside my page
$(document).keyup(function (e) {
    if ($(".textfield:focus") && (e.keyCode === 13)) {
        $("#entermsg").click();
        textfield.value = "";
        var div1Pos = $(".notifier").last().position();
        var divh= $(".notifier").height();
        var div1X = div1Pos.top + divh ;
        $('.notifier').css({top: div1X});
        });
    } 
});
//this my .js
var emptyFn = function () {},
        Notifier = Backbone.Notifier = Backbone.Model.extend({
            defaults: {
                'baseCls': 'notifier',
                'message': '',
                'offsetY': 5, 
                'zIndex': 10000, //increase with each div
                'position': 'top'
                },
            transitions: {
                top: {
             'in': function (el, inner, options, duration, callback)
                    {
                    el.css({display: 'block', top: -1000});
                    el.css({top: -inner.innerHeight()})
                         .animate({top: options.offsetY, opacity: options.opacity}, duration, callback || emptyFn);
}
   }  

css:

.notifier.notifier-theme-plastic.notifier-pos-top .notifier-inner {
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

0 个答案:

没有答案