How to add javascript in addition to pure text in Joomla Article - javascript

More specifically I am trying to implement a wufoo form in a joomla article, but I need to add text, in addition to the code. I tried to just paste the code the article but all I get is the code as text. What am I missing? If it helps I have installed jCode, but I cannot find a way to add text as well in addition to the form.
I am open to other ways as well to solve this issue.

Joomla by default doesn't allow you to import code like PHP or Javascript through articles. For this, a plugin need to be used. I see you've tried using jCode, I've never used this before so can't provide any documentation on it.
I would strongly recommend using Sourcerer as a plugin for importing Javascript and PHP through your articles. It's free, well documented, well supported and easy to use. Once you've installed it, enable the plugin. Then in your article, you can use something like the following:
{source}
<script type="text/javascript">
alert('Hello world');
</script>
<?php
echo '<p>Hello world</p>!';
?>
{/source}
There will be a small button under the article textarea for Sourcerer which will bring up a popup window for you to enter all your code in.
Hope this helps

Alternate options are for your problem
If you are an admin user Remove filter option for article.
Go to article section -> Options -> Text Filter Options -> Choose your user group -> Apply no filter.
Another option is to create a module and assign that module to your article like below.
Create a module that have your forms. For module development tutorial
And create an article and set the module inside that like.
{loadposition contact_form_pos}
Inside your article just mention the module position like above
for more
Hope it make sense..

Related

How to use Github buttons in Markdown (README.md)

I want to add buttons to my markdown that, when pressed, let the viewer fork, star or watch a github repository.
I already tried adding the html to my README.md, but it does not work.
Especially
<script async defer src="https://buttons.github.io/buttons.js></script>
does not seem to work (it just displays the link)
Is there a way to use Github Buttons (https://buttons.github.io) in a markdown (.md) file?
Or are there other ways to inplement this?
It seems impossible to use the unofficial Github Buttons in a Markdown file.
However, you can use different links to access those actions (markdown style):
Fork:
[fork my repository](https://github.com/user/repository/fork)
Watch/ Follow:
[watch this repo](https://github.com/user/repository/subscription)
Create Issues:
[create issue](https://github.com/user/repository/issues/new)
If somebody knows a link to star a repo, I will add that to this answer :)
If you created an image file with the button you could incorporate it directly in markdown.
For example:
[![](https://s18955.pcdn.co/wp-content/uploads/2018/02/github.png)](https://github.com/user/repository/subscription)
To control the size of the button you may need to incorporate html borrowing from this answer Changing image size in Markdown
[<img src="https://s18955.pcdn.co/wp-content/uploads/2018/02/github.png" width="25"/>](https://github.com/user/repository/subscription)

TinyMCE integration - Plugins won't show

I apologize in advance if this is not the right forum for this question, but since I am in desperate need of help I hope you may want to help me out.
I am using TastyIgniter Online Ordering System for a project. The system has a description textbox where you can add information about the product. However, it is only a plain textbox without additional functionality like strong tags and it won't keep the formatting.
I downloaded tinymce, put the script files in the js folder, and added these lines of code into the PHP file:
<script src="http://localhost/assets/js/tinymce/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
Hooray, it works partly. The textbox now has some of the functionality. It keeps the formatting and I am able to add bold, italic style to the text. Although, plugins like the image, table, hyperlink 'plugins' won't show at all. Is it possible that the textbox itself is restricted and then keeps the TinyMCE from showing these buttons or is something else wrong?
Thank you in advance.
You need to expand your TinyMCE init to include the plugins and toolbar/menu options you want displayed.
Take a look at this basic example of TinyMCE:
https://www.tinymce.com/docs/demo/full-featured/
If you look at the JS tab of the example you will see there are many options available for TinyMCE in the init.

When working with an already made website, how do you know which file to edit to change something?

Let's say I'm building a website and using an already made Wordpress theme. Say it's a pretty complex theme and there's a lot of folders and files. If I wanted to change something specific, like text, or an image, or something that happens in Javascript/jQuery, and the change that I want is not an option in the themes control panel, what do I do? I know I have to go into the files but how do I know which file to go to? Lately, I've just download the theme to my desktop and use the windows search companion and type in the field that says "a word or phrase in the file." Sometimes it comes up and sometimes it doesn't. For CSS changes I usually use Firebug and click on the element, but many times I want to change the HTML/PHP/Javascript. I feel like I'm doing it the wrong way and there's an easier way that I'm missing.
As you mentioned WordPress theme so I will specifically try to answer this question for editing WordPress theme.
When it comes to WordPress, everything is very structured and well organized. If theme written following standard practices then each component has its specific file. If you are familiar with WordPress theme structure and want to change php code or say a static part then all you need to do is locate the component file say sidebar.php, home.php, single-{type}.php, header.php and many similar files. http://codex.wordpress.org/Template_Hierarchy
Now if you want to edit something that is shown in right/left side of page as sidebar then chances of finding it in sidebar.php are maximum. Similarly to change something on home page try looking for home.php, for posts it could be single-post.php.
Many a times what you are looking to change might need a tweak in widgets. In this case, process remains same as theme you just need to look in different folder.
Javascript: For editing javascript, beautify the code if it came minified. When you have code ready much of js debugging can be done using firebug/Developer Console in chrome. Best way is to put breakpoints at relevant position and then inspect code behavior. You will be able to locate code block that you need to tweak to achieve what you want.
CSS: Create a child theme and then use it override default theme properties.
You can probably use grep in PowerShell, Cygwin, etc.
grep -lir "a word or phrase in the file." *
edit: Emulating Grep in Powershell

How to get jQuery code completion to work in Sublime Text 2?

I am doing some light jQuery based Javascript programming with Sublime Text 2. Is there such a thing as code completion for jQuery? I've installed SublimeCodeIntel, but getting nothing.
For instance, consider the following:
<div id="container">hello</div>
<script type="text/javascript">
function doStuff() {
$('#container').html('change it');
}
</script>
When I type $('#container'). I would expect a popup with things like html, val, etc... to popup. Has anyone gotten jQuery intellisense to work at all?
P.S. To be sure, I am not trying to get snippets working, but rather code completion.
Try package installer in sublime
search for jquery and install.
SublimeCodeIntel should work just fine with jQuery, you just need to tell it where to find it. Check out the docs on configuring search paths - basically, you create a ~/.codeintel/config file, and put something like
{
"JavaScript": {
"javascriptExtraPaths": ["/path/to/jquery.not-minified.js"]
}
}
in it. Remember to not use the minified version of jQuery, as some of the variable names can be changed (I think, don't hold me to it for v2). You also don't have the inline documentation. This file can also be created as /path/to/project_root/.codeintel/config if you're using different versions, different plugins, etc. Remember that SublimeCodeIntel can take a little while to index everything, so be patient the first time it runs. I've found it helpful to restart Sublime after indexing is done, just so everything is freshly loaded.
This jQuery package for Sublime text might help
https://github.com/mrmartineau/Jquery
If you have installed a jQuery syntax-file (there is one available from the link provided by Srikanth AD) then my AndyJS2 add-in is available via PackageControl.
AndyJS2 provides completions for both JavaScript and jQuery - use the syntax options by clicking the bottom-right of the ST window to switch between JavaScript and jQuery.
I doubt that it would work well, though, in parallel with SublimeCodeIntel. You can disable this Package, without having to uninstall it, from the Preferences menu, Package Control

How to create a small widget with JavaScript

I really don't know how to describe it, but if you understood it and had experience on that field, may be you can help me with something 'Open Source' and 'Ready-made'.
I want to create something like a box 'or widget', where you can change its content by hitting some buttons on the top of the box. (Hey the box is on a web page and this should use Ajax and Javascript).
I have tried some ready scritps, but I found them limited and they drive me crazy, JS frameworks also don't seems to offer such solution.
Any body have any idea on that field?
Just because the box is on a Web page doesn't mean it should use AJAX, Omar. Have you thought about using a third-party solution like ClearSpring or WidgetBox? If you need to put your widget onto Myspace, you'll want one of these.
That said, I've taken a couple of JavaScript-only runs at this problem; see Twitterati and Put Your Digg In A Box for examples, and my Global Widget Summit presentation for explanations.
Have you tried Jquery?
Visit www.jquery.com
Some example can be found at
http://www.openjs.com/scripts/events/keyboard_shortcuts/
Also please check the In-place editing example at
http://www.appelsiini.net/projects/jeditable
http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax

Categories

Resources