How to avoid horizontal scroll bar with transitioned elements - javascript

I have multiple elements in which I am using transform:translate to add a slide in transition effect. This is working great. The issue I am having is since the elements are off the screen initially, scroll bars are appearing until the element transforms and slides over.
I am using waypoints for the scroll point and I have seen other scenarios (slidein from off the page) that the scroll bar does not appear.
How can I ensure the scroll bar does not appear with these transitioned elements on my page?
The active class is added to phone-slide when the waypoint is reached.
#phone-slide {
width: 65%;
display: block;
height: auto;
position: absolute;
right: -50%;
margin: 10px 0;
opacity: 0;
transition: 1s;-webkit-transition: 1s;
}
#phone-slide.active {
opacity: 1;
transform: translateX(-50%);-webkit-transform: translateX(-50%);
transition: 1s;-webkit-transition: 1s;
}

The best way would be to position phone-slide inside an absolute positioned div with hidden overflow. This div can have width and height equal to the page dimensions and the content inside it will be truncated if it goes beyond with no scrollbars.
See THIS solution by Jacob Ewing
Another accepted answer

Related

Can't center div on screen on top of page content after setting "display: block" on function using z-index?

I am currently building a blackjack game and was using alerts to let the player know they won. I eventually swapped over to using animate.css to get a simple "you won" and "you lost" message to appear on the screen after the logic finds a winner.
I do this by having a function popup() that runs each time a win or loss parameter is met within if elses, and sets the display to "block". At first, I had this animation div between the 2 sides of the game board ( the player and dealer side, each with a flex property), but hated the fact that once the div appears on the function running, it pushes the player side down. To fix this, I thought I could simply put a z-index to the animation so that it would just appear to overlap.
At first this wasnt working, but then I moved the div that holds my animation outside of the main container (which is a flex container), which now works and stops any content from being pushed down... but I am having issues with the positioning.
I am trying to position the div in the center of the screen to act as a modal or pop-up, and I want to add a interval the div to allow me to close the whole container when a timer runs out ( and thus remove the animation from the screen and allowing the player to choose the "new game" button ).
After trying various things, I can either...
get it to be centered ( H and V ), but pushing content ( meaning z index isnt working, which is where I started )
get it to have z-index and appear above everything else, and even get it to be centered in the screen, but unable to get its sizing to work properly and there is this weird UI glitch where the scrollbar will appear and then disappear ( as if the screen size is getting bigger when the animation appears, which is weird because the animation has a z-index of 2, so why would it make the screen bigger? ).
Sorry if this is a little hard to follow, but the TLDR is that I am unable to get my animation div to appear horizontally and vertically centered without some issue.
Here is some of my code:
<h1 class="animated jackInTheBox" id="youWin"></h1>
.jackInTheBox {
animation-duration: 4s;
animation-delay: 0s;
animation-iteration-count: 1;
margin: auto;
font-size: 32px;
position: relative;
z-index: 2;
margin: auto;
max-width: 100%;
text-align: center;
display: none;
background-color: teal;
}
This animation div sits inside of the main container div, at the very top
.mainContainer {
display: flex;
flex-direction: column;
width: auto;
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
}
Part of me thinks that this would be better to do with a modal, but I would still like to see where I am going wrong. Thank you all in advance.
Try changing your jack in the box class to position fixed with
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
Like you mentioned, this is a little hard to follow without being able to see more code of what you have. Do you think you could add this as a jsfiddle/codepen that contains all of your code? I get a feeling there may be something more to the issue than what you have placed.
This link may also help https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
If parent container has position: relative and child has position: absolute then you can set children with following properties to move it in the middle of parent's horizontal and vertical axis:
.jackInTheBox {
animation-duration: 4s;
animation-delay: 0s;
animation-iteration-count: 1;
font-size: 32px;
z-index: 2;
text-align: center;
display: none;
background-color: teal;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Last four lines let you make it:
position: absolute; sets child in relation to parent's up, left corner (if parent has position: relative)
top: 50%; moves child to the center of screen (child's top border will be in the middle of screen horizontal axis)
left: 50%; moves child to the center of screen (child's left border will be in the middle of screen vertical axis)
transform: translate(-50%, -50%); makes child move 50% of its width into left and 50% of its height into top making it centered perfectly as you need
After doing this you don't need to set width neither max-width, as <h1> markup is a block element and it takes 100% of parent width automatically.
Additional, you don't have to make your parent element has display: relative to get the same effect. Child will use then screen original properties to set position.

How to fix position glitching in css?

I want to know how can I fix a <div> glitching while changing a div content using .load()?
The div CSS is:
#MyDiv{
position: fixed;
z-index: 9;
bottom: 0;
transition: transform 200ms;
}
whenever a div content changes, the div starts glitching and changing its position then it comes back to normal.
I think that what's causing the problem is the phone layout, that glitch happens only on phones

Position fixed within container element instead of the browser / viewport

I need to position a header to be fixed within the containing parent so that it follows when scrolling. The problem is that
position:fixed
fixes the position to the browser, not the parent. What this is resulting in is that when I have a container that has a horizontal scroll for overflow in the width (the content is wider than the container), my fixed header does not have the overflow-scroll as the content of the table does.
See this fiddle demo
So the goal here is to fix the position of the header, but fixed relative to it's parent container. In this fiddle, you can see that I've commented out a block of css:
.container{
/*-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
transform: none;
}
If you replace the current css block (with transform set to none) with the one with translateZ, the header will get positioned within it's parent container, but is no longer fixed.
Anyone know how to solve this? Preferred solution would be CSS/HTML only and avoid JS but if nothing else, then JS is of course what I need to go with!
CSS can't do this by itself.
Position: fixed works in relation to the viewport, not it's containing element.
I've seen an attempt to solve this problem using the CSS3 transform property, but (as you noted in your comment to my first answer) it doesn't seem to work.
I understand you can't use any client-side library but that's the only solution available to my knowledge. For you and others who may one day need this, here's a solution that works. It employs a bit of jQuery:
Positioning an element inside another element with the positioned element fixed along the x and y axes (i.e. position fixed horizontally and vertically).
http://jsfiddle.net/8086p69z/8/
HTML
<div class="moving-article">
<div class="container">
<header class="fixed-header">FIXED HEADER</header>
<ul>
<li>SCROLL</li>
<li>SCROLL</li>
<li>SCROLL</li>
</ul>
</div>
</div>
CSS (relevant section)
.moving-article {
height: 150px;
width: 75%;
overflow-x: scroll;
}
.fixed-header {
background: rgba(0,0,0,0.5);
width: 50%;
text-align: center;
line-height: 40px;
position: absolute;
top: 0;
left: 0;
}
.container{
width: 1000px;
}
jQuery
var leftOffset = parseInt($(".fixed-header").css('left'));
$(window).scroll(function(){
$('.fixed-header').css({
'left': $(this).scrollLeft() + leftOffset
});
});
set the header's position to 'absolute', and it's parent container (which you want it to be relative to) to 'relative', and set it to stick to the top of the parent with 'top: 0'
CSS:
.container {
position: relative;
}
.child {
position: absolute;
top: 0;
}
To keep an element fixed within a parent cannot be done with position: fixed because position: fixed takes the element out of the flow and therefore it has no parent. It positions itself relative to the viewport.
To accomplish your goal, while keeping things simple and efficient, you may want to consider Tether, "a client-side library to make absolutely positioned elements attach to elements in the page efficiently".
Hope this helps. Good luck.

Center an Image Vertically in a Fixed Position Div

There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?
Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height

Transitioning Affixed Navigation bar - CSS

I've a got a fixed navigation bar using the affix() of Twitter Bootstrap 3.
Everything is working fine with the navigation bar. I wanted to add a transition in the appearance of the navigation bar.
When the user scrolls the page the navigation bar is being displayed instantly. I'd like to animate it.
Tried with -webkit-transition: all 1s ease-in but the result was for the width of the navigation bar.
Here's the FIDDLE.
Please help me in animating it when the user scrolls down.
To transition something, you move it from one state to another. So what you are trying to do is change one or more of the properties of the .navigation element.
What properties do you have available to change?
You can't change the height, width, or opacity, as those need to remain the same before and after the transition. If you want the transition to involve movement, then your best bet is to transition the position of the element. Let's do this with the "top" property.
After the transition, your navigation needs to have 0 as its top value. The height of the element is 250px, so let's make it start with top: -250. However, if we do this, the menu will initially be hidden. To fix that, we need to make it ignore the top value by removing the relative positioning.
.navigation {
background: #fff;
/* position: relative; */
width: 100%;
top: -250px;
}
Then we can transition it to 0:
#nav.affix {
position: fixed;
top: 0;
z-index: 1030;
width: 100%;
-webkit-transition: all 2s ease-in;
transition: all 1s ease-in;
}
RESULT:
http://jsfiddle.net/ShL4T/8/
Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
I could not get this to work until I implicitly added position:static to .navigation.

Categories