Use Developer Tools to figure out what is wrong with plugins

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 15, 2017 20:43:28 GMT -8 Alan Vende said:

Oh, Chris , I feel like I should clarify something: I have it to where something pops up on button click, but what I can't get to function is what pops up on the button click. It is like Brian's tabbed table. I'm guessing I need an onclick like the one to open the dialog box initially?

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ , I feel like you said that...

But, going off of Brian's code, there are no onclick events within the HTML, so I'm guessing that he coded them into the JS? I attempted looking through his code in the Custom Mini-Profile Creator, which is what makes me think this, since all there is in the Footer is the contents of the Help Window itself.

Based on that, I'm guessing the onclick events have to be coded within the JS?

Yes his onclick events are on the js

[Alan Vende]

Nov 15, 2017 20:48:53 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Nov 15, 2017 20:43:28 GMT -8 Alan Vende said:

Oh, Chris , I feel like I should clarify something: I have it to where something pops up on button click, but what I can't get to function is what pops up on the button click. It is like Brian's tabbed table. I'm guessing I need an onclick like the one to open the dialog box initially?

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ , I feel like you said that...

But, going off of Brian's code, there are no onclick events within the HTML, so I'm guessing that he coded them into the JS? I attempted looking through his code in the Custom Mini-Profile Creator, which is what makes me think this, since all there is in the Footer is the contents of the Help Window itself.

Based on that, I'm guessing the onclick events have to be coded within the JS?

Yes his onclick events are on the js

I thought so. So, based on that, would I have to do something like this?

function myFunction() {
   document.getElementById("demo").innerHTML = "Hello World";
}

But I don't think that that's even close. I know you gave me part of the code, but you said you only gave me a snippet, so I'm trying to figure out the rest...

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 15, 2017 20:50:28 GMT -8 Alan Vende said:

Nov 15, 2017 20:48:53 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Yes his onclick events are on the js

I thought so. So, based on that, would I have to do something like this?

function myFunction() {
   document.getElementById("demo").innerHTML = "Hello World";
}

But I don't think that that's even close. I know you gave me part of the code, but you said you only gave me a snippet, so I'm trying to figure out the rest...

Yeah that would work. change demo to the id on your div and you should be good if you add an onclick="myFunction()" on your tabs

[Alan Vende]

Nov 15, 2017 21:29:34 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Nov 15, 2017 20:50:28 GMT -8 Alan Vende said:

I thought so. So, based on that, would I have to do something like this?

function myFunction() {
   document.getElementById("demo").innerHTML = "Hello World";
}

But I don't think that that's even close. I know you gave me part of the code, but you said you only gave me a snippet, so I'm trying to figure out the rest...

Yeah that would work. change demo to the id on your div and you should be good if you add an onclick="myFunction()" on your tabs

I also found this: www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dropdown

Would the JS there be even better then what I showed you in the previous post?

[Chris]

SPOILER: Click to show

var ppdialog = $('#pp-popup-table').parent().attr('id', 'ppdialog');

//build the dialog
ppdialog.dialog({
title : 'Affiliate Updates',
minWidth : 650,
autoOpen: true  //do we want to open it now or do we want to open it with a button later?
})

//hide the content divs
ppdialog.find('>div:not([id]):not(.pp-alert-welcome)').hide()

//add a click event for the "tabs"
ppdialog.find('.ui-tabMenu a').click(function(ev){
ppdialog.find('>div:not([id])').hide();
$(this).closest('.ui-tabMenu').find('.ui-active').removeClass('ui-active')
$('.pp-alert-welcome').hide();
$(this).parent().addClass('ui-active')
$('#pp-popup-table').siblings().filter('.'+this.className).slideDown('slow');
})

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 15, 2017 21:31:05 GMT -8 Alan Vende said:

Nov 15, 2017 21:29:34 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Yeah that would work. change demo to the id on your div and you should be good if you add an onclick="myFunction()" on your tabs

I also found this: www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dropdown

Would the JS there be even better then what I showed you in the previous post?

both onclicks are the same. One is hidden, like in brians, and one is on the page.

[Alan Vende]

Nov 16, 2017 0:08:00 GMT -8 Chris said:

SPOILER: Click to show

var ppdialog = $('#pp-popup-table').parent().attr('id', 'ppdialog');

//build the dialog
ppdialog.dialog({
title : 'Affiliate Updates',
minWidth : 650,
autoOpen: true  //do we want to open it now or do we want to open it with a button later?
})

//hide the content divs
ppdialog.find('>div:not([id]):not(.pp-alert-welcome)').hide()

//add a click event for the "tabs"
ppdialog.find('.ui-tabMenu a').click(function(ev){
ppdialog.find('>div:not([id])').hide();
$(this).closest('.ui-tabMenu').find('.ui-active').removeClass('ui-active')
$('.pp-alert-welcome').hide();
$(this).parent().addClass('ui-active')
$('#pp-popup-table').siblings().filter('.'+this.className).slideDown('slow');
})

Thanks, Chris . I put this into the JS area to test it, and for some reason it's not changing like it is in your screenshots. I copied it exactly as you did it... I wonder if my browser is opening a cached page since I've done this so much?

This is what I'm seeing



And I just saw your comment in the JS: I would like it to open on a button click. I isolated this into its own plugin so I didn't have the affiliate code to also go through if there were bugs in this particular code, but I would like it to open on button click of a button on my affiliate table called "Change Regarding PP Affiliation Procedure".

<div class="affchangealert"><button onclick="openhelpWindow()">Change Regarding PP Affiliation Procedure</button></div>
The only thing I will have to do with the above is change the onclick event to what's in the JS after I put autoOpen to false.

Nov 16, 2017 6:26:17 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Nov 15, 2017 21:31:05 GMT -8 Alan Vende said:

I also found this: www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dropdown

Would the JS there be even better then what I showed you in the previous post?

both onclicks are the same. One is hidden, like in brians, and one is on the page.

Right, but you said the other onclick worked, but is this better? I wasn't sure which one was better.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

It depends if you want the semi-savy people to see what you are doing or not. But ultimately it's whatever

[Alan Vende]

Nov 16, 2017 17:30:13 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

It depends if you want the semi-savy people to see what you are doing or not. But ultimately it's whatever

How would they be able to see what I'm doing? If they know what they're looking for, even if it's hidden like Brian's, wouldn't they still be able to find it?

[Chris]

The code is demonstrating how the tabs were made clickable given the structure you currently have embedded in the forum but a change to that tab structure may require a different code (thus the reluctance of investing time in a code that might become useless when changes are made -- chicken/egg scenario). The code was meant as a learning tool since you are posting in the plugin development board and not a board where you are asking someone to write a fully functioning code for you. If you are going to drop it in a JS component then you might want to wrap it in a $(function(){CODE_GOES_HERE}) so it delays execution until the elements on the page are fully parsed and available for interaction.

[Alan Vende]

Nov 16, 2017 21:38:54 GMT -8 Chris said:

The code is demonstrating how the tabs were made clickable given the structure you currently have embedded in the forum but a change to that tab structure may require a different code (thus the reluctance of investing time in a code that might become useless when changes are made -- chicken/egg scenario). The code was meant as a learning tool since you are posting in the plugin development board and not a board where you are asking someone to write a fully functioning code for you. If you are going to drop it in a JS component then you might want to wrap it in a $(function(){CODE_GOES_HERE}) so it delays execution until the elements on the page are fully parsed and available for interaction.

When I was looking to post this thread, I didn't see any board in which I could post to ask them to write a fully functioning code for me. I mean, I know there's the Plugin Request board, for example, but I wasn't requesting for the full plugin to be written for me, only this piece of JavaScript. Unless I've completely missed a board in my time here, I don't think that there is one dedicated strictly to code for plugins, is there? I mean, the Coding Board is for general coding questions; the template board is for modifications to the templates, not for plugin codes, so this was the closest board that I could think of to post in, which is why I posted here.

I mean, there isn't a board where you can request just one code, one piece of a plugin written for you, right? It's either the whole plugin (Plugin Request) or nothing, right? That's why I thought Plugin Development, since I'm developing a majority of the plugin and just cannot grasp this part myself, was the best fit for this thread.

To the end of the JavaScript, I wrapped it in a $(function(){CODE_GOES_HERE}) and got it to work, but now I have new problems:

1. The title bar is there with no code in it;
2. The padding is off (e.g. the tabs' background is padded in a bit, but I don't see where I specified that. I could have sworn that I specified it not to do that in the first place; that I wanted the backgrounds to go to the outer edges of the box.

I do need to get the button click, too. I'm guessing I could do $(function(myFunction){} for that, correct? And put the onclick within the HTML on the button itself? I tried that, but it didn't work--unless I put the function name in the wrong place [$(function(functionnameHere){CODE_GOES_HERE})] I'm guessing that's the wrong place since it's not rendering properly when I put the function name into the button, but where else would it go since the code goes in the curly brackets?

EDIT: I feel like an idiot. It's not taking the title from the code that I have in the header. I have a basic board functionality

<div class="container boards">
<div class="title-bar dialog-box-title">
    <h3></h3>
   </div>
   <div class="content">
</div>
</div>
Should I leave it the way it is or should it be where it takes it from the title-bar in case I ever decide to change it? It takes the content from there, but for some reason, it takes the title from the JS in the function. Or is that what it's supposed to do?

---

Alright, I just realized something. This is how I put the code into the function:

SPOILER: Click to show

// Begin JS for Dialog Box
$(function(){var ppdialog = $('#pp-popup-table').parent().attr('id', 'ppdialog');

//build the dialog
ppdialog.dialog({
   title: 'Affiliate Updates',
   minWidth: 650,
   autoOpen: true //do we want to open it now or do we want to open it with a button later?
})

//hide the content divs
ppdialog.find('>div:not([id]):not(.pp-alert-welcome)').hide()

//add a click event for the "tabs"
ppdialog.find('.ui-tabMenu a').click(function(ev){
   ppdialog.find('>div:not([id])').hide();
   $(this).closest('.ui-tabMenu').find('.ui-active').removeClass('ui-active')
   $('.pp-alert-welcome').hide();
   $(this).parent().addClass('ui-active')
   $('#pp-popup-table').siblings().filter('.'+this.className).slideDown('slow');
})
})
// End JS for Dialog Box

It worked, but when I removed the stuff from the header of the plugin, the plugin itself stopped functioning. So, I'm guessing that it's relying on the code itself being in the header? I wanted to remove it because I wanted to remove the bare title bar, since the contents is in the popup--the title, however, is written in the JS, like you did.

Since it's now in the JS, I wanted to remove the title bar from where it is on the head of the page and just have it rely on the JS, but if I do that, the code in the Header/Footer would be weird since I have the above <div class="container boards"> format.

Is this something I should worry about, or should I just remove the title bar from the header area and just have it rely on the JS to popular the title for the popup?

I ask because in the other plugin I'm working on, the one this will eventually go into, I have a header component with a note at the top referencing the affiliate bar and the button functionality. I didn't want that to adopt the same title as the popup.

I hope that makes some sort of sense. I apologize wholeheartedly if it doesn't!

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 16, 2017 17:32:03 GMT -8 Alan Vende said:

Nov 16, 2017 17:30:13 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

It depends if you want the semi-savy people to see what you are doing or not. But ultimately it's whatever

How would they be able to see what I'm doing? If they know what they're looking for, even if it's hidden like Brian's, wouldn't they still be able to find it?

Onclick would be found in the html. .click would be found In the external resources.Making That harder to find

[Nscalerr]

Just a quick spanner in the works, but isn't something that auto opens, a breach of the Proboards T.O.S. ??

autoOpen: true //do we want to open it now or do we want to open it with a button later?

[Chris]

Nov 16, 2017 21:51:52 GMT -8 Alan Vende said:

When I was looking to post this thread, I didn't see any board in which I could post to ask them to write a fully functioning code for me. I mean, I know there's the Plugin Request board, for example, but I wasn't requesting for the full plugin to be written for me, only this piece of JavaScript. Unless I've completely missed a board in my time here, I don't think that there is one dedicated strictly to code for plugins, is there? I mean, the Coding Board is for general coding questions; the template board is for modifications to the templates, not for plugin codes, so this was the closest board that I could think of to post in, which is why I posted here.

I mean, there isn't a board where you can request just one code, one piece of a plugin written for you, right? It's either the whole plugin (Plugin Request) or nothing, right? That's why I thought Plugin Development, since I'm developing a majority of the plugin and just cannot grasp this part myself, was the best fit for this thread.

To the end of the JavaScript, I wrapped it in a $(function(){CODE_GOES_HERE}) and got it to work, but now I have new problems:

1. The title bar is there with no code in it;
2. The padding is off (e.g. the tabs' background is padded in a bit, but I don't see where I specified that. I could have sworn that I specified it not to do that in the first place; that I wanted the backgrounds to go to the outer edges of the box.

I do need to get the button click, too. I'm guessing I could do $(function(myFunction){} for that, correct? And put the onclick within the HTML on the button itself? I tried that, but it didn't work--unless I put the function name in the wrong place [$(function(functionnameHere){CODE_GOES_HERE})] I'm guessing that's the wrong place since it's not rendering properly when I put the function name into the button, but where else would it go since the code goes in the curly brackets?

EDIT: I feel like an idiot. It's not taking the title from the code that I have in the header. I have a basic board functionality

<div class="container boards">
<div class="title-bar dialog-box-title">
    <h3></h3>
   </div>
   <div class="content">
</div>
</div>
Should I leave it the way it is or should it be where it takes it from the title-bar in case I ever decide to change it? It takes the content from there, but for some reason, it takes the title from the JS in the function. Or is that what it's supposed to do?

---

Alright, I just realized something. This is how I put the code into the function:

SPOILER: Click to show

// Begin JS for Dialog Box
$(function(){var ppdialog = $('#pp-popup-table').parent().attr('id', 'ppdialog');

//build the dialog
ppdialog.dialog({
   title: 'Affiliate Updates',
   minWidth: 650,
   autoOpen: true //do we want to open it now or do we want to open it with a button later?
})

//hide the content divs
ppdialog.find('>div:not([id]):not(.pp-alert-welcome)').hide()

//add a click event for the "tabs"
ppdialog.find('.ui-tabMenu a').click(function(ev){
   ppdialog.find('>div:not([id])').hide();
   $(this).closest('.ui-tabMenu').find('.ui-active').removeClass('ui-active')
   $('.pp-alert-welcome').hide();
   $(this).parent().addClass('ui-active')
   $('#pp-popup-table').siblings().filter('.'+this.className).slideDown('slow');
})
})
// End JS for Dialog Box

It worked, but when I removed the stuff from the header of the plugin, the plugin itself stopped functioning. So, I'm guessing that it's relying on the code itself being in the header? I wanted to remove it because I wanted to remove the bare title bar, since the contents is in the popup--the title, however, is written in the JS, like you did.

Since it's now in the JS, I wanted to remove the title bar from where it is on the head of the page and just have it rely on the JS, but if I do that, the code in the Header/Footer would be weird since I have the above <div class="container boards"> format.

Is this something I should worry about, or should I just remove the title bar from the header area and just have it rely on the JS to popular the title for the popup?

I ask because in the other plugin I'm working on, the one this will eventually go into, I have a header component with a note at the top referencing the affiliate bar and the button functionality. I didn't want that to adopt the same title as the popup.

I hope that makes some sort of sense. I apologize wholeheartedly if it doesn't!

I didn't mean it the way you seem to have taken it, what I meant was questions in this board are generally from people looking for a nudge in the right direction and can fill in the rest for themselves once given that missing jigsaw puzzle piece. The nature of your questions and your responses to what you have been given suggests you want a fully functioning code written for you so you could just drop it in your plugin. The problem with that besides the obvious is that you have not provided a fully formed structure of what you want the dialog to say and look like (which comes first, the chicken or the egg?) so code can then be written for it. The code I provided latches on to the only thing available which is that banner message in the forum header which is woefully incomplete with just "test" as the content and in fact had to add an ID to the content div in order to encompass all the necessary elements as well as have that ID available for the dialog to reference (which has been mentioned several times). The code provided was a DEMONSTRATION of how to turn that structure into content for a dialogbox with the understanding that you would take that as a missing jigsaw puzzle piece and use that cumulatively with the previous discussions in this thread to build your own plugin:

e.g.

build the contents in HTML (e.g global header, board header, etc.) and attach any events you want to it

If I wanted to have it open on an element click I would instead set "autoOpen" to "false" and then in the onclick of the element do

$('#dapaginator').dialog('open')

You would of course need to write your own code to match whatever structure you come up with for your dialog

The comment about title bar is irrelevant since

1. It is a demonstration code on how to do it using the only structure that was provided, given the previous discussion it would be obviously understood that you would place a structure in the plugin itself  then use that structure for the dialog content not the "test" banner structure
2. You would be writing the code for this as yet unseen structure that you place in your plugin not using the DEMO code

Padding would be dependent on your CSS which you would write after you decided what classes you would be including in this structure which has yet to be revealed beyond "test"

Nov 20, 2017 1:10:21 GMT -8 Nscalerr said:

Just a quick spanner in the works, but isn't something that auto opens, a breach of the Proboards T.O.S. ??

autoOpen: true //do we want to open it now or do we want to open it with a button later?

That refers to communication with the server, the dialog is being built locally using locally grown organic produce, local labor and local harvested potentially harmful additives. At no time was a Proboards server harmed during the creation of this dialog. If you think in terms of reducing unnecessary load on the server then you will get the gist of the restriction.

[Alan Vende]

Nov 20, 2017 3:49:11 GMT -8 Chris said:

Nov 16, 2017 21:51:52 GMT -8 Alan Vende said:

When I was looking to post this thread, I didn't see any board in which I could post to ask them to write a fully functioning code for me. I mean, I know there's the Plugin Request board, for example, but I wasn't requesting for the full plugin to be written for me, only this piece of JavaScript. Unless I've completely missed a board in my time here, I don't think that there is one dedicated strictly to code for plugins, is there? I mean, the Coding Board is for general coding questions; the template board is for modifications to the templates, not for plugin codes, so this was the closest board that I could think of to post in, which is why I posted here.

I mean, there isn't a board where you can request just one code, one piece of a plugin written for you, right? It's either the whole plugin (Plugin Request) or nothing, right? That's why I thought Plugin Development, since I'm developing a majority of the plugin and just cannot grasp this part myself, was the best fit for this thread.

To the end of the JavaScript, I wrapped it in a $(function(){CODE_GOES_HERE}) and got it to work, but now I have new problems:

1. The title bar is there with no code in it;
2. The padding is off (e.g. the tabs' background is padded in a bit, but I don't see where I specified that. I could have sworn that I specified it not to do that in the first place; that I wanted the backgrounds to go to the outer edges of the box.

I do need to get the button click, too. I'm guessing I could do $(function(myFunction){} for that, correct? And put the onclick within the HTML on the button itself? I tried that, but it didn't work--unless I put the function name in the wrong place [$(function(functionnameHere){CODE_GOES_HERE})] I'm guessing that's the wrong place since it's not rendering properly when I put the function name into the button, but where else would it go since the code goes in the curly brackets?

EDIT: I feel like an idiot. It's not taking the title from the code that I have in the header. I have a basic board functionality

<div class="container boards">
<div class="title-bar dialog-box-title">
    <h3></h3>
   </div>
   <div class="content">
</div>
</div>
Should I leave it the way it is or should it be where it takes it from the title-bar in case I ever decide to change it? It takes the content from there, but for some reason, it takes the title from the JS in the function. Or is that what it's supposed to do?

---

Alright, I just realized something. This is how I put the code into the function:

SPOILER: Click to show

// Begin JS for Dialog Box
$(function(){var ppdialog = $('#pp-popup-table').parent().attr('id', 'ppdialog');

//build the dialog
ppdialog.dialog({
   title: 'Affiliate Updates',
   minWidth: 650,
   autoOpen: true //do we want to open it now or do we want to open it with a button later?
})

//hide the content divs
ppdialog.find('>div:not([id]):not(.pp-alert-welcome)').hide()

//add a click event for the "tabs"
ppdialog.find('.ui-tabMenu a').click(function(ev){
   ppdialog.find('>div:not([id])').hide();
   $(this).closest('.ui-tabMenu').find('.ui-active').removeClass('ui-active')
   $('.pp-alert-welcome').hide();
   $(this).parent().addClass('ui-active')
   $('#pp-popup-table').siblings().filter('.'+this.className).slideDown('slow');
})
})
// End JS for Dialog Box

It worked, but when I removed the stuff from the header of the plugin, the plugin itself stopped functioning. So, I'm guessing that it's relying on the code itself being in the header? I wanted to remove it because I wanted to remove the bare title bar, since the contents is in the popup--the title, however, is written in the JS, like you did.

Since it's now in the JS, I wanted to remove the title bar from where it is on the head of the page and just have it rely on the JS, but if I do that, the code in the Header/Footer would be weird since I have the above <div class="container boards"> format.

Is this something I should worry about, or should I just remove the title bar from the header area and just have it rely on the JS to popular the title for the popup?

I ask because in the other plugin I'm working on, the one this will eventually go into, I have a header component with a note at the top referencing the affiliate bar and the button functionality. I didn't want that to adopt the same title as the popup.

I hope that makes some sort of sense. I apologize wholeheartedly if it doesn't!

I didn't mean it the way you seem to have taken it, what I meant was questions in this board are generally from people looking for a nudge in the right direction and can fill in the rest for themselves once given that missing jigsaw puzzle piece. The nature of your questions and your responses to what you have been given suggests you want a fully functioning code written for you so you could just drop it in your plugin. The problem with that besides the obvious is that you have not provided a fully formed structure of what you want the dialog to say and look like (which comes first, the chicken or the egg?) so code can then be written for it. The code I provided latches on to the only thing available which is that banner message in the forum header which is woefully incomplete with just "test" as the content and in fact had to add an ID to the content div in order to encompass all the necessary elements as well as have that ID available for the dialog to reference (which has been mentioned several times). The code provided was a DEMONSTRATION of how to turn that structure into content for a dialogbox with the understanding that you would take that as a missing jigsaw puzzle piece and use that cumulatively with the previous discussions in this thread to build your own plugin:

e.g.

The comment about title bar is irrelevant since

1. It is a demonstration code on how to do it using the only structure that was provided, given the previous discussion it would be obviously understood that you would place a structure in the plugin itself  then use that structure for the dialog content not the "test" banner structure
2. You would be writing the code for this as yet unseen structure that you place in your plugin not using the DEMO code

Padding would be dependent on your CSS which you would write after you decided what classes you would be including in this structure which has yet to be revealed beyond "test"

I just wanted to explain myself and why I had posted in here as opposed to the Plugin Request board. I apologize if it sounded like I was defensive or anything of that nature. I don't understand JavaScript enough to write it, which is why I would want a fully functioning code, so I guess that I had posted in the wrong board for that--for that, I apologize.

The reason why it said "Test" within the plugin at first was because when I put in the HTML

SPOILER: Click to show

<div class="affchangenumberrules">
       <div class="affchangealert"><button id="help-window-button">Change Regarding PP Affiliation Procedure</button></div>
<!-- <div class="affiliatechange"><a href="http://psychic-psyghtings.proboards.com/thread/916/update-affiliate-link"><button>Did your affiliate code change?</button></a></div> -->

<div class="ppaffcoderules"><button>Our Affiliate Code and Rules</button></div>
</div>
       
<div class="ppaffiliates">
           <div class="ppaffrules">
               <div class="ppaffcodecontainer">
                   <p class="ppaffcodeheader">Our Affiliate Code</p>
                   <p><textarea readonly="true" onclick="this.select()" style="width: 1155px; height: 15px; font-size: 8pt;"><a href="http://psychic-psyghtings.proboards.com/" target="_blank" title="Psychic Psyghtings"><img src="http://storage.proboards.com/2837905/i/9OmzvIlu49a6OB8UjnKV.jpg" alt="Psychic Psyghtings" /></a></textarea></p>
                   <div class="ppaffimage"><img src="$[plugin.images.PsychicPsyghtingsAffImage]" /></div>
           </div>
               <div class="ppaffrulestextdiv">
               <p class="ppaffrulestextheader">Our Affiliate Rules</p>
               <p class="ppaffrulestextbody">Like many other forumes, ours has rules governing our affiliation with other forums. Please take a minute to review them by clicking the button below.</p>
                   <div class="affrulesbutton"><a href="http://psychic-psyghtings.proboards.com/thread/978/affiliate-psychic-psyghtings"><button>Psychic Psyghtings' Affiliate Rules</button></a></div>
               </div>


<p>Because of the most recent change to Photobucket's ToS, there will be a change in how PP handles its affiliations.<br /><br />From now on, we will be downloading the affiliate's image and placing it <strong>within</strong> the new affiliate plugin. To help us with this, please supply us with a download link for the image.<br /><br />Thank you!</p>
<a href=""></a>Help Centre</a>

Did your affiliate link change? (Link to Help Centre)
<div class=“”></div>[/code[/spoiler]

and I had to change it in order for it to work with the way the dialog was structured as it had output a blank box under the "tabs". I had put "test" in there because the HTML didn't output correctly--there were closing tags that somehow didn't get copied over when I wrote the code.

Now that the pieces of code are successfully in there, I have a better grasp of what I would like to have within the plugin. For example, I would like for it to not be opened .slideDown('slow');. I would like for it to open without it.

---

One thing I cannot figure out, though, is if it is possible to remove the padding from the top of the dialog so the tabs are flush with the top of the dialog, like in Brian's Custom Mini-Profile Creator dialog box. I would like for the padding to be on the left, right, and bottom as it is now, though.

The container is how I have it written in the Global Footer component of the plugin:

SPOILER: Click to show

<div class="container boards">
<div class="title-bar dialog-box-title">
    <h3>Custom Plugin Comes with New Dialog Box!</h3>
   </div>
   <div class="content">
       <div id="pp-popup-table">
           <table class="list">
<!-- <thead>
<th>Installation</th>
<th class="last">Customization</th>
</thead> -->
<tbody>
<tr class="last">
<td class="item last">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
<li><a class="aff-info">Affiliate Info</a></li>
<li><a class="proced-note">Note about Procedure Change</a></li>
<li><a class="aff-link-change">Did your link change?</a></li>
</ul>
</div>
</td>
<!-- <td class="item last">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
<li><a class="test1">Reserved</a></li>
<li><a class="test2">Reserved</a></li>
</ul>
</div>
</td> -->
</tr>
</tbody>
</table>
   </div>
       
       <div class="pp-alert-welcome pad-all">
       <div class="welc-line">Welcome to the Psychic Psyghtings Dialog Box!</div>
       Here you will find information that we would like you to know regarding our affiliation procedures.
       <br /><br />
       <strong>Affiliate Info</strong> houses our affiliate code and number of affiliates in our affiliate bar.
       <br /><br />
       <strong>Note about Procedure Change</strong> houses a little bit about the change in Photobucket's Terms of Service as well as how we will be changing our policies to make sure that we are fully in-line with theirs.
       <br /><br />
       <strong>Did your link change?</strong> houses information on how you can submit your new code for us to put into our affiliate bar.
       <br /><br />
Click on any of the tabs above to learn about how we are going about coping with it, <em>and how <strong>you</strong> can help!</em>
<br />
</div>

<div class="aff-info pad-all">
<div class="ppaffiliates">
           <div class="ppaffrules">
               <div class="ppaffcodecontainer">
                   <h3 class="ppaffcodeheader">Our Affiliate Code</h3>
                   <p class="tabbodypadding"><textarea readonly="true" onclick="this.select()" style="width: 615px; height: 15px; font-size: 8pt;"><a href="http://psychic-psyghtings.proboards.com/" target="_blank" title="Psychic Psyghtings"><img src="http://storage.proboards.com/2837905/i/9OmzvIlu49a6OB8UjnKV.jpg" alt="Psychic Psyghtings" /></a></textarea></p>
                   <div class="ppaffimage"><img src="$[plugin.images.PsychicPsyghtingsAffImage]" /></div>
           </div>
               <div class="ppaffrulestextdiv">
               <h3 class="ppaffrulestextheader">Our Affiliate Rules</h3>
               <p class="tabbodypadding">Like many other forumes, ours has rules governing our affiliation with other forums. Please take a minute to review them by clicking the button below.</p>
                   <a href="http://psychic-psyghtings.proboards.com/thread/978/affiliate-psychic-psyghtings"><div class="ppaffrulesbutton"><button>Psychic Psyghtings' Affiliate Rules</button></div></a>
               </div>
           </div>
       </div>
       </div>

<div class="proced-note pad-all">
       <h3 class="proced-note-header">Affiliation Procedure Change Notice</h3>
       <p class="tabbodypadding">Because of the most recent change to Photobucket's ToS, there will be a change in how PP handles its affiliations.<br /><br />From now on, we will be downloading the affiliate's image and placing it <strong>within</strong> the new affiliate plugin. To help us with this, please supply us with a download link for the image.<br /><br />Thank you for helping us make this transition a smooth one. It is greatly appreciated!</p>
       <a href="http://psychic-psyghtings.proboards.com/thread/new/56"><div class="pphelpcentrebutton"><button>Help Centre</button></div></a>
</div>

<div class="aff-link-change pad-all">
       <h3 class="aff-link-change-header">Did your affiliate link change?</h3>
       <p class="tabbodypadding">Did your affliiate link change because of the change in Photobuket's Terms of Service? If so, please click the button below to be redirected to the Help Centre where you can create a thread detailing your new affiliate link.</p>
       <a href="http://psychic-psyghtings.proboards.com/thread/new/56"><div class="pphelpcentrebutton"><button>Help Centre</button></div></a>
</div>
           </div>
           </div>

That seems to be the only way that it works with the dialog box. I've taken it out, and the code no longer is in a dialog box; it is at the bottom of the forum. I know there's a way to have this so there is no container within the footer, but I cannot get it to function properly, no matter how I go about it (I had removed the container structure and just had the structure of the tab's information:

SPOILER: Click to show

<div id="pp-popup-table">
           <table class="list">
<!-- <thead>
<th>Installation</th>
<th class="last">Customization</th>
</thead> -->
<tbody>
<tr class="last">
<td class="item last">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
<li><a class="aff-info">Affiliate Info</a></li>
<li><a class="proced-note">Note about Procedure Change</a></li>
<li><a class="aff-link-change">Did your link change?</a></li>
</ul>
</div>
</td>
<!-- <td class="item last">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
<li><a class="test1">Reserved</a></li>
<li><a class="test2">Reserved</a></li>
</ul>
</div>
</td> -->
</tr>
</tbody>
</table>
   </div>
       
       <div class="pp-alert-welcome pad-all">
       <div class="welc-line">Welcome to the Psychic Psyghtings Dialog Box!</div>
       Here you will find information that we would like you to know regarding our affiliation procedures.
       <br /><br />
       <strong>Affiliate Info</strong> houses our affiliate code and number of affiliates in our affiliate bar.
       <br /><br />
       <strong>Note about Procedure Change</strong> houses a little bit about the change in Photobucket's Terms of Service as well as how we will be changing our policies to make sure that we are fully in-line with theirs.
       <br /><br />
       <strong>Did your link change?</strong> houses information on how you can submit your new code for us to put into our affiliate bar.
       <br /><br />
Click on any of the tabs above to learn about how we are going about coping with it, <em>and how <strong>you</strong> can help!</em>
<br />
</div>

<div class="aff-info pad-all">
<div class="ppaffiliates">
           <div class="ppaffrules">
               <div class="ppaffcodecontainer">
                   <h3 class="ppaffcodeheader">Our Affiliate Code</h3>
                   <p class="tabbodypadding"><textarea readonly="true" onclick="this.select()" style="width: 615px; height: 15px; font-size: 8pt;"><a href="http://psychic-psyghtings.proboards.com/" target="_blank" title="Psychic Psyghtings"><img src="http://storage.proboards.com/2837905/i/9OmzvIlu49a6OB8UjnKV.jpg" alt="Psychic Psyghtings" /></a></textarea></p>
                   <div class="ppaffimage"><img src="$[plugin.images.PsychicPsyghtingsAffImage]" /></div>
           </div>
               <div class="ppaffrulestextdiv">
               <h3 class="ppaffrulestextheader">Our Affiliate Rules</h3>
               <p class="tabbodypadding">Like many other forumes, ours has rules governing our affiliation with other forums. Please take a minute to review them by clicking the button below.</p>
                   <a href="http://psychic-psyghtings.proboards.com/thread/978/affiliate-psychic-psyghtings"><div class="ppaffrulesbutton"><button>Psychic Psyghtings' Affiliate Rules</button></div></a>
               </div>
           </div>
       </div>
       </div>

<div class="proced-note pad-all">
       <h3 class="proced-note-header">Affiliation Procedure Change Notice</h3>
       <p class="tabbodypadding">Because of the most recent change to Photobucket's ToS, there will be a change in how PP handles its affiliations.<br /><br />From now on, we will be downloading the affiliate's image and placing it <strong>within</strong> the new affiliate plugin. To help us with this, please supply us with a download link for the image.<br /><br />Thank you for helping us make this transition a smooth one. It is greatly appreciated!</p>
       <a href="http://psychic-psyghtings.proboards.com/thread/new/56"><div class="pphelpcentrebutton"><button>Help Centre</button></div></a>
</div>

<div class="aff-link-change pad-all">
       <h3 class="aff-link-change-header">Did your affiliate link change?</h3>
       <p class="tabbodypadding">Did your affliiate link change because of the change in Photobuket's Terms of Service? If so, please click the button below to be redirected to the Help Centre where you can create a thread detailing your new affiliate link.</p>
       <a href="http://psychic-psyghtings.proboards.com/thread/new/56"><div class="pphelpcentrebutton"><button>Help Centre</button></div></a>
</div>


My not being able to accomplish this makes me wonder if there is no way to have it like that, and that I have to have it in a structure like that in order for the dialog to work, even though it is built with the JS.

I will go back and see if I'm able to accomplish the onclick myself with what you have given me in the e.g. I just don't know, though, if there is a way to make it so the container can be removed around the above code and have it still work. I cannot seem to figure out how to make that happen. Is that something I can do, or is it not possible to do that? (I got the onclick to work successfully with what you had given me before, so I striked it out, but the other still stands as a question.)

The reason that I had asked about the title bar is because I just wasn't sure if it was possible to remove it from the bottom of the page. It looked to me like the dialog box, since it was built from the JS, took the content from the container and left the title-bar there, but like I said, I cannot figure out how to remove it and have it function properly with the structure that I have above with the <div class="container boards"></div> and whatnot.

Or is the <div class="container boards"></div> structure the wrong way of going about it and I should go about it a different way?

Part of me wonders, though, if I should give up on this since I obviously cannot do this...