Develop Reference

Dynamic bottom value based on element position in browser

I am attempting to adapt this JS solution to keep a floating element above the footer of my site.
The adaption I am attempting is instead of changing the element position to absolute, I would have a dynamic bottom px value based on the position of the top of the footer, relevant to the client window.
function checkOffset() {
var onlineFloat = document.querySelector('#online-ceo');
var footer = document.querySelector('.site-footer');
function getRectTop(el){
var rect = el.getBoundingClientRect();
return rect.top;
}
if((getRectTop(onlineFloat) + document.body.scrollTop) + onlineFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 20)
var newBottom = ((getRectTop(footer) + document.body.scrollTop) - 40).toString().concat('px');
onlineFloat.style.bottom = newBottom;
if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
onlineFloat.style.bottom = '20px';// restore when you scroll up
}
document.addEventListener("scroll", function(){
checkOffset();
});
The output of newBottom is currently a px value which changes on scroll, however, I am having issues setting this position to the element.
Where am I going wrong? Thanks.

With your approach (changing the bottom property), you can just calculate where the "float" should be if the footer's top position is in view (as in window.innerHeight) on scroll.
function checkOffset() {
var onlineFloat = document.querySelector('#online-ceo');
var footer = document.querySelector('.site-footer');
function getRectTop(el) {
var rect = el.getBoundingClientRect();
return rect.top;
}
var newBottom = 10 + (getRectTop(footer) < window.innerHeight ? window.innerHeight - getRectTop(footer) : 0) + 'px';
onlineFloat.style.bottom = newBottom;
}
document.addEventListener("scroll", function () {
checkOffset();
});

How to position a popup based on the cursor click (without using jQuery)?

I am trying to create a Firefox extension, where I want a popup to appear next to some text which is double clicked. As I am placing this code as my extension's content script which will be loaded on ANY website, I have tried to not use jQuery for this task.
I have seen and implemented the answers given in the links: How to position popover over a highlighted portion of text?
How to position a popup div based on the position of where the cursor clicks
Using mouse/cursor coordinates to position popup
Unfortunately most of these answers were in jQuery. I have tried replacing them to a pure DOM implementation and have come up with the following code:
function doSomethingWithSelectedText(obj) {
var textObj = getSelectedTextObj();
if (textObj.toString() && textObj.toString().trim().split(" ").length <= 2) {
var NewPara = document.createElement("div");
NewPara.setAttribute("id", "infoDiv");
NewPara.setAttribute("class", "tooltipDiv");
NewPara.appendChild(document.createTextNode(textObj.toString().trim()));
if (document.getElementsByClassName("tooltipDiv").length) {
var OldPara = document.getElementById("infoDiv");
document.body.replaceChild(NewPara, OldPara);
}
else {
document.body.appendChild(NewPara);
}
document.getElementById("infoDiv").style.display = "block";
document.getElementById("infoDiv").style.width = "250px";
document.getElementById("infoDiv").style.zIndex = "101";
document.getElementById("infoDiv").style.backgroundColor = "#F5DEB3";
document.getElementById("infoDiv").style.border = "3px solid #666";
document.getElementById("infoDiv").style.padding = "12px 12px 12px 12px";
document.getElementById("infoDiv").style.borderRadius = "0px 0px 25px 0px";
document.getElementById("infoDiv").style.position = "absolute";
var oRect = textObj.getRangeAt(0).getBoundingClientRect();
var leftOffset, topOffset;
var pageWidth, pageHeight;
var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0],
pageWidth = w.innerWidth || e.clientWidth || g.clientWidth,
pageHeight = w.innerHeight|| e.clientHeight|| g.clientHeight;
leftOffset = oRect.left + oRect.width + 1 + 12;
if (300 + leftOffset > pageWidth - 12) {
leftOffset = pageWidth - 350 - 12;
}
topOffset = oRect.top;
if (topOffset + 12 > pageHeight) {
topOffset -= 12;
}
leftOffset += window.scrollX;
topOffset += window.scrollY;
document.getElementById("infoDiv").style.left = leftOffset;
document.getElementById("infoDiv").style.top = topOffset;
}
else {
document.getElementById("infoDiv").style.display = "none";
};
};
The issue with the above code is that the popup is not displayed next to the text which is double clicked, instead it sometimes appears below and sometimes above the screen. I have tried positioning div at various places and replacing clientX, clientY with pageX, pageY but nothing seems to work. I strongly believe that the problem is with the node NewPara and it's position, but I am unable to determine it.
UPDATE: Modified the code but initial problem still persists.

There are two major issues which will fix the popup's display position.
First is the document.body should be replaced with document.documentElement as to put the scope outside the body tag and into the html tag.
The next and major issue is with the leftOffset and topOffset. Both of them are never converted to px, hence they are never rendered by the browser.
To prevent that use String(leftOffset) + "px" and String(topOffset) + "px".
Here is the modified code:
function doSomethingWithSelectedText(obj) {
var textObj = getSelectedTextObj();
if (textObj.toString() && textObj.toString().trim().split(" ").length <= 2) {
var NewPara = document.createElement("div");
NewPara.setAttribute("id", "infoDiv");
NewPara.setAttribute("class", "tooltipDiv");
NewPara.appendChild(document.createTextNode(textObj.toString().trim()));
if (document.getElementsByClassName("tooltipDiv").length) {
var OldPara = document.getElementById("infoDiv");
document.documentElement.replaceChild(NewPara, OldPara);
}
else {
document.documentElement.appendChild(NewPara);
}
var oRect = textObj.getRangeAt(0).getBoundingClientRect();
var leftOffset, topOffset;
var pageWidth, pageHeight;
var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0],
pageWidth = w.innerWidth || e.clientWidth || g.clientWidth,
pageHeight = w.innerHeight|| e.clientHeight|| g.clientHeight;
leftOffset = oRect.left + oRect.width + 1 + 12;
if (300 + leftOffset > pageWidth - 12) {
leftOffset = pageWidth - 350 - 12;
}
topOffset = oRect.top;
if (topOffset + 12 > pageHeight) {
topOffset -= 12;
}
leftOffset += window.scrollX;
topOffset += window.scrollY;
document.getElementById("infoDiv").style.display = "block";
document.getElementById("infoDiv").style.width = "250px";
document.getElementById("infoDiv").style.zIndex = "101";
document.getElementById("infoDiv").style.backgroundColor = "#F5DEB3";
document.getElementById("infoDiv").style.border = "3px solid #666";
document.getElementById("infoDiv").style.padding = "12px 12px 12px 12px";
document.getElementById("infoDiv").style.borderRadius = "0px 0px 25px 0px";
document.getElementById("infoDiv").style.position = "absolute";
document.getElementById("infoDiv").style.left = String(leftOffset) + "px";
document.getElementById("infoDiv").style.top = String(topOffset) + "px";
}
else {
document.getElementById("infoDiv").style.display = "none";
};
};
This fixes the position issue.

Paralax scroll of slider is not smooth

I have problem with my parallax slideshow script. It's not scrolling smooth and its shaking weird. The thing is that I couldn't find the proper script for element(like slider etc), most of them are only for single image. There is my script:
<script type="text/javascript">
var ypos,image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('slider');
image.style.top = ypos * .8 +'px';
}
window.addEventListener('scroll',parallex);
link to the site: http://www.pappu-lighting.com/Slider/Home.html

$(window).scroll(function(){
if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
var temp = 100 - ($(document).scrollTop() - 1200) / 8;
var bonus = '50% ' + temp*-1 + '%';
document.getElementById('div').style.backgroundPosition = bonus;
}
}

Iframe height definition in IE 7

I have a problem with resizing iframe content in IE7.
I have an external iframe
<IFRAME id=fl_game src="my_iframe_page" frameBorder=0 allowTransparency scrolling=no></IFRAME>
with width=100%, height=93%
and add my page into it. Here is a page body
<div id="container">
<div id="game-box">
<div id="flashcontent">
</div>
</div>
</div>
<script type="text/javascript">
swfobject.embedSWF("<%=application.getContextPath()%>/flash/<%= request.getParameter(PARAM_GAME) %>/game.swf", "flashcontent", gameWidth, gameHeight, "10.1", "/flash/expressInstall.swf", flashvars, params);
</script>
On my page I add resize events.
if (window.addEventListener) {
window.addEventListener("load", resizeGame, false);
window.addEventListener("resize", resizeGame, false);
} else if (window.attachEvent) {
window.attachEvent("onload", resizeGame);
window.attachEvent("onresize", resizeGame);
} else {
window.onload = function() {resizeGame();};
window.onresize = function() {resizeGame();}
}
Here is my resizeGame function
function resizeGame(isIEResize) {
var flash = document.getElementById('flashcontent');
var screen = screenSize();
var width = screen.width;
var height = screen.height;
var left = 0;
var top = 0;
if (height * 1.5 > width) {
height = width / 1.5
} else {
width = height * 1.5;
}
flash.width = width;
flash.height = height;
document.getElementById('flashcontent').style.width = width + 'px';
document.getElementById('flashcontent').style.height = height + 'px';
document.getElementById('flashcontent').style.top = '50%';
document.getElementById('flashcontent').style.left = '50%';
if (width < screen.width) {
left = (screen.width - width) / 2 + left;
}
if (height < screen.height) {
top = (screen.height - height) / 2;
}
document.getElementById('game-box').style.top = top + 'px';
document.getElementById('game-box').style.left = left + 'px';
}
function screenSize() {
var w, h;
w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
return {width:w, height:h};
}
And here is a question:
In IE7 function screenSize() gives me wrong height on load. Under other browsers and IE>7 function screenSize() gives me correct height. That's why I can't resize my content properly.
And when I explicitly resize a window, function screenSize() starts to give correct height.
Here some screens before explicit resizing and after it.
screenSize() gives strange height ONLY in IE7.
I am ready to add any extra information to find a reason of this situation.
I hope someone can help me to find out how to define iframe height in IE7. Any help will be useful.

Position of click within div

I'm trying to get the position of a click inside a div so that when I position a window as the mouse drag moves it, the mouse cursor will be exactly on the spot (relative to the moving window) where the initial click occurred.
Here's the window:
<div id="PopUp" class="Popup">
<div id="PopUpTitleBar"><img class="xOut" onclick="ClosePopUp();" src="/images/xOut.png"></div>
<div class="InnerPopup">
<!-- <p>Here is the body of a pop up element.</p> -->
<p id="PopUpBody"></p>
</div>
</div>
And I have these methods to handle the clicking and dragging:
var firstClick = true;
var offsetX = 0;
var offsetY = 0;
function mouseUp()
{
window.removeEventListener('mousemove', divMove, true);
firstClick = true;
}
function mouseDown(e){
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('PopUp');
if (firstClick == true) {
offsetX = $('#PopUpTitleBar').offset().left;
offsetY = $('#PopUpTitleBar').offset().top;
firstClick = false;
}
var spotX = e.pageX - offsetX;
var spotY = e.pageY - offsetY;
div.style.top = spotY + 'px';
div.style.left = spotX + 'px';
}
This sorta works, except that my offsetX and offsetY are returning the position of the top left corner of PopUpTitleBar instead of the position of the click within PopUpTitleBar.
How can I correct this so my offsets are relative to the inside top left corner of PopUpTitleBar?
Thanks.

You have the click position on the screen. And then you have the position of the div. Substract the main position with the div position and youll have the finger position relative to that div.
$('#PopUpTitleBar').click(function (e) {
var posX = $(this).offset().left, posY = $(this).offset().top;
alert("e.pageX: " + e.pageX + " posX:" + posX + " e.pageY:" + e.pageY + " posY:" + posY);
});

To get the value of the Position of click within div use the event e parameter in your callback.
function divMove(e){
var div = document.getElementById('PopUp');
if (firstClick == true) {
// use $(e).target
offsetX = $( $(e).target ).offset().left;
offsetY = $( $(e).target ).offset().top;
firstClick = false;
}
var spotX = e.pageX - offsetX;
var spotY = e.pageY - offsetY;
div.style.top = spotY + 'px';
div.style.left = spotX + 'px';
}

This is what ultimately worked:
function divMove(e){
var div = document.getElementById('PopUp');
var titleBar = document.getElementById('PopUpTitleBar');
if (firstClick == true) {
offsetX = e.pageX - $('#PopUpTitleBar').offset().left;
offsetY = e.pageY - $('#PopUpTitleBar').offset().top;
firstClick = false;
}
var spotX = e.pageX - offsetX;
var spotY = e.pageY - offsetY;
div.style.top = spotY + 'px';
div.style.left = spotX + 'px';
}
First, I calculate the position in the titlebar by subtracting the top left corner of the title bar from the point at which the first click occurred. Then, as the mouse moves, the subsequent positions of the mouse must all subtract that offset so that the top left corner remains the same distance from the original click. Thanks everyone for the suggestions - they helped me wrap my head around the problem better.