I really struggle with CSS. I am trying mod a sliding door technique that opens onto a full-client area div, but I just cannot get the full client area filled up. I am modding from here:
http://web.enavu.com/tutorials/sliding-door-effect-with-jquery/
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style type='text/css'>
.box_container{
position:relative; /* important */
width:100%; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
height:100%; /* important */
/*min-width: 100%;*/
/*min-height: 100%;*/
overflow:hidden; /* hide the content that goes out of the div */
/*just styling bellow*/
background: black;
color:white;
}
.images_holder
{
width: 100%;
height: 100%;
position:absolute; /* this is important, so the div is positioned on top of the text */
}
.image_div {
position:relative; /* important so we can work with the left or right indent */
overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
width:50%; /* make it 50% of the whole images_holder */
height: 100%;
float:left; /* make then inline */
}
.right img{
margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
}
.clear{
clear:both;
}
</style>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function () {
var cv, box, holder, cvContext, width, height, my_gradient, boxHeight, boxWidth;
// box = document.getElementById("box");
// boxWidth = box.offsetWidth;
// boxHeight = box.offsetHeight;
// holder = document.getElementById("imageHolder");
// holder.width = boxWidth;
// holder.hieght = boxHeight;
box = document.getElementById("box");
//$("box").css({ width: $(window).width(), height: $(window).height() });
$("box").css({ width: window.innerWidth, height: window.innerHeight });
$("imageHolder").css({ 'min-width': window.innerWidth, 'min-height': window.innerHeight });
cv = document.getElementById("canvas1");
width = cv.width;
height = cv.height;
cvContext = cv.getContext("2d");
my_gradient = cvContext.createLinearGradient(0, 0, width, height);
my_gradient.addColorStop(0, "blue");
my_gradient.addColorStop(1, "white");
cvContext.fillStyle = my_gradient;
cvContext.fillRect(0, 0, width, height);
cv = document.getElementById("canvas2");
width = cv.width;
height = cv.height;
cvContext = cv.getContext("2d");
my_gradient = cvContext.createLinearGradient(0, 0, width, height);
my_gradient.addColorStop(0, "blue");
my_gradient.addColorStop(1, "white");
cvContext.fillStyle = my_gradient;
cvContext.fillRect(0, 0, width, height);
//when the user hovers over the div that contains our html...
$('.box_container').hover(function () {
//... we get the width of the div and split it by 2 ...
var width = $(this).outerWidth() / 2;
/*... and using that width we move the left "part" of the image to left and right "part"
to right by changing it's indent from left side or right side... */
$(this).find('.left').animate({ right: width }, { queue: false, duration: 300 });
$(this).find('.right').animate({ left: width }, { queue: false, duration: 300 });
}, function () {
//... and when he hovers out we get the images back to their's starting position using the same function... '
$(this).find('.left').animate({ right: 0 }, { queue: false, duration: 300 });
$(this).find('.right').animate({ left: 0 }, { queue: false, duration: 300 });
//... close it and that's it
});
});
</script>
</head>
<body>
<!--START THE MAIN CONTAINER-->
<div id="box" class='box_container'>
<!--START THE IMAGE PARTS HOLDER-->
<div id="imageHolder" class='images_holder'>
<!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->
<div class='image_div left'><canvas id="canvas1" style="width:100%; height:100%;"/></div>
<div class='image_div right'><canvas id="canvas2" style="width:100%; height:100%;"/></div>
<!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->
<div class='clear'></div>
</div>
<!--END THE IMAGE PARTS HOLDER-->
<!--START THE TEXT-->
The text underneath
<!--END THE TEXT-->
</div>
<!--END THE MAIN CONTAINER-->
</body>
</html>
Instead of the small thin strip, how can I get the panels covering the entire client area of the screen?
OK, I have tried to simplify, and remove all css, so everything is done in code behind. I am using the viewport as suggested. But nothing seems to work. In fact it does not even recognise the hover anymore.
What am I doing wrong? Why can't I seem to change any widths, heights etc onload? Why has my hover stopped working?
Please help.
<!DOCTYPE HTML>
<!--Note this doctype is essential to recognise canvas-->
<html>
<head>
<title>Dual sliding door effect with one Image</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
function MyOnLoad() {
var cvContext, my_gradient;
var width, height, widthWin, heightWin, widthDoc, heightDoc, widthMain;
var divBox = document.getElementById('divBox');
var divHolder = document.getElementById("divHolder");
var divUnderneath = document.getElementById("divUnderneath");
var divDoorLeft = document.getElementById("divDoorLeft");
var divDoorRight = document.getElementById("divDoorRight");
var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
widthWin = $(window).width(); // returns width of browser viewport
heightWin = $(window).height(); // returns width of browser viewport
widthDoc = $(document).width(); // returns width of HTML document
heightDoc = $(document).height(); // returns width of HTML document
width = widthWin;
height = heightWin;
divBox.style.width = width;
divBox.style.height = height;
divBox.style.background = "#AAFFAA";
divBox.style.position = "relative";
divBox.style.overflow = "hidden";
divBox.style.color = "#FFFFFF";
divHolder.style.width = width;
divHolder.style.height = height;
divHolder.style.background = "#AAAAFF";
divHolder.style.position = "absolute";
divUnderneath.style.width = width;
divUnderneath.style.height = height;
divUnderneath.style.background = "#FFAAAA";
divDoorLeft.style.position = "relative";
divDoorLeft.style.overflow = "hidden";
divDoorLeft.style.width = Math.round(0.5 * width);
divDoorLeft.style.height = height;
divDoorLeft.style.float = "left";
divDoorRight.style.position = "relative";
divDoorRight.style.overflow = "hidden";
divDoorRight.style.width = Math.round(0.5 * width);
divDoorRight.style.height = height;
divDoorRight.style.float = "left";
divDoorRight.style.marginLeft = -width;
canvas1.width = Math.round(0.5 * width);
canvas1.height = height;
cvContext = canvas1.getContext("2d");
my_gradient = cvContext.createLinearGradient(0, 0, canvas1.width, canvas1.height);
my_gradient.addColorStop(0, "blue");
my_gradient.addColorStop(1, "white");
cvContext.fillStyle = my_gradient;
cvContext.fillRect(0, 0, canvas1.width, canvas1.height);
canvas2.width = Math.round(0.5 * width);
canvas2.height = height;
cvContext = canvas2.getContext("2d");
my_gradient = cvContext.createLinearGradient(0, 0, canvas2.width, canvas2.height);
my_gradient.addColorStop(0, "blue");
my_gradient.addColorStop(1, "white");
cvContext.fillStyle = my_gradient;
cvContext.fillRect(0, 0, canvas2.width, canvas2.height);
//when the user hovers over the div that contains our html...
var d = $("divBox");
$("divBox").hover(function () {
//... we get the width of the div and split it by 2 ...
var width = $(this).outerWidth() / 2;
/*... and using that width we move the left "part" of the image to left and right "part"
to right by changing it's indent from left side or right side... */
$(this).find('divDoorLeft').animate({ right: width }, { queue: false, duration: 300 });
$(this).find('divDoorRight').animate({ left: width }, { queue: false, duration: 300 });
}, function () {
//... and when he hovers out we get the images back to their's starting position using the same function... '
$(this).find('divDoorLeft').animate({ right: 0 }, { queue: false, duration: 300 });
$(this).find('divDoorRight').animate({ left: 0 }, { queue: false, duration: 300 });
//... close it and that's it
});
}
</script>
</head>
<body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#FF0000">
<div id="divBox">
<div id="divHolder">
<div id="divDoorLeft"><canvas id="canvas1"/></div>
<div id="divDoorRight"><canvas id="canvas2"/></div>
</div>
<div id="divUnderneath">
Looks nice doesn't it :)
</div>
</div>
</body>
</html>
