Include a js script inside of joomla index page - javascript

My friend asked me to add a simple javascript to her page. Unfortunately it is built on joomla (which I have never used). I cannot find any place to include such a script. There are some empty indexes everywhere. Is there any way to do this? I just need to make the page scroll to some position after pressing a button.

Try to add your script in this file:
[sitename]/templates/[current_template]/index.php
You can find out the name of the current template in
Go to Administration > Extensions > Template Manager (it will be starred, see screen below)
After that you shold click on template name link, and on other page click Edit main page template for editing index.php (it depends from template).
The second way to find out the template name it's browser DevTools, see screen below.
Also you can edit template file via FTP + your text editor.
UPDATE: For Jm internet theme main template file is here:
[template_root]/tpl/default.php
Also main template layout can loads from these files: content-left-right.php, left-right-content.php etc. It depends from selected options in template settings.

Add this code in your template, the path may vary depending on the framework or structure of your template, most commonly the main file is called index.php.
$doc = JFactory::getDocument();
// In this example the js file is called main.js inside js folder
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript’);
Some templates also include an option to add your custom files or code directly
in your template configuration, check out the options of your template.
Regards.

Related

CKEditor display formatted(with CKEditor CSS) HTML from database

This is my first post so I would like to say it's nice to join this community and I will do my best to help others but I'm the one that needs help right now.
--Problem
I've got problem with displaying proper styling of text retrieved from CKE with .getData(), saved into DB and displayed in article.
--When it works?
When I include this CSS:
<link rel="stylesheet" href="\js\ckeditor\contents.css">
in my base.html.twig <head> tag,this changes the css of the site.
--What do I need to do?
What I need to do to avoid conflict? or is there any method to render text without making it editable? Something like CKEDITOR.render(tagId)
--Some images:
With Regards
Wiktor
Please see:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_framed.html#content-styles-vs-page-styles
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
If you are using classic CKEditor then its contents are held inside an iframe with a separate document. In order to style that internal document CKEditor attaches contents.css to it. Since internal styles in separate CSS files are not being saved together with HTML or merged into HTML it is important that you use same styles inside contents.css as you would like to see on your target page (where saved content will be used).
This is not CKEditor bug but simply a different approach you need to apply inside your application.
If you are creating content for different pages you can either create one large contents.css file or, in case of any styles conflicts multiple CSS files which you can load dynamically based on some logic (it will require writing some code to handle that) using contentsCss setting. Please note that in case of dynamic CSS switching you do not want to use contentsCss inside config.js file but directly in instance configuration on HTML page where you can use server-side tags to "spit out" correct configuration for CKEditor instance e.g.
var editor = CKEDITOR.replace( 'editor1',{
language : 'en',
// other configuration settings
// ...
contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ]
}
You can use server-side tag which will return whole editor configuration or simply only this part contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ] or even correct file paths when HTML is being rendered.

How to embed HTML5/CSS + js music player on single wordpress page?

I have an html 5, css, and javascript audio player that I'm trying to add to one page on my wordpress site.
I tried to paste the html into my page's text editor, while installing the JS and CSS folders for the player in my child theme's folder, which didn't work.
I tried placing the CSS for the player styling in my child themes CSS file, and that didn't work. I also tried linking to the style sheets and js scripts from the header.php file, which wasn't working for me.
My first thoughts are that because the html is showing up as it should, the css and JS files aren't being called. So I just need to figure out the path structure of how wordpress creates pages? Yet I know wordpress does something with a database to display the pages?
I saw some documentation about using I think it was either php or JS functions to call scripts or something and I don't understand enough of those languages to be able to make sense of it yet.
I'm still working with my developer, but he's 7 hours ahead of me and asleep. I just want to put the hardcoded version of the player and a few songs on my site for now so I can do some testing/see how it looks.
I hope that this question meets the SO req's. I tried to search on my own and I know the answer is out there, I just don't know enough to understand it yet. Trying to get a head start
The path to your Child theme's folder should be '/wp-content/themes/name-of-theme/'. You can use that in your header to call the files from wherever you might have placed them in your Child theme's folder.
To hard code the HTML, pasting it in the WordPress page editor should work fine unless there is another JS call or some weird iFraming going on.. if that's the case, you can simply create a Page Template (https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/#creating-custom-page-templates-for-global-use) and paste the code there. You'll likely want to just copy an existing page template from your Theme, take out the inner loop, and replace it with your video code.
Adding the links to your 'header.php' file would be considered bad practice. You would want to create a 'functions.php' file inside your Child theme and call the JS/CSS from there. You can also find this within the WordPress codex (they literally give examples you can copy/paste and change your file names).

Maddening scope issue

Little things like this drive me crazy!
Working with a typical Joomla website and all it's complexity.
Start with a functioning website. Edit a particular javascript file of a template to add a simple function:
function socialShare(title, url) {
alert("goop!");
}
I reference it in a link:
<a class="icon-facebook"
onclick="socialShare('blog-entries', '11-blog-article/15-oppressive-tyranny&title=Triumph Over Tyranny')"> </a>
The function is included along with 37 other external scripts in a file at the end of the page, included within the body element like this:
<script src="/bts/templates/vg_progressive/js/articleRev.js"></script>
I inserted the sociaShare function definition as the first thing in the include articleRev.js file. The list of external scripts include core functionality like bootstrap, jquery etc etc.
I can see the function in the included script file with firebug's debugger & the include line in the page source near the bottom. BUT IT DOESN'T GET EXECUTED!! If I include the exact same function within a element anywhere on the page it works just fine. For some reason the instance in the external script file is not within the scope of that page / article, tho I can see it clearly in the page source.
I can also put the function within script tags as the last thing inside the body and it is within scope and works fine. I discovered I can define the function in a different included javascript file that is found in the very same folder and it also works fine.
Like I said, things like this make me pull my hair out! What can cause this behavior? How can I narrow it down?
As per Ed Cotrel, here are 2 files which [may] be helpful, tho I don't think so. Rename articleRev.txt to .js and pageSrc.txt to pageSrc.html. As for your comments Ed, I believe I've stated the issue as clearly as I can.
The desired behavior is to see an alert box when the anchor tag is clicked. Simple. The anchor tag displays a social media icon based on one of the class definitions. The onclick attribute should call the javascript function socialShare and display an alert box containing a text message with the 2 parameters. The alert never shows up. If the socialSharing function is moved to the main.js script file located in the same folder and included the same way in the same place in the page flow it works. Is that clearer?
1) http://thecomingbitsharesrevolution.website/media/articleRev.txt
2) http://thecomingbitsharesrevolution.website/media/pageSrc.txt

how to add my custom html page (js and css) into wordpress page

I have a fully functional html page(js and css) working properly to my local browser. But I want to add this html file into wordpress page.
I tried to add the whole html code in wordpress page in text mode(not visual), but it not proper work. Js and css design not working.
So please guide me how to add this html page to work properly.
Thanks
Make a page template.
Use this:
https://developer.wordpress.org/themes/basics/page-templates/
Page Templates within the Template Hierarchy #
When a person browses to your website, WordPress selects which
template to use for rendering that page. As we learned earlier in the
Template Hierarchy, WordPress looks for template files in the
following order:
Page Template — If the page has a custom template assigned, WordPress
looks for that file and, if found, uses it.
page-{slug}.php — If no custom template has been assigned, WordPress
looks for and uses a specialized template that contains the page’s
slug.
page-{id}.php — If a specialized template that includes the page’s
slug is not found, WordPress looks for and uses a specialized template
named with the page’s ID.
page.php — If a specialized template that includes the page’s ID is
not found, WordPress looks for and uses the theme’s default page
template.
index.php — If no specific page templates are assigned or found,
WordPress defaults back to using the theme’s index file to render
pages.
To create a global template, write an opening PHP comment at the top of the file that states the template’s name.
<?php /* Template Name: Example Template */ ?>

using squishit and rendering external minifiedjs at the end of body element

I have master page and child page in my aplication. At runtime i determine the js & css to be included in master page pre-init method and render the js & css using squish it (bundlecss.AsCached & bundlecss.Render) method. In master page Head control the file is included using Bundle.Css().RenderNamed method.
Now my requirement is to include the external js file at the end of body element to enable faster rendering of web page. When i called Bundle.Css().RenderNamed at the end of the body element, the js file is not included in the page.
Is it not possible to specify the location where the minified js should be included in page html when using squish framework ?
Thanks in advance.
Brahmaiah
You probably don't want to do things this way. The cached/named bundles are for scenarios where you can't (or don't want to) create physical files. The way you're doing it here just creates more complexity. Bundle.JavaScript().Add("~/file.js").Render("~/blah") will still cache the bundle, but it uses the file on disk (only created once).
Are you really calling Bundle.Css().RenderNamed("javascript bundle name")? If so you need to change the call to Bundle.JavaScript().RenderNamed. If this is just a typo it would help to see more code / markup.

Categories

Resources