Allow resizing of HTML frames while adding frameBorder=0 attribute?
Before the comments start screaming "frames are evil", let me add a disclaimer: "I am just porting a legacy application and don't have the time to get rid of 开发者_运维技巧frames!" :-)
There's a frameset containing two frames. I don't like the default frame border rendered by the browser (especially on Chrome & Firefox). It's too thick and feels obtrusive! So I thought i'll hide the default frame border using frameborder=0 attribute on the frame and add the desired style on the content inside the frames. The problem is: after adding frameborder=0, the frames are not resizable anymore on Chrome & Safari, whereas IE & Firefox can still resize them. This is my code:
<frameset rows="80%,20%" >
<frame id="frame1" scrolling="auto" frameborder="0" />
<frame id="frame2" scrolling="auto" frameborder="0" />
</frameset>
Is there anyway to override the default frame border rendering and still retain the resizability?
Style your frames with normal css, I think that should work, but yeah frames are evil and nobody uses them >.>
Try adding this to your frameset page styles:
frame {
border: 1px solid #464646;
border-collapse: collapse;
}
I made a script that places a handle bar inside the document with which you can resize the frameset in FF and chrome. Not perfect but may help:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script type="text/javascript">
function makeFramesetVerticallyResizable(frameSetId) {
var frameSet = document.getElementById(frameSetId);
// insert a vertical box called resizeHandle into the righthand document:
var frameDoc = frameSet.children[1].contentDocument;
var resizeHandle = frameDoc.createElement("div");
resizeHandle.style.backgroundColor = "#999999";// remove this line to hide the handle
resizeHandle.style.position = "fixed";
resizeHandle.style.width = "100%";
resizeHandle.style.height = "6px";
resizeHandle.style.top = "3px"; // put it a little away from the border so firefox can detect dragging to the left
resizeHandle.style.left = "0px";
resizeHandle.style.cursor = "n-resize";
resizeHandle.style.zIndex = 99999;
frameDoc.body.insertBefore(resizeHandle, frameDoc.body.firstChild);
// Drag functions:
var dragStartScreenY = null;
resizeHandle.draggable = true;
resizeHandle.ondragstart = function(event) {
dragStartScreenY = event.screenY;
event.dataTransfer.setData('text/plain', 'dummy');
event.dataTransfer.effectAllowed = 'move';
};
resizeHandle.ondrag = function(event) {
if(dragStartScreenY !== null && event.screenY != 0) { // we have a mouse position ?
var offset = event.screenY - dragStartScreenY;
var height = frameSet.firstElementChild.offsetHeight;
var newHeight = height + offset;
frameSet.rows = "" + newHeight + ",*";
dragStartScreenY = event.screenY;
}
}
resizeHandle.ondragend = resizeHandle.ondrag;// Firefox does not give us the current mouse position during dragging, so resize the frames at the end
}
</script>
</head>
<frameset id="mainFrameSet" rows="80%,20%" border="0" onload="makeFramesetVerticallyResizable('mainFrameSet')">
<frame src="frame_blanc.php" id="frame1" scrolling="auto" frameborder="0" />
<frame src="frame_blanc.php" id="frame2" scrolling="auto" frameborder="0" />
</frameset>
</html>
加载中,请稍侯......
精彩评论