jquery - CSS issue - I want the client area totally filled -
i struggle css. trying mod sliding door technique opens onto full-client area div, cannot full client area filled up. modding here:
http://web.enavu.com/tutorials/sliding-door-effect-with-jquery/
here code:
<!doctype html> <html> <head> <title>title</title> <style type='text/css'> .box_container{ position:relative; /* important */ width:100%; /* must set specific width of container, doesn't strech when image starts moving */ height:100%; /* important */ /*min-width: 100%;*/ /*min-height: 100%;*/ overflow:hidden; /* hide content goes out of div */ /*just styling bellow*/ background: black; color:white; } .images_holder { width: 100%; height: 100%; position:absolute; /* important, div positioned on top of text */ } .image_div { position:relative; /* important can work left or right indent */ overflow:hidden; /* hide content outside div (this how hide part of image) */ width:50%; /* make 50% of whole images_holder */ height: 100%; float:left; /* make inline */ } .right img{ margin-left: -100%; /* 100% in case 50% of image, how show second part of 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 user hovers on div contains our html... $('.box_container').hover(function () { //... width of div , split 2 ... var width = $(this).outerwidth() / 2; /*... , using width move left "part" of image left , right "part" right changing it's indent 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 () { //... , when hovers out images their's starting position using same function... ' $(this).find('.left').animate({ right: 0 }, { queue: false, duration: 300 }); $(this).find('.right').animate({ left: 0 }, { queue: false, duration: 300 }); //... close , that's }); }); </script> </head> <body> <!--start main container--> <div id="box" class='box_container'> <!--start image parts holder--> <div id="imageholder" class='images_holder'> <!--insert same image in 2 divs, both have image_div class , 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> <!-- used css float propery, need clear now--> <div class='clear'></div> </div> <!--end image parts holder--> <!--start text--> text underneath <!--end text--> </div> <!--end main container--> </body> </html> instead of small thin strip, how can panels covering entire client area of screen?
ok, have tried simplify, , remove css, done in code behind. using viewport suggested. nothing seems work. in fact not recognise hover anymore.
what doing wrong? why can't seem change widths, heights etc onload? why has hover stopped working?
please help.
<!doctype html> <!--note doctype essential recognise canvas--> <html> <head> <title>dual sliding door effect 1 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 user hovers on div contains our html... var d = $("divbox"); $("divbox").hover(function () { //... width of div , split 2 ... var width = $(this).outerwidth() / 2; /*... , using width move left "part" of image left , right "part" right changing it's indent 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 () { //... , when hovers out images their's starting position using same function... ' $(this).find('divdoorleft').animate({ right: 0 }, { queue: false, duration: 300 }); $(this).find('divdoorright').animate({ left: 0 }, { queue: false, duration: 300 }); //... close , that's }); } </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 :) </div> </div> </body> </html>
you need put "the text underneath" it's own div, , use css height or min-height attribute work.
<div id="underneath" style="height: 400px;"> text underneath </div> see link more info or play code bit: your js fiddle
Comments
Post a Comment