Showing a hidden div and centering on screen - javascript

Update
I've just updated the jsFiddle so that you can see the "pop up" happening and how it's never centered. It's always 200px from top.
So if the user has scrolled down a long page and clicked to make the pop up happen, the pop up is back up at the top of the page - 200px instead of centered on the visible screen.
http://jsfiddle.net/JYgcj/40/
I'll try out the answer below and update with results of that
I have a hidden div included in my layout as a partial
Here is the partial
A javascript function shows this div for showing the result of ajax requests
function showResultPopUpDiv(divId, title) {
var popUpId = document.getElementById(divId);
var popUpHeader = title;
var originalDivHTML;
var topPos = 200;
var popUpWidth;
var midPos;
var leftPos;
var spinnerOpts;
//Insert header text & open pop up
popUpId.style.display = "block";
document.getElementById("ajaxResultPopUpHeaderText").innerHTML = popUpHeader;
//Set position dimensions
popUpWidth = popUpId.offsetWidth / 2;
midPos = $(document).width() / 2;
leftPos = midPos - popUpWidth;
//Position pop up (center)
popUpId.style.top = topPos + "px";
popUpId.style.left = leftPos + "px";
//Insert spinning loader code here
... //left out for brevity
}
If a view is longer than a single screen and the user has scrolled to the bottom and clicked the submit button, this div pops up but cannot be seen unless the user scrolls back to the top.
How do I get this to center on the window correctly wherever the page is currently scrolled to.
This question and others that I've investigated have not solved this for me. Any ideas?

It sounds like what you want is a CSS position of "Fixed" (CSS Positioning 101). This will keep the object fixed relative to the viewport (the browser) rather than relative to the document. This will affect the way top and left behave.
Make sure you have something like:
#ajaxResultPopUpHeaderText {
position: fixed; /* Make the position fixed to the viewport,
so it stays in the same place no matter how much the user scrolls */
}
To centre on the viewport you need to calculate positions relative to the viewport. The full JSFiddle (forked from your original, with added content for scrolling and styling to keep the button with you as you scroll) has all of the JavaScript, but since you're working with jQuery then you just need to use $(window) instead of $(document).
//Set position dimensions
var popUpHeight = popUpId.offsetHeight / 2;
var centrePos = $(window).height() / 2;
topPos = centrePos - popUpHeight;
popUpWidth = popUpId.offsetWidth / 2;
midPos = $(window).width() / 2;
leftPos = midPos - popUpWidth;
$(document) happens to work okay for width, because the document is generally 100% of the width, but you should use $(window) anyway.

Related

Any known javascript or css that causes Chrome to not scroll vertically on a MacBook display?

I have a weird issue where my div is not scrolling vertically in Chrome on my MacBook display. If I move the window (without resizing it or anything) to a different display vertical scrolling works. If I scroll horizontally first that "unlocks" the vertical scrolling. Only in Chrome, only on the MacBook display.
I can't share the page here, but I can try to re-produce it with some different content if that is helpful. Thought I would check if it is a known issue first. I have some jquery resizing things going on that might be a lead.
setTimeout(function() {
var table_p = $("#table");
var position = table_p.position();
var viewheight = $(window).height() - position.top - 10;
table_p.height(viewheight);
$(window).resize(function() {
var table_p = $("#table");
var position = table_p.position();
var viewheight = $(window).height() - position.top - 10;
table_p.height(viewheight);
});
}, 250);
Turns out setting a height in the css for #table fixed the problem, even though the height is replaced by js soon after.

Show div when it is 20% away from the bottom of the screen

Heyo,
so I was wondering if it is possible to show the fade-effect of a div, if it is 20% away from the bottom within the currend screen view. So for example if you scroll down on a page and the following contentbox gets a distance of 20% of the screen-height to the bottom of the screen, the fade-in effect runs.
I want this because of the responsive function. I don't want to write a new pixel height for the fade-effect everytime the Screensize changes.
Here's the code I'm currently using:
function Scroll(){
var top = document.getElementById('div1');
var ypos = window.pageYOffset;
if (ypos > 1000){
top.style.opacity = "1";
}
else {
top.style.opacity = "0";
}
}
window.addEventListener("scroll",Scroll);
Have you looked into scroll combined with position and height? https://api.jquery.com/scroll/ and https://api.jquery.com/position/ On the scroll you could get the position of the element in question and compare to the window. http://api.jquery.com/height/ and How to get the 'height' of the screen using jquery Those should be all the tools you need.

CSS dynamic Sticky footer required

I am trying to create an HTML form that is fixed to the bottom of the page. So when the user scrolls down, I want the input box to be fixed to the bottom.
But, when the user scrolls to a certain point (say 70% of the way down the page) I want the form to no longer be sticky, and to move up with the rest of the content.
Anyone got any ideas on how to do this using CSS/jQuery?
$(window).scrollTop() will give you the top position of your view port. You can combine this with the $(document).height() to calculate your % of height your are currently viewing. Based on that set the position to the sticky element
var height = $(document).height();
var topPos = $(window).scrollTop();
var perCentage = topPos/height;
if(perCentage > 0.7){
$('#sticky').css({'position','absolute','top':topPos});
}
else{
$('#sticky').css('position','fixed');
}

Fit image to width using fixed positioned button

I have a page with the following functionality: there is a large image that generates scoll (both horizontally and vertically) and a button in a fixed position (it remains in the top left corner, even with scroll) that, when clicked, fits the image to the client width.
Since position: fixed is not supported in Internet Explorer 8, I used a workaround - this is the function:
function setFixedPosition(jqueryWrapper, pixelsFromTop, pixelsFromLeft) {
jqueryWrapper.css('position', 'absolute');
var setOffsets = function() {
jqueryWrapper.css("top", (($(window).scrollTop() + pixelsFromTop) + "px"));
jqueryWrapper.css("left", (($(window).scrollLeft() + pixelsFromLeft) + "px"));
};
setOffsets();
$(window).scroll(function() {
setOffsets();
});
}
setFixedPosition($('#zoomFitButton'), 15, 15);
This is the button's action:
$('#zoomFitButton').click(function() {
$('img.preview').css('width', '100%');
});
The button remains fixed both in Firefox 13 and IE8.
But, under IE8, if I am scrolling somewhere, then I click the button, the button moves to a "strange" position:
If I scroll vertically, then click, it puts the button in the lower-left corner;
If I scroll horizontally, then click, it puts the button in the upper-right corner;
If I scroll both ways, then click, it puts the button somewhere in the center.
In Firefox, the button always remains in the upper-left corner (the place where I expect it to be), even after I click the fit to width button.
Here is a test page.
Is my code OK for this functionality (in principle), or I need to add something to the fit to width action (to fix my button positioning); or there is something wrong with IE (and I need a workaround - if so, any suggestions?)?
Thanks.
I found a solution that works in IE6 also.
I think the problem has something to do with IE not updating the scrollTop and scrollLeft positions after the document is resized.
So, after I resize the picture, I have to scroll to the upper-left corner (scrollTop(0) and scrollLeft(0)).
Unfortunately, if I have a large picture that needs vertical scrolling even when it's fit to width, the workaround brings me to the top of the page. So I added code to bring me back proportionally to the aproximate position I was before. I wrapped the logic in a more generic function:
function doSomethingThatAffectsScrollPosition(affectingScrollPositionFunction) {
var oldDocumentWidth = $(document).width();
var oldScrollFromLeft = $(window).scrollLeft();
var oldDocumentHeight = $(document).height();
var oldScrollFromTop = $(window).scrollTop();
affectingScrollPositionFunction();
var newDocumentWidth = $(document).width();
var widthRatio = (newDocumentWidth / oldDocumentWidth);
var newScrollFromLeft = (oldScrollFromLeft * widthRatio);
var newDocumentHeight = $(document).height();
var heightRatio = (newDocumentHeight / oldDocumentHeight);
var newScrollFromTop = (oldScrollFromTop * heightRatio);
$(window).scrollLeft(0); // Needed for button repositioning
$(window).scrollLeft(newScrollFromLeft);
$(window).scrollTop(0); // Needed for button repositioning
$(window).scrollTop(newScrollFromTop);
}
And I used the function in the fit to width button's action:
$('#zoomFitButton').click(function() {
doSomethingThatAffectsScrollPosition(function() {
$('img.preview').css('width', '100%');
});
});
Here is a test page.

set height div javascript

I'm adjusting the height of the box with no problems, now I would like to adjust the height of the box grabbing the top handle and adjust height but upwards. What would be a good way of doing this? thanks
(current downwards code)
var mY = event.clientY;
var originalHeight = parseInt(document.getElementById('somediv').style.height);
if(click == 1){ // down
var sY = event.clientY;
var finalHeight = originalHeight +sY-mY;
document.getElementById('somediv').style.height=finalHeight + 'px';
}else{ // up
resize upwards instead of downwards....
}
An element's position is defined by its top-left corner - you'll have to move it up at the same time as you extend it from the bottom.
Resizing a DIV "up" is not as easy as resizing it "down". The reason is that when you specify a HEIGHT, the DIV will expand "down" as its normal flow. The top left corner of the DIV will remain static.
Allowing the DIV to be resized "UP" will give you a lot of issues. In order to do this, you will need to set the HEIGHT, then the POSITION of the DIV to currentHeight - previousHeight. You will notice it will jitter a lot when doing this.
Also, anything above your DIV will need to be displayed accordingly.
You should look into jQuery and the jQuery Dimensions plugin.

Categories