• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 268
  • Last Modified:

Javascript Drop down panel that allows more than one activator of trigger.

I'm still trying to understand how this drop down panel javascript works. Please take a look at this webpage: http://www.discretedata.com/JCRD/Houses/Houses_beta3.html

First of all, I can't figure out why the first instance of "Learn more" will work with id="mypaneltab" or id="mypaneltab2", but not id="mypaneltab1" Why is that, and how and where do I fix it?

Secondly, how would I code it so that the text "Learn more" text and the "Learn more" tabs will both work for both houses?

Also, is there a simpler more elegant way (i.e., less code) of achieving the same result?

Thanks!
John
THIS WORKS
var defaultpanel=new ddpanel({
		ids: ["mypanel", "mypanelcontent", "mypaneltab", "mypaneltxt"], // id of main panel DIV, content DIV, and tab DIV
		stateconfig: {initial: "5px", 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: false},//pointerimage: {enabled: true, src: ["arrow-down.png", "arrow-up.png"]},
		closepanelonmouseover: {enabled: true}  // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})
 
AND THIS WORKS:
var panel2=new ddpanel({
        ids: ["mypanel2", "mypanelcontent2", "mypaneltab2", "mypaneltxt2"], // id of main panel DIV, content DIV, and tab DIV
        stateconfig: {initial: "5px", 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: false},
        closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
}
 
BUT THIS DOES NOT:
var panel1=new ddpanel({
        ids: ["mypanel1", "mypanelcontent1", "mypaneltab1", "mypaneltxt1"],
        stateconfig: {initial: "5px", persiststate: true},
        animate: {enabled: true, steps: 5},
        pointerimage: {enabled: false},
        closepanelonmouseover: {enabled: true} 
})

Open in new window

0
gabrielPennyback
Asked:
gabrielPennyback
  • 5
  • 2
2 Solutions
 
ritetekCommented:
Okay, the key for making both of the items close the panel I think is in that last line of the declaration, all you need to do is add a class="closepanel" to both of the a's that you want to be able to close the panel and it should work.

Also, I noticed that you are using the same id's on multiple elements, i.e. mypaneltab and mypaneltab2.  This is a big no-no and could cause serious problems; ids should be unique on a page; if you need to use the same styles for multiple elements, you should use a class instead.

Your issue with the panel1, etc. not working might have to do with the multiple ID's on the page, as I don't see a major difference other than closepanelonmouseover instead of closepanelonclick but you said the default works with mouseover so it is a bit strange.
0
 
gabrielPennybackAuthor Commented:
Thanks, ritetek. I'm not quite sure what you mean about the id's because it seems to me that the are different.

So is there any other way to do this? I really would like to be able to roll open the content by clicking on either the text or the tab. Is there a whole different way to code the html and the javascript so that we could do that?


Thanks,
John
0
 
gabrielPennybackAuthor Commented:
Hi, ritetek. Still can't make anything work.  If you have the time please download the file and see if you can make it work.

Thanks,

John
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
David S.Commented:
Two elements have the ID "mypaneltab" and another two the ID "mypaneltab2". The first of each is an <em> and the second a <div>.

To make both the normal link and the tab link open and close those panels, the script would need to be modified.
// replace this section:
 
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")
 
 
// with this:
 
 
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])
	var tdiv2=document.getElementById(setting.ids[4])
	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")
	ddpanel.addEvent(tdiv2, 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")
 
// and then add a new ID to the end of the arrays like this:
 
var defaultpanel=new ddpanel({
		ids: ["mypanel", "mypanelcontent", "mypaneltab", "mypaneltxt", "mynewtabid"], // id of main panel DIV, content DIV, and tab DIV
		stateconfig: {initial: "5px", 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: false},//pointerimage: {enabled: true, src: ["arrow-down.png", "arrow-up.png"]},
		closepanelonmouseover: {enabled: true}  // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})

Open in new window

0
 
gabrielPennybackAuthor Commented:
Thanks Kravimir. I think I added evrything in correctly, but I must not have because it's not working for me. Could you take a look again and let me know where I went wrong in the html and/or the external javascript?
Thanks,
John
0
 
David S.Commented:
Sorry, I suppose I should have spelled out all of the changes you needed to make. Have you ever given any thought to contracting someone to help you with things like this?

Anyway, you need to assign the new ID to one of the elements. So change

<em id="mypaneltab">

to

<em id="mynewtabid">
0
 
gabrielPennybackAuthor Commented:
That does it, thanks. And yes I've often thought about contracting someone to help me with this, I just don't (or feel that I don't) have the money to do it. If I was young and single, I would do exactly that and I would dedicate all of my spare time to getting really, really good at this stuff.
In the mean time I really appreciate you guys and I hope you don't mind me asking you what must seem like dumb questions, but I really do learn from it. Now that it's working, I have something to analyze and learn from.
Thanks,
John
 
0
 
gabrielPennybackAuthor Commented:
Thanks!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now