Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

I am trying to add this custom javascript and css code in a page

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    $('.subject').append('<button class="download" style="float: right;">DOWNLOAD</button>');

 $('.download').click(function() {
     $(this).parent().next('table').slideToggle('fast').css('display', 'block');
    });
  </script>

<style>
    .subject {
      color: #009fdb;
      display: block;
      font-size: 20px;
      margin: -5px 0px 5px;
      width: 100%;
    }
    .files {
      display: none;
    }
  </style>

Every time i got this error

<section class="handouts">

        <h1>Frequently asked subjects</h1>
        <p class="subject">ACC311 - Fundamentals of Auditing </p>
        <table class="files" align="right">
          <tr>
            <td>PDF</td>
            <td>PPT</td>
          </tr>
        </table>
        
</section>

You need to be a member of Ning Creators Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

  • Hello,

    I got it to work on my Ning 2 site by adding the code to the Custom Code box, rather than the Head box on the custom page.

    Also you don't need to load the jQuery library because Ning does that for us already.  Ning's version of jQuery uses x$ rather than just $ so making that change made the download button appear for me.

    I used this code in the Custom Code box:

    <script type="text/javascript" charset="utf-8">
        x$('.subject').append('<button class="download" style="float: right;">DOWNLOAD</button>');

     x$('.download').click(function() {
         x$(this).parent().next('table').slideToggle('fast').css('display', 'block');
        });
      </script>

    <style>
        .subject {
          color: #009fdb;
          display: block;
          font-size: 20px;
          margin: -5px 0px 5px;
          width: 100%;
        }
        .files {
          display: none;
        }
      </style>

    Try it out here: http://jqueryhelp.ning.com/page/test-download-button

    Best wishes!

    TJ

    • Hi TJ!

      I checked your page and the code is working like a charm. I use the same code on my page but i got the same error i mentioned above. I don't know why i am getting this error. But i figured out something that, when i try to put HTML tags in javascript code, the custom box gives error. When i put the button tag in javascript code like this button> instead of this <button> the custom box accept the code. But the download button does not appear sometime. I am sure you will resolve my problem.

      Regards

      • Hello Innocent, try it like this..  It sounds like you have something in the head with the class or id the same as what you have in your script..  ".subject"  So we will add user generated to your code. Hopefully this helps.  You have a great day.

        <script type="text/javascript" charset="utf-8">
            x$('DIV.xg_user_generated .subject').append('<button class="download" style="float: right;">DOWNLOAD</button>');

         x$('DIV.xg_user_generated .download').click(function() {
             x$(this).parent().next('table').slideToggle('fast').css('display', 'block');
            });
          </script>

        <style>
           DIV.xg_user_generated .subject {
              color: #009fdb;
              display: block;
              font-size: 20px;
              margin: -5px 0px 5px;
              width: 100%;
            }
           DIV.xg_user_generated .files {
              display: none;
            }
          </style>

        • Hi George!

          Thanks for your great help. I have tried your modified javascript, but unfortunately it's still not working. I tried many things but the only working thing is that I need to break the starting tag of the button (<button>)to(button>), otherwise the code does not accept by the custom box. But the broken tag create problems and does not work every time. I think the javascript is not accepted if it got any html tag. I also try to put <input type="button"> instead of <button> but i got the same error. :(

          • I'm sorry it didn't work. :-(

            If you can send me a link to the page your adding this code to and I'll see if I can figure out the problem, like TJ said it should be working. We should be able to just target the individual page you are working on and add the code to your NC custom code box..

  • Okay, this should do the trick. The code goes in your NC custom code box. All the JavaScript and CSS have been compiled into one JavaScript code.

    If you change THE PAGE to a different page just change the page name in the first line of the code. What's in there right now is     "test-download-button"

    <script type="text/javascript" charset="utf-8">
    x$(document).ready(function(){0<=document.URL.indexOf("test-download-button")&&(x$(".subject").append('<button class="download" style="float: right;">DOWNLOAD</button>'),
    x$(".subject").css({color:"#009fdb",display:"block","font-size":"20px",margin:"-5px 0px 5px",width:"100%"}),
    x$(".files").css({display:"none"}),
    x$(".download").click(function(){x$(this).parent().next("table").slideToggle("fast").css("display","block")}))});
    </script>

  • It might be better doing it this way. Just add this code where you added it originally for each individual page.

    <script src="http://bit.ly/2dnMxi8" type="text/javascript" charset="utf-8"></script>
    <style>
        .subject {
          color: #009fdb;
          display: block;
          font-size: 20px;
          margin: -5px 0px 5px;
          width: 100%;
        }
        .files {
          display: none;
        }
      </style>

    • Hi George!

      Thanks for putting your head in it. I tried your new script, but unfortunately I got the same error. Then I use the external file you mentioned above the script is loaded, but I think its not working can you please take a look at it.

      http://vuhelp.pk/page/test-download-button

      Thanks again. :)

      • I've noticed the HTML portion of your code is in the head of the network it should not be there. See image below.



        And in your custom code box you have a misplaced ending script tag, which can cause errors. I don't see any of the codes in this discussion including mine installed on your network, except the HTML that is in the HEAD of your network.

        Here's what it looks like now in your custom code box
        <!--
        <script type="text/javascript" src="//s.skimresources.com/js/39610X1024039X3634.adunit.js">
        -->
        </script>

        Move the ending script tag so it looks like this

        <!--
        <script type="text/javascript" src="//s.skimresources.com/js/39610X1024039X3634.adunit.js"></script>
        -->

        When you fix those two errors try the codes again and if it doesn't work let me know and I'll have another look.

This reply was deleted.

Search the Creators Network

Latest Activity

Beatriz Martín replied to Dan Porter's discussion Multiple Group Hubs
"Hello.
I would like to know how this feature is done or which creator could help me.
Thx!!"
3 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks Pat :-)
Yes it is a nice addition but I do wish a little more QA was done before releasing f…"
4 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"I have re-uploaded this video so you can see it showing the green screen in the list page and also…"
4 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks for the reply Kyryl. I have addressed all the issues in a single post for you to look at her…"
4 hours ago
Danny Lynn replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
""
5 hours ago
Danny Lynn replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Thank you ning team,  I Am not a owner at Media Center just member 4 years, i do link that page to…"
5 hours ago
Pat Howlett replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Great addition Ning Team and I appreciate Bizz John taking the time to jump in and assist in findin…"
6 hours ago
Kyryl_Ning_Support replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Hi Daniel,
We do apologise for the inconveniences at this moment developers are working under the i…"
9 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
Regarding the video resolution, after the video has been uploaded, all of them are convert…"
9 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"XDD"
11 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi there,
Sorry for delayed reply, it was necessary to take a hold of developers to find out the an…"
11 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
About the video that had only green screen background instead of the video itself. we have…"
11 hours ago
Irvin Carrero, Alison Pert and Shanelle Reed-Keahi joined Ning Creators Network
12 hours ago
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"And now our 'space invaders' top nav bar gif crapped out!  Here's the original:"
14 hours ago
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"For some reason, our 'Wolf Blitzer' gif hasn't re-animated yet. Here's the page where it exists: ht…"
14 hours ago
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Thanks for working on this.  Whatever you guys did to fix the Gifs today, I hope it stays like this…"
16 hours ago
Kos replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"BUWAHAHAHAHA! "
18 hours ago
CZG replied to CZG's discussion Logging into ning site using Firefox not secure message
"Thank you Kos. I really appreciate the feedback."
22 hours ago
Anthony Reardon replied to David Carr's discussion Being a Ning Network could ruin the deal
"Got to say I concur with this, sadly."
22 hours ago
More…