I have a webpage with an iframe rendering another page (same domain). I need to get the mouse position in relation to the parent document. Keep in mind the iframe can scroll both ways. I've tried using offset with no luck.
$('#iframe').contents().find('html').on('mousemove', function (e) {
//gives me location in terms of the iframe but not the entire page.
var y = e.pageY;
//gives me 0
var y = $(this).offset().top;
//more code here....
})
One way to do it would be to get the position of the iframe in the parent window and add it to the mouse position relative to the iframe itself. Extending your code below,
var iframepos = $("#iframe").position();
$('#iframe').contents().find('html').on('mousemove', function (e) {
var x = e.clientX + iframepos.left;
var y = e.clientY + iframepos.top;
console.log(x + " " + y);
})
event.clientX, event.clientY do not work in every browser. However, jQuery has a solution which does. Also, what do you do when your iframe is inside another iframe? I have a solution which works cross browser with nested iframes.
GetPosition: function (event) {
var $body = $("body");
var offsetLeft = event.pageX - $body.scrollLeft();
var offsetTop = event.pageY - $body.scrollTop();
if (window != parent.window) {
// event was fired from inside an iframe
var $frame = parent.$("iframe#" + window.frameElement.id);
var framePos = $frame.position();
offsetLeft += framePos.left;
offsetTop += framePos.top;
}
if (parent.window != parent.parent.window) {
// event was fired from inside an iframe which is inside another iframe
var $frame = parent.parent.$("iframe#" + parent.window.frameElement.id);
var framePos = $frame.position();
offsetLeft += framePos.left;
offsetTop += framePos.top;
}
return [offsetLeft, offsetTop];
}
I wish this were a perfect solution. It works if your iframe is positioned in a fixed layout or absolutely positioned as a modal dialog. However, if your iframe is inside another absolutely positioned container, you will have to get the .position() of that container as well and add it to the total offsets.
Related
I have CSS transform scale on the body of my page and some other elements. The position fixed CSS property doesn't work with transform property. I tried to do the same as position fixed but with JavaScript by changing the element's top/bottom value while scrolling. This requires some calculations dynamically as you load the page on different sized screens. Mine works on different screens but when I do window resize on any screen, the fixed div behaves weirdly. It disappears and reappear again. Sometimes it doesn't fixes its position on the intended scroll-y value. I have applied "scroll" and "resize" event listeners for the body/window. I had to do some initial calculations before scroll event, so some functions are under a parent function.
JAVASCRIPT
function chekon()
{
document.addEventListener('DOMContentLoaded', upme);
window.addEventListener('resize', upme);
function upme()
{
var rome = document.getElementById("out-cmnt");
var rect = rome.getBoundingClientRect();
// console.log(rect.top, rect.right, rect.bottom, rect.left);
var poss = rect.top + window.scrollY;
var koss = rect.bottom + window.scrollY; var loss = koss - poss;
var isMobile = !(navigator.userAgentData.mobile);
// event listeners
// window.addEventListener('resize', relod, false);
// function relod() { if(isMobile) { location.reload(); } }
window.addEventListener('scroll', doso, false);
window.addEventListener('resize', doso, false);
function doso()
{
lopp = document.getElementById("Web_1920__1");
hope = lopp.clientHeight;
const meme = document.body.scrollHeight;
const keke = hope/meme;
const scsc = window.scrollY;
var scmx = (document.documentElement.scrollHeight - document.documentElement.clientHeight);
console.log("meme scroll-height = ", meme); console.log("scsc scroll-y = ", scsc);
console.log("scmx max-scroll-y = ", scmx);
var innr = window.innerHeight; console.log("innr inner-height = ", innr);
var scbb = scmx - scsc; var finn = scsc * keke; var nunn = scbb * keke;
if (window.matchMedia("(min-width: 765px)").matches)
{
var finn = scsc * keke * 1.087;
var nunn = scbb * keke * 1.087;
}
var noss = poss - innr + loss;
if(scsc > noss && window.matchMedia("(min-width: 765px)").matches && isMobile)
{
var xoxo = nunn;
document.getElementById("out-cmnt").style.top = "auto";
document.getElementById("out-cmnt").style.bottom = xoxo + "px";
}
if(scsc < noss)
{
document.getElementById("out-cmnt").style.top = "7074px";
}
if(nunn < 100 && isMobile)
{
document.getElementById("last-dab").style.visibility = "hidden";
}
if(nunn > 100 && isMobile)
{
document.getElementById("last-dab").style.visibility = "visible";
}
} }
}
chekon();
Function upme() and doso() is under function chekon() there. The upme() has 2 event listeners and doso() has also 2 event listeners with resize in common. I checked that if doso() resize isn't applied, the upme() resize event listener has no effect on doso() even though doso() is under upme() function. I though, maybe there is overlapping. But seems like fine to me. Is there something messed up in my code that is responsible for the window resize action? The "Web_1920__1" is for getting the total height of the page. The "out-cmnt" is flickering and showing up at wrong place after stopping window resize action for the browser. Then when I start scrolling again the element should get back at its intended position again. But no, staying at wrong position. A reload only fixes the problem for now. Funny thing is, I can't reproduce the wrong position even when the resize is down to at the same window size that showed the problem before. So I think Chrome is showing the problem at random window resizes. Is it browser bug or mine? Help me out please.
You can ignore the variables and calculations. Just care more for the structure, functions and event-listeners like any wrong declarations. Please help me to understand the problem.
I'm doing a floating menu with JavaScript, is suppose to stay in the same position no mater if the user scrolls down or resize the window.
So far it is working just fine with X position. However, I can't find a way to make it stick to a position relative to the visible top of the window. The problem is when I scroll down the menu disappear because it keeps its distance related to the window size.
my code is:
menuPosition : function (){
var windowHeight = document.body.clientHeight;
var windowWidth = document.body.clientWidth;
var xPosFloatingMenu = (windowWidth) - (fMenuWidthGlobal + fMenuXPosGlobal);
var yPosFloatingMenu = (windowHeight) - (windowHeight - fMenuYPosGlobal);
document.getElementById("floating_menu").style.left = (xPosFloatingMenu) + "px";
document.getElementById("floating_menu").style.top = (yPosFloatingMenu) + "px";
},
updateMenuPosition : function () {
var menuPositionInterval = setInterval(gala.create.menuPosition,1);
}
Is there a way to keep the menu position update relative to the visible top of the window?
You have to update the style properties of your floating_menu element on the window scroll Event .
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll
I am trying to get a div to scroll up at the same amount of pixels as the user scrolls down the page. For example, in Google Chrome when using the mouse wheel, it scrolls down in about 20px intervals. But when you scroll down using the handle, the scrolling amount varies.
Here is my code so far:
var scrollCtr = 50;
$(window).scroll(function(){
scrollCtr = scrollCtr - 20;
$('div.nexus-files').css('margin-top', scrollCtr + 'px');
});
There are a few problems with this:
The user scrolling varies
It needs to subtract from margin-top if scrolling down and add to margin-top if scrolling up
Here is an example:
http://www.enflick.com/
Thanks for the help
You're doing it the wrong way, what you are trying to do should be done using position: fixed on div.nexus-files
div.nexus-files{position: fixed; top: 0;}
but anyway - if you still want to know what you can do with the scroll event - you better get to scrollTop of the document and set the margin-top to the same value
window.onscroll = function(event){
var doc = document.documentElement, body = document.body;
var top = (doc && doc.scrollTop || body && body.scrollTop || 0);
document.getElementById('nexus-files_id').style.marginTop = top+'px';
}
I'm using pure Javascript instead of jQuery because of the overhead that might be crucial when the browser need to calculate stuff in a very short amount of time (during the scrolling). [this can be done even more efficient by storing reference to the element and the doc... but you know..)
I used id based selector to get the specific element instead of class based
AND I SAY AGAIN - this is not how you should do what you were trying to do
Why not using the actual scroll offset as reference or position ?
// or whatever offset you need
var scrollOffset = document.body.scrollTop + 20;
// jQuery
var scrollOffset = $("body").scrollTop() + 20;
Finally Got it
Here is the code I used to accomplish the task.
Most of the code is from http://enflick.com and I modified it to work with my individual situation.
jQuery(window).load(function(){
initParallax();
});
// parallax init
function initParallax(){
var win = jQuery(window);
var wrapper = jQuery('#wrapper');
var bg1 = wrapper.find('.nexus-files');
var koeff = 0.55;
if (bg1.length) {
function refreshPosition(){
var scrolled = win.scrollTop();
var maxOffsetY1 = 450;
var offsetY1 = scrolled * koeff;
var offsetY2 = scrolled * koeff - (maxOffsetY1 * koeff - offsetY1);
if (offsetY1 <= maxOffsetY1 * koeff - offsetY1) {
bg1.css("margin-top", +-offsetY1+"px");
//alert(+-offsetY1+"px");
}
}
refreshPosition();
win.bind('resize scroll', refreshPosition);
}
}
I have an IFRAME inside an IFRAME and my getMousePosition method is not able to retrieve the current mouse position inside the iframe. It works in the first Iframe, but when I call the getMousePosition from a function in the parent document it returns fallback values 600 & 350. FYI: I am not able to control the content of the IFrame as it is generated, but it is not an cross domain access. Both IFRAMES and the parent document are hosted on the same server. I am only programming for Internet Explorer 8. So browser compatibility is not an issue.
function getMousePosition(){
if(!inframe)
$(document).mousemove(function(e){
mouseX = e.pageX
mouseY = e.pageY
});
else
{
mouseX = 600;
mouseY = 350;
}
//This is where I get the Iframe Document (I then parse through the document, picking up the specific links and storing them in the array verifiedlinks)
var src = window.frames[iframeindex].document.getElementsByTagName("a");
// This is where I call my function which uses the values returned by getMousePosition (verifiedlinks is an array of links inside the iframe):
verifiedlinks[i].onmouseover = function()
{
showPeopleDetails(this.getAttribute('username'));
}
// This should display User Details at the current Mousecoordinates
function showPeopleDetails(UserId){
var vpd = document.getElementById("PeopleDetails");
if ( vpd != null ) {
getMousePosition();
vpd.style.left=mouseX+10; //mouseX and mouseY are defined globally
vpd.style.top=mouseY+10;
vpd.style.display="block";
}
}
I have read this question: SOLVED QUESTION but the answer didn't solve my problem.
I found this question but none of the answers seem to be working for me.
My new edited code:
function showPeopleDetails(UserId, x, y){
var vpd = document.getElementById("PeopleDetails");
try
{
if ( vpd != null ) {
//getMousePosition();
//alert("MouseX: " +mouseX+" MouseY: "+mouseY);
//vpd.style.left=mouseX+10;
//vpd.style.top=mouseY+10;
vpd.style.left = x +10 - window.frames[2].document.body.scrollLeft;
vpd.style.top = y +10 - window.frames[2].document.body.scrollTop;
}
}
If you call getMousePosition from a parent window then document will point to the parent window document. You should call this method in the context of iframe. Also where is inframe defined and do you update its value on any event?
You can use jquery to attach the mouseover events to link. Using this you will get event object which provides the mouse x/y coordinates of the link relative to the document. I hope it will help you.
$(verifiedlinks[i]).mouseover(function(e){
showPeopleDetails($(this).attr('username'), e.pageX, e.pageY);
}
function showPeopleDetailsNow(UserId, x, y){
var vpd = document.getElementById("PeopleDetails");
if ( vpd != null ) {
getMousePosition();
//vpd.style.left=mouseX+10; //mouseX and mouseY are defined globally
//vpd.style.top=mouseY+10;
vpd.style.left= x +10 + $(document).scrollTop(); //mouseX and mouseY are defined globally
vpd.style.top= y +10;
vpd.style.display="block";
}
}
I've written some jQuery code to display a box with data in the corner of the users' web browser. I'm using the .scroll event to make the box stay in the corner as the user scrolls up and down the page. Let me emphasize that I am not using jquery-ui dialog.
The only problem is that the box flickers as the page scrolls. I'm afraid that there will be no cross-browser solution to this problem as the different browsers seem to behave differently with scrolling. Barring a cross-browser solution, an IE solution would be nice (My web application is designed to be used by a specific group of about 100 users in my organization.)
Here are snippets of the relative code:
ExternalScroll: function () {
LittleBlackBook.setPosition();
}
setPosition: function () {
var scrollPosition = $(self).scrollTop();
var cssTop = LittleBlackBookStatic.determineCssTop(this.height, this.isTop, this.vOffset, scrollPosition);
var cssHeight = LittleBlackBookStatic.determineCssHeight(this.height);
var cssLeft = LittleBlackBookStatic.determineCssLeft(this.width, this.isLeft, this.hOffset);
var cssWidth = LittleBlackBookStatic.determineCssWidth(this.width);
this.jQueryObj.css('top', cssTop);
this.jQueryObj.css('height', cssHeight);
this.jQueryObj.css('left', cssLeft);
this.jQueryObj.css('width', cssWidth);
}
var LittleBlackBookStatic = {
determineCssTop: function (height, isTop, vOffset, vScroll) {
var windowHeight = $(self).height();
var scrollPosition = $(self).scrollTop();
var newModalTop = isTop ? vOffset + vScroll : windowHeight - height + vScroll - vOffset;
return newModalTop + 'px';
},
determineCssHeight: function (height) {
return height + 'px';
},
determineCssLeft: function (width, isLeft, hOffset) {
var windowWidth = $(self).width();
var newModalLeft = isLeft ? hOffset : windowWidth - width - hOffset;
return newModalLeft + 'px';
},
determineCssWidth: function (width) {
return width + 'px';
}
} // end LittleBlackBookStatic
I'm using jQuery to look up the scroll position as the page scrolls and change the CSS.
Is there a better way; a way that will make it scroll without flickering? If no, then why not?
You should use fixed positioning for that box instead instead of animating it to keep it in the corner.
You'll use less javascript and avoid flickering that comes with animation.