Add javascript file from wordpress admin page - javascript

I'm working on a wordpress blog and I want to add simple JS script to one of my pages. But when you go to edit->text and I add my script in <scirpt> tags it's not working. So I want to know how to insert the script or a .js file with the script in it? I have access only to the wp-admin and I don't have access to the files. Can someone suggest some ways to solve this?
Thank you in advance

I'm not too sure I understand your question 100%, but I'm gonna try to answer the best I can.
If you're adding the JavaScript via Wordpress's Page/Post text editor, you have to make sure you're using the HTML editor (not visual).
That would be step 1.
Step 2 would be adding the script itself. Make sure you don't have any line breaks in between your code, or it will break (learned that from experience)
For example, this will work:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
This will not:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
At least, that's what I found with the versions of Wordpress that I'm using (dunno about their latest release)
Hope this helps!
Good luck.

Related

Jquery conflict in Wordpress after move into another hosting

i was looking for some solution it but i didnt find anything.
I think its jquery conflict. I have installed smart-slider, and after move my Wordpress into another hosting its just stopped working. My browser shows me: "undefined its not a function", and my code (generated by plugin ofc):
<script>
njQuery(document).ready(function () {
njQuery('#nextend-smart-slider-1').smartslider({parameters});
});
</script>
I was trying to change it into $.('#next.. or jQuery('#next, but it still broke.
Any ideas?
You can change the code to be a simple jQuery. And not the njQuery.
<script>
jQuery(document).ready(function () {
jQuery('#nextend-smart-slider-1').smartslider({parameters});
});
</script>
Otherwise it won't work. Or else, just make sure that the server has a variable or a script file to handle the njQuery too.

Vimeo API - Froogaloop. $f is not defined

used the api to add a button that plays 1 vimeo video on a page.
I added the Froogaloop plugin into my plugins.js file and am calling out to it on my main.js file.
Here's my code
ready = function(player_id) {
var playButton, player;
player = $f(player_id);
playButton = $('#playButton');
return playButton.on('click', function(e) {
e.preventDefault();
player.api('play');
});
};
$f(document.getElementById('player')).addEvent('ready', ready);
The problem I'm having is that any script after this will not run. The error JSHint gives me is '$f' is not defined
I've tried defining ($f = '')this, but it simply breaks the functionality (which makes sense why that would break it). Has anyone run into this issue before? Do you know of a fix?
Also note that the above code block works. It just has to be the very last thing in my main js file or else everything after it would break. It also won't pass JSHint. I get two '$f' is not defined. errors.
Any help would be greatly appreciated.
Thnx!
I was having this problem because I was including my script before including froogaloop.js.
It seems that $f is defined on that js.
If the error is just with JSHint, you can add the following comment to the top of the file to suppress the warning:
/*global $f:false */
You must connect the library
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
As drcord pointed out in his answer to this similar question:
You are either loading jQuery after this code or not at. You need to include jQuery before this script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js></script>

jQuery inside Media Wiki pages (not just in the Monobook.js or extensions)

I'm trying to do some simple jQuery stuff 'dynamically' from within a MediaWiki content page. Its really just to 'beauty up' some different features.
I've done the following:
http://www.mediawiki.org/wiki/JQuery
http://www.mediawiki.org/wiki/Manual:$wgRawHtml (mainly for Paypal buttons initially)
The below code does not work. This is put in a blank content page.
<html>
<script>
$j(document).ready(function(){
$j('#test').hover(
function(){
$j('#test').attr('background-color','red');
},
function(){
$j('#test').removeAttr('background-color');
}
);
});
</script>
<div id="test">Howdy</div>
</html>
Nothing happens...
Any ideas?
Update:
I have attempted this simple solution with no result.
example.com/wiki/index.php?title=MediaWiki:Common.js
$j('#jTest-Howdy').hover(
function(){
$j('#jTest-Howdy').addClass('jTest-red');
},
function(){
$j('#jTest-Howdy').removeClass('jTest-red');
}
);
example.com/wiki/index.php?title=MediaWiki:Common.css
.jTest-red { background-color: red; }
example.com/wiki/index.php?title=jQueryTest
<html>
<div id="jTest-Howdy">Howdy</div>
</html>
as you can see here, this code should work IF jQuery was being loaded properly...
http://jsfiddle.net/5qFhv/
but it is not working for me... any help?
If you're using the jQuery that's loaded by MediaWiki 1.17, be aware that most JavaScript is loaded after page content. An inline <script> element is executed immediately when it's reached, so $j would not be defined at this time -- you'll probably see some errors in your JavaScript error console to this effect.
(Offhand I'm not sure about the jQuery that's included with 1.16; versions of MediaWiki prior to that as far as I know did not include jQuery.)
Generally what you want to do here is to either put JavaScript code modules into the 'MediaWiki:Common.js' page and let that hook up to your HTML markup, or create a MediaWiki extension -- which you can then invoke from your pages, and which will let you create any fun HTML and JavaScript output you like.
http://www.mediawiki.org/wiki/Manual:Interface/JavaScript
http://www.mediawiki.org/wiki/Manual:Developing_extensions
Code you put in your 'MediaWiki:Common.js' page will be loaded after other UI initialization, ensuring that code and variables are present so you can call into jQuery etc.
I don't know much about MediaWiki, but to me it looks like some simple javascript mistakes.
In the first sample you are trying to set an attribute on the element,
when you need to set the css or style attribute.
$j('#test').css('background-color', 'red');
In both samples you are binding an event to an element that doesn't exist yet in the DOM, so it will fail. You could use the live method, which will work for existing and future elements introduced in the DOM.
$j.('#test').live('mouseover', function(){
$j(this).addClass('hover-class');
}).live('mouseout', function(){
$j(this).removeClass('hover-class');
});
Hope that helps.
Try putting all your custom jQuery code in its own file, then load it as a module with ResourceLoader, after jQuery.
http://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
Also, as a debugging method: completely load your site in Firefox, then enter your custom jQuery code in the console. If it works, your problem is a race condition. If it doesn't, jQuery isn't loading for some reason.

ContentFlow: load AddOn on creation?

I'm using ContentFlow (http://www.jacksasylum.eu/ContentFlow/index.php) to create an image carousel on my page. The images are loaded via a jQuery AJAX-call. This works fine. The ContentFlow is included with this code:
<script language="JavaScript" type="text/javascript" src="contentflow.js" ></script>
Now I want to apply the default 'white' addOn upon creation of the ContentFlow. The CF is created in my document.ready()-codeblock. According to the documentation this should be done like (I believe):
$(document).ready(function () {
...
var ajax_cf = new ContentFlow('ajax_cf', {useAddOns : 'white' });
});
The ContentFlow is created just fine, the AddOn/theme however, is not applied. When using a non-AJAX approach the theme is applied correctly, so I know for sure the theme works, has no syntax errors, etc.
Any clues?
You need to manually add the addon script into the page.
For example, to include the slideshow addon use:
<script type="text/javascript" src="content_flow/contentflow.js" load="slideshow"></script>
<script type="text/javascript" src="content_flow/ContentFlowAddOn_slideshow.js"></script>
Then the Ajax config. worked for me
Trying to find the answer to something else about ContentFlow, I may have stumbled upon a solution to your issue: http://www.jeremyckahn.com/blog/?p=61
This post basically suggests not to set your ContentFlow configurations in $(document).ready
Additionally, my experience from Oliver Kohll's answer is that you DO need to specify the AddOn you want in the 'load' attribute for inclusion of contentflow.js as above...but you should NOT need to also specify the AddOn.js
Hope this helps!

Disabling CKEditor, Re-enabling with JS

I have the following:
POST page that allows users to write text in CKEditor
VIEW Page, that views the text in CKEditor
How can I make CKEditor in the view page READ only, meaning the user can not edit the text in the note? The reason I want to use CKEditor in the view page is for 2 reasons:
1. I can use JavaScript to move the editor from disabled to enabled
2. Keep the styles the same from the POST & View page.
Is this possible? Thanks!
B
not sure if you are still looking for an answer but here is what I did and it was much simpler than the work around they suggest.
<script type="text/javascript">
window.onload = function () {
CKEDITOR.on("instanceReady", function (ev) {
var bodyelement = ev.editor.document.$.body;
bodyelement.setAttribute("contenteditable", false);
});
CKEDITOR.replace('editor1');
};
</script>
Check this CKEditor forum entry where the issue is discussed, and a CKEditor team member provides a workaround.
An important update to this thread, as of 3.6 this is supported by:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly

Categories

Resources