HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    On-click Drop-down coding

    avatar
    • ****


        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/

      avatar
      • Administrator

          Reputation : 315
          Registered on : 2012-02-22
          Posts : 2317
          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

        avatar
        • ****


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

          avatar
          • Manager

              Reputation : 30
              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
            avatar
            • ****


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

              avatar
              • Administrator

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



                Niko wants you in the team Guest

                Community manager and Administrator at Forumattivo.com

                avatar
                • ****


                    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/

                  avatar
                  • ****


                      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.

                    avatar
                    • Administrator

                        Reputation : 315
                        Registered on : 2012-02-22
                        Posts : 2317
                        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

                      avatar
                      • ****


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

                        avatar
                        • Administrator

                            Reputation : 315
                            Registered on : 2012-02-22
                            Posts : 2317
                            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

                          avatar
                          • ****


                              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.

                            avatar
                            • Administrator

                                Reputation : 315
                                Registered on : 2012-02-22
                                Posts : 2317
                                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

                              avatar
                              • ****


                                  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?

                                avatar
                                • ****


                                    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

                                  avatar
                                  • Administrator

                                      Reputation : 315
                                      Registered on : 2012-02-22
                                      Posts : 2317
                                      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

                                    avatar
                                    • ****


                                        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.

                                      avatar
                                      • Administrator

                                          Reputation : 315
                                          Registered on : 2012-02-22
                                          Posts : 2317
                                          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

                                        avatar
                                        • ****


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

                                          avatar
                                          • Manager

                                              Reputation : 30
                                              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
                                            avatar
                                            • Manager

                                                Reputation : 30
                                                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


                                              YOUR BANNER HERE
                                              728x90
                                              DMCA.com Protection Status
                                              Free forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum