javascript - Stretching hover background to full height -
i trying adapt use of jscript make links in text change full bleed background on single web page, hacked attempt here:
my problem smaller screens... if resize window notice hover backgrounds fill area size of initial window before scrolling down... if scrolled down , using bottom link displays cutoff original background poking out (the test explain better i!).
i've tried various containers , background-attach rules , can't seem around this... i'd use trick site if can shed light on going wrong that'd great.
index.htm =
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>tester</title> <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1"> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script src='leaflet.js' type='text/javascript'></script> <script src='wax.leaf.js' type='text/javascript'></script> <link href='leaflet.css' rel='stylesheet' type='text/css' /> <script> $( document ).ready(function() { $('p a').each(function() { var fig = $('<flashers class="'+ $(this).attr('rel') +'"></flashers>'); fig.appendto('body'); }); $('p a').hover( function() { $('body').addclass('hover_on'); $(this).addclass('active'); $('.'+$(this).attr('rel')).addclass('on'); }, function() { $('body').removeclass('hover_on'); $(this).removeclass('active'); $('.'+$(this).attr('rel')).removeclass('on'); } ); }); </script> </head> <body> <bound> <div class="main_box"> <p>this background link <a rel="green">that turns green</a>.</p> <p>this more text. lorem ipsum dolor sit amet , forth , on , keep going.</p> <p>this more text. lorem ipsum dolor sit amet , forth , on , keep going. lorem ipsum dolor sit amet , forth , on , keep going. lorem ipsum dolor sit amet , forth , on , keep going.</p> <p>this more text. lorem ipsum dolor sit amet , forth , on , keep going. lorem ipsum dolor sit amet , forth , on , keep going. lorem ipsum dolor sit amet , forth , on , keep going. lorem ipsum dolor sit amet , forth , on , keep going.</p> <p>this more text. lorem ipsum dolor sit amet , forth , on , keep going. lorem ipsum dolor sit amet , forth , on , keep going. lorem ipsum dolor sit amet , forth , on , keep going. lorem ipsum dolor sit amet , forth , on , keep going. lorem ipsum dolor sit amet , forth , on , keep going. lorem ipsum dolor sit amet , forth , on , keep going.</p> <p>this more text. lorem ipsum dolor sit amet , forth , on , keep going.</p> <p>this background link <a rel="green">that turns green</a>.</p> <footer /> </div> </bound> </body> </html> style.css:
/*** background tester ***/ * { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } html, body { height: 100%; } /* main */ body { text-align: center; color: white; font-family: georgia, garamond, baskerville, serif; font-size: 12pt; font-weight: 400; line-height: 1.5em; margin: 0 30px; background: url('red.jpg') center center #222; background-size: cover; background-attachment: fixed; -webkit-font-smoothing: antialiased; } flashers { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-position: center center; background-size: cover; background-attachment: fixed; opacity: 0; transition: 1s opacity; -webkit-transition: 1s opacity; } ::selection { background: rgba(255,255,255,0.7); } /* backgrounds */ @media screen , (min-width: 640px) { flashers.on { opacity: 1; } flashers.green { background-image: url('green.jpg'); } } /* content etc. */ bound { width: 100%; height: 100%; max-width: 620px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; display: box; display: -webkit-box; display: -moz-box; box-pack: center; -webkit-box-pack: center; -moz-box-pack: center; box-orient: vertical; -webkit-box-orient: vertical; -moz-box-orient: vertical; background: rgba(0,0,0,0.0); text-align: left; position: relative; z-index: 10; } /* big displays etc. */ @media screen , (min-width: 640px) { p { color: #fff; margin: 0 3px; line-height: 0em; border-bottom: 1px dotted rgba(255,255,255,0.4); } p a:not([href]) { pointer-events: auto; } p a:hover { opacity: 1; } .hover_on p a[href] { color: transparent; } .hover_on p { color: transparent; } .hover_on p { color: transparent; } .hover_on p a.active { color: #fff; } } /* other fixings (some borrowed) */ @media screen , (max-width: 767px), screen , (max-height: 680px) { body { font-size: 16pt; } li { line-height: 1.25em; margin-bottom: 0.6em; } } { outline: medium none !important; } rest visible @ link: http://testarama.webege.com/
and in fiddle
the background set on flashers element.
and descendant body. dimensioned full dimension of body.
but body height dimensioned 100%, dimensioned according html dimension, @ end dimension of browser window.
but when scrolling, bottom of screen on bound element, sized according content, , that, in small browser sizes, has height greater body.
you try make body adapt bound, best solution make flashers descendant of bound
haven't succeeded fully, that's best have got :
.main_box { position: relative; padding-left: 50px; padding-right: 50px; z-index: auto; } .main_box:after { content: ""; position: absolute; left: 0px; top: 0px; right: 0px; height: 110%; z-index: -9; opacity: 0; transition: opacity 1s; margin-left: -30px; margin-right: -30px; background-origin: border-box; background-size: cover; background-color: green; background-clip: border-box; } .main_box.active:after { opacity: 1; } .green:after { background-image: url('http://s8.postimg.org/xj53t3d91/green.jpg'); }
Comments
Post a Comment