We Keep Coding

Setting a max-height of page-height for a dropdown

Say you have a dropdown with a lot of options that overflow the page height. I know I can use overflow: auto to make it scroll, but only if I set it a max-height. How do I set a max-height that ensures the element won't overflow the browser window?
Like in this image
The left is what it's like now. Dropdown overflows page. The right is what it should be like -- the dropdown is resized to be height of just under the page height.
I've tried setting max-height to different values like 45vh since the dropdown is about halfway down the page, but this needs to fit all types of screen sizes so isn't flexible enough.
CSS solutions preferred in this case.

You can calculate the current distance between the dropdown and the bottom of the page (https://stackoverflow.com/a/7656176/5370933) and append styles with this value.
.myDropdown {
max-height: myDistance;
overflow: scroll
}
I think something like that could works. But you will have to use some JS to get the distance dynamically (depend on the user screen and/or user scroll before the dropdown opening...)

If I understood correctly the layout of your web page, the dropdown is the last element (well maybe) in the page.
What you could do is, first, add this lines to your main page container:
#page {
min-height: 100vh; /* Or the value you like most */
}
Now we have access to the full height of the document.
Next, you can simply use flexbox's space-between or space-around value to keep the dropdown on the bottom of the page (like footers).
But now, you want a little space between the end of the page and the dropdown. Simply add a margin-bottom and its done.
Now be aware that, I understand that there may be a footer or something below the dropdown. You can implement this solution in any container.
This isn't a bug-free solution, but it doesn't require javascript.
Here is a working example.
function _test_add(){
document.getElementById("dropdown").innerHTML += "<li>Item</li>";
}
#page {
min-height:100vh;
display:flex;
flex-direction: column;
justify-content: space-between;
}
#addbtn {
margin:0 auto;
}
/*
* Fictif Content
*/
#main-content {
height: 50vh;
display:flex;
justify-content:center;
align-items:center;
background-color:gray;
}
#dropdown {
min-height: 8em;
max-height: 18em;
background-color:#f1f1f1;
padding: 0;
list-style-type: none;
overflow: auto;
margin-bottom:4em;
border: solid black 2px;
}
#dropdown li {
padding:1em;
}
#dropdown li:nth-child(odd) {
background-color: #fafafa;
}
<div id="page">
<div id="main-content">
Main Content
</div>
<button id="addbtn" onclick="_test_add()">[TEST] Add items in dropdown</button>
<ul id="dropdown">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>

Div with image over another div

I want to show an image over a menu in the right, but it doesn't work on IE and Microsoft Edge on Windows 10.
<div class="menuDiv">
<ul id="menu">
<div class="menu_image"></div>
<li><a><img src="img/image_1.png"></a>
<ul id="seccion_1"></ul>
</li>
<li><a><img src="img/report_image.png"></a>
<ul id="seccion_2"></ul>
</li>
</ul>
</div>
menuDiv uses menu of themeRoller of jqueryUI
.menu_image
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
This is how it looks on Chrome and Firefox
This is how is looks on IE
How can I show the image on IE?
I set a similar example on jsfiddle
https://jsfiddle.net/kzxfu7j4/

add
.menu{
display: relative;
}
to your css or change your .menu_image as below:
.menu_image
{
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
float:right;
}
Edit:
By the way make sure that the div has proper height and width, you can simply change its height and width to match the image height and width.

try this :
.menu_image
{
position: absolute; z-index: 9999;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
width: auto;
height: auto;
float:right;
}
If that not work, maybe it's the 'content' that the problem

I found a solution, I just set ":before" on the class menu_image and works
.menu_image:before
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}

The issue is your content CSS attribute. This is only valid when applied to ::before or ::after psudo-elements:
https://developer.mozilla.org/en/docs/Web/CSS/content
You have two options:
1) If the image is important in the context of the content (so you definitely want all users to see it) simply add an <img> in the markup.
Also, since you're positioning the images with absolute positioning, it makes more sense to me to add the actual <img> tag and position them directly as opposed to positioning empty div elements and setting the image as a background.
If the images represent navigational buttons, use this method 1.
2) If the image is not important to the content context, you can add it as a background image the conventional way, using:
background-image:url(...);
https://jsfiddle.net/rwhxpmfm/
Background images have accessibility issues (for example, they're not included when a webpage is printed on paper and screen readers can't access them...but screen readers can access an <img> element's alt attribute) so only use them if it's just for decoration and not part of the content's context.

How is called this jquery effect?

I'd like a javascript effect at this site http://sputniknews.com/ .
Especially, when you move mouse on a (div) news , and news text fade-in over image background, and image background fade out.
How it is called technically ? (So i can search via google)
Thanks

As I said in my comment, I don't think you'll need any kind of JavaScript for this. All you need is some css, using the pseudo class :hover and a bit of hide and display. There are many examples out there in the wild, here is one: http://tympanus.net/Tutorials/OriginalHoverEffects/
Basically you have an html container (An A-Tag for example), containing an image, a short and a long version of your news, on :hover you switch display of them, enhance this with some transitions for modern browsers and you'll even get something more fancy - without a single line of JavaScript code.
<a class="teaser" href="#">
<img src="http://lorempixel.com/320/320/sports/" />
<span class="image-info">
<!-- this is visible per default -->
<span class="abstract">
<strong>Title</strong>
<em>Short description</em>
</span>
<!-- this is visible on hover -->
<span class="description">
<strong>Long Title</strong>
<em>Long description.</em>
</span>
</span>
</a>
The container has a relative position, so the info can be placed absolute - at bottom per default, the info itself has a semi-transparent background (best is rgba - as a fallback for older browsers you could use a png image file).
.teaser {
display: block;
position: relative;
overflow: hidden;
}
.teaser .image-info {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
/* transparent background color,
easy fallback could be a transparent
png image as background */
background: rgba(0,0,0,.5);
}
img {
/* to avoid spaces */
float: left;
}
/* initial display inside the container */
.teaser span {
display: block;
}
.teaser: .description {
display: none;
}
/* on mouseover switch display */
.teaser:hover .abstract {
display: none;
}
.teaser:hover .description {
display: block;
}
/* cover the complete image */
.teaser:hover .image-info {
height: 100%;
}
I put together a small fiddle to demonstrate this principle. Not as fancy as the mentioned examples, just to explain the idea.

How to reveal element by scrolling?

I'm trying to make an effect similar as used on http://www.t-mobile.com/ , when the user scrolls down to the bottom of the page they reveal the "footer" more and more as the user keeps on scrolling.
I've tried to search both here and on google but haven't been able to find anything that's really useful. Most examples only shows/hide the footer once the user scrolls to the bottom.
So my question is, what's the effect called to reveal an element by scrolling? Are there any good tutorials / blog posts about this? All help I can get is much appreciated!

As I commented, you need to make your element fixed, so as explanation goes, I have two elements here, one is a normal position: relative; element, so nothing fancy about that, I assigned relative so that I can make the z-index work
Second element is positioned fixed and also, make sure you use margin-bottom which should be equal to the height of your footer, no need to assign any negative z-index whatsoever to this element.
Demo
Not much HTML ...
<div></div>
<div>Reveal Me</div>
CSS
/* These are for your main site wrapper */
div:first-child {
height: 800px; /* Even auto is fine, I
used fixed height because I don't have any content here */
background: #eee;
margin-bottom: 200px; /* Equals footer wrappers height */
z-index: 1;
position: relative;
}
/* These are for footer wrapper */
div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
For Dynamic Sizes
Note that am using a fixed height for the fixed positioned element, if you have variable height in footer element, than you need to use JS or jQuery to calculate the height using
$('#wrapperElement').css('margin-bottom', $('#footer').height());
Here, the selectors of #wrapperElement and #footer are my assumed ones, you can replace those with the your own selectors.
Something about fixed element - Horizontal Centering (I think it will be helpful to some users)
When you will make your element fixed, it will get out of the document flow, so if you are assigning fixed to the wrapper of footer element and want to center some content in there, than nest another element inside that wrapper and use width and margin: auto; for that...
Demo 2
HTML
<div></div>
<div>
<div>Reveal Me</div>
</div>
CSS
body > div:first-child {
height: 800px;
background: #eee;
margin-bottom: 200px;
z-index: 1;
position: relative;
}
body > div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
body > div:last-child div {
width: 80%;
margin: auto;
outline: 1px solid red; /* To show that element is horizontally centered */
}
Note: Selectors used in this answer are too general and are good for
quick demonstration purposes, in real projects, make sure you use
specific selectors

Slide a list element with jQuery without effecting other list elements

I am trying to slide up a list element and reveal more content which appears to be hidden "under" the list element, but when the animation occurs all other list elements jump down slightly. When I remove the content under the list element but leave the animation everything works fine.
How can I make this work without effecting the other elements in the list?
It is difficult for me to explain this, so here is a fiddle of what I am talking about: http://jsfiddle.net/YNBxz/1377/
click on any one of the blocks in the view section to see the animation.
If you comment out the jQuery(this).children('.block-content').slideToggle(500); you can see what it SHOULD look like during the animation.

You need to change the positioning of .block-content to position: absolute. That will fix the sliding of the other li elements. Then, to fix the positioning of the .block-content, remove width: 100%, change the right positioning to right: 0, and add top: 45px. The css for .block-content is then:
.block-content {
font-size: 12px;
font-family: Helvetica, sans-serif;
display: block;
background: #333;
padding: 10px;
position: absolute;
top: 45px;
right: 0px;
height: 120px;
}
Also, if you want the bottom of .block-content to line-up with the bottom of the li's, change the jquery to animate to 140px, not 115px.
You can see the results: http://jsfiddle.net/YNBxz/1379/