We have a viewer with coded on openseadragon. It has zoomin zoomout home and rotate functions. We also add some custom transparent canvas on this viewer for draw some shapes on that picture. They works fine but we cannot drag that pictures and also cannot get div coordinates that picture on these multi canvas.
How can we reach mouse move or click and drag events on this multi canvas.
Thanks all for helping.
Example code here:
<div class="container">
<div class="area">
<div id="viewerImage1"
class="openseadragon">
<script type="text/javascript">
var meta = null;
var viewer = OpenSeadragon({
id: "viewerImage1",
prefixUrl: "/openseadragon/images/",
tileSources: {
type: 'image',
url: '/openseadragon/images/example-images/sample.jpg'
}
});
</script>
</div>
<canvas id="canvasDrawArea01" class="canvas" width="300" height="250" style="cursor: move;"></canvas>
<canvas id="canvasDrawArea02" class="canvas" width="300" height="250" style="cursor: move;"></canvas>
</div>
</div>
I recommend trying the canvas overlay plugin:
https://github.com/altert/OpenSeadragonCanvasOverlay
… it should help with these issues. Let me know how it goes!
Related
I am using an iframe to display a php page. I used a script within the iframe that sizes it to the documents height. This allows the user to scroll the main window without having dual scroll bars on the page. I am using a bootstrap modal within the iframe to display an image. The issue is that when clicked the modal popup is displayed at the top center of the iframe. However if the user had to scroll down the list prior to clicking the 'show image' button, they wont find the popup unless they know to scroll all the way back to the top.
I have searched relentlessly for a solution to this within this site and google with no clear understandable answer. Hoping one of you experts can enlighten me.
Here is my modal code:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<img id="img" src="" width="100%" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the script:
<script>
$(document).on('click', '.getinfoBtn', function(e){
var image=$(this).attr('data-image');
$('#img').attr('src', image);
return false;
});
</script>
Here is the iframe script used to get height of content to be displayed:
<iframe id="form-iframe" src="rooz/on-tap.php" style="margin-top:20px; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>
<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>
As stated previously, this code works but pops up the image at the top center of the iframe. I would really like it to either pop up near the button clicked or at least visible.
In my case, using Bootstrap 3.4, what I could make is to catch the show.bs.modal event and setup its position according the click. To avoid the glitch effect, I hide the modal and show it after move it.
I didn't find the way to parametrize the modal in its creation to set it up, instead of enforce it.
$('#theModalDiv').on('show.bs.modal', function (event) {
const modalWidth = 600; // Because #attendeesModal has no lg nor sm size
// and by default, bootstrap modals has 600px width
const target = $(event.relatedTarget);
let newLeft = (document.getElementById('iframe-content-body').offsetWidth/2) - (modalWidth); // Centering the modal
const modal = $(this); // Getting modal instance
modal.css('opacity', '0'); // Hidding modal
// After some time...
setTimeout(() => {
modal.offset({
// ...setting new modal position
...target.offset(),
left: newLeft,
});
// ...setting same top position as the click
$('.modal-dialog').css('margin-top', 0);
// ...displaying again the modal
modal.css('opacity', '1');
}, 500); // This value was taken with rule of thumb
});
I hope someone can find this usefull.
The following code sample does not smoothly scroll in Chrome 67; when you use a mouse to grab the scrollbar, you will notice the scrollbar drag gets aborted every 1 second when the timer updates the text in the title.
<html><body style="margin:0pt;">
<div style="height:100vh;overflow:hidden;display:grid;grid-template-areas:'topbar' 'body'">
<div style="grid-area:topbar;background-color:lightblue">
This is a fixed top bar with ticker: <span id="ticker">0</span>
</div>
<div style="grid-area:body;font-size:200pt;overflow:auto;">
Try and scroll down! a a a a a a a a a a a a a a a a a
</div>
</div>
<script type="text/javascript">
setInterval(function(){
document.getElementById("ticker").innerHTML = Number(document.getElementById("ticker").innerHTML) + 1;
}, 1000);
</script>
</body></html>
It works as expected in Edge.
Is there a solution to this problem?
How can i trigger a Fade out of a CSS-Filter when left-clicking or scrolling?
The Filter should fade out (from Black/White to Colorful when clicking on a button)
You can learn more about it
.fadeOut()
Try This Example
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
Script
<script>$( "#clickme" ).click(function() {
$( "#book" ).fadeOut( "slow", function() {
// Animation complete.
});
});</script>
Can any one help me how to disappear the images automatically once the page is loaded using css.
$(document).ready(function(){
$('.everine-affilate-no-image').fadeOut('1000');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class='everine-affilate-no-image' src="http://www.washingtonbeerblog.com/wp-content/uploads/2012/10/crash_test1.jpg">
<img src="http://shirtoid.com/wp-content/uploads/2010/03/you-big-dummy.jpg">
<img class='everine-affilate-no-image' src="http://prevenblog.com/wp-content/uploads/Dummy.jpg">
<img src="http://uvamagazine.org/images/uploads/2009/0901/0901_RD_dummy.jpg">
I am having trouble making my website have a header, an embedded swf in the middle and then a footer. Every time it ends up making my page have to do a vertical scroll by the size of the header+footer. I am using swfObject and embedding the swf at 100% width and 100% height.
Does anyone know how to setup the correct ordering of div's and css to make the swf scale to the empty space in between the header and footer?
I am trying to use the following format
<div id="container">
<div id="header">
<div id="content"> SWF would go here
<div id="footer">
</div> end container
Is this what you are looking...? :O
<div id="container">
<div id="header"> <p align="center"> Header</p> </div>
<div id="content">
<object width="400" height="80%"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="100%" height="80%"></embed>
</object>
</div>
<div id="footer"> <p align="center"> Footer</p> </div>
or
You can use javascript method.
First findout the spacing between header and footer, and then resize the flash. The following script may help you.
<script>
function myFunction()
{
// get the heights //
var containerHeight = document.getElementById("container").offsetHeight;
var headerHeight = document.getElementById("header").offsetHeight;
var footerHeight = document.getElementById("footer").offsetHeight;
// get the vertical spacing //
var height_of_flash = containerHeight-(headerHeight+footerHeight);
// set the heights //
var e1 = document.getElementById("object_swf");
e1.style.height = height_of_flash;
}
</script>