Drop-in content box v2.0 positioning

[ARCLite Studio]

1) Drop-in content box v2.0

2) http://www.dynamicdrive.com/dynamici.../dropinbox.htm

3) Currently this script handles position of the drop in boxes by coordinates in relation to the browser window, (1,1) for top left corner of BROWSER WINDOW and (-1,-1) for lower right. In any case, I am needing to drop in 3 content windows but I need to have the script handle positioning based on the parent div of the (content div) not by browser width/height.

I am not a script programmer but have a basic working knowledge enough to implement them or in some case reverse engineer it to adjust what i need but this is beyond me. The script controlling the positioning is located in the "dropincontentbox.js" file and appears to be this section here:

dropincontentbox.prototype={

	show:function(pos){
		var $=jQuery, $contentbox=this.$contentbox.css({display:'block'}), s=this.s
		if (typeof pos=="undefined")
			var pos=s.pos
		var winmeasure={w:$(window).width(), h:$(window).height(), left:$(document).scrollLeft(), top:$(document).scrollTop()} //get various window measurements
		var boxmeasure={w:$contentbox.outerWidth(), h:$contentbox.outerHeight()}
		var finalpos=[]
		$.each(pos, function(i, val){
			if (val<0){ //if position value is negative, it means box should be offset from right edge of window
				finalpos[i]=(i==0)? winmeasure.left+winmeasure.w-boxmeasure.w+val : winmeasure.top+winmeasure.h-boxmeasure.h+val
			}
			else if (val=="center"){
				finalpos[i]=(i==0)? winmeasure.left+winmeasure.w/2-boxmeasure.w/2 : winmeasure.top+winmeasure.h/2-boxmeasure.h/2
			}
		})
		$contentbox.css({left:finalpos[0], top:winmeasure.top-boxmeasure.h-10, visibility:'visible'}).animate({top:finalpos[1]}, s.fxduration, s.fx)
	},

what can be added to this code so that a "class" can be assigned in the content div that will tell it to handle positioning basedo n the containing parent div
instead of the browser dimensions?


Thanks for any help!

[ddadmin]

I assume your parent DIV is above the fold within the page? If not, the drop in content may not be visible to the user...

[ARCLite Studio]

This script sets the container div(s) visibility to hidden until the event is triggered, so it's position in the code doesn't matter in its current form - However, with regards to what i need it to do the answer to your question is "yes" I would place the content div within a div that is above the fold since the parent div's position would affect the TOP and LEFT position

[ddadmin]

Ok, you might try the below modified .js file. With it it supports an additional "parentcontainer" option inside the initialization code that if defined tells the script to position the drop down box relative to the entered parent container (a jQuery selector). For example:

var dropinbox1=new dropincontentbox({
source:['#dropbox', 'dropincontent.htm'], //#id of DIV to show if defined inline, or [#id, path_to_box_content_file] if defined in external file
cssclass:'dropinbox standardshadow', //arbitrary class(es) to add to the drop in box to style it
parentcontainer: '#t',
showduration:10 //disappear after x seconds?
})

The above tells the script to position this particular drop down box relative to the container on the page with ID="t":

<div id="t" style="position:relative; border:1px solid black; width:70%; left: 29%; top:100px; height:900px">Parent Container</div>

Note that this container should have a height (either naturally or explicitly) that's larger than the drop down box's, as the script uses it to calculate the box's vertical position.