Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    175
    Thanks
    3
    Thanked 1 Time in 1 Post

    Need to add margin to top of js drop down panel content

    I'm using a script for a drop down panel and it works fine, however I need to add a bit of a margin for the inner content but the script seems to be stripping it out in firefox, it works fine in ie and chrome. I've tried every trick in the book outside of editing the actual js file. I currently have a transparent image as a spacer at the top and it even ignores that. It seems that firefox just wont display anything above the first form field for some reason. Could someone take a look at this script quick and give me an idea on what to change to I can add like a 5px margin to the top of the content?
    Code:
    //** DD Drop Down Panel- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
    //** Oct 21st, 08'- Script created
    //** March 23rd, 09' v1.01- Arrow images now preloaded
    
    function ddpanel(setting){
    	setting.dir="up" //initial state of panel (up="contracted")
    	if (setting.stateconfig.persiststate && ddpanel.getCookie(setting.ids[0])=="down"){
    		setting.dir="down"
    	}
    	if (setting.dir=="up"){ //if "up", output CSS to hide panel contents
    		document.write('<style type="text/css">\n')
    		document.write('#'+setting.ids[1]+'{height:' + parseInt(setting.stateconfig.initial) + 'px; overflow:hidden}\n')
    		document.write('</style>\n')
    	}
    	setting.stateconfig.initial=parseInt(setting.stateconfig.initial)
    	this.setting=setting
    	if (setting.pointerimage.enabled){ //preload images
    		var img1=new Image(), img2=new Image()
    		img1.src=setting.pointerimage.src[0]
    		img2.src=setting.pointerimage.src[1]
    	}
    	var thispanel=this
    	if (window.addEventListener) //if non IE browsers, initialize panel window.onload
    		ddpanel.addEvent(window, function(e){thispanel.initpanel(setting)}, "load")
    	else //else if IE, add 100 millisec after window.onload before initializing
    		ddpanel.addEvent(window, function(e){setTimeout(function(){thispanel.initpanel(setting)}, 100)}, "load")
    	ddpanel.addEvent(window, function(e){thispanel.uninit(setting)}, "unload")
    }
    
    ddpanel.events_array=[] //object array to contain events created by script
    
    ddpanel.addEvent=function(target, functionref, tasktype){
    	var evtmodel=target.addEventListener? "w3c" : "ie"
    	var evtaction=evtmodel=="w3c"? "addEventListener" : "attachEvent"
    	var i=this.events_array.push({ //store event info in ddpanel.events_array[] and return current event's index within array
    		target: target,
    		tasktype: (evtmodel=="ie"? "on" : "")+tasktype,
    		listener: evtmodel=="ie"? function(){return functionref.call(target, window.event)} : functionref
    	})-1
    	target[evtaction](this.events_array[i].tasktype, this.events_array[i].listener, evtmodel=="w3c"? false : null)
    }
    
    ddpanel.removeEvent=function(target, functionref, tasktype){
    	var evtmodel=target.removeEventListener? "w3c" : "ie"
    	var evtaction=evtmodel=="w3c"? "removeEventListener" : "detachEvent"
    	target[evtaction](tasktype, functionref, evtmodel=="w3c"? false : null)
    }
    
    ddpanel.getCookie=function(Name){ 
    	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
    	if (document.cookie.match(re)) //if cookie found
    		return document.cookie.match(re)[0].split("=")[1] //return its value
    	return null
    }
    
    ddpanel.setCookie=function(name, value){
    	document.cookie = name+"=" + value + ";path=/"
    }
    
    ddpanel.addpointer=function(target, className, imagesrc){
    	var pointer=document.createElement("img")
    	pointer.src=imagesrc
    	pointer.className=className
    	pointer.style.borderWidth=0
    	target.appendChild(pointer)
    	return pointer
    }
    
    ddpanel.prototype={
    
    togglepanel:function(dir){ //public function that toggles the panel's state. Optional dir parameter ("up" or "down") to explicitly set state.
    	var setting=this.setting
    	setting.dir=dir || ((setting.dir=="up")? "down" : "up")
    	var pcontent=setting.pcontent, dir=setting.dir
    	pcontent._currentheight=(dir=="down")? pcontent._actualheight : setting.stateconfig.initial
    	pcontent.style.height=pcontent._currentheight+"px"
    	if (setting.pointerimage.enabled){
    		setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
    		setting.arrow.style.visibility="visible"
    	}
    	ddpanel.setCookie(setting.ids[0], setting.dir)
    },
    
    togglepanelplus:function(dir){ //public function that toggles the panel's state w/ animation. Optional dir parameter ("up" or "down") to explicitly set state.
    	var setting=this.setting
    	setting.dir=dir || ((setting.dir=="up")? "down" : "up")
    	if (setting.pointerimage.enabled)
    		setting.arrow.style.visibility="hidden"
    	clearTimeout(setting.revealtimer)
    	this.revealcontent()
    },
    
    revealcontent:function(){
    	var setting=this.setting
    	var pcontent=setting.pcontent, curH=pcontent._currentheight, maxH=pcontent._actualheight, minH=setting.stateconfig.initial, steps=setting.animate.steps, dir=setting.dir
    	if (dir=="down" && curH<maxH || dir=="up" && curH>minH){
    		var newH = curH + (Math.round((maxH-curH)/steps)+1) * (dir=="up"? -1 : 1)
    		newH=(dir=="down")? Math.min(maxH, newH) : Math.max(minH, newH)
    		pcontent.style.height=newH+"px"
    		pcontent._currentheight=newH
    	}
    	else{
    		if (setting.pointerimage.enabled){
    			setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
    			setting.arrow.style.visibility="visible"
    		}
    		return
    	}
    	var thispanel=this
    	setting.revealtimer=setTimeout(function(){thispanel.revealcontent()}, 10)
    },
    
    initpanel:function(){
    	var setting=this.setting
    	var pcontainer=setting.pcontainer=document.getElementById(setting.ids[0])
    	var pcontent=setting.pcontent=document.getElementById(setting.ids[1])
    	var tdiv=setting.tdiv=document.getElementById(setting.ids[2])
    	pcontent.style.overflow="scroll"
    	pcontent._actualheight=pcontent.scrollHeight
    	setTimeout(function(){pcontent._actualheight=pcontent.scrollHeight}, 100)
    	pcontent.style.overflow="hidden"
    	pcontent._currentheight=(setting.dir=="down")? pcontent._actualheight : setting.stateconfig.initial
    	var thispanel=this
    	ddpanel.addEvent(tdiv, function(e){ //assign click behavior when toggle DIV tab is clicked on
    		if (setting.animate.enabled)
    			thispanel.togglepanelplus()
    		else
    			thispanel.togglepanel()
    		if (e.preventDefault) e.preventDefault()
    		return false
    	}, "click")
    	if (setting.pointerimage.enabled){
    		var pointer1=new Image(), pointer2=new Image()
    		pointer1.src=setting.pointerimage.src[0]
    		pointer2.src=setting.pointerimage.src[1]
    		setting.arrow=ddpanel.addpointer(tdiv.getElementsByTagName("span")[0], "pointerimage", setting.pointerimage.src[setting.dir=="down"? 1:0])
    	}
    	if (setting.closepanelonclick.enabled){ //assign click behavior when panel content is clicked on (links within panel or elements with class "closepanel"
    			ddpanel.addEvent(pcontent, function(e){
    				var target=e.srcElement || e.target
    				if (/(^|\s+)closepanel($|\s+)/.test(target.className) || target.tagName=="A" || (target.parentNode && target.parentNode.tagName=="A")){
    					thispanel.togglepanel("up")
    				}
    			}, "click")
    	}
    },
    
    uninit:function(){
    	var setting=this.setting
    	if (setting.stateconfig.persiststate){
    		ddpanel.setCookie(setting.ids[0], setting.dir)
    	}
    	for (prop in setting){
    		setting[prop]=null
    	}
    }
    
    
    
    } //end of ddpanel object
    
    
    //initialize instance of DD Drop Down Panel:
    
    var defaultpanel=new ddpanel({
    	ids: ["mypanel", "mypanelcontent", "mypaneltab"], // id of main panel DIV, content DIV, and tab DIV
    	stateconfig: {initial: "0px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
    	animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
    	pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
    	closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
    })
    Last edited by sfraise; 11-15-2010 at 08:51 PM.

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Despite the similar sounding names, Java is not the same as Javascript.
    Moving from Java forum to Javascript forum.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 
    Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)


  •  

    LinkBacks (?)


    Posting Permissions

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