OJS OCS OMP OHS

You are viewing the PKP Support Forum | PKP Home Wiki



Add custom JavaScript code

OJS development discussion, enhancement requests, third-party patches and plug-ins.

Moderators: jmacgreg, btbell, michael, bdgregg, barbarah, asmecher

Forum rules
Developer Resources:

Documentation: The OJS Technical Reference and the OJS API Reference are both available from the OJS Documentation page.

Git: You can access our public Git Repository here. Comprehensive Git usage instructions are available on the wiki.

Bugzilla: You can access our Bugzilla report tracker here.

Search: You can use our Google Custom Search to search across our main website, the support forum, and Bugzilla.

Questions and discussion are welcome, but if you have a workflow or usability question you should probably post to the OJS Editorial Support and Discussion subforum; if you have a technical support question, try the OJS Technical Support subforum.

Add custom JavaScript code

Postby Garant » Fri Aug 31, 2012 12:01 am

Hi!
Haven't found any solution to add custom JS or include external file.
Tried editing headr.tpl - but code is stripped out.
How can I add JS?
Thank you!
Garant
 
Posts: 212
Joined: Wed May 30, 2012 8:53 am

Re: Add custom JavaScript code

Postby asmecher » Fri Aug 31, 2012 7:27 am

Hi Garant,

Most likely you're running into problems because { and } are used for Smarty syntax. Look up the Smarty template system for details, particularly the {literal} tag.

Regards,
Alec Smecher
Public Knowledge Project Team
asmecher
 
Posts: 8329
Joined: Wed Aug 10, 2005 12:56 pm

Re: Add custom JavaScript code

Postby Garant » Fri Aug 31, 2012 12:13 pm

asmecher wrote:Hi Garant,

Most likely you're running into problems because { and } are used for Smarty syntax. Look up the Smarty template system for details, particularly the {literal} tag.

Regards,
Alec Smecher
Public Knowledge Project Team

Thank you!
It works!
Garant
 
Posts: 212
Joined: Wed May 30, 2012 8:53 am

Re: Add custom JavaScript code

Postby kennymatthew » Tue May 07, 2013 11:51 pm

Hi Garant,

Could you please explain what you did to resolve the issue. I am trying to add this in the journal desc. text area
---------------------------------------
<div=test>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="/image/galleria/galleria-1.2.9.min.js"></script>
<style>
#galleria{height:320px}

</style>


<div id="galleria">
<img src="/image/galleria/pics/1.jpg">
<img src="/image/galleria/pics/2.jpg">
<img src="/image/galleria/pics/3.jpg">
<img src="/image/galleria/pics/4.jpg">
<img src="/image/galleria/pics/5.jpg">
</div>
<script>
Galleria.loadTheme('/image/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');


</script>
</div>
-------------------------------------------
but the text that is bold is gettin commented but OJS .... Please help ....
kennymatthew
 
Posts: 127
Joined: Wed Jan 09, 2013 11:49 pm

Re: Add custom JavaScript code

Postby Garant » Wed May 08, 2013 12:02 am

Hi, kennymatthew!
Everything is simple.
I just needed to add a custom JS code to header.tpl. In order to make it work you shouldn't forget about "[leteral]" tags - it is SMARTY'ies syntax.
Example:
Code: Select all
<script type="text/javascript">{literal}
   var loc = window.location;
   var currentURL = loc.pathname;
some JS code


function loadjscssfile(filename, filetype){
 }

{/literal}</script>
Garant
 
Posts: 212
Joined: Wed May 30, 2012 8:53 am

Re: Add custom JavaScript code

Postby kennymatthew » Wed May 08, 2013 1:00 am

Hi Garant,

Thanks alot for the speedy reply. this is my website-->https://www.kuwaitjournals.org/test/ as you can see the images are just displayed on the main page and when i type my code in the HTML text area during the journal setup step 5.
Code: Select all
<div=test>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script src="/image/galleria/galleria-1.2.9.min.js"></script>
      <style>
                #galleria{height:320px}

        </style>


        <div id="galleria">
            <img src="/image/galleria/pics/1.jpg">
            <img src="/image/galleria/pics/2.jpg">
         <img src="/image/galleria/pics/3.jpg">
         <img src="/image/galleria/pics/4.jpg">
         <img src="/image/galleria/pics/5.jpg">
        </div>
        <script>
                Galleria.loadTheme('/image/galleria/themes/classic/galleria.classic.min.js');
            Galleria.run('#galleria');

      </script>
   </div>



The parts that is BOLD ( in the prevision post) is always getting commented. If i have to paste this code into a TPL file any idea which one is it ? sorry for the noob questions... very new to this ....
kennymatthew
 
Posts: 127
Joined: Wed Jan 09, 2013 11:49 pm

Re: Add custom JavaScript code

Postby Garant » Wed May 08, 2013 1:11 am

Hi!
If you need permanent changes in header in all pages - you better go with template code editing.
But if you want to add some data, as you described (editing through Setup process step 5) - use HTML source button in editor. Otherwise TinyMce won't accept raw HTML code and will comment it.
Garant
 
Posts: 212
Joined: Wed May 30, 2012 8:53 am

Re: Add custom JavaScript code

Postby kennymatthew » Wed May 08, 2013 1:27 am

Hi,

I think the only way is to edit the tpl file ( is it this one -->ojs\lib\pkp\templates\common\header.tpl ) for the below code where do i add {literal}

Code: Select all
<style>
#galleria{height:320px}

</style>
kennymatthew
 
Posts: 127
Joined: Wed Jan 09, 2013 11:49 pm

Re: Add custom JavaScript code

Postby Garant » Wed May 08, 2013 1:36 am

Try it.
I haven't placed CSS into tpl. I added it through the external CSS file
Garant
 
Posts: 212
Joined: Wed May 30, 2012 8:53 am

Re: Add custom JavaScript code

Postby kennymatthew » Wed May 08, 2013 1:38 am

Hi,

It is working perfectly ... but now it is being displayed on every page :D got to find out how to make it display only in the home page .... Thanks alot man you been a big help ....
kennymatthew
 
Posts: 127
Joined: Wed Jan 09, 2013 11:49 pm

Re: Add custom JavaScript code

Postby Garant » Wed May 08, 2013 1:43 am

You are welcome!
Garant
 
Posts: 212
Joined: Wed May 30, 2012 8:53 am

Re: Add custom JavaScript code

Postby Pangur » Fri May 10, 2013 3:49 pm

Hi kennymatthew,

If you find the way to make it display just in the homepage, please post it!
I have the same problem.
Pangur
 
Posts: 3
Joined: Fri May 10, 2013 3:37 pm

Re: Add custom JavaScript code

Postby kennymatthew » Sat May 11, 2013 10:19 pm

Hi Pangur,

in config.inc goto the part that says
Code: Select all
allowed_html = "<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <b> <i> <u> <img src|alt> <sup> <sub> <br> <p>"

I added <script>

Code: Select all
allowed_html = "<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <b> <i> <u> <img src|alt> <sup> <sub> <br> <p><script>"


And now during the setup step 5, 5.2 Journal Homepage Content you can add javascript to the textarea. Let me know if that helped.
kennymatthew
 
Posts: 127
Joined: Wed Jan 09, 2013 11:49 pm

Re: Add custom JavaScript code

Postby Pangur » Mon May 13, 2013 7:06 am

Hi Kennymatthew,

I have modified 'config.inc.php' and 'config.TEMPLATE.inc.php', adding '<script>' to the allowed_html, but it's not working for me...

Did you paste the exact code you posted above in the html editor (step 5.2) and worked for you?

I am trying to add a slideshow and my code makes use of an additional css file, could be that the problem?

If I'm not editing '.tpl' files, and just trying to add content through step 5.2, should I be using SMARTY syntax as well?

Thanks!
Pangur
 
Posts: 3
Joined: Fri May 10, 2013 3:37 pm

Re: Add custom JavaScript code

Postby kennymatthew » Mon May 13, 2013 10:14 pm

Hi,

http://galleria.io/download/

Are you using this for your image gallery ? i added <style> to allowed html ( i dont think it makes a difference). Then I copied the exact code mentioned before into the HTML editor. what is the exact error you getting ?
kennymatthew
 
Posts: 127
Joined: Wed Jan 09, 2013 11:49 pm


Return to OJS Development

Who is online

Users browsing this forum: No registered users and 4 guests