I am building my own custom Modal/Dialog box and I wanted to center it to the viewable area. For example if the web page is very large and the viewer scrolls down very far and then clicks to open my custom Modal/Dialog box it will open up but then the user will have to scroll to the top to see it. I would like for the Modal to open up in the center of the viewable area. Can someone show me how to calculate the center of the viewable area, so that when the modal is shown it can be positioned there absolutely.
Twitter bootstrap does this with their Modal where it slides down to the center of the viewable are and I would like to do the same with my custom widget,
For example I'm using something like this:
$(function() {
/**
* Moves an element to the center of the current screen (considering scrolling)
*/
$.fn.center = function (position) {
for (var i = 0; i < this.size(); i++) {
var t = $(this[i]);
t.css("position", position || "absolute");
var extra_top = position != "fixed" ? $(window).scrollTop() : 0;
var extra_left = position != "fixed" ? $(window).scrollLeft() : 0;
t.css("top", Math.max(0, ($(window).height() - t.outerHeight()) / 2 + extra_top) + "px");
t.css("left", Math.max(0, ($(window).width() - t.outerWidth()) / 2 + extra_left) + "px");
}
return this;
}
...
});
Usage: $("#modal").center();
the easiest way to do this would be to see the height and width of your modal window.
then, set position to fixed
top: 50%;
left: 50%;
margin-left: - "INSERT WIDTH DIVIDED BY 2"
margin-top: - "INSERT HEIGHT DIVIDED BY 2"
this will always center the modal on the page.
.page{
position: absolute;
height:1000px;
width:1000px;
background-color: blue;
}
.modal{
width: 300px;
height:300px;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
position: fixed;
background-color:red;
}
see my attached jsfiddle.
http://jsfiddle.net/yxTSh/
Related
I have a slideToggle(); menu which is positioned absolutely on the bottom of the page. The slideToggle(); is going to show big content and sometimes this ends up being taller than the viewport.
My question is, how do I prevent the menu to:
1 - Not going on the top of the logo as they are both on the sidebar of my website
2 - When it reaches a height taller than the viewport, this will be scrollable
To explain myself better, I'd like the content of my menu, once is shown by slideToggle(); and whenever is taller than the viewport's height minus logo's height, to stop right below my logo and to continue expanding downwards if that's the case, and that I am able to scroll it down despite its position:absolute.
Does anyone have an idea on how I can achieve that? Please have a look at the snippet.
$( "#click" ).click(function() {
$( ".content" ).slideToggle();
});
.logo {
background: #11a1d6;
margin: 10px;
height: 100px;
width: 300px;
}
.list {
width: 200px;
position: absolute;
bottom: 20px;
}
.content {
background: #082965;
height: 10000px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo"></div>
<ul class="list">
<li id="click">
Click me
<div class="content"></div>
</li>
</ul>
You would need an additional wrapper for your .content that has overflow-y: hidden and height set to the max height available. To determine this height you need a function that runs after your DOM is loaded and adds this to your .content-wrapper:
function setContentMaxHeight() {
let containerHeight = $('.container').height()
let logoMargin = $('.logo').offset().top;
let logoHeight = $('.logo').height();
let listHeight = $('.list').height();
let listMargin = 20;
let maxHeight = containerHeight - ( 2 * logoMargin ) - logoHeight - ( 2 * listMargin) - listHeight;
$('.content-wrapper').css({
'height': maxHeight + 'px'
});
}
$(document).ready(function(){
setContentMaxHeight();
window.onresize = setContentMaxHeight; // detect the window resize and rerun the function
});
working fiddle
I am working on a website that while mouse over a DVD shows the details like you see in picture 1, however, it doesn't work on those DVD placed to the right of the screen as you can see in picture 2, the content got chopped.
How to let it automatically choose which direction to display the content? Like if this DVD is close to the right screen, show content to the left?
Many thanks!
.imgbox .imgbox_content{
display: none;
}
.imgbox:hover .cover{
display: none;
}
.imgbox:hover .imgbox_content{
display: block;
z-index:2;
width:600px;
border-radius: 1%;
border:1px solid gray;
-webkit-transition: 1s;
position:absolute;
background: black;
color:white;
}
Here's a quick solution using JS. Not seeing any JS/HTML though, so you'll need to adapt it to whatever your code looks like:
var imgboxes = document.querySelectorAll('.imgbox');
imgboxes.forEach(function (imgbox) {
var rect = imgbox.getBoundingClientRect(),
screen_width = document.body.clientWidth,
popup_width = <<POPUP_CONTENT_WIDTH>>;
if (rect.right + popup_width > screen_width) {
imgbox.classList.add('to_left');
}
});
and then change your CSS to something like this for the popup:
.imgbox:hover .imgbox_content{
display: block;
z-index:2;
width:600px;
border-radius: 1%;
border:1px solid gray;
-webkit-transition: 1s;
position:absolute;
background: black;
color:white;
}
imgbox:hover .imgbox_content.to_left {
/* this assumes you've got a position:relative item wrapping the imgbox and that .imgbox_content is a child */
right: 0;
}
In order to get even more complete, you can handle screen resizes too:
window.addEventListener('resize', calculate_pos_imgboxes)
var calculate_pos_imgboxes = function() {
var imgboxes = document.querySelectorAll('.imgbox');
imgboxes.forEach(function (imgbox) {
var rect = imgbox.getBoundingClientRect(),
screen_width = document.body.clientWidth,
popup_width = <<POPUP_CONTENT_WIDTH>>;
if (rect.right + popup_width > screen_width) {
imgbox.classList.add('to_left');
} else {
imgbox.classList.remove('to_left');
}
});
}
calculate_pos_imgboxes();
The easiest way to do this is to just force your popups to appear at the center of the screen. You can do this using position:absolute. However, if you want the popups bounded to the location of the item - then you have to do some calculations.
It would look like this.
Get width of your popup.
Get distance from left edge of target to right edge of screen.
Compare 1 and 2
If dist < width, then offset to the left. Otherwise, offset to the right.
The code for this would look something like (using jQuery).
var padding = 20;
var elem = $(yourpopup);
var popupwidth = elem.width();
var position = p.position();
var dist = position.left - popupwidth;
// if the popup is wider than distance to edge plus padding, then offset margin using negative value.
if (dist < popupwidth){
elem.css('margin-left', "'-" + popupwidth + padding + "px'" );
}
I am trying to use Dat GUI to add some controls to a Three.js project. I really like the look and feel of the controls provided by Dat GUI. However, I am having some problems positioning the menu within the page. I really need to centre the menu horizontally and vertically and also set a custom width and height for the menu. Surely this must be possible?
Currently I am trying the following. The menu is almost centering horizontally, so something is working. But it is not centering vertically (its just stuck to the top of the page) and the size of the menu is not changing at all (the width and height parameters have no effect).
Can anyone help me out with this?
javascript:
var gui;
var MenuClass = function()
{
this.speed = 0.5;
};
var theMenu = new MenuClass();
gui = new dat.GUI();
gui.domElement.id = 'gui_css';
gui.add(theMenu, 'speed', -5, 5);
css:
#gui_css
{
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 200px;
}
Try:
to add a div which is a container for your dat.GUI element
<div id="gui_container"></div>
then in code
var gui = new dat.GUI({ autoPlace: false });
gui.domElement.id = 'gui';
gui_container.appendChild(gui.domElement);
and then in styles
#gui_container{
position: absolute;
top: 50%;
left: 50%;
}
#gui{
transform:translate(-50%, -75px);
}
Note, that -75px in transform:translate(-50%, -75px); means that gui.domElement has no height attribute and you set translation by y-axis approximately a half of its height as you see it on the screen.
jsfiddle example
try this:
position: absolute;
top: 0;
left: 0;
right:0;
bottom: 0;
this will center the element horizontally and vertically as long as it has width and heigth or else it will stretch the element.
I'm trying to create a banner that blurs when you scroll, but when I try it, my image fills the entire page (it's behind all of the elements, but it still fills the page.) I want it in a divider located at the top as a banner.
HTML/CSS
<div id="banner-container" object="banner" style="height: 250px; width: 100%">
<div class="banner" style="position: fixed; background-position: center; -webkit-background-size: cover; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background-image:url('http://s6.postimg.org/d7gcsqvdt/image.jpg')"></div>
<div class="banner-blurred" style="opacity: 0; background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>
JavaScript
$(window).scroll(function() {
var s = $(window).scrollTop(),
opacityVal = (s / 150.0);
$('.banner-blurred').css('opacity', opacityVal);
});
you can try something like
$(window).scroll(function() {
var s = $(window).scrollTop(),
if (s >= 100){
$('.banner').css({'bottom':'auto', 'height' : '250px'});
}else{
$('.banner').css({'bottom':'0', 'height' : 'auto'});
}
opacityVal = (s / 150.0);
$('.banner-blurred').css('opacity', opacityVal);
});
as I understand from ( my image fills the entire page (it's behind all of the elements, but it still fills the page.) I want it in a divider located at the top as a banner.) you need .banner class div to be fixed in the same position as id="banner-container" .. and you make .banner position fixed and bottom : 0 ... so you need to change it to auto and add height : 250px as your id="banner-container" .. I made that code after scroll is bigger than 100px it will change .banner css
I have a div #HangerLeft that the css.right is automatically generated via jQuery to sit on the left side of the page based on the body width. It is absolute positioned.
function hangerLeft() {
var hangerPosition = (jQuery("body").innerWidth() / 2) + (990 / 2);
jQuery("#HangerLeft").css("position","absolute").css("right", hangerPosition +"px").css("top","20px");
}
Inside the #HangerLeft div I have a #scrollWrapper div with no positioning and inside the #scrollWrapper i have a #scrollBox. The #scrollBox is absolute positioned.
#scrollWrapper { width:130px; height:400px; border:1px solid #fff;}
#scrollBox { position: absolute; top: 100; margin-top: 25px; padding-top: 0px;}
#scrollBox.fixed { position: fixed; top: 0;}
The #scrollBox sits until you scroll. Once you scroll past the top of the #scrollBox div javascript adds a class to make the #scrollBox position:fixed instead of absolute.
<script>
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#scrollBox').offset().top - parseFloat($('#scrollBox').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#scrollBox').addClass('fixed');
} else {
// otherwise remove it
$('#scrollBox').removeClass('fixed');
}
});
}
});
</script>
In Firefox and IE this works fine.
In Safari and Chrome once the #scrollBox javascript hits, the #scrollBox div jumps out of the #HangerLeft div into the middle of the page and ignores the positioning of the #HangerLeft div.
I have been battling this for 2 weeks and am at a loss.
Any help would be appreciated.
Ok, so I reworked your code. I kept it to your liking.. I would set this up in a different way but this works for your approach. You can see a live version here
JavaScript:
<script type="text/javascript">
function setupScrollBox(){
// cache box element and use wrapper as your position element
var hanger = $("#HangerLeft"),
position = $("#wrap").offset();
hanger.css({
position: 'absolute',
left: position.left - $("#scrollWrapper").outerWidth(),
marginTop: '25px'
});
}
$(document).ready(function(){
// check if IE6
var msie6 = $.browser.msie && $.browser.version < 7;
setupScrollBox();
// attach resize event to window
$(window).resize(function(){
setupScrollBox();
});
// check browser
if(!msie6){
// attach scroll event
$(window).scroll(function (event) {
// get scroll position and cache element so we only access it once
var y = $(this).scrollTop(),
wrap = $('#HangerLeft');
// if scroll position is greater than 100 adjust height else do nothing
if(y > 100)
// you can animate the position or not, your call
wrap.stop().animate({top: y}, 250);
//wrap.css('top', y+'px');
});
}
});
</script>
CSS:
#HangerLeft {
top: 100px;
}
#scrollWrapper {
width: 130px;
}
#scrollBox {
position: relative;
margin-top: 25px;
padding-top: 0px;
z-index: 10;
}
HTML:
<div id="HangerLeft">
<div id="scrollWrapper">
<div id="scrollBox">
<div id="mainContainer">
<div id="shareContainer">
<div class="moduleShareHeader">SCROLL BOX</div>
</div>
</div>
</div>
</div>
</div>