I have a div containing 2 images, one is sort of a map the other is a pinpoint image, I used javascript to capture mouse clicks as x,y coordinates and the pinpoint moved easily along with clicks, here how the code looked like:
<div id="areapage" onclick="javascript:SetValues();" style="display: none;">
<img src="mysource" style="width:420;position:relative;" >
<img id="pindiv" src="images/pin.png" style="position: absolute;top: 0;left: 0;">
</div>
<script>
function SetValues()
{
document.getElementById('pindiv').style.left = window.event.screenX + 'px';
document.getElementById('pindiv').style.top = window.event.screenY + 'px';
}
</script>
it worked perfectly, until I placed it inside a fancybox, obviously something has changed, maybe x,y now refers to the original document in the background that opened the fancybox?
Try setting the #areapage div to position:relative; this will make the pindiv absolute positioning be based on that div rather than it's parent.
Related
I'm trying to position a image according to position of my mouse using onmousemove and objectPosition. I want the top of the viewport to be 0%, and the bottom to be 100%, independent if the person scrolls the page or not. As far I understand, this piece of code should do the trick:
window.onmousemove = event => {
var pos = (event.clientY / window.innerHeight) * 100
productImageZoomed.style.objectPosition = '50%' + pos + '%'
}
But when I move the mouse over the page, it only detects the mouse movement only inside a specific element, #image-main. I have no idea why, I thought that the window object would work on the entire viewport.
Relevant HTML snippet:
<div id="image">
<a class="image-zoom">
<div class="zoomPad">
<img id="image-main" src="/480-721/somename.png"><!-- mouse movement only detectable inside this element -->
<figure class="product-image container-zoomed" style="display: none;">
<img class="product-image image-zoomed" src="/1920-2880/somename.png" style="object-position: 50% 0%;"> <!-- the element to be positioned -->
<figcaption><span>Click to close</span></figcaption>
</figure>
</div>
</a>
</div>
I have absolutely no clue of what is happening, can anyone help?
Here is my full JS code if you think it's relevant
I am dragging thumbnails from one DIV to another and attempting to imitate the "snap-to-a-grid" feature used in AutoCAD , Adobe Illustrator, many other graphics-editing software, etc.
Question 1:
How could I get the pointer to snap to the 0,0 position (x and y position) of the image I am clicking for dragging, regardless of where the pointer was on the image when clicked?
When I click to drag an image, the pointer sticks to where the pointer was when clicked and the coordinates I am going to track will be for the pointer.
I tried this:
cursor: url(mycustomcursor.png) 0 0 , auto;
and the custom pointer appears but doesn't snap to 0,0 as hoped.
Question 2:
How can I get my image to stick precisely where dropped in a DIV and return the offset in pixels from the top/left of the DIV it is being dropped into?
I don't know if the cursor position when dragging is relevant but when I drop my image with the following script the image shifts twice the distance I expect of in other words the offsetX value, doubled. I have added the script below and had to edit out a bunch of (hopefully) non-relevant script like CSS for colors, borders, etc. I am also only working with the X-coordinates for simplicity in testing.
<div style='overflow:scroll;text-align:left;position:absolute;width:90%; height:180px;' ondrop='drop(event)' ondragover='allowDrop(event)'>
<img id='image_1234' src='image_path/image.png' style='position:absolute;height:100px;' draggable='true' ondragstart='drag(event)'>
</div>
<div id='panel_frame' style='width:600px;height:300px;' ondrop='drop(event)' ondragover='allowDrop(event)'>
</div>
function allowDrop(evAllow) {
evAllow.preventDefault();
}
function drag(evDrag) {
evDrag.dataTransfer.setData('text', evDrag.target.id);
}
function drop(evDrop) {
evDrop.preventDefault();
var dropData = evDrop.dataTransfer.getData('text',evDrop.id);
evDrop.target.appendChild(document.getElementById(dropData));
var offsetLeft = evDrop.clientX + 'px';
document.getElementById(dropData).style.left = offsetLeft;
}
I am testing in Firefox. Any help is appreciated. Thanks!
We are using some short code for the display of images on a google maps V3 page. These are static images (not on the map) but in div's.
function CoffiControl(controlDiv) {
var logo = document.createElement('IMG');
logo.src = '../images/coffi.png';
logo.style.height = '350px';
logo.style.cursor = 'pointer';
logo.setAttribute('class', 'floatlegenda');
controlDiv.appendChild(logo);
}
var logoControlDiv = document.createElement('DIV');
var logoControl = CoffiControl(logoControlDiv);
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(logoControlDiv);
We have maximal 5 of these images what are 350px height and about 90px width. So the images must be appear next to each other but our output shows us they are under each other. They would be toggled by buttons.
.floatlegenda {
float:right;
}
As you can see we have put an css class in the script "floatlegenda" that should float the images right, but we use for every image the above script so i think the images come in seperate div's.
Now my question is how can we arrange this to work that every time a button is toggled the new image appear next to the other?
EDIT
Found solution myself!
Just add other images in the same function with unique child names did the trick.
I think you need to check that all of your floatlegenda are within the same container and that they are all float: right. Also, check the width of that container.
This should work. Also, check your output by inspecting the elements. See if the html you're trying to generate is actually what's being generated.
.container {
display:block;
}
.floatlegenda {
width:90px;
height: 350px;
float:right:
}
<div class="container">
<img class="floatlegenda" src="" />
<img class="floatlegenda" src="" />
<img class="floatlegenda" src="" />
</div>
I am building a calendar that has events on certain days. The calendar is a jpg that I have created an image map for. When you hover over a hotspot or "event" on the calendar, I want an image to hover next to the mouse pointer that will have the event information on it, and then disappear when the mouse goes off of the hotspot. I have six hotspots, and a javascript function for each. The functions replace the popup image with the correct event image. Below is an example of just one of the areas along with one function (the others are identical w/ different image names and coords)
I had the event images popping up below the calendar on hover but the page refused to relocate the position of the image to the current mouse location. How can I make the popup image relocate? What am I doing wrong? or should I be using a different method?
JS:
function pop(e) { //function called by first hotspot
Image.src = "../img/Bubble - Aloha.png" //event image
document.popup1.src = Image.src;
var thing = document.getElementById("popup1");
$("#popup1").toggle();
thing.style.left = e.screenX + 'px';
thing.style.top = e.screenY + 'px';
return true;
}
MAP:
<map id="feb1050" name="feb1050">
<area shape="rect" alt="" coords="464,170,588,263" HREF="../img/feb1050.jpg" onMouseOver="pop(event);" onMouseOut="pop(event);"/>
...</map>
HTML:
<ul><li>
<img src="../img/feb1050.jpg" width="1050" alt="calendar" USEMAP="#feb1050">
</li>
<li>
<div id="popup"><img NAME="popup1" id="popup1" src="../img/Bubble - Aloha.png" width="400" alt="calendar" style="display:none;top:-2000;left:-1000;>
</div><br />Click Here To RSVP!
</li>
</ul>
Perhaps rather than manipulating the position of the image itself, you could position the enclosing div. For the HTML:
<div id="popup" class="popup"><img NAME="popup1" id="popup1" src="../img/feb1050.jpg" alt="calendar">
<br />Click Here To RSVP!</div>
With some CSS for the div:
.popup {
position:absolute;
z-index:20000;
top: 0px;
left: 0px;
display: none;
}
And then the JS:
function pop(e) { //function called by first hotspot
Image.src = "../img/Bubble - Aloha.png" //event image
document.popup1.src = Image.src;
var thing = document.getElementById("popup");
thing.style.left = e.clientX + 'px';
thing.style.top = e.clientY + 'px';
$("#popup").toggle();
return true;
}
Note that I would also use clientX and clientY rather than screenX and screenY:
What is the difference between screenX/Y, clientX/Y and pageX/Y?
Working example on JSFiddle
One thing I have done (in a situation almost exactly like this: A client wanted some pricing boxes to appear when hovering over a price keyword) is almost purely CSS and HTML. You can generate the popup areas inside <a> tags, which are then placed inside some <span> (or absolutely-positioned <div>) placed next to the hover area. You make sure those span/div elements are only defined for the a:hover selector, and you set them to display:none; on the rest of the a:x selectors, so that the span/div box only appears when you are hovering over the anchor, and disappears when you are not.
I'm working on a simple script that acts as a slideshow.
It's based on this script.
Background:
Most of these types of scripts (including the more advanced ones) have the issue that they work great with landscape-style images but really mess portrait-style images up. So I'm trying to build something more or less from scratch.
Problem
I want my images centered on the page. So I use position:absolute; and left:50%; and top:50%; which puts left-most and top-most edge of the image in the proper position. But to center it you would need to do left:50% - imageWidth/2 (which obviously doesn't exist in CSS)
So I need to use javascript to get the image height/width and change it's left and top positioning as needed.
Here is my HTML:
<div class="fadewrapper">
<div class="fadein">
<img src="../Content/images/samples/1.jpg">
<img src="../Content/images/samples/2.jpg">
<img src="../Content/images/samples/3.jpg">
</div>
</div>
Here is my CSS:
.fadewrapper {width:100%; height:100%;}
.fadein { display:inline-block;}
.fadein img {position:absolute; top:50%;}
My knowledge in javascript is limited, but I've found this script (on SO):
var img = new Image();
img.onload = function () {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
This script works, but I don't know how to use the images on my page and how to then adjust its positioning. Any and all help is very much appreciated.
Here you go. This will set the image in the exact center of the wrapper.
win_width = $('#fadewrapper').width();
win_height = $('#fadewrapper').height();
border = $('#framewrapper').css('borderWidth');
$('.fadein img').each(function(){
$(this).css({
'left' : (win_width - $(this).width() - border ) / 2,
'top': (win_height - $(this).height() - border ) / 2
});
})
Here's a jsFiddle working example. It reacts based on the window size. Resize the output window to see it react
This might be worth of trying:
<DIV style="position:relative;top:100px;height:300px;text-align:center;white-space:nowrap">
<IMG id="your_img_id_1" src="your_img_source" height="100%">
<IMG id="your_img_id_2" src="your_img_source" height="100%">
<IMG id="your_img_id_3" src="your_img_source" height="100%">
</DIV>
Add these positioning rules to your fadewrapper-class, and remove all others. Then make changes needed to top and height values, but don't change the height-attribute values in IMG-elements. IDs can be omitted, if you don't need them.
EDIT:
I'm sorry, I didn't notice to check window resize. Code corrected. Width's shoul'd be OK with smaller window sizes now.
I've tested this in IE, FF, Opera and Chrome. In all those browsers images appear just like I want to. But if I've missunderstood what you'd like to have?