Results 1 to 4 of 4

Thread: Drop-in content box v2.0 positioning

  1. #1
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Drop-in content box v2.0 positioning

    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:
    Code:
    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!
    Last edited by traq; 11-28-2012 at 06:12 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    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...
    DD Admin

  3. #3
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    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":

    Code:
    <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.
    Attached Files Attached Files
    DD Admin

Similar Threads

  1. Drop Down Positioning in Safari
    By gretchwest in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-02-2010, 02:19 AM
  2. AnyLink JS Drop Down Menu-drop down positioning problem g
    By BobMinkin in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-27-2009, 02:47 PM
  3. Content slider, positioning content within contentdiv problem
    By Dazza30 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-19-2008, 09:32 PM
  4. Positioning problem with Drop Down/Overlapping Content Script
    By virtual9 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 01-16-2008, 07:09 PM
  5. Drop-in content box - Absolute Positioning
    By ludy in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 06-20-2005, 06:36 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •