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
Related
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.
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
I've found that the contact section of the following site keeps spilling over at the bottom, especially when the window width is reduced to mobile size:
http://phixhut.com/test/1page/onepage.html#contact
The CSS I have for the overlay section is:
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
padding: 55px 0 15px 0;
width: 100%;
background-color: #83aa30;
background-color: rgba(131, 170, 48, 0.6);
background-image: url("../images/GPlay.svg");
position: absolute;
bottom: 0px;
top: 0px;
The spill at the bottom disappears if I remove the "top: 0px" but then it appears to spill over at the top.
Not sure how to go about getting the contact section to resize pefectly to stop these spills. Any help would be greatly appreciated!
The solution, albeit inefficient, would be overflow: hidden
You shouldn't use that, however, because the majority of the time the use of that is to basically hide unwanted code. Rather, try to fix the issue in CSS without using the overflow: hidden, so that when you resize nothing overflows.
You could do that by making sure certain items aren't set to a fixed width or height, because if a screen resolution is smaller than that, it will overflow.
Hope that helps.
There is a few thing's causing your problem but the easiest way to sort it would be to remove the current height you have for class="contact" and set it to the height of your overlay container.
Personally I would re write your code.
It would make more sense to have your map and overlay as one background image and remove your absolute positioning and the extra div's you have in there.
It would A. Streamline your code and B. Reduce the amount of HTTP request's & C. your site would act in the fluid nature you are after.
I'm using jQuery Mobile, to create a small mobile app. I have a page which includes just a GIF. Though the GIF can be clickable, to move to the next page. But the point is that the GIF is not full screen in some devices, so I added some CSS to make it full screen, meaning to stretch it, which works, but then it makes the div (or GIF) unclickable. So I cannot click it to move to the next page, you need to wait for the animation to finish.
Here is how the page is defined in HTML:
<div id="correctGIF" data-role="page" data-add-back-btn="false">
<img src="images/Correct1.gif">
</div>
I added this CSS:
#correctGIF {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: -1;
}
#correctGIF > img {
width: 100%;
height: 100%;
}
Is there any way, how can I stretch the GIF to make it cover the whole screen, without making it unclickable?
It is z-index problem. Because you set z-index: -1; so that the div is unclickable. Change z-index to postive integer or remove z-index in 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.