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.
Related
I am trying to use single page mobile site. Basically I have a listview inside container and click event for list class.
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true">
<li class="listbtn">
</li>
</ul><!-- /listview -->
</div><!-- /content -->
I have a script for firing "listbtn" click event
$(".listbrn").click(function(){
});
this is working fine when page loads for first time
On another event, I am pulling data and replacing the whole "listview" with new items.
After DOM manipulation is successful, I have used
$('.ui-page-active .ui-listview').listview('refresh');
$.mobile.activePage.trigger('create');
as suggested on other threads.
Up to this point everything is smooth, page refreshes with new items and CSS applied nicely as expected.
Only problem is "listbtn" click event is not firing after that.
While looking for answers, I found this thread and tried to use live as suggested but after changing to live page won't load at all. Loading gif images spins forever.
Any suggestion or ideas?
jQuery 2.0
jQM 1.4.2
Thanks
You need to delegate event to dynamically added elements.
Another note, you don't need $.mobile.activePage.trigger('create');, .listview("refresh") is enough to re-enhance list-view. Not to mention that both $.mobile.activePage as well as .trigger('create') are deprecated and will be removed on jQM 1.5.
$(document).on("click", ".listbtn", function () {
/* code */
});
Demo
I want to add multizoom.js in my AngularJS project.
This is my index page:
<body>
<img id="zoom" ng-src="example.jpg" class="example ng-class">
<div ng-view> </div>
</body>
and this is detail page:
<img id="zoom" ng-src="example.jpg" class="example ng-class">
My problem is jQuery multizoom plugin doesn't zoom image which is in AngularJS's ng-view part.
If image is not in ng-view part multizoom works fine.
This is because I presume you are initialising the multizoom behaviour on the DOM ready event, using $(function() { /* ...(multizoom init code)... */ }); or $(document).ready(function() { /* ...(multizoom init code)... */. If so, that will only be run once, and likely before the details page is loaded into the <div ng-view></div>. As a consequence, it will not be able to find the image on that page it is searching for as it hasn't been loaded in yet.
Instead, what you need to do is initialise your multizoom functionality whenever the ng-view content is loaded, using the event that is emitted, like so:
// (inside some function with $rootScope available)
$rootScope.$on('$viewContentLoaded', function() {
// ... (multiview init code here) ...
});
Does that make sense?
As a small side note, don't have multiple elements with the same ID, it's not a good idea. Instead, use a class to signify the images you want to apply the multizoom plugin to.
We have our custom button that is ASP.NET custom server control. We use it on all our pages for action buttons (< NS:OurButton ID='btn' runat="server" Text="Search"/ >).
Now we want to use that button to open our custom search form to filter the records in jqGrid.
Our business requirement that the search button must be a part of jqGrid pager.
How I can do it? I tried to search google and wiki help for jqGrid, but didn't found any way how to add that custom search button to the jqGrid pager.
If it's matters, the button rendered to the client in that markup:
<div id="btn" class="OurCustomButton">
<div class="LeftSide"></div>
<div class="ButtonContent">Search</div>
<div class="RightSide"></div>
</div>
Or maybe it's possible to create totally my own custom pager, with my own design and buttons and then to tell the jqGrid to use it's controls as triggers or to trigger events on my own with correct parameters?
One solution I can think of is to use jQuery's insertBefore()(or insertAfter) and have the html for your button inserted on the document.ready() event.
The code could be:
jQuery(document).ready(function(){
$('<div class="ButtonContent">Search</div>').insertBefore('.RightSide');
});
I am using Joomla 1.5.22 with Mootools 1.1. I have a module with a form contained in a hidden div that I want to open in Joomla's built in modal box. The problem I have is that when I click the link the form opens in the modal box, but it also opens the div in the module on the page.
HTML:
<div id="moduleBox">
<div id="clickMeButton"><a id="formClick" class="modal" href="#hiddenForm">Click me</a></div>
<div id="hiddenForm">
form code goes here
</div>
</div>
Javascript:
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('hiddenForm').setStyle('display','block');
});
});
So how do I get the form to only show up in the modal box?
You can see what I am talking about here - http://www.internextion.com/
It's the Call Back Module. I already added the handler: 'adopt' as suggested below, now the result is a little different. The target div still shows up below the link, but now the modal window contains the link rather than the target.
I think this uses Harald's SqueezeBox - in which case, you are looking at the following scenarios:
find the target div and CLONE it to insert into the modal box.
find the target div and ADOPT it into the modal box.
you are seeing the first (default) case. to achieve the second effect, add:
handler: 'adopt'
to the instantiation options. more here: http://digitarald.de/project/squeezebox/1-1/showcase/get-elements/
Option 1:
If you look at the html code (in firebug) for the overlay div you will see that it makes a "copy" of html and places inside the overlay container with id="sbox-content". In theory if you add a CSS like below +/-, it will hide the link and display everything else. This might be the simplest and easiest solution.
div#sbox-content > a#formClick{
display: none;
}
Option 2:
If option 1 does not work for some reason, you can try playing with CSS and hide the link when the Modal box opens and then making it visible when it closes.
Modify the JS to add a class instead of modifying the style.
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('formClick').addClass('hidden');
$('hiddenForm').setStyle('display','block');
});
});
Load additional CSS that will make the link invisible
div#clickMeButton.hidden {
display: none;
}
Then you will have to overload closing event and make the link visible...
Ok, so I finally got it to work with a combination of the other answers given. First, I removed the javascript click event to make the form appear, that solved the issue of the form showing up below the link. Next, I added new CSS for the hiddenForm ID within the modal box and set that to display:block. It appears that the default handler behavior (in Joomla at least) is to adopt the content since I have removed the handler: 'adopt' and it is still adopting the content.
I knew it was something simple, thanks for the help!
BTW - the link is still live, you can see the correct behavior on the demo site. Now all I need to do is add some fancy AJAX form submission and it will be ready for prime time.
All,
I am using JQuery UI Nested tabs. Consider the structure like this: There are 2 Main tabs: Animals, Birds. Under Animals, there are two tabs "Cats", "Dogs". Both the tabs "Cats" and "Dogs" should be loaded via AJAX when selected.. So, the code for them is something like this:
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#tabs-loading-message").show();
$('#fragment-1').tabs({cache:false, spinner:''});
});
</script>
The issue is, I want to maintain a common div to load the AJAX urls. Ex: When you click on Cats or Dogs, the content for those tabs, should go into "<div id='commonDiv'></div> instead of going into "cats" div and "dogs" div.
The loading should be reusable, in the sense, if call reload("Dogs") from anywhere inside "dogs" tab, it should reload the "dogs" tab content.
How can I achieve this?
Just looking at the docs, nothings pops out as to how to do that. It's easy enough to not use the tabs widget though, and define your own click events for basic tab functionality.
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
<div id="commonDiv"></div>
</div>
$(document).ready(function(){
$('#fragment-1 a').click(function(){
$('#commonDiv').load($(this).attr('href'));
});
}):
You would need to define your own css styles though, as it looks like the tabs widget does that for you.
Not sure if I understtod you well; as far as I know if you give all your tabs the same tittle atribute, the UI will rehuse the same DIV to load the content, instead of creating a new one for every tab and hide or show as required. Is a good thing since the browser doesn't get so heavy weighted with a lot of DIVS loaded but hidden ...