Use Developer Tools to figure out what is wrong with plugins

[Chris]

Nov 20, 2017 13:27:35 GMT -8 Alan Vende said:

I would like for it to not be opened .slideDown('slow');. I would like for it to open without it.

Easy enough, change .slideDown('slow') to .show()

Nov 20, 2017 13:27:35 GMT -8 Alan Vende said:

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 padding of 10px is given to all dialog boxes through the following rule

.ui-dialog div.ui-dialog-content {
    position: relative;
    padding: 10px;
    overflow: auto;
    zoom:1}

To combat such a rule you would need to construct your own rule that would have a greater weight than the competing rule, by that I mean that rule uses two classes and a tag in the selector so your selector should at least match that weight (last rule wins in case of a tie) or better yet surpass it. Since we gave the content an ID of ppdialog we already have a builtin trump card since a single ID can beat a stadium filled with classes:

#ppdialog {
    padding-top: 0;
}

Nov 20, 2017 13:27:35 GMT -8 Alan Vende said:

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?
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?

I don't understand your reluctance to using the board/container class perhaps you can expand upon your reasoning behind that but basically when you use a pre-existing class you are doing so in order to inherit the rules that comes with that class instead of having to write your own rules from scratch (thus cutting your workload). The thing with inheriting rules however is you get everything so if there are a few things you do not like about it you can simply override with your own rule as demonstrated above with the padding example. The javascript also uses it as a way to segregate the elements it needs to operate upon from the rest of the page.

[Alan Vende]

Nov 24, 2017 22:32:04 GMT -8 Chris said:

Nov 20, 2017 13:27:35 GMT -8 Alan Vende said:

I would like for it to not be opened .slideDown('slow');. I would like for it to open without it.

Easy enough, change .slideDown('slow') to .show()

When I did that, it still opened as if 'slow' was still present.

This is the JS for the click event

// 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('show');
})
})
I'm wondering if something else within this piece of code is combatting the 'show'?

I looked this up on W3Schools before asking here, and that's what it told me to do, 'show', but I obtained the same result as I described above.

Nov 24, 2017 22:32:04 GMT -8 Chris said:

Nov 20, 2017 13:27:35 GMT -8 Alan Vende said:

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 padding of 10px is given to all dialog boxes through the following rule

.ui-dialog div.ui-dialog-content {
    position: relative;
    padding: 10px;
    overflow: auto;
    zoom:1}

To combat such a rule you would need to construct your own rule that would have a greater weight than the competing rule, by that I mean that rule uses two classes and a tag in the selector so your selector should at least match that weight (last rule wins in case of a tie) or better yet surpass it. Since we gave the content an ID of ppdialog we already have a builtin trump card since a single ID can beat a stadium filled with classes:

#ppdialog {
    padding-top: 0;
}

I had tried something to that effect, but I had put -# instead of 0. I thought that the negative number would remove the top; I didn't think to put 0. Thank you for clearing that up.

If I wanted to make it so the padding was removed only for the menu, but the content that is shown under the menu has the padding, is that possible to do? Does that make sense? If it doesn't, I will try to rephrase it; that was just the best way I could think to phrase it.

A screenshot of Brian's Help Window shows how I would like to have the padding, but how is it possible to override the padding for only a small piece? Unless the small piece must combat the rule like you explain above with your example of ppdialog? Is that correct?



I attempted to use this code to remove the left- and right-padding of the menu area, and it did not yield any result whatsoever.

.ui-tabMenu {
   padding-left: 0;
   padding-right: 0;
}
which means I'm probably either using the wrong class name or I'm going about it completely wrong. I attempted to go off what you said about the ppdialog, but I found if I used the ppdialog, it gives the desired result, but it removes the padding from everything, not just the menu area, as shown below:





Based on this, I'm guessing a separate class must be written to accomplish this? Is that correct? I'm guessing that the class would go alongside the div id of pp-popup-table? Or is that the wrong thinking?

I also attempted pp-popup-table, and that yielded no results.

#pp-popup-table {
   padding-left: 0;
   padding-right: 0;
}
So, I'm guessing it's something else? Am I close at all with the above attempt?

Nov 24, 2017 22:32:04 GMT -8 Chris said:

Nov 20, 2017 13:27:35 GMT -8 Alan Vende said:

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?
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?

I don't understand your reluctance to using the board/container class perhaps you can expand upon your reasoning behind that but basically when you use a pre-existing class you are doing so in order to inherit the rules that comes with that class instead of having to write your own rules from scratch (thus cutting your workload). The thing with inheriting rules however is you get everything so if there are a few things you do not like about it you can simply override with your own rule as demonstrated above with the padding example. The javascript also uses it as a way to segregate the elements it needs to operate upon from the rest of the page.

I apologize, Chris , I guess I didn't explain myself fully here. Since the title of the dialog box is being called from the JS, I thought it was redundant to have it within the structure with the title-bar. Before I commented it out, the title-bar was at the bottom of my forum, as shown in the below screenshot. I had to comment it out in the Global Footer to make it disappear, but would it be okay to completely remove it from the code itself? I'm guessing since the code works with the title commented out that it doesn't have to be there, but I just wanted to make sure.



It's one reason why I asked about this. Since the dialog box is being built in the JS, does the structure

<div class="container boards">
<div class="title-bar">
    Content here.
   </div>
   <div class="content pad-all">
       Content here.
   </div>
</div>
really have to be there? Isn't it kind of redundant? Or is it not redundant? (I'm not changing it and rewriting it since it is the way I would like it; I was just wondering if they were "competing" with each other, so to speak.

[Nscalerr]

Nov 24, 2017 23:05:55 GMT -8 Alan Vende said:

I'm wondering if something else within this piece of code is combatting the 'show'?

I took a look at it and it is going fast for me, try clearing your cache and restarting your browser.

[Alan Vende]

Nov 25, 2017 2:20:13 GMT -8 Nscalerr said:

Nov 24, 2017 23:05:55 GMT -8 Alan Vende said:

I'm wondering if something else within this piece of code is combatting the 'show'?

I took a look at it and it is going fast for me, try clearing your cache and restarting your browser. ?

*facepalm* I’m an idiot. That’s what I get for doing this late into the night. Thanks for that idea, Nscalerr! I’ll try it when my computer charges and will report back! ?

PS: Have you seen Brian’s Custom Mini-Profile Creator Help Window? The “speed” of that when going from tab to tab is what I’m trying to recreate. The “fluidity” of them, for lack of a better word choice. ?

[Chris]

You misunderstood, I recommended replacing .slideDown('slow') to simply be .show() but instead you changed it to slideDown('show'), there is a big difference. The reason I underlined it was to prevent just this misunderstanding by giving a visual cue of the part that needed to be replaced as well as the replacement part, the entire part that is underlined gets replaced by the entire part that is underlined.

The padding you want is now not clear to me so you may need to highlight the specific section you are concerned about since my original understanding was you wanted the padding removed only from the top of the dialog and the sides and bottom remain as is.  Redefining a property of the .ui-tabMenu class by itself is not recommended since you will be affecting ALL .ui-tabMenu not just your own (unless that is your intent), the easiest way to avoid that would be accessing it as a descendant of your dialog (#ppdialog .ui-tabMenu)

The structure as previously explained can be hidden and then only shown when it is converted to the content for the dialog. You can do this either with an inline style="display:none" on the content div or by using a pre-existing class of 'hide' which proboards supplies.

<div class="content hide">

It is that content div the code uses to direct the dialog on what is to be considered content for the dialog so to answer your question the outside board div and the title div are unneeded.

[Alan Vende]

Nov 25, 2017 10:23:59 GMT -8 Chris said:

You misunderstood, I recommended replacing .slideDown('slow') to simply be .show() but instead you changed it to slideDown('show'), there is a big difference. The reason I underlined it was to prevent just this misunderstanding by giving a visual cue of the part that needed to be replaced as well as the replacement part, the entire part that is underlined gets replaced by the entire part that is underlined.

I apologize for the misunderstanding. I had read it wrong, sorry about that.

It is now:

// 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).show()
})
})

Nov 25, 2017 10:23:59 GMT -8 Chris said:

The padding you want is now not clear to me so you may need to highlight the specific section you are concerned about since my original understanding was you wanted the padding removed only from the top of the dialog and the sides and bottom remain as is.  Redefining a property of the .ui-tabMenu class by itself is not recommended since you will be affecting ALL .ui-tabMenu not just your own (unless that is your intent), the easiest way to avoid that would be accessing it as a descendant of your dialog (#ppdialog .ui-tabMenu)

The structure as previously explained can be hidden and then only shown when it is converted to the content for the dialog. You can do this either with an inline style="display:none" on the content div or by using a pre-existing class of 'hide' which proboards supplies.

<div class="content hide">

It is that content div the code uses to direct the dialog on what is to be considered content for the dialog so to answer your question the outside board div and the title div are unneeded.

I wanted the padding to be removed from only the table, but remain for the contents of the table, like in the screenshot that I showed of Brian's Custom Mini-Profile Creator Plugin Help Window. If you weren't able to see it, it is:



See how it looks like the padding is removed on the menu, but not on the contents of the menu items themselves? That's what I would like to achieve, but so far my efforts have proved fruitless.

Mine, however, is like this:



See how the padding is on the menu? I wanted the background to be on the edges. I attempted the overflow declaration, but like I said, my efforts proved fruitless.

Outside board div, you mean the following, correct?

<div class="container boards">
   <div class="content">
</div>
</div>
I removed the title for the container altogether since it was commented out anyway. It is no longer there.

<!-- <div class="title-bar dialog-box-title">
    <h3>Custom Plugin Comes with New Dialog Box!</h3>
   </div> -->
So, now it's just:

<div class="container boards">
   <div class="content">
       <div id="pp-popup-table">
<code here.>
and that seems to work fine. Should I put that back and put the hide class with the content class? Just wondering in terms of which way is "correct" and which is not.

---

Also, along the lines of this, I have a few containers within the dialog box that I would like to stop at the padding of the dialog box. I'm having trouble with that. Is there a trick to make sure that the containers 'automatically' stop at the padding, no matter what the width declaration is within the CSS? (Does that make sense the way I wrote it?) An example is below with my affiliate link and my affiliate rules. I wanted to make sure they stopped at the padding of the container, but when I declared the width of each div, I found that they went past the padding of the dialog box, which confused me, and is why I'm asking you here.



Also, is it possible to make it so the dialog box scrolls when it's past the width? I'm guessing minwidth should be changed to maxwidth to accomplish this, is that the correct way to go, or is there a better way to go about this? I attempted overflow: scroll in the JS with this:

//build the dialog
ppdialog.dialog({
     title: 'Psychic Psyghtings Affiliate Dialog',
     minWidth: 650,
     autoOpen: false //do we want to open it now or do we want to open it with a button later?
     overflow: scroll;
})

but nothing came of it; nothing happened so it made me think that that was a dead piece of code the way that I wrote it.

Thinking it over, would it be better to make it so that the overflow is on the div that the rules are in instead of making the whole dialog box scroll? I wanted to make it so it was easy to read, which is why I thought that the dialog box should scroll and not the div itself, but whichever is better.

[Alan Vende]

Nov 25, 2017 2:20:13 GMT -8 Nscalerr said:

Nov 24, 2017 23:05:55 GMT -8 Alan Vende said:

I'm wondering if something else within this piece of code is combatting the 'show'?

I took a look at it and it is going fast for me, try clearing your cache and restarting your browser.

Hey, Nscalerr ! I did a facepalm again when I realized that I didn't read Chris' response correctly.

Nov 24, 2017 22:32:04 GMT -8 Chris said:

Nov 20, 2017 13:27:35 GMT -8 Alan Vende said:

I would like for it to not be opened .slideDown('slow');. I would like for it to open without it.

Easy enough, change .slideDown('slow') to .show()

However, it is now fixed. Thank you for your help. I hope all is well with you!

[Chris]

Nov 25, 2017 16:10:59 GMT -8 Alan Vende said:

See how it looks like the padding is removed on the menu, but not on the contents of the menu items themselves? That's what I would like to achieve, but so far my efforts have proved fruitless.

Mine, however, is like this:



See how the padding is on the menu? I wanted the background to be on the edges. I attempted the overflow declaration, but like I said, my efforts proved fruitless.

I'm still not quite following you, is the tab bar the "menu" to which you are referring and the "background" the grey area behind the tabs? Are you saying in addition to removing the padding on the top as you originally asked, you also wanted to remove the padding on the sides?



That would be a modification to the code previously given to remove the top padding

#ppdialog {
   padding: 0 0 10px; /* zero padding for top and sides but leave 10px on bottom */
}

Nov 25, 2017 16:10:59 GMT -8 Alan Vende said:

Outside board div, you mean the following, correct?

<div class="container boards">
    <div class="content">
        <div id="pp-popup-table">
	    <code here.>
        </div>
    </div>
</div>

The part in purple is what is being used by the code

Nov 25, 2017 16:10:59 GMT -8 Alan Vende said:

Also, along the lines of this, I have a few containers within the dialog box that I would like to stop at the padding of the dialog box. I'm having trouble with that. Is there a trick to make sure that the containers 'automatically' stop at the padding, no matter what the width declaration is within the CSS? (Does that make sense the way I wrote it?) An example is below with my affiliate link and my affiliate rules. I wanted to make sure they stopped at the padding of the container, but when I declared the width of each div, I found that they went past the padding of the dialog box, which confused me, and is why I'm asking you here.

I am seeing nothing in that image that is stretching beyond the padding (denoted by the red line that I added) so perhaps you are using the wrong terminology in which case try googling "box model" to get a better idea of the terminologies being used in this area so we can both agree on what means what. The dialog will autosize to the size of the content within it so I am a somewhat perplexed as to what you are trying to describe.

Nov 25, 2017 16:10:59 GMT -8 Alan Vende said:

Also, is it possible to make it so the dialog box scrolls when it's past the width? I'm guessing minwidth should be changed to maxwidth to accomplish this, is that the correct way to go, or is there a better way to go about this? I attempted overflow: scroll in the JS with this:

//build the dialog
ppdialog.dialog({
     title: 'Psychic Psyghtings Affiliate Dialog',
     minWidth: 650,
     autoOpen: false //do we want to open it now or do we want to open it with a button later?
     overflow: scroll;
})

but nothing came of it; nothing happened so it made me think that that was a dead piece of code the way that I wrote it.

Thinking it over, would it be better to make it so that the overflow is on the div that the rules are in instead of making the whole dialog box scroll? I wanted to make it so it was easy to read, which is why I thought that the dialog box should scroll and not the div itself, but whichever is better.

see above regarding auto resizing

[Alan Vende]

Nov 26, 2017 0:04:06 GMT -8 Chris said:

Nov 25, 2017 16:10:59 GMT -8 Alan Vende said:

See how it looks like the padding is removed on the menu, but not on the contents of the menu items themselves? That's what I would like to achieve, but so far my efforts have proved fruitless.

Mine, however, is like this:



See how the padding is on the menu? I wanted the background to be on the edges. I attempted the overflow declaration, but like I said, my efforts proved fruitless.

I'm still not quite following you, is the tab bar the "menu" to which you are referring and the "background" the grey area behind the tabs? Are you saying in addition to removing the padding on the top as you originally asked, you also wanted to remove the padding on the sides?



That would be a modification to the code previously given to remove the top padding

#ppdialog {
   padding: 0 0 10px; /* zero padding for top and sides but leave 10px on bottom */
}

Right, I had that originally, but I wanted to have the padding on the sides for the dialog only; I didn't want to have the padding on the sides for the menu itself; I wanted the menu to be flush with the left and right sides of the dialog box. Does that make sense now? That's why I included Brian's screenshot, to show you how his menu is flush with the sides of the dialog box.

Nov 26, 2017 0:04:06 GMT -8 Chris said:

Nov 25, 2017 16:10:59 GMT -8 Alan Vende said:

Outside board div, you mean the following, correct?

<div class="container boards">
    <div class="content">
        <div id="pp-popup-table">
	    <code here.>
        </div>
    </div>
</div>

The part in purple is what is being used by the code

So I can remove <div class="container boards"></div> around the purple, since it's not being used? I just didn't want to remove it and have it mess up the container. Thank you for the confirmation on what's being used and not used!

Nov 26, 2017 0:04:06 GMT -8 Chris said:

Nov 25, 2017 16:10:59 GMT -8 Alan Vende said:

Also, along the lines of this, I have a few containers within the dialog box that I would like to stop at the padding of the dialog box. I'm having trouble with that. Is there a trick to make sure that the containers 'automatically' stop at the padding, no matter what the width declaration is within the CSS? (Does that make sense the way I wrote it?) An example is below with my affiliate link and my affiliate rules. I wanted to make sure they stopped at the padding of the container, but when I declared the width of each div, I found that they went past the padding of the dialog box, which confused me, and is why I'm asking you here.

I am seeing nothing in that image that is stretching beyond the padding (denoted by the red line that I added) so perhaps you are using the wrong terminology in which case try googling "box model" to get a better idea of the terminologies being used in this area so we can both agree on what means what. The dialog will autosize to the size of the content within it so I am a somewhat perplexed as to what you are trying to describe.

I meant in terms of people's screen sizes. If more content is added, even if the container itself auto resizes, won't the container eventually auto resize to a bigger size then people's screen sizes? That's what made me think of the scrolling.

Also, it's not stretching anymore because I added a width to it that made it the size that I wanted. Although, I took the width away and it seems to be conforming to the padding on the container itself. When I asked this question, the left side had the padding, but the right side didn't look like the padding was taking effect, so it looked like it was almost at the right edge of the container. I cannot replicate that, however, to show you a screenshot. I apologize.

Nov 26, 2017 0:04:06 GMT -8 Chris said:

Nov 25, 2017 16:10:59 GMT -8 Alan Vende said:

Also, is it possible to make it so the dialog box scrolls when it's past the width? I'm guessing minwidth should be changed to maxwidth to accomplish this, is that the correct way to go, or is there a better way to go about this? I attempted overflow: scroll in the JS with this:

see above regarding auto resizing

See above for my question regarding auto resizing and people's screen sizes. That's what I meant when I asked this. Sorry for the confusion!