I'm working on an Adobe Air application. It's base on html and js. So there are img, input and textarea tags, which will show a native menu when right-click. For example, right click on the img tag, It shows a native menu with save image menu-item.
I've tried using normal javascript methods, like event.preventDefault(), and It doesn't work at all.
So how to prevent those native menus?
I found it very easy to solve this problem after 7 months. It's something about contextmenu.
Example:
Here is an <img> now.
<img src="https://www.google.com/images/srpr/logo4w.png">
Add a contextmenu event listener for it, and prevent its default bebaviour.
<img id="a" src="https://www.google.com/images/srpr/logo4w.png" >
<script>
$('#a').on('contextmenu', function(e) {
e.preventDefault();
e.stopPropagation();
});
</script>
Then the default menu disappears.
Demo jsfiddle.net
Related
I have added magnific popup gallery in my web page, everything works great. Just I want to know, is there any possibility add bullets in popup gallery below image in .mfp-bottom-bar.
The gallery example on Magnific's demo/homepage shows at least one way to achieve this, by feeding some markup into the return value of a function in the titleSrc option in the image option of the popup. In that example (from the page's source):
$('.popup-gallery').magnificPopup({
...
image: {
...
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
}
}
});
The above case appends a <small> element to the current link's title attribute value/text, but you could presumably return some other <ul><li>...</li></ul> markup, or use jQuery to grab some existing <ul> in the markup (if relative to the current item, then presumably using item.el to help locate it).
I am using a dialog from Vue Material (https://vuematerial.io/components/dialog). If I follow the link and open the first custom dialog on the page, it moves to the top left of my screen, and I can only see a portion of the dialog. The same happens with the dialogs that I have in my Vue app, and no CSS seems to bring it to the center of my screen. I am trying to show an interactive map in a dialog. Is there any way to keep my Vue dialog in the center of the browser window so I could actually see all of it and use it?
My dialog has the following markup:
<md-dialog :md-active.sync="showDialog">
<md-dialog-title>Map</md-dialog-title>
<interactivemap :lat="lat" :lon="lon" />
<md-dialog-actions>
<md-button class="md-primary" #click="showDialog = false">Close</md-button>
</md-dialog-actions>
</md-dialog>
It works the same in my browser: both at the docs and code sandbox.
When it's off the screen, the inner div (with the class .md-dialog > .md-dialog-container) has transform: translate(-50%,-50%) scale(1);, pushing it off.
Edit: yea, every dialog box has this CSS bug. Try overriding it and/or notify the devs.
.md-dialog-container {
transform: translate(0%,0%) scale(1) !important;
}
Modified the answer given by https://stackoverflow.com/users/13602136/zed, and my dialogue now sits nicely in the centre of my screen
I'm trying to display an image on mouseover of another image. I'm using dijit/Tooltip for that. Problem is, the image is not displaying on the first mouseover, it always appears on the second time onwards. The images are dynamically displayed and have given a dynamic id.
<c:forEach items="${model.images}" var="image" varStatus="status">
<img src="${image.url}" height="50" onmouseover="showImage('${image.id}')" id="image${image.id}" />
<c:forEach>
<script>
function showImage(name) {
require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: ["image"+name],
label: "<img src='/images/"+name+"'/>"
});
});
};
</script>
With dijit/Tooltip there is no need for an onmouseover function. With your code the first mouseover only sets up the Tooltip. The second time the Tooltip is attached and so it is displayed (and showImage() runs again, which isn't optimal).
You need to create the Tooltip when the image is added to the dom. You can refer to the dijit/Tooltip guide for an example on how to set up a Tooltip declaratively. Alternatively you can convert your code to add the images and their tooltips programmatically.
I am about to use CKEditor for post functionality. But I don't need a toolbar for the post functionality. I need to provide a preview of the post that should be HTML version, preview functionality should be done by onkeyup/any button. And preview section will be below the CKEditor.
Image http://grab.by/H5Sk
The mail purpose is to provide a formatted post to the user. If I am using textarea then it returns a string and I can not display as user entered in textarea.
You should use editor#change and editor#contentDom events. You should not disable the toolbar like
CKEDITOR.replace('editor1', {toolbar: []})
because it will disallow any type type of the content in your editor as the toolbar corresponds with Advanced Content Filter, unless you disable it by setting config.allowedContent = true, which is not recommended.
See the JSFiddle.
HTML
<textarea id="editor">
<p>Hello world! This is some link.</p>
<p>And there is some <s>deleted</s> text.</p>
</textarea>
<div id="preview"></div>
JS
var preview = CKEDITOR.document.getById( 'preview' );
function syncPreview() {
preview.setHtml( editor.getData() );
}
var editor = CKEDITOR.replace( 'editor', {
on: {
// Synchronize the preview on user action that changes the content.
change: syncPreview,
// Synchronize the preview when the new data is set.
contentDom: syncPreview
}
} );
CSS
/* Hide the toolbar with CSS */
.cke_top { display: none !important }
For ckeditor:
Test
CKEDITOR.replace('editor1', {toolbar: []});
Another solution:
This is What Stackoverflow is using
I'm using the ekko lightbox along with bootstrap modal to create a gallery. However I cant seem to get the image navigation controls to appear/work like they do on this example: http://ashleydw.github.io/lightbox/#image-gallery
As you can see when you hover over an image you get navigation control arrows. I've tried adding the data attribute data-gallery="multiimages" to my images but this hasnt helped.
You can see my development code here: http://agtdesigns.co.uk/bootstrap-gallery/
Any help appreciated,
tia
I had the same problem,
see https://github.com/ashleydw/lightbox/issues/33 for the answer.
In summary, you need to add a wrapping div, eg
<div class="gallery">
Then as JS code
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
always_show_close: true,
gallery_parent_selector: '.gallery',
});
});