I have this annoying thing that although is not a blocker-blocker, is very annoying. Let me explain.
I have this code inside of a MCE plugin:
var theWindow = editor.windowManager.open({
html: '<iframe id="iframeID" src="iframeURL" frameborder="0"></iframe>',
buttons: [
{
text: 'Cancel',
subtype: 'secondary'
},
{
text: 'Submit',
onclick: 'submit',
subtype: 'primary mySubmitButton'
}
],
});
$('#iframeID').on('load', function(){
selectedSnippets.on('change', function(e){
theWindow.statusbar.$el.find('.mySubmitButton .mce-txt').text(text);
});
});
(I avoided the plugin declaration and the code that will trigger the window opening for brevity)
Ok, so this works, the window is opened, it does have a title, a footer and two buttons on this footer.
My issue now is this: how do I update the text on the footer buttons? I mean I could simply do it with js. That works, but the problem is the buttons are positioned absolute and computed on first render:
So, my question is: how the hell do I re-render those buttons? The documentation of TinyMCE doesn't really help (or I may not know what/where to look for).
And as a subquestion: how to disable one button?
Thanks!
I managed to re-render the buttons in two steps in a probably not-so-clean way:
// you will need to run this for each **updated** button
theWindow.statusbar._items[0].$el.find('.mce-txt').text('my long value goes here');
theWindow.statusbar._items[0].updateLayoutRect();
// You will need to call this once
theWindow.statusbar.reflow()
I still have no idea how to disable/enable buttons though :)
Related
I'm creating a simple WordPress plugin that requires wp_enqueue_media() to be called from a TinyMCE pop up in order to upload and/or select an image.
The issue im having is wp_enqueue_media() and wp_enqueue_script() don't appear to work with the TinyMCE pop up modal.
I am including wp-load.php in my modal window.
Is there a way to utilize native WordPress script loading within a TinyMCE modal?
Here is an example of what I am doing.
http://return-true.com/adding-tinymce-button-to-wordpress-via-plugin-part-2/
Like I already said in my comment, I think the best approach is to use an inline modal (no iframe).
It is very simple: using the 1st part of the article (http://return-true.com/adding-tinymce-button-to-wordpress-via-a-plugin/) as a basis, just replace the JavaScript with the following (copied from TinyMCE guidelines):
(function() {
tinymce.PluginManager.add('example', function(editor) {
// Add a button that opens a window
editor.addButton('example', {
text: 'Example',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Example plugin',
body: [
{type: 'textbox', name: 'title', label: 'Title'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('Title: ' + e.data.title);
}
});
}
});
});
})();
After that, you have a simple modal, with no iframe, thus using the native Wordpress script loading.
If the content must be in an iframe (which I doubt), one option is to create a 'blank' page in Wordpress with a page template of its own and use that page as the modal content. I actually tested that it works, but it is clearly more complicated (requires something like a blog post to explain).
The issue was that I was not including wp_head() and wp_footer() in the modal window html.
Adding these functions solved the enqueue issues.
Have anyone faced the same problem? I'm using iron router with template-level subscription.
For example. I have a long page "list of items" where I can scroll down. Then I click on one of the items somewhere at the bottom and next template renders lower than it should be.
Imagine that you search on youtube, scroll down results and then you click on a video snippet but it opens not from the top but lower so you need to scroll back to top to see the video.
I've tried to put "scroll to top" script into onRendered callback but this "jump" is recognizable with a naked eye. So it become even worse.
(update) I've found this solution for now:
Router.onBeforeAction(function() {
$(window).scrollTop(0);
this.next();
});
If you are using FlowRouter, you can easily add this on a triggersEnter route definition:
const publicRoutes = FlowRouter.group({
name: 'public',
triggersEnter: [() => {
window.scrollTo(0, 0);
}],
});
You should try this
meteor add okgrow:iron-router-autoscroll
Reference: https://github.com/okgrow/iron-router-autoscroll
Try throwing this into your code and if your using React throw it in the componentDidMount() function
window.scrollTo(0, 0);
I have a login screen which has an ExtJs form panel with two button Login and Reset.
Now, I'm trying to add another button below the lofin panel for a new user sign up.
But the button goes out to the bottom of the screen and a scroll bar appears making the page look ugly!
I have these in my login.jsp file:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/app.js"></script>
And this is my app.js file:
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.FormPanel({
labelWidth:100,
frame:true,
title:'Member Login',
defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Username',
name:'loginUsername',
allowBlank:false
},{
fieldLabel:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
}],
buttons: [{
text: 'New User Register',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: false,
url: 'registration.jsp'
})
}
},{
text: 'Login',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: true,
url: 'index.jsp'
})
}
},{
text: 'Reset',
scale: 'medium',
handler: function(){
login.getForm().reset();
}
}]
});
// This just creates a window to wrap the login form.
// The login object is passed to the items collection.
var win = new Ext.Window({
layout:'fit',
width:325,
height:175,
closable: false,
resizable: false,
plain: true,
border: false,
items: [login]
});
win.show();
});
I tried adding a new button using the Ext.Createat the end of the above one but it wouldn't work.
I tried having the code in a separate js file and adding the script tag with src to the button file along with the panel file in a separate script tag and even that failed.
Can anybody help me out to create a separate button and my desired position?
Any kind of help is appreciated. Thanks.
I've looked everywhere and I've tried everything I could, but I'm not able to come up with the answer.
NOTE: The code makes the question seem very long and big, but my main query and issue is at the top and bottom of the question.
Im assuming you dont want to add the new button INSIDE the login panel because otherwise you could just add another button to your buttons list anyway. To add a button under your login panel and YET inside the window, do the following steps;
Put your form panel as an item inside a container
Add your button as a second item in the container after your form pannel
Add the container to your window as you did the panel to the window
Voilah! You could also try giving your window and 'id' such as 'id=loginWindow' and then calling the code
Ext.getCmp('loginWindow').add(
{
xtype:button,
text:'Yay!'
}
);
If you need more code specific help, feel free to message me. I know your feel bro <3
I'm using the Galleria slideshow in WordPress 3.0 (inFocus 3.0 theme). Currently each slide in the slideshow has 2 captions - the title, and an alt text. The wp shortcode is: [image title="My title" alt="My alt text"]http://www.mywebsite.com/wp-content/uploads/myimage.jpg[/image]
Clicking the image launches a lightbox that displays the image title (bottom left) and a slide count(bottom right).
If possible I'd like to be able to display the title followed by the alt text eg. "My image title: My alt text". I know the div container I need to target is .galleria-lightbox-info, within which is .galleria-lightbox-title. I guess I need to add another div in there called .galleria-lightbox-alt? I can't seem to find any files (php, js, css etc) relating to galleria anywhere in my wordpress folders!
I know you posted this in 2012, but here is the answer to your question. I had to get this working for WCAG compliance. I am actually using ASP.NET so the <%=Name%> are place holders. Simple add this to the page where you are using the Galleria Tool. I have it scripted before the closing body tag. The big catch is the setTimeout, because you have to give the light-box time to load.
Galleria.ready(function () {
this.bind('image', function (e) {
// UNCOMMIT FOR TESTING // console.log(this); // the gallery scope
$('.galleria-image').find('img').attr('alt', '<%=Name%>');
});
this.bind('thumbnail', function (e) {
// add alt to thumbnails image
e.thumbTarget.alt = e.galleriaData.original.alt + " ThumbNail(s)";
});
$('.galleria-image').mouseup(function () {
setTimeout(function () {
$('div.galleria-lightbox-image').children().children().attr('alt', '<%=Name%>');
}, 5000);
});
$('.galleria-lightbox-prevholder').click(function () {
$('div.galleria-lightbox-image').children().children().attr('alt', '<%=Name%>');
});
$('.galleria-lightbox-nextholder').click(function () {
$('div.galleria-lightbox-image').children().children().attr('alt', '<%=Name%>');
});
});
Thanks for reading. I have some codes on my wordpress site, the first one adds an overlay over an image with a color, the article title and a link to go to the project. The second code adds an ajax pagination using jQuery.
The thing is that i have my projects with images and the jquery overlay owrking perfect, but when they click on the previous projects link that calls the ajax pagination, the jquery overlay stops working.
I have been trying different options, but maybe i'm not on the correct way to solve it. Does anyone has a clue?
Thanks in advance.
The codes:
// PORTFOLIO HOVER EFFECT
jQuery('ul.portfolio-thumbs li').hover(function(){
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
});
// POSTS NAVIGATION
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
I've found the solution in the same day and #BrockAdams helped me with the doubts. I'm putting here the code because it can be helpful for someone.
jQuery('ul.portfolio-thumbs li').live('hover', function(event){
if (event.type == 'mouseenter') {
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
} else {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
}
});
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
You can post answers to your own question.
And, you needed to use live()Doc on the hover, because the pagination presumably loads in new portfolio-thumbs lis.
Without the live(), these new lis would have no events attached to them (unless you re-called jQuery('ul.portfolio-thumbs li').hover after every pagination event).
Live is easier, and avoids the pitfall of having multiple copies of the same event-listener attached to an element.
And, yes, you can use both live() calls (or more) on the same page without problems.