I'm working on a plugin which incorporates an image gallery with TinyMCE.
Roughly it works like whenever I press on of the images (which are situated in a div just below my editor) the id of the clicked image will get picked up with ajax and sent to a function that injects this code into TinyMCE:
<img src="<?php echo $imgsrc[0]; ?>" width="<?php echo $imgsrc[1]; ?>">
It all works like it should, however I want to be able to track when this happens in the editor. I use onEvent like so:
ed.onEvent.add(function(ed, e) {
console.debug('Editor event occured: ' + e.target.nodeName);
});
It won't pick up any event at all, is there someway to make TinyMCE aware of what just happened?
DEMO
Thanks.
You do not get any output because you use setContent on the selection - not on the editor instance. And this is a big difference because there is no listener listening for this to fire.
Related
I'm using openseadragon to display deep zoom images, and my client wants there to be a button to download the image and a button to print the image, in addition to the regular nav items. There are no premade buttons for these functions in openseadragon, so I need to create the buttons manually. I have no idea how to do this, can anyone help me?
I need to:
(1) Add new buttons to the viewer nav
(2) Create functions to download and print the current image.
(1) We have similar functionality in our openseadragon (OSD) site. I made a custom toolbar including the default buttons and added our own buttons. The binding of custom actions are setup by simple giving OSD the id of the elements on init. The binding of the custom buttons was made 'manually'. The html code could look something like this:
<div id='viewerToolbar'>
<!-- Default buttons -->
<div class='toolbarItem' id='pv_home'></div>
<div class='toolbarItem' id='pv_zoom-in'></div>
<div class='toolbarItem' id='pv_zoom-out'></div>
<div class='toolbarItem' id='pv_full-page'></div>
<!-- custom actions -->
<div class='toolbarItem' id='customAction'>customAction</div>
<div class='toolbarItem' id='customAction2'>customAction2</div>
</div>
OSD setup something like this:
OpenSeadragon({
id: 'viewer',
tileSources: 'DZI_URL'
toolbar:'viewerToolbar',
zoomInButton: 'pv_zoom-in',
zoomOutButton: 'pv_zoom-out',
homeButton: 'pv_home',
fullPageButton: 'pv_full-page'
});
Custom button setup something like this (jQuery):
$( '#customAction' ).on( 'click', function() {
//Do custom action
});
$( '#customAction2' ).on( 'click', function() {
//Do custom action 2
});
(2) We created our own services to generate a PDF for download which the user also can print which. I think this is easier and gives a more reliable result than trying to print/download from OSD. You will probably run into issues like: printing is done from current zoom level; resolution issues; you will have to wait until tiles a fully loaded before creating png for downlaod etc.
I'm using Foundation 5 & WordPress.
I am trying to launch a second Reveal Modal from an AJAX loaded Reveal Modal. It's not working for me.
I have two divs at the bottom of my page:
<div id="industryModal" class="reveal-modal" data-reveal></div>
<div id="portfolioModal" class="reveal-modal" data-reveal></div>
I launch the first modal with content from another page (so far so good):
<a id="business-services-link" href="/approach/investment-strategy/industry/business-services" data-reveal-id="industryModal" data-reveal-ajax="true">
First Reveal Modal works correctly. I then try to launch a second modal (from the first AJAX loaded content):
<a href="<?php the_permalink(); ?>" data-reveal-id="portfolioModal" data-reveal-ajax="true">
Now I am simply taken to the new page. The content is not loaded into a second modal. I've tried adding the #portfolioModal div on the original page, and on the page loaded into the first modal. In neither case is the third page loaded into the second modal.
Any idea what I'm doing wrong?
You need to call the second modal using javascript on ajax returned modal page.
Try this:
Add the second modal wrapper somewhere in your document first (you cannot reuse the currently opened modal):
<div id="modal-anotherPage" class="reveal-modal auto_width medium" data-reveal></div>
Then set event handler for links inside your current modal:
$('a.linksinsideyourmodal').click(function(e) {
$('#modal-anotherPage').foundation('reveal', 'open', {
url: $(this).attr('href')
});
return false;
});
Note that this only works with foundation version 5.2.0, the one before it somehow doesn't want to return ajax content on second modal.
Your problem might be that
<?php the_permalink(); ?>
returns an address with "http://".
Reveal wont use that address correctly. Reveal will only use ajax with relative URLs, not absolute ones, and it will only work when referencing files on the same server.
Has anyone used a progress indicator on an async remote validator using knockout.validation?
I'm doing a jQuery AJAX get to determine if a username is unique, and would like to show a progress indicator or spinner while this is happening.
I'm not sure if this is possible out of the box, but if there is any guidance on how to do this or if anyone has done this already and is willing to share their experience, that would be great :)
you're in luck. there is an isValidating function that gets attached to observables so you can track when the async rule is running on it.
in your markup, you could then just put some spinner image or whatever like this:
<div data-bind="visible: someObservable.isValidating()">
<img src="spinner.gif"/>
</div>
Normally a webpage load images is like scrolling down. I don't want the visitor's of my site to see it. I am looking for a script that will load my webpage and then it will show completely. I have already put a fadeIn effect but the images loading is scrolling and also my background image.
Questions:
Is there a script for that?
What is the best script to use? PHP or JavaScript?
this is one method, http://developer.yahoo.com/yui/examples/container/panel-loading.html
basically you can wrap the content in a hidden div, then unhide it in the body's onload event.
You could overlay your page with a "please wait..." div, and fade that out when the page is loaded. You could use JQuery's ready event to hide the div.
The downside of this is that users with JavaScript turned off would never see the page, but only the "please wait.." message.
To make it work for users with JavaScript turned as well, you would have to make the "please wait..." div visible using Javascript at a very early stage of the document's loading, which is very tricky to achieve. It might work if you put a <script> tag after the "please wait" div but before the actual page's content.
or you can add on page header small copy's of this images.. 1x1 px and fade it or hide or z-index -100/ browser will download this full-size images
Use this code:
<body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'block';">
<div id="loading">Some loading text or icon goes here...</div>
<div id="content" style="display:none;">Main content goes here...</div>
I'm trying to change my index.html to show a modal window if the referer to my site == (eg, if they come from Google, show a "Welcome Googler" dialog box with an image inside of it).
I'm using FancyBox, but I'm not married to it.
Any suggestions on how to code it? I'm a C++ programmer -- Javascript isn't my forte, so straight examples would be very much appreciated.
Thanks in advance.
You're going to need a couple things: document.referrer, and jQuery UI. jQuery UI makes dialog boxes trivially easy.
You can find an in depth example from the documentation page but for the most part, this is what you are going to need:
<script type="javascript/text">
if (document.referrer.indexOf('google.com') > -1){
$("#my-dialog").dialog("open");
}
// this is the jquery code to set up the dialog box
$(function() {
// options would go inside the dialog() function
$("#dialog").dialog();
});
</script>
Needed HTML:
<div id="my-dialog">
This is where things get displayed
</div>