function Chat(id) {
function resize() {
var chat_emb = $("#" + id);
var height = $(window).height() - 19;
var width = $(window).width() - 19;
chat_emb.height(height);
chat_emb.width(width);
var boxw = chat_emb.width() / 1.20;
var boxh = chat_emb.height();
var boxtop = (boxh / 5) / 90;
boxleft = (boxw / 5) / 90;
var box = $("#cmsgs")
var input = $("#input")
var ulw = width - boxw
var ulh = chat_emb.height() + 3;
var ul = $("#ul");
var rightul = (ulw + boxw - width) + 10
//check if box has a height
//if it does then no need to make element
if (box.height()) {
box.css("position", "absolute");
box.css("top", boxtop);
box.css("left", boxleft)
box.height(boxh)
box.width(boxw);
} else {
var box = document.createElement("div");
box.id = "cmsgs";
document.getElementById(id).appendChild(box);
var box = $("#cmsgs")
box.css("position", "absolute");
box.css("top", boxtop);
box.css("left", boxleft);
box.height(boxh)
box.width(boxw);
}
if (!input.height()) {
var input = document.createElement("input");
input.setAttribute("id", "input");
document.getElementById(id).appendChild(input);
input = $("#input")
input.width(boxw - 5)
input.css("position", "absolute");
input.css("left", boxleft);
input.css("bottom", boxtop);
} else {
input = $("#input")
input.width(boxw - 5)
input.css("position", "absolute");
input.css("left", boxleft);
input.css("bottom", boxtop);
}
if (ul.height()) {
ul.height(ulh + 3);
ul.width(ulw);
ul.css("postition", "absolute");
ul.css("right", rightul);
} else {
var ul = document.createElement("div");
document.getElementById(id).appendChild(ul);
ul.id = "ul";
ul = $("#ul");
ul.height(ulh + 6);
ul.width(ulw);
ul.css("position", "absolute");
ul.css("right", rightul);
}
}
resize();
//resize event
$(window).bind("resize", function() {
resize()
});
$(document).bind("resize", function() {
resize()
});
var box = $("#cmsgs");
box.css("background-color", "gray");
var input = $("#input")
input.css("background-color", "#0FF");
var ul = $("#ul");
ul.css("background-color", "#FF0");
ul.css("padding", 0, 0, 0, 0, 0);
ul.css("margin", 0, 0, 0, 0, 0);
box.css("padding", 0, 0, 0, 0, 0);
box.css("margin", 0, 0, 0, 0, 0);
}
Chat("chatbox")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox"></div>
正如您在运行代码片段时看到的,黄色部分有很多空白。我怎样才能摆脱它呢?我知道这可能很难理解,因为代码有点挤在里面。所以,如果你有任何困难,我会解释更多。
我试过将边距和填充设置为0,但似乎不起作用。
最佳答案
你可以试试下面的代码。代码中的一些更改
function Chat(id) {
function resize() {
var chat_emb = $("#" + id);
var height = $(window).height() - 19;
var width = $(window).width() - 19;
chat_emb.height(height);
chat_emb.width(width);
var boxw = chat_emb.width() / 1.20;
var boxh = chat_emb.height();
var boxtop = (boxh / 5) / 90;
boxleft = (boxw / 5) / 90;
var box = $("#cmsgs")
var input = $("#input")
var ulw = $(window).width() - boxw
var ulh = chat_emb.height() + 3;
var ul = $("#ul");
var rightul = (ulw + boxw - $(window).width())
//check if box has a height
//if it does then no need to make element
if (box.height()) {
box.css("position", "absolute");
box.css("top", boxtop);
box.css("left", boxleft)
box.height(boxh)
box.width(boxw);
} else {
var box = document.createElement("div");
box.id = "cmsgs";
document.getElementById(id).appendChild(box);
var box = $("#cmsgs")
box.css("position", "absolute");
box.css("top", boxtop);
box.css("left", boxleft);
box.height(boxh)
box.width(boxw);
}
if (!input.height()) {
var input = document.createElement("input");
input.setAttribute("id", "input");
document.getElementById(id).appendChild(input);
input = $("#input")
input.width(boxw - 5)
input.css("position", "absolute");
input.css("left", boxleft);
input.css("bottom", boxtop);
} else {
input = $("#input")
input.width(boxw - 5)
input.css("position", "absolute");
input.css("left", boxleft);
input.css("bottom", boxtop);
}
if (ul.height()) {
ul.height($(window).height());
ul.width(ulw);
ul.css("postition", "absolute");
ul.css("right", rightul);
} else {
var ul = document.createElement("div");
document.getElementById(id).appendChild(ul);
ul.id = "ul";
ul = $("#ul");
ul.height($(window).height());
ul.width(ulw);
ul.css("position", "absolute");
ul.css("right", rightul);
}
}
resize();
//resize event
$(window).bind("resize", function() {
resize()
});
$(document).bind("resize", function() {
resize()
});
var box = $("#cmsgs");
box.css("background-color", "gray");
var input = $("#input")
input.css("background-color", "#0FF");
var ul = $("#ul");
ul.css("background-color", "#FF0");
ul.css("padding", 0, 0, 0, 0, 0);
ul.css("margin", 0, 0, 0, 0, 0);
ul.css("top", 0);
box.css("padding", 0, 0, 0, 0, 0);
box.css("margin", 0, 0, 0, 0, 0);
}
Chat("chatbox")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox"></div>