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/
Related
Trying to create an animated element (div) appear on background on page load and then on scroll (the first animation disappears and the second slides in).
As a beginner, I managed to create one simple, choppy animation (code below) but I can't figure out how to make it smooth, how to make it disappear on scroll down and how to place another animation instead of this one.
Although there are many questions that I need to find answers to,
the one i'm asking is -
How do I use the animation again in a different place ? Let's say vh height is 700px so after user scrolled those 700px I want the animation to slide in again from the top right corner.
function bgAnimation () {
let element = document.getElementById("bg");
let pos = -800;
let id = setInterval(frame, 1);
function frame () {
if (pos == -300) {clearInterval(id);} else {
pos++;
element.style.right = pos + 'px';
element.style.top = pos + 'px';
element.style.paddingLeft = '150px';
}
}
}
window.addEventListener("load", bgAnimation);
<body id="body">
<section>
<div id="cvs">
<div id="bg"></div>
</div>
</section>
</body>
I created a sliding list of divs using the following code :
<div class="row">
<img class="back-arrow">
<div class="hide-extra">
<div class="tile-container">
<div class="tile"></div>
<!-- More Divs -->
</div>
</div>
<img class="next-arrow">
</div>
The overflow is supposed to stay hidden and the divs slide to show the next/ previous divs when the corresponding arrows are clicked. Here's a simplified version of my code to move forward a tile:
function nextTile() {
var tileWidth = /*Width of each div*/;
var position = parseInt($(".tile").css("right"));
position += tileWidth;
var rightPosition = position + "px";
$(".tile").animate({right:rightPosition}); //in my code each of the divs in the row move position
}
}
The code works fine except that if I press too rapidly on the arrows the divs will not slide the appropriate length. Instead they slide part way and leave me stuck with a div half visible.
I made the following addition to my code using Malk's comment and his attached link: jQuery animation detect if animating?
function nextTile() {
var tileWidth = /*Width of each div*/;
var position = parseInt($(".tile").css("right"));
position += tileWidth;
var rightPosition = position + "px";
var tileLock = $(".tile").is(':animated'); // new code
if (tileLock === false) // new code
$(".tile").animate({right:rightPosition});
}
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.
I'm stuck at finding a solution to my problem.
Let's assume we have fixed-sized area with scrollbars. We need to place an iframe inside so we can preview it by either using the scrollbars or by dragging it. To prevent iframe capturing mouse events, I've put absolute positioned transparent div above it.
<div style="" id="scrolling_container">
<div id="drag_div"></div>
<div id="frame_div">
<iframe id="page_iframe" src="http://www.bbc.com/" scrolling="auto" frameborder="0"></iframe>
</div>
</div>
Then I used some code that transforms mouse dragging into div scrolling.
var draggableContainer = document.getElementById("drag_div");
var scrollingContainer = document.getElementById("scrolling_container");
draggableContainer.removeEventListener('mousedown', draggableContainer.md, 0);
window.removeEventListener('mouseup', draggableContainer.mu, 0);
window.removeEventListener('mousemove', draggableContainer.mm, 0);
var pushed = 0;
draggableContainer.addEventListener('mousedown',
draggableContainer.md = function(e) {
pushed = 1;
lastClientX = e.clientX;
lastClientY = e.clientY;
e.preventDefault();
e.stopPropagation();
draggableContainer.style.cursor = "move";
}, 0
);
window.addEventListener('mouseup',
draggableContainer.mu = function() {
pushed = 0;
draggableContainer.style.cursor = "pointer";
}, 0
);
window.addEventListener('mousemove',
draggableContainer.mm = function(e) {
if (pushed) {
var offsetLeft = - lastClientX + (lastClientX=e.clientX),
offsetTop = - lastClientY + (lastClientY=e.clientY);
scrollingContainer.scrollLeft -= offsetLeft;
scrollingContainer.scrollTop -= offsetTop;
}
}, 0
);
Please take a look at the demo: jsFiddle
The problem is, overlay div is not stretched across the whole iframe, it's only spread to visible div area:
Screenshot
It works fine though if I delete this
#scrolling_container {
position: relative;
}
But I need it to be like that because otherwise overlay div overlaps scrollbars and I can no longer use them.
Is there any cross-browser solution that prevents iframe from capturing mouse events so I could get rid of overlay div?
You can disable any mouse interaction with the iframe if you give it the pointer-events:none; property in CSS.
#drag_div {
background:transparent;
position:relative;
width:100%;
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}
probably check this link
Disable mouse scroll wheel zoom on embedded Google Maps
I've got an image, and using JQuery I've got it so that the image will increase in size when you hover over it and a DIV that sits under the image will slide up and provide an overlay on the image that is half opacity and occupy the bottom half of the image area.
This works fine, however when you then hover over the overlay (but still on the same area as the image), the image scales down again because you're no longer focused on the image, so the hover out event gets fired.
How do you ignore the overlay when hovering as if to say "I don't care when you hover over the overlay, so long as you're still in the area of the image"?
You could use mousemove event instead of mouseenter and mouseleave and use image dimensions to determine if mouse is over the image.
Example:
$(window).mousemove(function(evt) {
var image = $("#image");
var imageX0 = image.offset().left
var imageY0 = image.offset().top
var imageX1 = imageX0 + image.width()
var imageY1 = imageY0 + image.height()
if( evt.pageX >= imageX0 && evt.pageX <= imageX1 && evt.pageY >= imageY0 && evt.pageY <= imageY1) {
$("#status").text('Hovered!')
} else {
$("#status").text('Not hovered')
}
})
Check out live here: http://dl.dropbox.com/u/486054/stackoverflow/hover-overlay.html