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.
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 have just started with Dojo widgets. Recently, I did this Dijit Horizontal Slider Sample,and I have been wondering how to make a tooltip follow the slider handle with the current slider value as the tooltip content.
I have tried the same but am facing two issues:
One, the tooltip appears at the end of the slider rather than constantly hovering on the slider handle.
Two, the tooltip displays a value only when I stop sliding rather than changing seamlessly.
How to overcome these?
If you want the tooltip to move with the slider, you have to find a way to open it from the slider handle, not from the entire horizontal slider widget. I do not know if the actual slider you move with the mouse is it's own widget or not. From the declarative sample online the HTML for the handle looks like this
<div data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider" aria-valuemin="-10" aria-valuemax="10" tabindex="0" aria-valuenow="4" style="position: absolute;"></div>
So you can try something like the following, if you can get a reference to the sliderHandle object.
/*
* Create the tooltip dialog that you want to show (I use tooltip dialog,
* but you can do the same with basic tooltip)
*/
var myTooltipDialogbase = new ttdialog({
id: 'myTooltipDialogBase',
style: "width: 275px;"
});
Then in your event handler (in this example right mouse click) you open the popup
/**
* On right mouse click, opens the tooltip dialog
*/
on(sliderHandle, 'contextmenu', function (event) {
popup.open({
parent: sliderHandle,
popup: myTooltipDialogbase,
around: sliderHandle.domNode
});
});
EDIT:
For your second question, you can use the slider property onChange() to do something each time the value of the slider changes. You must set intermediateChanges=true so onChange is called when sliding. In your case, in onChange(), if you can get a reference to the tooltip, then change the value of one of the tooltip objects for every value change of the slider.
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',
});
});
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
When setting up dojo connections to onmouseover and onmouseout, and then adding content on mouseover, dojo fires the onmouseout event at once, since there is new content. Example:
dojo.query(".star").parent().connect("onmouseover", function() {
dojo.query("span", this).addContent("<img src='star-hover.jpg'>");
}).connect("onmouseout", function() {
dojo.destroy(dojo.query("img", this)[0]);
});
The parent() is a <td>, and the .star is a span. I want to add the hover image whenever the user hovers the table cell. It works as long as the cursor doesn't hover the image, because that will result in some serious blinking. Is this deliberate? And is there a way around it?
Edit: Just tried out something similar with jQuery, and it works as expected (at least as I expected it to work.)
$(".star").parent().hover(function() {
$("span", this).append("<img src='star-hover.jpg'>");
}, function() {
$("img", this).remove();
});
This will show the image when hovering, and remove only when moving the cursor outside the table cell.
The reason it works with jQuery in your example is because .hover uses the normalized onmouseenter/onmouseleave events. If you were to connect to those, it would work in Dojo as expected. Also, a simulation of .hover for Dojo would be:
dojo.NodeList.prototype.hover = function(over, out){
return this.onmouseenter(over).onmouseleave(out || over);
}
Then you'd just:
dojo.query("...").hover(function(e){ .. }, function(e){ .. });
The differences between mouseeneter and mouseover are why you are seeing the behavior of an immediate onmouseout firing.