Develop Reference

Why does displaying text inside the document via transform: translateY(-100%) create extra white-space at bottom of page?

Put very briefly
I wrote a vuejs component that includes a small icon that displays some text when being hovered over.
I created a minimal example here: https://codesandbox.io/s/sweet-jackson-v0kgc?file=/src/components/ShowBox.vue:115-136
The special thing is: when the icon is at the very bottom of the page the text is displayed above the icon instead of below such that the page does not have to be extended.
However, even when the text is displayed above the icon, the page is extended without any content (even the html ends before the whitespace).
I tested this in Firefox and Chromium.
I would like to understand where this white-space comes from and how to get rid of it.
I will explain in more detail what I'm trying to do below.
If my entire approach to this does not make much sense I'm also happy for suggestions.
My approach so far
First step: display text when hovering an image
What I want to achieve seems quite straight forward with vuejs at first glance.
I want to have a vue component that shows an image (for example a small info icon).
When one hovers over the image with the mouse a text is displayed that overlays the other content on the page.
This can be achieved in different ways - for example:
Create a component that has a hovered variable like so
<script>
export default {
name: 'ShowBox',
props: ['showText'],
data() {
return {
hovered: false,
}
},
}
</script>
In the template, bind the class of the to be shown text to the hovered variable and handle an #mouseenter and #mouseleave event in the image accordingly like so
<template>
<div class="show-box">
<div class="show-icon">
<img width="50px" #mouseenter="hovered = true" #mouseleave="hovered = false" src="...">
</div>
<div class="show-text" v-bind:class="{'hide': !hovered}">
{{ showText }}
</div>
</div>
</template>
Finally, in the style the class show-box should be positioned and the class show-text should include a position: absolute such that it overlays the text.
The class hide should somehow hide the text - for example with opacity: 0.
So far so good - for sure one can add a lot of stuff to make this more decent but for the sake of the example let's keep it simple.
The result might look as
this (link to picture).
Second step: display image above the icon when at the bottom of the page
Let's imagine the icon is at the very bottom of the page.
If one then hovers the icon the page might have to be extended in order to display the full text.
I want to avoid this and have the text displayed above the icon instead.
For this I took the following steps:
I wrapped the text in an extra div.
The text is now not rendered anymore when the page loads but only when one hovers over the image though a display: none in the style.
<template>
<div class="show-box">
<div class="show-icon">
<img width="50px" #mouseenter="hovered = true, , textRendered = true" #mouseleave="hovered = false" src="...">
</div>
<div class="show-text-wrap">
<div class="show-text" v-bind:class="{'not-rendered': !textRendered, 'hide': !hovered, 'render-top': renderTop}">
{{ showText }}
</div>
</div>
</div>
</template>
Furthermore, I included a life-cycle hook mounted such that after the page is rendered it is checked, whether there is enough space below the show-text-wrap div to display the text.
If not, a variable renderTop = true is set.
The style of the show-text div is now also bound to the renderTop variable such that if it is set (in the case of insufficient space at the botton of the page) the image is rendered above the icon (also see template above).
The mounted hook looks like
mounted() {
this.$nextTick(function () { //to be sure that page is fully rendered
var el = this.$el.lastElementChild; //show-text-wrap element
var rect = el.getBoundingClientRect();
if (rect.bottom + window.pageYOffset + 300 > (document.body.clientHeight)) {
this.renderTop = true;
}
}
)
},
Finally, the render-top class simply translates the text to the top.
.render-top{
transform: translateY(-100%);
}
The result when hovering over an icon at the bottom of the page might look like
this (link to picture).
The problem
This works fine in principle.
The only problem is: when the text is moved to the top as intended, some extra unwanted white-space appears at the bottom of the page (tested in Firefox and Chromium).
The white-space interestingly extends the html document.
I don't understand where this comes from and want to get rid of this since the whole point of moving the displayed text to the top was to avoid the page being extended.
In
this (link to image)
one can see the extra white-space that extends beyond the html document.
I also tried to move the text above the icon by different means for example
.render-top{
bottom: 0;
}
or even with hard coding pixel numbers like
.render-top{
bottom: 100px;
}
but none of these solve the problem.
I created a working minimal example for this https://codesandbox.io/s/sweet-jackson-v0kgc?file=/src/components/ShowBox.vue:115-136
where the problem can also be seen.
Any help is greatly appreciated - many thanks in advance!

A relative positioned element behaves as if it hadn't been moved
By now I found out the answer myself.
I will post it in case someone finds this useful.
The goal was to always move the text-box inside the viewport.
However, in the style the show-box's position was defined as position: relative; and only its direct parent show-text-wrap is absolutely positioned.
According to https://developer.mozilla.org/en-US/docs/Web/CSS/position a relative positioned element is offset relative to its original position.
This will not change the position of any other elements in the document.
This means that the layout of the document will behave as if the element was still at its original position.
Since the <show-box> originally reached beyond the <html> element such that the page was extended this is still the case regardless of the fact that the element appears moved into the document.
So in order to fix the problem change
.show-text {
position: relative;
}
to
.show-text {
position: absolute;
}

Preparing the DOM for a Single Page Application

What I am trying to achieve appears to be simple. I am assuming that all content visible on a page, is a child or grandchild of the tag of a HTML page? This text for example must be related to Body.
And this is a tree structure basically starting (visually) with Body.
I want to make a Single Page Application with JavaScript. But I need to prepare the DOM and here is where I struggle.
How do I set up the body of the page so that:
There is no scroll bars
The Body is always filling the entire content area of the browser (if it does not already)
Break out of CSS box model (appendChild 10 times stacks those elements, not flows them)
Any children Divs from Body, also by default break out of the CSS box model too.
I have searched for each step individually but I do not use JQuery, and to be honest, I would prefer to get rid of CSS too all but for the most basic of tasks. I would just like to have a known viewable region and be responsible for its positioning, sizing and content with JS.
Or. If you are similar with Flash. I want to treat the Body as my Stage and use it like a Display List with NO_SCALE enabled. Meaning that when you resize, that should "invalidate" the layout (that is upto me as the developer).
I am not the first person in the world to ask for this. So if you could even point me in the right direction, I would appreciate it.

Try CSS based solution to the fullest, then move on with Javascript. Following would give you pretty much what you want
There is no scroll bars
The Body is always filling the entire content area of the browser (if it does not already)
html, body {
margin : 0px
padding : 0px;
border : 0px;
overflow : hidden;
position : absolute;
left : 0px;
top : 0px;
}
Break out of CSS box model (appendChild 10 times stacks those elements, not flows them)
Any children Divs from Body, also by default break out of the CSS box model too.
put this first
* {
position : absolute;
}

Image description web site

I would to add an image description to some images on my website. The descriptions are in <div> or <p> and I'm using jQuery. Let's assume I have:
HTML
<td><img href="aaa" onMouseOver="showMe()"><p id="descr">Description</p></td>
CSS
#descr{
display: none;
}
JS
function showMe()
{
$("#descr").slideDown(1000);
}
Now the problem is that the description is showed but the content near it is displaced, shifted to make room to the new element. I'd like the description to appear as an overlay to what is below and to shift nothing, just like a dropdown description. How can I achieve this?
Thanks

If you use position: absolute it won't displace other elements. You'll need to play with the CSS to get it exactly where you want it to though - the position values are relative to the first parent with its own position value, other than static. Which is why if you just add position: absolute it'll probably be all mispositioned first.
Looking at the HTML you posted, you may want to apply position: relative to the <td> (like with .image_table td).

Javascript Gallery onmouseUp with "#" link without jumping to top of page

I realize that this is probably an "old school" way of doing this, but I finally got my gallery to work with one exception. If the gallery is located lower on the page, the "#" link on the thumbnails causes the page to jump the top. Is there a better way to create this gallery?
http://pacmill.bigrigmedia.com/cms/portfolio-detail-test3.html
Thanks in advance!

Adding a return false will usually stop the page from jumping to the top when clicking on a # link.
<img src="..." />
For your problem, I would go with Shawn's solution and just use CSS. So delete all of the links around the images and add this to your document:
<style> img{cursor:pointer;} #Display{cursor:auto;} </style>
The second entry (#Display) is to make sure your main image does not get the pointer cursor. It would be better to just drop a class on each of your images and then assign the cursor to images with that class. That would look like so:
<style> img.myImage{cursor:pointer;} </style>
<img class="myImage" src="...">

I'm guessing you're using the anchor tag in order to get the hand icon on hover. You could get the same effect by using CSS.
style="cursor: hand;"
This should create the same effect and avoid the problem of the anchor tag.

I strongly suggest you to don't use an anchor tag for that. JavaScript events can be added to any DOM element, just like in:
<li class="click-to-expand">
<img src="..." />
</li>
And also, as some users already replied, you can use CSS pointer property to indicate a possible user interaction when hovering the clickable interface item.
.click-to-expand{
cursor:pointer;
}
Remember to keep it accessible by providing a valid URL to access the content in case it's necessary (no javascript fallback).

Can you combine replace_html with a visual_effect in Rails RJS?

I'm developing a website with Ruby on Rails and I have a div with some content. After clicking a link I want that content to get replaced with some other stuff. This works fine with replace_html and rjs.
However, I'd prefer there to be a slight fade/appear (crossfade?) transition between the old and new content. Also the div will be resized a bit so it'd be cooler if this did a grow/shrink effect. I was thinking Scriptaculous must have something like this built in, but I sure can't find it if they do.
By the way there is a great example of this if you have a Basecamp account: login and click "All people" then "Add a new company" to see the effect in action.
Anyone know how to do this? Thanks!
Brian

To crossfade, you need to position your new content absolutely, and with the same x/y coordinates as the old content. Here's a tested example:
page.insert_html :after, 'old-content', content_tag('p', '[new content]', :id => 'new-content', :style => 'display:none')
page << <<-JS
var oldOffset = $('old-content').cumulativeOffset();
$('new-content').setStyle({
position: 'absolute',
left: oldOffset.left + 'px',
top: oldOffset.top + 'px'
});
JS
page['old-content'].fade :duration => 3
page['new-content'].appear :duration => 3
Note the big block in the middle—some things are easier in Prototype than in RJS.

A strategy could be to put the element in a wrapping div, fade out that wrapping div, replace the HTML in the element, and then fade in the wrapping div again.
I'm not a RJS/scriptaculous user myself, so I'm not sure what the code is, but I'm pretty sure that strategy will work.

Fade out the 1st div.
Blind in the 2nd div at the same time.
As the 1st one fades, the 2nd will appear to expand what's left of the first one.
Well, something like that.
Load up Firebug and step through the code if you want to see what they're calling.

One quick way would be to do the replace and then pulsate the div.