On a webpage, I have an image. When I mouseover it, a hidden div pops up at cursor location with information on that image. Clicking on that image, creates another one in another div. The new image also share the same div pop up when mouseover.
For the original image I use jquery.
$("#" + abys).on("mouseover", function(e){
$("#" + abys + "_tooltip").css({
left: e.pageX,
top: e.pageY
}).show();
});
$("#" + abys).on("mouseout", function(e){
$("#" + abys + "_tooltip").hide();
});
For the new image when clicked, I use pure javascript.
var itemDiv = document.getElementById("items_div");
var newImg = document.createElement("img");
newImg.src = "/items_img/" + abys + ".png";
newImg.id = abys + "_slot";
itemDiv.appendChild(newImg);
appendNum++;
console.log(appendNum);
newImg.onclick = function(){
newImg.parentNode.removeChild(newImg);
appendNum--;
console.log(appendNum);
}
newImg.onmouseover = function(e){
abysTooltip.style.display = "block";
abysTooltip.style.top = e.pageX;
abysTooltip.style.left = e.pageY;
}
CSS for the popup div.
.item_tooltip_div {
border:1px solid;
padding:20px;
width:400px;
display:none;
position:absolute;
z-index:10;
background-color:rgb(0,0,0);
pointer-events:none;
}
The issue I am running into is that when I mouseover the new image, the tooltip shows up at the original image location, and not my mouse cursor position.
Solved it by using jquery for both instances.
For some reason, jquery .css() was blocking javascript's .style. When hovering over the original image, the tooltip's top and left position is already set. When hovering over the new image, the top and left position did not change.
Related
Is there any trick to displaying url on bottom left of page by Javascript ?
Example my link element is :
<div data-link="http://stackoverflow.com"></div>
JS :
$(document).on('click','[data-link]',function(){
var url = $(this).attr('data-link');
window.open(url,'_blank');
}).on('mouseover','[data-link]',function(){
var a = document.createElement('a');
a.href = $(this).attr('data-link');
$(a).trigger('mouseover');
// Nothing showing
});
Possible ? Any trick ?
As far as I know this is not possible with Javascript, this is a browser-specific function that only triggers when your mouse hovers over a link. If you trigger the .hover() with JS, it "only" applies the CSS-Rules and fires the JS-Functions.
You could create an absolute positioned div with the link-tag and show this when you hover over an element, but it could cause problems when you hover over an actual A-Tag, then your div will get hidden under the browser-field.
Is this what you are looking for?
$('a').mouseover(function() {
var url = $(this).attr('href');
var style = "position: fixed; left: 0; bottom: 0; z-index: 1000000;";
$('body').append("<b id='urlDisplay' style='" + style + "'>" + url + "</b>");
});
$('a').mouseout(function() { $('#urlDisplay').remove(); });
Make it prettier by putting the css elsewhere!
I'm trying to fade out one image, then fade in another image in the same spot.
So far I've got this fiddle, but you can see it changes the image before the .fadeOut() function finishes, when changing image via clicking thumbs. I've read that jQuery doesn't run sequentially as standard (which my code is assuming it does), so I tried adding in the completed function, like so:
$('#image').fadeOut('fast', function() {
$('#image').html('<img src="' + image + '" class="image"/>');
$('#image').fadeIn('fast');
});
However my issue is still present. What should I do to fix this?
I wouldn't destroy and recreate the elements; I'd just update the attributes. I'd also include a .stop(true, true) to cancel any previous animation and jump straight to the end before starting the fadeout, in case someone clicks quickly.
var images = [
'http://i.stack.imgur.com/uClcV.jpg?s=328&g=1',
'https://www.gravatar.com/avatar/d050da3cf82fdf6cfa431358fee9a397?s=128&d=identicon&r=PG&f=1',
'https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=128&d=identicon&r=PG'
];
var current = 0;
updateImage(images[current], images[current]);
function updateImage(image, title) {
var img = $('#image');
img.stop(true, true).fadeOut('fast', function() {
img.find('a').attr('href', image).attr('title', title);
img.find('img').attr('src', image);
img.fadeIn('fast');
});
}
$("#next").click(function() {
current = (current + 1) % images.length;
updateImage(images[current], images[current]);
});
<input type="button" id="next" value="Next">
<div id="image">
<a>
<img style="height: 128px; width: 128px"><!-- Never do that, but for a demo, it's okay -->
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Is expected result that #slider not fade to appearance of empty
background during image transitions ?
Fades to either white, ready for the new image to fade in, or a crossfade - either would be acceptable
Try setting #slider width , height to expected img width, height; setting background-color to #000
css
#slider {
width:500px;
height:505px;
background-color:#000;
}
js
//clicking thumbnails
$(".image").click(function () {
var image = $(this).attr("rel"); //getting the rel tag from the a tag
var title = $(this).attr("data-title"); //data title from a tag
$('#image').fadeOut('fast', function() { //fades out last image
$('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '">'
+ '<img src="' + image + '" class="image"/></a>')
.fadeIn('fast');
})
jsfiddle http://jsfiddle.net/bmu43fm7/13/
I have multiple images on my page which are getting created dynamically within a div when user upload the images. Each image is having its unique parent div. When user wants to delete an image, I want a delete confirmation within the limits of that particular div only (not over full body) which currently I am unable to achieve. Currently I do have like this - .
where as I want to show this pop up message only over that particular image, something like this -
Thanks.
By using JavaScript we can achieve it.
HTML Structure
<div class="img-wrapper">
<img src="/image.png">
<span class="edit" onclick="myFunction();">edit</span>
<div class="popup-option"></div>
</div>
JavaScript function
function myFunction(id){
var htm = "<div class='popup'>"+
"<button>Delete</button>"+
"<button>Cancel</button>"+
"</div>";
$('.popup-option').append(htm);
}
CSS
.img-wrapper{ /* make main wrapper position relative and add your style */
position: relative;
}
.popup{ /* popup will cover full width of that particular item*/
position : absolute;
left: 0;
right:0;
width :100%;
height:100%;
z-index: 999;
background:rgba(0,0,0,.8);
}
Try something like
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
To get the position of the image then show the pop up in the same coords
I'm trying to make a online map for a game. But I have problems with moving around the map...
This code works only if I set the container (div with map image)
to height: 6000px; and width:6000px;
But I must use height: 100%; width: 100%; to get "background-size: cover;" working to have the map "zoomed out"/"fit to the screen" for the best look imo
$(document).ready(function()
{
var
clicked,
clickY
;
$(document).on(
{
'mousemove': function(e) {clicked && updateScrollPos(e);},
'mousedown': function(e)
{
clicked = true;
clickY = e.pageY;
clickX = e.pageX;
},
'mouseup': function()
{
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e)
{
$('html').css('cursor', 'all-scroll');
$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
$(window).scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
}
});
This is currently how it looks: http://5.231.49.167/map/
Use "google inspect element" to test out what I mean. (Change the 100%'s to 6000px in #container)
The problem is that when you set a 100% height value it take the longitud from the parent container. If the conatiner is the body tag it ajustment to the size of the content it self that could be very samll. You need to set up the size to a specifycally size you can use the window size for example.
I am trying to create an effect where when mouse is moved over the image it should display a translucent black box on the image and display some details on top. These div's contain images and the problem is this mouseover and mouseout event are creating flickering of the black translucent div added on top.
Here is the code,
function addfocus(elem)
{
// getting dimensions of current div.
var currelem = document.getElementById(elem);
var left = currelem.offsetLeft;
var top = currelem.offsetTop;
var w = currelem.offsetWidth;
var h = currelem.offsetHeight;
// create a new div to match up these dimensions.
var ddiv = document.createElement("div");
ddiv.style.position = "absolute";
ddiv.style.top = top + "px";
ddiv.style.left = left + "px";
ddiv.style.width = w + "px";
ddiv.style.height = h + "px";
ddiv.style.backgroundColor= "rgba(0,0,0,0.5)";
document.body.appendChild(ddiv);
}
function rmvfoucs(elem)
{
document.body.removeChild(document.getElementById(elem));
}
When there is only text in the div, the flickering is not seen. Only when the image is included in the div, do I see the flickering.
Please help if you have any solution to this.
Thanks.
Your problem is that when you add your overlay it causes a mouseout event which removes the overlay. So when you move the mouse you constantly adds and removes the overlay.
But I'm not sure why you use Javascript for this. It can be accomplished in CSS, using :hover.
<div class="item">
<div class="info">...</div>
<img src="..." />
</div>
Show your overlay on hover
.info {
display:none;
}
.item:hover .info {
display:block;
}
See example: http://jsfiddle.net/jj8X6/