Eden Alexandria
  • ****


      Reputation : 2
      Registered on : 2013-12-19
      Posts : 90
      LG
    I'm not completely sure the technique it is, but I would like to incorporate it in some of the widgets on my forum.

    How it would work is one would click on an image and then text drops down from it. It works similarly to a spoiler except you click on an image instead. I primarily want to use this for my staff widget, where the staff info would be hidden until one clicks on the image which drops down the members of staff. However, I have a feeling if I try doing it myself, something will mess up and I'll have to recreate the widget all over again. Which is why I have come to you guys for assistance.

    Site link: http://www.narutolegacy.com/

    Niko
    • Administrator

        Reputation : 320
        Registered on : 2012-02-22
        Posts : 2366
        School of codes courses: coming soon
      Hello,

      so, tell me if I understood :bene:

      you want in a widget (only for staff) an image, that if clicked, shows below it what you want?



      Niko wants you in the team Guest

      Community manager and Administrator at Forumattivo.com

      Eden Alexandria
      • ****


          Reputation : 2
          Registered on : 2013-12-19
          Posts : 90
          LG
        Yes, that is correct. :)

        Tiffany!
        • Manager

            Reputation : 32
            Registered on : 2012-04-17
            Posts : 199
          try this

          paste this code in the content of a widget
          Code:
          <div id="staffonly"></div>

          and add this javascript in your forum (via Javascript management panel) on index (where the widget is shown)
          Code:
          $(document).ready(function() {  $('.revealer').click(function() {$('#object').slideToggle(400);return false;});});

          and this is another javascript to add (same on index)
          Code:
          jQuery(window).load(function() {
                  if (typeof _userdata === "undefined") return;
              if (_userdata['user_level'] == '1' OR _userdata['user_level'] == '2') {
                     jQuery('#staffonly').before('<img src="LINKIMG" class="reveler"><div id="object" style="display: none;">Shown on click content</div>');
                  }
          });

          let me know thanks



          Welcome on the forum of Codes
          Eden Alexandria
          • ****


              Reputation : 2
              Registered on : 2013-12-19
              Posts : 90
              LG
            Should the two javascripts be separate?

            Niko
            • Administrator

                Reputation : 320
                Registered on : 2012-02-22
                Posts : 2366
                School of codes courses: coming soon
              that would be better



              Niko wants you in the team Guest

              Community manager and Administrator at Forumattivo.com

              Eden Alexandria
              • ****


                  Reputation : 2
                  Registered on : 2013-12-19
                  Posts : 90
                  LG
                Okay, I inputted all three things, but it hasn't done anything. Do I have to add to the CSS as well? If so, what do I need to add?

                Here's the link: http://www.narutolegacy.com/

                Eden Alexandria
                • ****


                    Reputation : 2
                    Registered on : 2013-12-19
                    Posts : 90
                    LG
                  Also, when I submitted the javascripts, the image for my pop-up chatbox disappeared, as well as the very bottom of the page.

                  Niko
                  • Administrator

                      Reputation : 320
                      Registered on : 2012-02-22
                      Posts : 2366
                      School of codes courses: coming soon
                    try to use this code:
                    Code:
                    jQuery(window).load(function() {
                            if (typeof _userdata === "undefined") return;
                        if (_userdata['user_level'] == '2') {
                              jQuery('#staffonly').before('<img src="LINKIMG" class="reveler"><div id="object" style="display: none;">Shown on click content</div>');
                            }
                    });
                    jQuery(window).load(function() {
                            if (typeof _userdata === "undefined") return;
                        if (_userdata['user_level'] == '1') {
                              jQuery('#staffonly').before('<img src="LINKIMG" class="reveler"><div id="object" style="display: none;">Shown on click content</div>');
                            }
                    });

                    :Good:



                    Niko wants you in the team Guest

                    Community manager and Administrator at Forumattivo.com

                    Eden Alexandria
                    • ****


                        Reputation : 2
                        Registered on : 2013-12-19
                        Posts : 90
                        LG
                      Okay, well I think the javascript is working now. However, I think I'm getting the placement wrong in the widget itself. Here is the coding:

                      Code:
                      <div id="staffonly">
                         
                         <div align="center"><img src="http://i58.tinypic.com/351wgfb.png" class="revealer" />
                            <div style="display: none;" id="object">
                                Click to View
                            </div>
                             <br /><br />
                            <div style="border-width: 1px; border-style: solid; border-color: #353535;">
                                <img src="http://i58.servimg.com/u/f58/15/11/84/39/eden110.png" style="float: left; padding-right: 7px;" />
                               <div style="color: #8C8C8C;">
                                   <strong> EDEN:</strong>
                               </div>
                               
                               <div style="padding-right: 4px; padding-bottom: 4px; padding-left: 2px;">
                                   <span style="color: #8C8C8C;">This girl is the lovely person running Legacy daily. She can help you with everything. Please keep in mind that she might not always be able to respond things fast as it takes a lot of time being the head administrator. Eden is also the Oujoukage, which means that besides being an active staff member, she is also busy IC.</span>
                               </div>
                            </div>
                            
                         </div>
                      </div><br /><br />
                      <div align="center">
                          <img src="http://i61.tinypic.com/mhvxb5.png" />
                      </div>
                      <div id="staffonly">
                          <br /><br />
                         <div style="border-width: 1px; border-style: solid; border-color: #353535;">
                             <img src="http://i58.servimg.com/u/f58/15/11/84/39/isas10.png" style="float: right; padding-left: 7px;" />
                            <div style="padding-left: 4px; padding-bottom: 4px; padding-right: 2px;">
                               
                               <div style="color: #8C8C8C;">
                                   <strong> ISAIS:</strong>
                               </div>
                                <span style="color: #8C8C8C;">This guy is one of the administrators assisting Eden. He can usually be found in the chatbox helping out members. Don't worry, he doesn't bite. Isais is also the Fubukikage, which means that besides being an active staff member, he is also busy IC.</span>
                            </div>
                            
                         </div><br /><br />
                         <div style="border-width: 1px; border-style: solid; border-color: #353535;">
                             <img src="http://i58.servimg.com/u/f58/18/70/82/43/nova10.png" style="float: left; padding-right: 7px;" />
                            <div style="color: #8C8C8C;">
                                <strong> NOVA:</strong>
                            </div>
                            
                            <div style="padding-right: 4px; padding-bottom: 4px; padding-left: 2px;">
                                <span style="color: #8C8C8C;">Nova here used to be an administrator but stepped down a long time ago. From time to time, he visits the place and helps out with the coding or answer questions that the current staff might have.</span>
                            </div>
                            
                         </div><br /><br />
                         <div style="border-width: 1px; border-style: solid; border-color: #353535;">
                             <img src="http://i.imgur.com/CgUpWy2.jpg" style="float: right; padding-left: 7px; width: 75px; height: 75px;" />
                            <div style="padding-left: 4px; padding-bottom: 4px; padding-right: 2px;">
                               
                               <div style="color: #8C8C8C;">
                                   <strong> HISAME:</strong>
                               </div>
                                <span style="color: #8C8C8C;">This is the second, lovely Administrator of Naruto Legacy. She will assist you in whatever way she can, and she is the best option to get Eden's attention if she isn't online.</span>
                            </div>
                            
                         </div>
                      </div><br /><br />
                      <div align="center">
                          <img src="/imghere" />
                      </div>
                      <div id="staffonly">
                          <br /><br />
                         <div style="border-width: 1px; border-style: solid; border-color: #353535;">
                             <img src="http://static.tumblr.com/jqyzupm/C25md69i4/edannn.png" style="float: left; padding-right: 7px; width: 75px; height: 75px;" />
                            <div style="color: #8C8C8C;">
                                <strong> XAVIER:</strong>
                            </div>
                            
                            <div style="padding-right: 4px; padding-bottom: 4px; padding-left: 2px;">
                                <span style="color: #8C8C8C;">He's a pimp and a Global Moderator of Naruto Legacy. He's really fun to chat with on the chatbox and it's easy to get a ton of good laughs with him.</span>
                            </div>
                            
                         </div>
                      </div><br /><br />
                      <div align="center">
                          <img src="http://i60.tinypic.com/2dgp0nb.png" />
                      </div>
                      <div id="staffonly">
                          <br /><br />
                         <div style="border-width: 1px; border-style: solid; border-color: #353535;">
                             <img src="http://i58.servimg.com/u/f58/18/70/82/43/gray-310.png" style="float: right; padding-left: 7px; width: 75px; height: 75px;" />
                            <div style="padding-left: 4px; padding-bottom: 4px; padding-right: 2px;">
                               
                               <div style="color: #8C8C8C;">
                                   <strong> RUMI:</strong>
                               </div>
                                <span style="color: #8C8C8C;">This kid is a moderator of the site. You'll catch him around the chatbox often, helping out members and making a fun ruckus. He yells a lot too, so make sure you bring some headphones with you.</span>
                            </div>
                            
                         </div><br /><br />
                         <div style="border-width: 1px; border-style: solid; border-color: #353535;">
                             <img src="http://i.imgur.com/n8dLYOW.png" style="float: left; padding-right: 7px; width: 75px; height: 75px;" />
                            <div style="color: #8C8C8C;">
                                <strong> SEMASU:</strong>
                            </div>
                            
                            <div style="padding-right: 4px; padding-bottom: 4px; padding-left: 2px;">
                                <span style="color: #8C8C8C;">This person is a Moderator of Naruto Legacy. He's really fun to chat with on the chatbox and it's easy to get a ton of good laughs with him. He enjoys talking about manga and he has a very helpful spirit. If you catch him online, he will be more than willing to assist.</span>
                            </div>
                            
                         </div>
                      </div><br /><br />

                      Niko
                      • Administrator

                          Reputation : 320
                          Registered on : 2012-02-22
                          Posts : 2366
                          School of codes courses: coming soon
                        Actually you don't have to edit this:
                        Code:
                        <div id="staffonly"></div>

                        the content you want to add (if staff) must be placed here
                        Code:
                        jQuery(window).load(function() {
                                if (typeof _userdata === "undefined") return;
                            if (_userdata['user_level'] == '2') {
                                  jQuery('#staffonly').before('<img src="LINKIMG" class="reveler"><div id="object" style="display: none;">Shown on click content</div>');
                                }
                        });
                        jQuery(window).load(function() {
                                if (typeof _userdata === "undefined") return;
                            if (_userdata['user_level'] == '1') {
                                  jQuery('#staffonly').before('<img src="LINKIMG" class="reveler"><div id="object" style="display: none;">Shown on click content</div>');
                                }
                        });

                        *replace Shown on click content with your code twice ("Shown on click content" appears twice) :bene:



                        Niko wants you in the team Guest

                        Community manager and Administrator at Forumattivo.com

                        Eden Alexandria
                        • ****


                            Reputation : 2
                            Registered on : 2013-12-19
                            Posts : 90
                            LG
                          One last question. Can the javascript pieces be replicated if we want more than the two? I want each of the images to be drop-downs for the staff members in the widget.

                          Niko
                          • Administrator

                              Reputation : 320
                              Registered on : 2012-02-22
                              Posts : 2366
                              School of codes courses: coming soon
                            Sure you can :Good:

                            You will have a string like this for another image
                            and another one for this
                            Code:
                            <img src="LINKIMG2" class="reveler2"><div id="object2" style="display: none;">Shown on click content2</div>
                            and another javascript
                            Code:
                            $(document).ready(function() {  $('.revealer2').click(function() {$('#object2').slideToggle(400);return false;});});

                            you will have to change revelar and object in the javascript code and in the "html code" inside the other javascript code



                            Niko wants you in the team Guest

                            Community manager and Administrator at Forumattivo.com

                            Eden Alexandria
                            • ****


                                Reputation : 2
                                Registered on : 2013-12-19
                                Posts : 90
                                LG
                              Okay, last question and this one is quick. The $(document).ready(function() javascript. Does that go in with the other one? Or should it be made into a completely new submission?

                              Eden Alexandria
                              • ****


                                  Reputation : 2
                                  Registered on : 2013-12-19
                                  Posts : 90
                                  LG
                                The previous message has been deleted from this post. I figured out why the drop-down wasn't working. Just answer what I asked above. yes

                                Niko
                                • Administrator

                                    Reputation : 320
                                    Registered on : 2012-02-22
                                    Posts : 2366
                                    School of codes courses: coming soon
                                  yes, in another one :bene:



                                  Niko wants you in the team Guest

                                  Community manager and Administrator at Forumattivo.com

                                  Eden Alexandria
                                  • ****


                                      Reputation : 2
                                      Registered on : 2013-12-19
                                      Posts : 90
                                      LG
                                    Okay, I need you to take a look at the coding. I must be doing something wrong. May I request that you use a vacant Admin account on our site so you can take a look at the coding and fix it?

                                    I submitted the next set and somehow the widgets enlarged. And the administrators one for the images in the widget; there is only one rather than two like the webmaster images. I can send you a PM here with a username and password, if you accept my request.

                                    Niko
                                    • Administrator

                                        Reputation : 320
                                        Registered on : 2012-02-22
                                        Posts : 2366
                                        School of codes courses: coming soon
                                      mmh, yes, I think that would be better :bene:



                                      Niko wants you in the team Guest

                                      Community manager and Administrator at Forumattivo.com

                                      Eden Alexandria
                                      • ****


                                          Reputation : 2
                                          Registered on : 2013-12-19
                                          Posts : 90
                                          LG
                                        A PM has been sent. yes

                                        Tiffany!
                                        • Manager

                                            Reputation : 32
                                            Registered on : 2012-04-17
                                            Posts : 199
                                          hello Eden Alexandria

                                          Hello,

                                          If the issue is solved, please let us know with a message

                                          If not, we remind you that you are allowed to BUMP every 24 hours thanks



                                          Welcome on the forum of Codes
                                          Tiffany!
                                          • Manager

                                              Reputation : 32
                                              Registered on : 2012-04-17
                                              Posts : 199
                                            The topic is considered solved or abandonded thanks

                                            Next time use a bump message
                                            Have a nice day!



                                            Welcome on the forum of Codes