JQuery position in the middle of current screen - javascript

I am using Jquery dialog like this:
<body>
<div id="comments_dialog">
Insert a comment
<form>
<input type="text" id="search" name="q">
</form>
</div>
....
</body>
dialog = $( "#comment_dialog" ).dialog({
autoOpen: false,
height: 400,
width: 350,
dialogClass: "flora",
modal: true,
buttons: {
"New Comment": addComment,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});
My page is a scrollable page with a lot of data.
The issue is that the dialog is being displayed in the middle of the page, and I would like it to be displayed in the middle of the CURRENT screen, so the user wouldn't need to scroll to see it.
How can I do it?
EDITED
Based on a few solutions here, I set the CSS to be fixed like this:
.flora.ui-front {
z-index: 1000 !important;
position:fixed !important;
}
.flora.ui-dialog {
z-index: 1001 !important;
position:fixed !important;
}
However, I read that position fixed conflicts with zIndex.
What can I do in this case that I need the dialog to put ontop and in the middle of current screen?

You might be using position:absolute; in your css, try changing it to position:fixed;
#comment_dialog{
position:fixed;
}

What i always use for my modals / dialogs:
#comment_dialog{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
As long as your div has a size (doesn't need to be a fixed size) it will display it in the middle of the window (centered horizontally and vertically)
To apply these styles dynamically to your element with Jquery, use this:
$("#comment_dialog").css({
"position" : "fixed",
"top": "0",
"left": "0",
"right": "0",
"bottom": "0"
});

do a position fixed, and use calc function for top and left
#comment_dialog {
position:fixed;
left: calc(50% - 200px) !important;
top: calc(50% - 175px) !important;
}
i think that's help for you

try this
dialog = $( "#comment_dialog" ).dialog({
autoOpen: false,
height: 400,
width: 350,
my: "center",
at: "center",
of: window,
z-index : 9999,
modal: true,
buttons: {
"New Comment": addComment,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});

You can use the following CSS.
Please run the example in "Full Screen" and resize browser window to see the effect.
Explanation:
Use position:fixed for your dialog, this means dialog element is positioned relative to the browser window.
Set position top and left using calc which enable to perform calculations to determine CSS property values.
Value for top is calculated as: 50% of the actual viewport height minus half dialog height, so dialog will be always placed in the center of the view port height.
Value for left is calculated as: 50% of the actual viewport width minus half dialog width, so dialog will be always placed in the center of the view port width.
Result is the dialog always placed at the center of the viewport.
#comments_dialog {
position:fixed;
top: calc(50vh - 250px/2);
left: calc(50vw - 350px/2);
height: 250px;
width: 350px;
background-color:yellow;
z-index: 1000;
}
<div id="comments_dialog">
Your content here.
</div>
You can have the same result using jQuery in this way, it will add inline style to your dialog:
$("#comments_dialog").css({
"position": "fixed",
"top": "calc(50vh - 250px/2)",
"left": "calc(50vw - 350px/2)",
"width": "350px",
"height": "250px",
"background-color": "yellow",
"z-index": "1000";
});

Related

Don't Scroll Body With Mousewheel on a fixed, scrollable div

I have a webpage with a fixed y scrollable sidenav and a main body. When I scroll with my mouse scrollwheel, pointer inside the side nav, sometimes the body will scroll depending on where the element is positioned. Technically the margin of the main body is still overlapping with the side nav due to bootstrap offset like offset-md-3.
How can I stop the main body from scrolling while the mouse is on the sidenav? I need the solution without using any plugins. jQuery and Bootstrap 4 only please.
My initial instinct was like this, but changing to fixed caused the main body to snap back to the top.
I disabled scrolling on hover over the .SideNav, but I needed to keep the scrollbar for continuity.
$(".SideNav").hover(function () {
$('body').css({
"position": 'fixed',
"overflow-y": 'scroll'
});
},
function () {
$('body').css({
position: 'inherit',
"overflow-y": 'scroll'
});
});
Initially using fixed was causing the body to snap back to scrolling from the top of the page. I had to compensate like so.
var offset;
$(".SideNav").hover(function () {
offset = window.pageYOffset // Get offset to set position when fixed
$("main").css("position", "fixed");
$('body').css({
"position": 'fixed',
"overflow-y": 'scroll',
"top": 0 - offset
});
},
function () {
$("main").css("position", "inherit");
$('body').css({
"position": 'inherit',
"overflow-y": 'scroll'
});
$(window).scrollTop(offset); // When scroll bar returns, set page to original position
});
I found it to be an interesting situation and reading your answer I was wondering why you needed to also change the position and top properties although it very well may be necessary to accommodate to your specific html and css structure.
Any way, I thought I could include a different approach in a simpler/minimal scenario. Let me know what you think:
var currentOverflow;
$(".SideNav").hover(()=> {
currentOverflow = $('body').css('overflow');
$('body').css({
overflow: 'hidden'
})
},
() => {
$('body').css({
overflow: currentOverflow
})
});
.SideNav{
position: fixed;
height: 100vh;
width: 20vw;
background: red;
top: 0;
left: 0
}
span{
margin-left: 30vw
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SideNav" id="fixed"></div>
<br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span>
<br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span>
<br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span>
<br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span>

Make a Modal at the Top Left Corner of the Window

I have a modal created using Jquery UI Library(http://jqueryui.com/dialog). Below is my code:
$("#mypreview_modal").dialog({
autoOpen: false,
draggable: true,
height: 520,
modal: true,
resizable: false,
width: 525,
buttons: {
"Print": function() {
},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
I want to position my dialog at the top left corner of the window with the right vertical scrollbar at the top right corner of the window.
#mypreview_modal {
position: absolute;
top: 0px;
left: 0px
}
position:absolute;
top:0;
left:0;

Animate Element to right edge of the window using Jquery?

I am trying to animate a div to the right of the window using Jquery. I am also using Jquery UI to change the color of the div. I am animating the div all over the window as well. I am just experimenting with jquery animations though, nothing critical. Any ways this is the code I have so far:
HTML:
<div id="box1"></div>
<button type="button" id="btn"> Click Me! </button>
CSS:
#box1{
width: 200px;
height: 200px;
background-color: red;
border: 0px solid black;
border-radius: 0px;
position: relative;
}
#btn{
position: fixed;
top: 600px;
display: table-cell;
font-size: 30px;
}
JQuery:
var allow = true;
var animating = false;
$("#btn").click(function(){
if(allow == true){
if(!animating){
animating = true;
$("#btn").hide();
$("#box1").animate({backgroundColor: "yellow", borderWidth: "5px"}, 1000, "linear").animate({left: "500px"}, 1000).animate({top: "500px"}, 1000);
$("#box1").animate({left: "1000px", top: "0px"}, 1000).animate({left: "500px"}, 1000).animate({top: "500px"}, 1000, function(){
allow = false;
animating = false;
$("#btn").show().text("Click Me Aagain!");
});
}
} else {
if(!animating){
$("#btn").hide();
animating = true;
$("#box1").animate({top: 0}, 1000).animate({left: 0}, 1500).animate({backgroundColor: "red", borderRadius: 0, borderWidth: 0, width: "100px", height: "100px"}, 1000, function(){
$("#btn").show().text("Start Over!");
});
animating = false;
allow = true;
}
}
});
The first variable at the top is to toggle between two different animation sequences. The next is to ensure that the animations are not triggered twice by mistake. The element I am trying to move all the way to the right is #box1 and I want it to do so at the end of the first sequence!
Thanks for your help!
There are 2 options you can do to get the box to animate to the right edge of the area.
1) You could set the css "left: auto", and animate the css "right:0". To do this you would need to take some extra steps. You would need to set css "position: absolute" to the box and would need to wrap the box in a div that has the css "position: relative" with a width of 100%. That way, the box knows where the right edge because its most immediate parent that has css "position:relative" is setting the boundary. Doing this option would require a little fine tuning because switching between animating the left position and the right position will cause some jumping.
2) This option you could continue animating the left position, but to get it to animate to the right, you would need jquery to calculate how wide the page is, and subtract the with width of the box. It would look like this:
left: ($(document).outerWidth() - $('#box1').outerWidth())

How do you make Javascript add the width of one element to another's height?

This is my first website. I'm having fun with it, but there are some things I can't seem to figure out.
I have an image, and I have four smaller images that look like portions of the main image. I have set it up so that the smaller images fade in as the main image fades out, and they fly off to the side of the screen. To position the small images correctly, I set their position to that of the main image, and I'm trying to get the bottom two images to have half the main images width added to their height. For some reason, my javascript/jQuery isn't working though. I've messed around with the code, and found when I take out the variable "width" the code works, so I think it must be a problem with the way I declared or called the variable.
Here's some of my code:
HTML:
<img class="fmsmall smallbutton" src="Images/FacilityMaintenance 2.png" />
<img class="lightsmall smallbutton" src="Images/Lighting.png" />
<img class="pssmall smallbutton" src="Images/PowerSweeping.png" />
<img class="landsmall smallbutton" src="Images/Landscaping.png" />
CSS:
#logoBig {
position: fixed;
left: 50%;
margin-left: -20%;
width: 40%;
top: 15%;
}
.pssmall {
position: fixed;
left: 50%;
margin-left: -20%;
width: 20%;
top: 15%;
z-index: 100;
}
.landsmall {
position: fixed;
left: 50%;
width: 20%;
top: 15%;
z-index: 100;
}
javascript/jQuery:
function categoryClick( beforeClickButton,
afterClickButton,
subcategoryMenu,
subcategoryHeader,
leftClickBefore,
topClickBefore,
leftClickAfter,
topClickAfter,
low
){
$(beforeClickButton).click(function()
{
$(afterClickButton).fadeIn("fast");
/*Here's the code that isn't working*/
var width = $("#logobig").width();
if(low = true){
$(afterClickButton).animate( {
top: "+=" + (width / 2) + "px"
});
}
$(".categoryButton").hide();
$("#logoBig").fadeOut("slow");
$("#selectCategory").delay(250).fadeOut("slow");
$(afterClickButton).delay(250).animate({
left: leftClickBefore,
top: topClickBefore
}, "slow");
$(subcategoryHeader).delay(250).fadeIn("slow")
$(subcategoryMenu).delay(1000).fadeIn("slow");
$("#accordion").fadeIn("slow");
$(afterClickButton).delay(500).one("click", function(){
$(this).animate({
left: leftClickAfter,
top: topClickAfter
}, "slow");
$(subcategoryHeader).delay(250).fadeOut("slow");
$(".categoryButton").show();
$("#logoBig").delay(600).fadeIn("slow");
$("#selectCategory").delay(500).fadeIn("slow");
$(afterClickButton).delay(250).fadeOut("fast");
$(subcategoryMenu).fadeOut("slow");
});
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$(subcategoryMenu).accordion({ collapsible: true,
header: ".menuItem",
heightStyle: "content",
active: false,
icons: icons
});
});
}
categoryClick( ".facilityMaintenance",
".fmsmall",
".fmMenu",
".fmHeader",
"-=30%",
"-=25%",
"+=30%",
"+=25%",
false
);
categoryClick( ".lighting",
".lightsmall",
".lightMenu",
".lightHeader",
"-=50%",
"-=20%",
"+=50%",
"+=20%",
false
);
categoryClick( ".powerSweeping",
".pssmall",
".psMenu",
".psHeader",
"-=32%",
"-=55%",
"+=32%",
"+=55%",
true
);
categoryClick( ".landscaping",
".landsmall",
".landMenu",
".landHeader",
"-=50%",
"-=55%",
"+=50%",
"+=55%",
true
);
The actual site is on my company's server, so I just put a copy on a free server to post here. Here's a link. The error messages don't show up on the actual site.
http://www.pcsinternal.net76.net/newcontractportal/go.html
Regarding the error messages, I have set a link to a password protect PHP script on line one, but it isn't linking properly. How might I fix that?
Thank you for all your help.

JQuery Animate

Really easy, I'm sure...
I have a div which is the full screen and I want it to slide down from the top to the bottom.
I have this:
$('#full-screen').animate({
"bottom":0,
height: 'toggle'
}, 1000, function() {
// Animation complete.
});
But this is the wrong way round as the bottom moves up; how do I get the bottom to stay where is is and the top to slide down to meet it?
Thanks
Your exact code works fine when you have absolute positioning on the element.
http://jsfiddle.net/hhEJD/
CSS
body {
padding: 0;
margin: 0;
}
#full-screen {
background: orange;
color: white;
width: 100%;
height: 100%;
position: absolute; // position absolute, and your code works
clip:auto;
overflow:hidden;
}​
HTML
<div id="full-screen"></div>​
Your code
$('#full-screen').animate({
"bottom":0,
height: 'toggle'
}, 1000, function() {
// Animation complete.
});
You're setting the bottom style to 0 in your animate. This has no effect if you don't use absolute positioning on your element.
You need to also animate the 'top' property of the div as well as disabling the animation queue so both animations happen at the same time.
$('#slide2').animate(
{height: '0px'},
{
duration: 1000,
queue: false, //Disable the queue so both events happen at the same time.
complete: function()
{
// animation complete
}
}
).animate( //also animate the top property
{top: '500px'},
{duration: 1000}
);​
Try it out over at jsFiddle.
You can use marginTop for it:
var h=$('#full-screen').height();
$('#full-screen')
.animate(
{marginTop: h, height: 'toggle'},
1000,
function() {
// Animation complete.
}
)
see at: http://jsbin.com/esotu3

Categories