jQuery .CSS won't position element to the bottom right!
I am trying to make a simple Modal Box that can be minimzed to the bottom right of the screen so i can make it into a plugin but i cant get the simple CSS to work and position itself to the bottom right! Here is all the code you can instantly paste it and see the example work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Minimize Window</title>
<script src="http://www.fzilla.com/f/jquery"></script>
<style>
* {margin:0px; padding:0px;}
body {font-family: SegoeUI, Helvetica, Arial, sans-serif; font-size:14px;}
.window {position:fixed; height:auto; width:450px; border:1px solid #ccc; overflow:hidden;}
.window.minimized {height:50px; bottom:100px; right:50px;}
.window .top_bar {border-bottom:1px solid #ccc; padding:3px 5px;}
.window .top_bar .title {font-size:1.4em; font-weight:600;}
.window .top_bar .controls {font-weight:600; float:right;}
.window .top_bar .controls a {cursor:pointer; color:#666;}
</style>
<script>
$(document).ready(function(){
var initial_height = $(".window").height();
var windows_on = false;
$(".minimize").click(function(){
var t = $(this);
var tx = t.html();
if (tx == "[-]") {
// code when minimizing and putting to bottom right
windows_on = false;
t.html("[+]");
t.parents(".window").css({ "height": "50px", "bottom": "100px", "right":"50px" });
t.parents(".window").addClass("minimized");
} else {
// code when making bigger and centering
windows_on = true;
t.html("[-]");
t.parents(".window").removeClass("minimized");
t.parents(".window").css({ "height": "400" });
center();
}
});
$(window).resize(function(){ if (windows_on) { center() } });
var w, h, aw, ah, y, x;
function center() {
var t = $(".window");
w = t.width();
h = t.height();
aw = $(window).width();
ah = $(window).height();
y = (ah - h) / 2;
x = (aw - w) / 2;
t.css({"top":y, "left":x});
}
});
</script>
</head>
<body>
<div class="window minimized">
<div class="top_bar">
<span class="title">This is the title of our window</span>
<span class="controls"><a class="minimize">[+]</a></span>
</div><!-- top_bar -->
<div class="content">
<p>开发者_JAVA百科Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui tellus, feugiat id interdum id, tempor id felis. Nam id imperdiet nulla. Nunc auctor turpis id lectus mollis vel vehicula mauris porta. Nullam cursus mi at turpis viverra sed euismod metus elementum. Integer imperdiet, felis sit amet rhoncus eleifend, nisi orci convallis libero, in iaculis mauris sapien vel est.</p>
<p> Morbi urna mi, dapibus vitae tincidunt in, commodo vel enim. In porta laoreet elit id vehicula. Proin id augue mauris, vel commodo diam. Fusce a metus et est porta fringilla at congue enim. Nulla elit ligula, aliquam sit amet bibendum vitae, rutrum ac quam. Nunc diam erat, condimentum sed sagittis sed, posuere eu mi. Etiam sit amet nibh vel massa faucibus dictum et vel metus. Sed gravida commodo neque eu euismod. Fusce eget orci sed lacus hendrerit porttitor.</p>
</div><!-- content -->
</div><!-- window -->
</body>
</html>
Any suggestions would help! Thanks!
You should be sure to set top: and left: to auto before setting conflicting positioning specifiers (right, bottom). Otherwise the browser will choose one over the other, depending on the situation.
Body has no heigth set and will therefore maybe not fill your whole screen. The .window will then be alligned at the botom of the body-container size Try setting a heigth for the body element.
Here is a full working solution ..
http://www.jsfiddle.net/wvgVv/
You do not need the center method at all...
just set top/left for the .window to 50% and use negative margins to center it (based on size of window) ...
- On minimizing you set height, bottom and right properties
- On maximizing, you set height and then center() i.e. set top and left properties
These are inline styles thus with higher priority than properties set via a stylesheet.
Adding and removing .minimized thus has a lower priority.
Solutions:
1/ Set bottom and right to auto when maximizing (because minimizing set them) and top and left to auto when minimizing (because center() set them when maximizing) .
$(".minimize").click(function(){
var t = $(this);
var tx = t.html();
if (tx == "[-]") {
// code when minimizing and putting to bottom right
windows_on = false;
t.html("[+]");
t.parents(".window").css({ "height": "50px", "left": "auto", "top": "auto", "bottom": "100px", "right":"50px" });
t.parents(".window").addClass("minimized");
} else {
// code when making bigger and centering
windows_on = true;
t.html("[-]");
t.parents(".window").removeClass("minimized");
t.parents(".window").css({ "height": "400px" , "bottom": "auto", "right":"auto" });
center();
}
});
2/ better: don't use .css() but just .addClass() on .toggle() If your CSS are OK, it'll have the same effect. Bonus: no more hardcoded values in your JS file.
So i tried the Toggle with using just CSS to do it, and it works great... BUT as soon as i added the center script it breaks the minimize option because it keeps working even though my if statement has been set to false... here is the new code (much slicker):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Minimize Window</title>
<script src="http://www.fzilla.com/f/jquery"></script>
<style>
* {margin:0px; padding:0px;}
body {font-family: SegoeUI, Helvetica, Arial, sans-serif; font-size:14px; height:1000px;}
.window {position:fixed; height:auto; width:450px; bottom:auto; right:auto; left:auto; top:auto; border:1px solid #ccc; overflow:hidden;}
.window.min {height:31px; bottom:50px; left:auto; top:auto; right:25px;}
.window.max {height:auto; bottom:auto; left:40%; top:30%; right:auto;}
.window .top_bar {border-bottom:1px solid #ccc; padding:3px 5px;}
.window .top_bar .title {font-size:1.4em; font-weight:600;}
.window .top_bar .controls {font-weight:600; float:right;}
.window .top_bar .controls a {cursor:pointer; color:#666;}
.window .content {padding:5px;}
.window .content p {margin-bottom:1.2em;}
</style>
<script>
$(document).ready(function(){
var windows_on = false;
$(".minimize").toggle(function(){
$(this).html("[-]");
$(this).parents(".window").removeClass("min").addClass("max");
windows_on = true;
center();
},
function() {
$(this).html("[+]");
$(this).parents(".window").removeClass("max").addClass("min");
windows_on = false;
});
// code for positioning center!
$(window).resize(function(){ if (windows_on) { center() } });
var w, h, aw, ah, y, x;
function center() {
var t = $(".window");
w = t.width();
h = t.height();
aw = $(window).width();
ah = $(window).height();
y = (ah - h) / 2;
x = (aw - w) / 2;
t.css({"top":y, "left":x});
}
});
</script>
</head>
<body>
<div class="window min">
<div class="top_bar">
<span class="title">This is the title of our window</span>
<span class="controls"><a class="minimize">[+]</a></span>
</div><!-- top_bar -->
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui tellus, feugiat id interdum id, tempor id felis. Nam id imperdiet nulla. Nunc auctor turpis id lectus mollis vel vehicula mauris porta. Nullam cursus mi at turpis viverra sed euismod metus elementum. Integer imperdiet, felis sit amet rhoncus eleifend, nisi orci convallis libero, in iaculis mauris sapien vel est.</p>
<p> Morbi urna mi, dapibus vitae tincidunt in, commodo vel enim. In porta laoreet elit id vehicula. Proin id augue mauris, vel commodo diam. Fusce a metus et est porta fringilla at congue enim. Nulla elit ligula, aliquam sit amet bibendum vitae, rutrum ac quam. Nunc diam erat, condimentum sed sagittis sed, posuere eu mi. Etiam sit amet nibh vel massa faucibus dictum et vel metus. Sed gravida commodo neque eu euismod. Fusce eget orci sed lacus hendrerit porttitor.</p>
</div><!-- content -->
</div><!-- window -->
</body>
</html>
加载中,请稍侯......
精彩评论