i didnt put any width for the content element i just set min-width and max-width .
is working fine if the element width be real , but some time it gave me the max width of that element
but the truly content element is not the max-width . i mean the true content element width is 350 px
take alook at this code .
$(document).ready(function(){
(function(){
mymethod = {
config:{
wrapper:"blackbox",
container:"container",
backgroundColor:"red",
color:"red"
},
init:function (options){
//Attach the options to config
settings = $.extend(mymethod.config,options);
//Takes the id
mymethod.$wrapperid = mymethod.config.wrapper;
mymethod.$container = mymethod.config.container;
//Create Container
mymethod.$mycontainer = $("<div/>")
.attr("id",mymethod.config.container)
.attr("class","container")
.appendTo("body");
//Create blackbox
mymethod.$mywrapper = $('<div/>')
.attr('id',mymethod.config.wrapper)
.attr('class','blackbox')
.css({"background-color":settings.backgroundColor})
.appendTo(mymethod.$mycontainer);
//Create closebtn_container
mymethod.$Closebtn_container = $('<div/>')
.attr('id','closebtn_container')
.attr("class","closebtn_container")
.appendTo(mymethod.$mycontainer);
//Create Closebtn
mymethod.$closebtn = $('<div/>')
.attr('id','closebtn')
.attr('class','closebtn')
.appendTo(mymethod.$Closebtn_container);
//Create content
mymethod.$content = $('<div/>')
.attr('id','content')
.attr('class','content')
.css({"min-width":"200px","max-width":"700px"})
.text("this is just for ")
.appendTo(mymethod.$mycontainer);
mymethod.showblackbox(mymethod.$wrapperid)
},
showblackbox:function(element){
var leftpos = getposition('#'+mymethod.$content.attr('id'));
element = '#'+element;
$(element).animate({opacity:".7"},300);
$('#'+mymethod.$Closebtn_container.attr('id')).delay(200).animate({opacity:"1",top:"-10px"},300);
//alert(leftpos)
$('#'+mymethod.$content.attr('id')).delay(200).animate({opacity:"1",left:leftpos});
},
closetheform:function(){
},
createElement:function(){
}
}
getposition = function(element){
var elementwidth = mymethod.$content.width();
elementwidth = elementwidth/2;
var bodywidth = $('body').width();
bodywidth = bodywidth/2;
//alert(elementwidth)
var pos = bodywidth - elementwidth;
//console.log(bodywidth +" "+elementwidth+" "+mymethod.$content.outerWidth())
return pos;
}
$.fn.lightbox = function(options){
mymethod.init(options);
}
})($)
$('body').lightbox({backgroundColor:"black"});
})