Question about plugin functionality for a menu?

[Brian]

Mar 14, 2018 9:13:51 GMT -8 @luxokingaming said:

Alan Vende

Hi, I need help with the topic. Can you speak on a website? Faceobook ?

You should create your own thread instead of hijacking one belonging to another user.

[Former Member]

Brian

Hello my friend I need your help in this topic No more on the interpretation of this topic and I can not fix anything in it or anything again Let us give the original file and this is the problem
change the "reply"button text on specific boards

[Former Member]

Mar 14, 2018 9:15:21 GMT -8 Brian said:

Mar 14, 2018 9:13:51 GMT -8 @luxokingaming said:

Alan Vende

Hi, I need help with the topic. Can you speak on a website? Faceobook ?

You should create your own thread instead of hijacking one belonging to another user.

I'm sorry my friend

[Alan Vende]

pb.window.dialog() is working as expected. But no matter what I do, I'm unable to have two dialogs in there that have tabs like that; I'm only able to have the one. What I wanted to do, so I don't have to have the three dialogs, was to have the table at the top, like that one did, but I'm wondering if having the table with the same classes and such is what's actually causing it to break (like having two iterations of ui-tabMenu, for example. Would it be possible to have two dialogs that have that same functionality? The only difference between the two would be that one has headers and one does not (like yours with "Prerequisites" and so forth in your Help Window.) But, I'm finding that I'm unable to change that with the pb.window.dialog(), I'm only able to have the little information that I have in there. I'm also not able to change the width, like shown in the first box's "build the dialog" section.

Unless I'm going about this completely wrong? I'm frustrated as it's had no success. I thought copying and changing classes and so forth would work, but it doesn't, which is why I was trying it the other way: having three or four popup boxes rather than two that have the same functionality.

[Brian]

It's very much possible to have multiple dialogs with tab functionality (which you can see for yourself by enabling the Custom Mini-Profile Creator's help window which will run flawlessly on the same page as your plugin), but you need to remember that your tab functionality is controlled by the part where you added the click event. If the element you're placing in the new dialog doesn't have its own click event then the tabs aren't going to work within that element.

The classes don't matter unless your code is targeting them incorrectly.

[Alan Vende]

Thank you for that information, Brian . I did some fenagaling, and I think I got something to work, but I'm running into some errors again. They're actually the same ones I haven't been able to figure out with the first box:

1. When you take a look at both dialogs, you see that they're not flush with the side of the dialog, like yours are. Now, when I change themes on one of my forums that I have your Custom Mini-Profile Creator plugin enabled on, the dialog box changes the colors and so forth. For example, in the below screenshot, the black is inherited by a color (that I cannot remember) that I specified when creating the theme:



But, compared to yours, mine are not flush to the side. They have padding that I cannot seem to get rid of, no matter what I do. Although I just want the padding gone from the menu, and not the dialog itself, like you have. Also, the same is wrong with the title bars. See how there's padding around those and not yours? I'm unsure where that's coming from, as there's no padding on them whatsoever. And, like I said, I just copied and pasted and so forth. The padding has eluded me since I started this project--and there's nothing I can do to fix it, from what I can find of my looking at your code. In terms of functionality, it's exactly the same.



Unless my problem is the width of the boxes? I tried that, and got the above, too. Unless, in yours, they are actually separated like that, you just can't see the separation because the overall background is the same for both and is hiding it?

Or, like I said, am I missing something obvious?

EDIT: I attempted to do padding: -#, but that didn't seem to show any result. padding: 0px; took the padding from everywhere, including the information itself. padding-right: 0px; and padding-left: 0px; yielded no results. Those are all I knew to try to remove it.

[Brian]

You've gotten rid of the top padding successfully using CSS. You just need to get rid of the padding on all sides instead of just the top padding.

#ppdialog { padding: 0; }

The padding around the tab menus in the other one can be removed using this CSS.

#ppstaffdialog table.list td { padding: 0; }

If your dialog isn't wide enough your tabs will move to the next line as shown in your screenshot. If you want to prevent extra vertical space from appearing you'll need a wider dialog to accommodate your tabs.

[Alan Vende]

Mar 14, 2018 10:41:42 GMT -8 Brian said:

You've gotten rid of the top padding successfully using CSS. You just need to get rid of the padding on all sides instead of just the top padding.

#ppdialog { padding: 0; }

So, I was using the wrong selector. I didn't even think to use #ppdialog... I was using pp-popup-table...

I did that once before, and got this to happen, the same thing that is happening now. What I couldn't understand was how it was effecting everything, and not just the tabs.

Mar 14, 2018 10:41:42 GMT -8 Brian said:

The padding around the tab menus in the other one can be removed using this CSS.

#ppstaffdialog table.list td { padding: 0; }

I attempted that with no success. It still has the padding on the sides. Unless this is only supposed to remove it from the middle, anyway?

Before



After

Mar 14, 2018 10:41:42 GMT -8 Brian said:

If your dialog isn't wide enough your tabs will move to the next line as shown in your screenshot. If you want to prevent extra vertical space from appearing you'll need a wider dialog to accommodate your tabs.

So, to make sure I fully understand: do you mean vertical space by the space in the middle, or what's on the side? Because the CSS you gave me above takes away the middle, not the sides. But, if I take away them all with #ppstaffdialog { padding: 0; }, it will also remove the padding from the contents area(s), too.

---

And now the tabs are not working correctly--I put text in each to try to test it, and there's no text showing up, as in the above screenshots. (Forgot to mention that.) Would that be attributed to what you talked about earlier about not targeting the classes correctly?

[Brian]

#ppstaffdialog also needs 0 padding to get rid of the remaining padding, just like how you did it to the other one.

By vertical space I'm referring to the difference in height between both sets of tabs in the last dialog in this post: support.proboards.com/post/7112232

Because one of them is taller than the other there's extra empty space above and below the other one because the gray background behind them can't automatically expand to meet the height of the table cell.

[Alan Vende]

I think I got it, Brian , but when I did that, though, it also took the padding away from the contents of the cells as well, not just the cells themselves. Is there a way to put the padding onto them? I had pad-all in each cell, but because of padding { 0px }, I don't think it renders, does it?

Oh, I see what you mean. Because it is only so large, when tabs are larger than the width, it goes onto the next line?

[Brian]

Mar 14, 2018 16:00:13 GMT -8 Alan Vende said:

Oh, I see what you mean. Because it is only so large, when tabs are larger than the width, it goes onto the next line?

Yes, thus increasing that cell's height and causing the other cell in that row (containing the other set of tabs) to increase in height to match it.

[Alan Vende]

Mar 15, 2018 8:04:12 GMT -8 Brian said:

Mar 14, 2018 16:00:13 GMT -8 Alan Vende said:

Oh, I see what you mean. Because it is only so large, when tabs are larger than the width, it goes onto the next line?

Yes, thus increasing that cell's height and causing the other cell in that row (containing the other set of tabs) to increase in height to match it.

Right. Thank you for that confirmation.

There are three other things that I cannot figure out:

1. First, the classes are the same for both the headers and the cells, but for some reason, the information in them is not coming up.

2. And, second, the tabs aren't as close together as the other dialog box. Is that because there's not much written in the <li>'s?

I stayed up way, way too late last night trying to get this to work to no avail... I'm not seeing what I'm missing, as they're the same except for the fact that one works and one doesn't. I checked the click event, and that should be all set. But, since the information isn't coming up when the tabs are clicked, something is not written correctly, right?

I checked everything and, like I said, all of the classes look to be the same and so forth, so shouldn't everything work correctly?



I got the welcome message to work that comes up when you first click to open it, but that's it. The tabs themselves don't open anything. I did, however, put some text into each one.

3. There's also the problem of the padding when I do #ppstaffdialog { padding: 0px; }. Same goes for #ppdialog { padding: 0px; }. The padding is removed for everything, not just the header cells. I do have pad-all on each of the tab's contents, so shouldn't that put the padding on each of the contents? Or am I writing something wrong? It looks all correct to me...

SPOILER: Click to show

<!-- Begin Affiliate Bar Popup Container -->
<div class="container boards">
   <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>
               <div>
                   <h3 class="ppaffcodeheader">Our Affiliate Code</h3>
                   <p class="tabbodypadding"><textarea readonly="true" onclick="this.select()" style="width: 610px; height: 26px; 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="affimagecontainer">
                       <div class="affimagedesc"><span class="ppaffimage"><img src="$[plugin.images.PsychicPsyghtingsAffImage]" /></span></div><p>To the right is our affiliate image. It is what you will see when you input our affiliate code above. If you do not see it, please post in the Help Centre by clicking the button below. Thank you!</p><div class="pphelpcentrebuttoncontainer"><a target="_blank" href="http://psychic-psyghtings.proboards.com/thread/new/56"><button>Help Centre</button></a></div>
                   </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 click the button below and take a moment to review them.</p>
                   <!-- Rules Button is in JS -->
                   <div class="ppaffrulesdiv">
                       <p class="ppaffrulestexttitle">Psychic Psyghtings' Affiliate Rules</p>
                       <p class="ppaffrulestextpadding"><strong>Rule #1:</strong> Your forum must be guest-friendly in terms of viewing, but does not have to be in terms of posting. The only thing that we require in terms of being guest-friendly is that the forum as a whole is viewable, like ours is to you.</p>
                       <p class="ppaffrulestextpadding"><strong>Rule #2:</strong> </p>
                       <p class="ppaffrulestextpadding"><strong>Rule #3:</strong> </p>
                       <p class="ppaffrulestextpadding"><strong>Rule #4:</strong> </p>
                       <p class="ppaffrulestextpadding"><strong>Rule #5:</strong> </p>
                       <p class="ppaffstaffnote"><em>The staff of Psychic Psyghtings reserves the right to change the above rules at any time, as they see fit with, or without, prior notice to the members.</em></p>
                   </div>
               </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 Psychic Psyghtings handles its affiliations with other forums.<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>
       <div class="pphelpcentrebutton"><a target="_blank" href="http://psychic-psyghtings.proboards.com/thread/new/56"><button>Help Centre</button></a></div>
</div>

<div class="aff-link-change pad-all">
       <h3 class="aff-link-change-header">Did your affiliate link change?</h3>
       <p class="aff-link-change-note"><strong>Please Note:</strong> You <em>cannot</em> change your affiliate link once it is posted to the Affiliation Board, so you will have to follow the steps in the information below in order to update it. Thank you!</p>
       <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>
       <div class="ppguestfriendly"><img class="lightbulbplaceholder" src="$[plugin.images.PsychicPsyghtingsAffImage]" />
           <p class="ppguestfriendlymsg">This board is <strong>guest-friendly</strong>, so you do not have to create an account to update your affiliate link with us. We look forward to working with you to get your affiliate link corrected!</p>
       </div>
       <div class="pphelpcentrebutton"><a target="_blank" href="http://psychic-psyghtings.proboards.com/thread/new/56"><button>Help Centre</button></a></div>
</div>
   </div>
</div>
<!-- End Affiliate Bar Popup Container -->

<!-- Begin Staff Popup Container -->
<div class="container boards">
   <div class="content">
       <div id="pp-staff-table">
           <table class="list">
<thead>
<th>Administrative Team</th>
<th class="last">Site Helpers</th>
</thead>
<tbody>
<tr class="last">
<td class="item last">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
<li><a class="pp-admin">Admins</a></li>
<li><a class="pp-gmod">Global Mods</a></li>
<li><a class="pp-mod">Mods</a></li>
</ul>
</div>
</td>
<td class="item last">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
<li><a class="pp-graphics-guru">Instructor</a></li>
<li><a class="pp-instructor">Graphics Guru</a></li>
                           <li><a class="pp-spiritual-advisor">Spiritual Advisor</a></li>
                           <li><a class="pp-coding-guru">Coding Guru</a></li>
                           <li><a class="pp-other-staff">Other Staff</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
   </div>
       
       <div class="pp-staff-welcome pad-all">
           <p>Welcome to the Psychic Psyghtings Staff Helper Dialog!</p>
           <br />
           <p>Here, you'll find a list of all of the people who help with the site in different capacities.</p>
<br />
</div>

<div class="pp-admin pad-all">
       <p>Alan Vende</p>
       <p>MSG</p>
       <p>xlivelaughlove4</p>
       <br />
   </div>

<div class="pp-gmod pad-all">
       <p>Test</p>
</div>

<div class="pp-mod pad-all">
       Test
</div>
       
   <div class="pp-graphics-guru pad-all">
       <p>Test</p>
       </div>
   
   <div class="pp-instructor pad-all">
       <p>Test</p>
       </div>
       
   <div class="pp-spiritual-advisor pad-all">
       <p>Test</p>
       </div>
       
   <div class="pp-coding-guru pad-all">
       <p>Test</p>
   </div>
       
   <div class="pp-other-staff pad-all">
       <p>Test</p>
   </div>
</div>
<!-- End Staff Popup Container -->

I'm irked by these because it all looks written correctly. I cannot find what's wrong... To me, there doesn't look to be anything wrong...

[Brian]

1. Your selector on line 94 of your JS isn't targeting anything because there's no # before the ID.

2. You have CSS telling the page to add a left margin to #ppstaffdialog > div ul li. This selector is matching the <li> elements in the tabs. Right-click > Inspect Element tells you literally everything you need to know in regards to an element's CSS. You can even hover over the element's HTML to see an overlay containing its margins and padding.

dev.prbrds.com/b/o/OoljFvDSMfMaFh0xdQWX.png

3. Removing the padding from #ppstaffdialog and #ppdialog will only affect the padding of the content area of the dialog. If something else needs padding you should be adding padding to that element, not the dialog container as a whole.

[Alan Vende]

Mar 15, 2018 8:37:00 GMT -8 Brian said:

1. Your selector on line 94 of your JS isn't targeting anything because there's no # before the ID.

I thought I had put that back... Thank you for that!

Mar 15, 2018 8:37:00 GMT -8 Brian said:

2. You have CSS telling the page to add a left margin to #ppstaffdialog > div ul li. This selector is matching the <li> elements in the tabs. Right-click > Inspect Element tells you literally everything you need to know in regards to an element's CSS. You can even hover over the element's HTML to see an overlay containing its margins and padding.

dev.prbrds.com/b/o/OoljFvDSMfMaFh0xdQWX.png

I did that in Chrome and it goes over to the right in that particular browser, but I didn't see anything like what's in your screenshot. I'm not very well-versed in the Developer Tools area(s) of the browsers... Thank you for that--it's fixed!

Mar 15, 2018 8:37:00 GMT -8 Brian said:

3. Removing the padding from #ppstaffdialog and #ppdialog will only affect the padding of the content area of the dialog. If something else needs padding you should be adding padding to that element, not the dialog container as a whole.

Oh, I see what you mean. I wanted to take the padding of the top and sides so it was flush with the sides, like yours is. I did see that you had the class of pad-all, which I always thought put the padding that is defined by that class into the content areas, right? That's why it's there? Or does putting padding: 0px; on the container as a whole negate that?

[Brian]

An element's padding isn't inherited by its children. If you add or remove padding from one element using CSS it's not going to affect another element unless that element shares its CSS selector or you've outright told that element to inherit its padding (padding: inherit;).