44157

Partial cover the screen and slide the overlay-element

Question:

I try to create an overlay-div, which covers the whole screen - except 3em to the bottom. I think my attempt is not the optimum:

<div id="background"></div> <div id="overlay"></div>

<strong>CSS:</strong>

#background { background-color: #ddd; width: 100%; height: 100%; } #overlay { position: absolute; height: 100%; background-color: #fff; width: 100%; top: -3em; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); z-index: 1; }

With that, I want to slide up and down the overlay. But with the css above, I don't know how to animate completely as '-55em' are too much on lower screen resolution or not enough on higher resolution:

<strong>JS:</strong>

$('#overlay').animate({'top':'-55em'}, 1000, function() { $('#overlay').animate({'top':'-3em'}, 1000); });

Answer1:

i think you should change height instead of top it will save you from typical calculations

<pre class="snippet-code-js lang-js prettyprint-override">$('#overlay').animate({'height':'0%'}, 1000, function() { $('#overlay').animate({'height':'100%'}, 1000); }); <pre class="snippet-code-css lang-css prettyprint-override"> #background { background-color: #ddd; width: 100%; height: 100%; } #overlay { position: absolute; height: 100%; background-color: #fff; width: 100%; top: -3em; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); z-index: 1; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="background"></div> <div id="overlay"></div>

Recommend

  • convert string to DateTime in C# with EDT at the end
  • Trim blank newlines from string in Ruby
  • Android MapView parts of map missing
  • Color a heatmap in Python/Matplotlib according to requirement
  • How to vertically and horizontally center a div of unknown height
  • adding item to window Extjs 4
  • How to parse utc date
  • jParallax trouble
  • Symfony2 redirect to https route fails (uses wrong port)
  • css calendar - td background diagonal split - two colors
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • Making header act like google chrome mobile app address bar
  • Outlines on links in IE9 remains when focus is changed
  • Django Haystack Rebuild Index
  • Can't delete or rename original file after resizing
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • Ajax calls do not work in IE unless you fiddle with security settings
  • Keep this build forever option - Jenkins
  • Blackberry - Custom EditField Cursor
  • Custom validator control occupying space even though display set to dynamic
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Body moving without any force applied? (Box2d)
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How reduce the height of an mschart by breaking up the y-axis
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Modifying destination and filename of gulp-svg-sprite
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Change div Background jquery
  • Android Google Maps API OnLocationChanged only called once
  • python draw pie shapes with colour filled