I got a wordpress page where users can add posts from the front_end. For this i use the WP_editor() function.
When I was trying the functions just plain in a new wordpress page I could just use
tinyMCE.activeEditor.getContent();
But now I'm setting everything up as the final product should look like, this means the editor is loaded in a modalbox (using fancybox plugin), and it initalizes fine, and it works. But I can't fetch the content the same way, it just returns me with the following error:
Uncaught ReferenceError: tinyMCE is not defined
I assume this has something to do with the modal box loading the page in an iFrame, meaning the editor isn't there when the javascript code is running. How do I solve this? Can I bind it to something like .live() ?
Seems like such an easy problem, guess I'm just to tired to be thinking clearly today.
Best Regards.
On the Front-End try to use wp_enqueue_script('tiny_mce') before.
In the WordPress version I use the JavaScript object tinymce and not tinyMCE. Try using tinymce.
Related
I'm trying to run JS code in WordPress, using a plugin; but can't make it work.
Here on this Codepen page, you can see the element I'm trying to integrate on my site (i.e. a drag and drop feature)
http://codepen.io/galaxija737/pen/pHvEi
And here, this is working properly.
But then, I can't figure out how to integrate the JS code properly into WordPress; whatever plugin i'm using. And idem into JSFiddle, impossible to run properly the script, as you can see...
https://jsfiddle.net/szan6shz/)
For instance using "TC-custom-javascript" plugin; when I add the JS code, nothing is running (i.e the drag-drop feature is not working; like on the Fiddle) :
I'm really new at Javascript as you can see. If anyone can give me a hand on this. (I guess i miss something is the way JS needs to be written/integrated)
Thanks a lot!
Greg
WordPress runs jQuery in safe mode. This means that you need to call it with jQuery instead of $. You can call your initial onload function with jQuery and pass $ into the function to define its use throughout the function.
See this example:
jQuery(function($){
$('.theclass').fadeIn('slow');
});
I am building a webpage using Bootstrap 3. I am trying to find the best way to change the main content of the side. I have a Header, left content and right content but I want to change the middle content by pushing a button without changing the surrounding elements. What would be the best thing to use to accomplish this. Is there some demos online that someone can point out? I have been trying to find some but without luck.
Bootstrap doesn't have that feature. First try to learn what bootstrap can do or can't, what bootstrap made for.
What you are trying to do is called templating. You can use php, ajax or other methods to dynamically add content to your content section of your template.
You have many ways to do that, maybe with jQuery .load() and maybe combined with HTML5 history API or some other framework...
But Bootstrap has nothing to do with that..
You can start reading about AJAX and DOM manipulation first, but here is some link you can use:
Dynamically Loading Content in Twitter Bootstrap Tabs
You cannot do that with boot strap that is just not what it's made for you can use either PHP or Ajax personally if you know PHP already and have everything set up for go with that because in my opinion Ajax sucks to learn and work with
I'm making super simple theme for WordPress, and I've attached jQuery to it like this:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
And it shows in page source. But the thing is, plugins depending on jQuery don't work on my template and in Firebug console I get error TypeError: $(...).flexslider is not a function as if jQuery weren't loaded.
If I recall correctly, WordPress has issues with shorthand jQuery, so instead of $(...) you'd need to use jQuery(...). If it's the plugin that's trying to use it then you may have to modify the plugin. Pull the js off the server with FTP and do a simple find/replace (search for "$(" replace with "jQuery(").
I was able to solve my issue by inserting jquery-dependent slideshow directly via template (with jquery linked above it in ) instead of by writing post containing shortcode. Perhaps it isnt most elegant solution but time was of the essence.
Is there a Javascript component that allows me to simply pass it a string made up of arbitrary HTML (any HTML I wish to use) and will show that HTML in a lightbox?
I've been scouring the internet, searching for examples, but it seems like there simply isn't any component capable of doing this.
Even LightWindow, which claims to be all-purpose, still requires me to attach it to an tag with the href set to an element ID.
This isn't what I want. I want to be able to call a function and pass in the HTML myself.
(Another issue with LightWindow is that it requires scriptaculous as a dependency. The project already uses jQuery, and I'd rather not include two frameworks at once.)
Any ideas?
colorbox is great. It relies on JQuery.
To use it with an html string, you would call it like this:
$.colorbox({html:'<p>Hello</p>'});
You can use jqModal or jQuery UI dialog.
SLaks is correct. You should definitly use JQuery UI dialog. Here is an example of using the JQuery dialog as a modal, very similar to using lightbox.
$("#dialog-message").dialog({modal: true});
Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?
$("Map").fancybox is not a function
I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.
This is my code
abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.
ex: abbr>>east
and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.
function showMapFancybox(abbr){
var abbr;
$('#'+abbr+'mapresults').hide();
$('Map').fancybox({
overlayShow: true,
onClosed: function() {
$('#'+abbr+'mapresults').show();
map_latdec = $('#decValLat').attr('value');
map_longdec = $('#decValLon').attr('value');
map_latdeg = $('#degValLat').attr('value');
map_longdeg = $('#degValLon').attr('value');
$('#'+abbr+'decValLatsub').val(map_latdec);
$('#'+abbr+'decValLonsub').val(map_longdec);
$('#'+abbr+'degValLatsub').val(map_latdeg+'N');
$('#'+abbr+'degValLonsub').val(map_longdeg+'W');
}
}).click();
};
I already had this type of errors because i was reloading jQuery after the plugin import, check you don't reimport jquery by mistake (sometimes included in a package like jQuery tools).
I just had this issue, it seem some versions of jQuery are not compatible with versions of FancyBox, for example Fancybox 1.3.4 is buggy with jQuery versions below 1.7 and doesn't work on version higher than 1.8.
Possible Solutions:
1) have you already loaded jQuery? If not, then load it before any $ commands start.
2) Check, probably you are loading jquery library (.js) several times during the page. Try to load only one.
3) In the end of file, you can execute this javascript command: $ = jQuery.noConflict(); and it might solve. If not, then anywhere use the word jQuery instead of $, and it will work too.
You need to load the extensions like easing.js and mousewheel.js BEFORE the main fancybox plugin. That solves the problem.
If "fancybox" as a function does not exist, it is likely that either the jQuery source or the plugin source are failing to load into your page. Make sure that the pathing, file names, and extension are all correct.
EDIT: Make sure that you link to jQuery Source before you link to any plugins. If a plugin is loaded into your HTML before jQuery is, the plugin fails.
In my case it was jQuery.noConflict(); row in another jQuery plugin ... when I removed everything started to work.
If you are using a plugin which includes JQuery into your header tag, this trouble can arise.
I recently added 'TheThe Slider' to my blog, all my FancyBoxes stopped working. There are easy fixes for this situation though. basically, go to the plugin directory, search for the call to jquery and make it's usage conditional. If you would like to see my implementation of this I did blog about it with screen-capture.
I got this issue in my WordPress web site and I found the issue was happening due to fancybox.js presenting twice in the code from two plugins which I installed. So check your code and make sure to load from one source.