I'm trying to build an admin settings page that will allow users to upload an image for their logo. I'm using this tutorial: http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/
I've changed it to add the scripts to enqueue rather than print as is now best practice. My code is as follows:
function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', get_stylesheet_directory_uri().'/bigg-options.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
if (isset($_GET['page']) && $_GET['page'] == 'bigg_options') {
add_action('admin_enqueue_scripts', 'my_admin_scripts');
add_action('admin_enqueue_styles', 'my_admin_styles');
}
And the Javascript:
jQuery(document).ready(function() {
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
tb_remove();
}
});
It works, and the media upload window opens. But instead of it being a thickbox popup in the middle of the screen, as is normal, it appears at the bottom of the page, off to the left and partially obscured. Here's a screen shot of where it goes:
Any ideas on why it is doing this, and how to get it to position properly?
Use &modal=true in your tb_show():
tb_show('', 'media-upload.php?type=image&modal=true');
I believe you'll also need to add in a width and height.
Related
I have 2 checkboxes. When 1 is selected then the other one is un-checked. I have used JS to accomplish this and it works fine. But then when I click save, the option that is un-checked does not get saved. If I actually un-check the checkbox with a mouse click then it does save. What's the best way to accomplish the above situation?
PHP Action and JS that I am using:
add_action( 'customize_controls_print_footer_scripts', 'my_customizer_custom_scripts' );
function my_customizer_custom_scripts() { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
/* This one shows/hides the an option when a checkbox is clicked. */
jQuery('#customize-control-checkbox1 input').click(function() {
if (jQuery('#customize-control-checkbox2 input:checked').val() !== undefined) {
jQuery('#customize-control-checkbox2 input').attr('checked', false);
}
});
jQuery('#customize-control-checkbox2 input').click(function() {
if (jQuery('#customize-control-checkbox1 input:checked').val() !== undefined) {
jQuery('#customize-control-checkbox1 input').attr('checked', false);
}
});
});
</script>
<?php
}
Figured it out have to use trigger('click') instead of the attr('checked', false).
So
jQuery('#customize-control-checkbox1 input').attr('checked', false);
Becomes
jQuery('#customize-control-checkbox1 input').trigger('click');
I've found the FlowRouter documentation for FlowRouter.reload(), but I've been unable to find specific code examples and can't get it working.
In my app, I have a template that uses some clever javascript (Isotope) to reposition elements as the page resizes. Sometimes the user navigates away, resizes the browser window, and then returns - to a messed up page that should refresh and redraw to reposition the elements for the re-sized window.
This is my route. How would I use FlowRouter.reload() to reload/refresh just the "work" template area? Alternatively, how would I use it to reload/refresh the whole layout template or window?
FlowRouter.route( '/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
});
In case anyone else comes here, this was solved with a great help from Hugh in the Meteor forum.
The solution did not use reload. Instead, it made use of Triggers in FlowRouter to check if the template was being reloaded, refresh it if so, and then stop once refreshed to prevent an endless loop.
Here is how it worked out.
// handle refreshing div on every load of div
let fireReload = false;
function reloadCheck(context, redirect, stop) {
if (fireReload) {
console.log('Hugh is Awesome and also reloading screen...');
FlowRouter.reload();
stop();
}
}
function routeCleanup() {
fireReload = !fireReload;
}
FlowRouter.route('/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
triggersEnter: [reloadCheck],
triggersExit: [routeCleanup]
});
I want to add a link named "Add to favorite" in the footer of my site. I don't find any module which can do it, so please is there any way to do this ?
Big Thanks
I will just explain what Pete already said.
You need to add this javascript code somehow to make your "Add to favorite" button functional:
<script type="text/javascript">
$(function() {
$('#bookmarkme').click(function() {
if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(document.title,window.location.href,'');
} else if(window.external && ('AddFavorite' in window.external)) { // IE Favorite
window.external.AddFavorite(location.href,document.title);
} else if(window.opera && window.print) { // Opera Hotlist
this.title=document.title;
return true;
} else { // webkit - safari/chrome
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
});
});
</script>
You need to create a link in a block or template:
Add to favorite
If you have your own theme, then put the javascript in a separate file and add it in the theme info file:
scripts[] = myFile.js
You can add it via a custom module also with durpal_add_js() function.
The easiest & NOT RECOMMENDED way is to add it in the block body itself, just after adding the link. You need to set formatting as "Full HTML" or "PHP" though for this to work.
I know that we can show a popup with widget or panel and the popup is around the extension icon and I know it's easy in the chrome extension development. Now I want to create a popup with javascript.
My idea is that when I click the icon button it will send a message(include the path of iframe's html page) to the content script.My code is:
nbBtn.addEventListener('click', function() {
var workers = tabs.activeTab.attach({
contentScriptFile: [ data.url("js/jquery-2.0.1.min.js"),
data.url("mycontent.js"),
data.url("js/tinybox2/packed.js"),
data.url("js/bootstrap.min.js"),
data.url("js/jquery.qrcode.min.js"),
data.url("js/2.5.3-crypto-sha1-hmac.js"),
data.url("js/moment.min.js"),
data.url("js/extension.utils.js")]
});
let content = encodeURIComponent(data.load("main.html"));
let url = "data:text/html;charset=utf-8," + content;
workers.postMessage(url);
}, false);
Then the content script show a popup with the message.The code is like that:
var showBox = function(){
if(document.getElementById(iframeId)==null){
console.log("Creating frame...");
TINY.box.show({iframe:popupSrc, width:lgmBoxWidth, height:lgmBoxHeight, top:window.innerHeight*0.1, animate:true});
}
else{
console.log("Frame already exist.");
}
}
self.on('message', function(message) {
popupSrc = message;
showBox();
});
But the iframe's html page(main.html) doesn't show normally because the js and css link(such as <link href="css/bootstrap-responsive.css" rel="stylesheet"> and <script src="js/jquery-2.0.1.min.js"></script>) in the iframe page can't work. So what can I do to solve this problem? Thanks.
I'm using the Wordpress Thickbox to try and retrun the value of the images that a user wants to select (when they click 'Insert into Post'), but the Thickbox is not closing, just showing as any empty white box.
The field $('#office-image input#image') exists, and Firebug is not reporitng any errors.
I'm not sure why this is not working, so any help is appriciated. Thanks.
window.send_to_editor = function(html){
var image_url = $('img', html).attr('src');
$('#office-image input#image').val(image_url);
tb_remove();
}
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function (html) {
var fileInput = jQuery(fileInput_id);
if (fileInput) {
fileurl = jQuery('img', html).attr('src');
jQuery(fileInput).val(fileurl);
tb_remove();
} else {
window.original_send_to_editor(html);
}
};
I am using above script for that and its working fine