I'm unable to make my page scrollable. The code is:
body{
overflow-y: scroll;
margin: 0px;
padding: 0px;
}
#triangle-down { width: 0px; height: 0px;
border-left: 200px solid transparent;
border-right:200px solid transparent;
border-top: 230px solid white;
margin-left: 475px;
position:fixed;;
top: 65px;
z-index: -1;
}
div.topName {
margin-bottom:6px;
margin-left: 615px;
position: relative;
z-index:1;
}
body {
background-image: url("pictures/UHT_Plovdiv.png");
background-size: cover;
width: 50%;
background-color:0099CC;
}
div.boxwhitetop {
solid white ;
background-color: white;
width: 1200px;
height: 50px;
border-radius: 30px;
position: relative;
margin-left: 80px;
}
divMainbox{
border-radius: 35px;
background: white;
top: 7px;
left: -525px;
width: 1050px;
height: 1000px;
position:absolute;
text-align: center;
font-size: 25px;
overflow: hidden;
-webkit-animation: fadein 4.5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 4.5s; /* Firefox < 16 */
-ms-animation: fadein 4.5s; /* Internet Explorer */
-o-animation: fadein 4.5s; /* Opera < 12.1 */
animation: fadein 4.5s;
overflow:hidden;
}
My github link is https://github.com/nedzone/uht-yniversitet, please tell me where my issue is and how can I fix this problem?
Just close your div in line number 23 in nachalna stanica.html, the page will start to scroll
<div id="triangle-down"></div>
If everything is going in the divMainbox then you shouldn't have a height on it. Otherwise it won't allow that container to resize based on the size of the content inside. Otherwise if you do want a specific height on that container then you should add a overflow-y: scroll; to it instead of the overflow: hidden; that you have now. This would allow you the container to have height, but also allow the user to scroll within it. Perhaps this is the trouble your having.
Related
i wanted to create a box with a border and inside it a small div, i wanted when i have a hover over the box the small div inside it will start to animate and but the animation did not start at all, so i deleted hover also the animation did not work in this case too,
here what i have tried:
<div class="row mb-4">
<div class="col col__animation">
<div id="object"></div>
</div>
</div>
Scss:
.col__animation{
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
#object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
}
&:hover{
#object{
transition: transform 1000ms;
transition-timing-function: ease-in-out;
}
}
}
I am trying to try many animations effects like making the box move to right and go back to initial position and many more animations
This should work
.col__animation {
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
}
.col__animation #object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
animation: mymove 3s infinite;
}
#keyframes mymove {
0% {
margin-left: 0px;
}
50% {
margin-left: calc(100% - 40px);
}
100% {
margin-left: 0px;
}
}
Codepen
Trying to understand transition css property, but can't seem to figure out why this code is not working. Border needs to go from solid to dotted
.home {
color: #ff652f;
font-weight: 700;
border-bottom: 18px solid #ff652f;
-webkit-transition: border-bottom 3s ease-in-out;
transition: border-bottom 3s ease-in-out;
}
.home {
border-bottom: 18px dashed #ff652f;
}
Made a jsfiddle here - https://jsfiddle.net/h7925b8g/
Would like the transition to happen slowly. Any ideas what I am doing wrong? Any help is greatly appreciated!
As mentioned in comments, border-style is not animatable, so you can't simply use the transition property to change it.
Instead, you can fake it. How exactly you pull this off depends on what you want the transition to look like. One approach is to use a repeating linear-gradient for the dashed effect and then transition that to overlay the border (either a literal border or just some other element that acts like a border).
For example, sliding up from the bottom:
.home {
color: #ff652f;
font-weight: 700;
width: 200px;
padding-bottom: 10px;
position: relative;
}
.home::before,
.home::after {
content: '';
display: block;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.home::before {
height: 10px;
background-color: orange;
z-index: 0;
}
.home::after {
height: 0px;
transition: height 350ms ease;
background-image: linear-gradient(to right, white 0px 10px, orange 10px 20px, white 20px);
background-size: 20px 100%;
background-repeat: repeat;
z-index: 1;
}
.home:hover::after {
height: 10px;
}
<div class="home">Hover me!</div>
Or sliding in from the left:
.home {
color: #ff652f;
font-weight: 700;
width: 200px;
padding-bottom: 10px;
position: relative;
}
.border-animation {
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
width: 100%;
height: 10px;
overflow: hidden;
background-color: orange;
}
.border-animation::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background-image: linear-gradient(to right, white 0px 10px, orange 10px 20px, white 20px);
background-size: 20px 100%;
background-repeat: repeat;
transform: translateX(-100%);
transition: transform 350ms ease;
}
.home:hover .border-animation::after {
transform: translateX(0);
}
<div class="home">Hover me!<span class="border-animation"></span></div>
I'm currently trying to make it so when you hover over this div, it slowly expands outward from the side of the page. I realize I can just set a new position when hovering, but it doesn't slowly pull out from the side. My code is probably flawed majorly but I'm not entirely sure how to fix it. Any help would be great. Thank you!
#bod {
background-color: red;
height: 100px;
width: 200px;
border: 2px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
margin-left: -90px;
float: left;
animation-name: moves;
animation-duration: 4s;
animation-iteration-count: 1;
animation-direction: alternate;
}
#bod:hover {
cursor: pointer;
#keyframes moves {
from {
margin-left: -90px;
}
to {
margin-right: -10px;
}
}
}
<h1>Test</h1>
<div id="bod"></div>
Your syntax is incorrect. In order to apply the animation to the element on hover, change the animation property rather than adding the #keyframes declaration like you were doing.
In addition, you were animating from margin-left to margin-right, which probably isn't what you want. Here is an updated example animating the margin-left property. I also used the animation shorthand to condense the code as well.
You will probably also want to change the animation-fill-mode property value to forwards as well so that the final keyframe is maintained when the animation ends:
#bod {
background-color: red;
height: 100px;
width: 200px;
border: 2px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
margin-left: -90px;
float: left;
}
#bod:hover {
cursor: pointer;
animation: moves 4s forwards;
}
#keyframes moves {
from {
margin-left: -90px;
}
to {
margin-left: -10px;
}
}
<h1>Test</h1>
<div id="bod"></div>
As a side note, a transition may also work better since your animation won't reverse when hovering off of it. Here is a similar example using CSS3 transitions:
#bod {
background-color: red;
height: 100px;
width: 200px;
border: 2px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
margin-left: -90px;
float: left;
transition: margin-left 4s;
}
#bod:hover {
cursor: pointer;
margin-left: -10px;
}
<h1>Test</h1>
<div id="bod"></div>
Try adding values to margin-left and margin-right for both. And take the #keyframes out. It works like magic. See below.
#bod {
background-color: red;
height: 100px;
width: 200px;
border: 2px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
margin-left: -90px;
float: left;
animation-name: moves;
animation-duration: 4s;
animation-iteration-count: 1;
animation-direction: alternate;
}
#bod:hover {
cursor: pointer;
animation: moves;
}
#keyframes moves {
from {
margin-left: -90px;
margin-right: 0;
}
to {
margin-left: 0;
margin-right: -10px;
}
}
<h1>Test</h1>
<div id="bod"></div>
I've been browsing for a watch as a present to someone and I came across an ajax loading I'm trying to replicate.
I got most of it working (via looking at the CSS) except, I cannot simulate the dark/transparency happening when the ajax animation is displayed. Any ideas how it could be done?
Also Any ideas on how can I make the clock "glow"? And the color inside it white?
This is the website: http://www.jomashop.com/tissot.html?gender=25&price_filter=23789. To make the animation appear, change the price.
here's the full code I'm working on:
<html>
<head>
<style>
#ajax-loader{
display: block;
border-radius: 60px;
border: 6px solid #414C5C;
height: 80px;
width: 80px;
position: fixed;
top: 30%;
left: 50%;
background-image:none!important;
background:#fff;
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #FFF;
box-shadow: 0px 0px 15px #FFF;
}
#ajax-loader::before{
content: "";
position: absolute;
background-color: #414C5C;
top:6px;
left: 48%;
height: 35px;
width: 6px;
border-radius: 5px;
-webkit-transform-origin: 50% 94%;
transform-origin: 50% 94%;
-webkit-animation: ptAiguille 12s linear infinite;
animation: ptAiguille 12s linear infinite;
}
#ajax-loader::after{
content: "";
position: absolute;
background-color: #414C5C;
top:2px;
left: 48%;
height: 38px;
width: 6px;
border-radius: 5px;
-webkit-transform-origin: 50% 97%;
transform-origin: 50% 97%;
-webkit-animation: grdAiguille 2s linear infinite;
animation: grdAiguille 2s linear infinite;
}
#-webkit-keyframes grdAiguille{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
#-webkit-keyframes ptAiguille{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
#page-overlay {
background: none repeat scroll 0 0 black;
position: fixed;
display: block;
opacity: 0.5;
z-index: 1000001; // or, higher
left: 0;
top: 0;
height: 100%;
width: 100%;
}
</style>
<body>
<p>testest sdfdsf sfs sdfsd sdfds f sdfsdf sfsdf s sdfsdfdsfsdf sdfsdfsd</p>
<div id="ajax-loader"></div>
<div id="page-overlay"></div>
</body>
</html>
Thanks very much
Create an overlay div at the end of your HTML and try adding the following CSS to your overlay div:
background: none repeat scroll 0 0 black;
position: fixed;
display: block;
opacity: 0.5;
z-index: 1000001; // or, higher
left: 0;
top: 0;
height: 100%;
width: 100%;
This would create a shaded transparent layer preventing you from clicking the back.
UPDATE: To apply the glow effect, add an image within your overlay div (with a class, lets say loading) and apply the following CSS to the image:
img.loading
{
box-shadow: 0px 0px 5px #fff;
}
The element they are using to provide the overlay is #backgroundPopup. If you look at the element css you will see that the opacity is set to 0.7. This allows a 30% transparency on the element, and is being triggered by javascript to show/hide the div - by default it is hidden.
element.style {
opacity: 0.7;
}
#backgroundPopup {
background: none repeat scroll 0 0 #000000;
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999998;
}
Using the same technique you can get this fiddle - https://jsfiddle.net/j3uhnf03/1/
I don't understand why my menu is not centering. I tried everything from inline elements to margin: 0 auto; to align="center" and I can not get the menu to center. You can see it here http://jeremyspence.net78.net you have to scroll down all the way to see it, t only appears when it goes past the main menu. Here is some css
.scrollmenu {
display:none;
position: fixed;
top: 0;
text-align:center;
margin: 0px auto;
width: 1020px;
z-index: 10000;
padding:0;
}
.scrollmenu li{
width: 200px;
height: 75px;
overflow: hidden;
position: relative;
float:left;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.scrollmenu li:last-child{
margin-right: 0px;
}
.scrollmenu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #000;
position: relative;
}
.scroll-icon{
font-family: 'Symbols';
font-size: 60px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 80px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
}
.scroll-home{
font-size: 30px;
opacity: 0.8;
text-align: center;
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 30%;
}
.scrollmenu li:nth-child(2):hover{
background-color: #CEFECE;
}
.scrollmenu li:nth-child(3):hover{
background-color: #CEFEFE;
}
.scrollmenu li:nth-child(4):hover{
background-color: #CECEFE;
}
.scrollmenu li:last-child:hover{
background-color: #FECEFE;
}
Just add this on your <ul class="scrollmenu"></ul> :
left: 50%;
margin-left: -510px;
or :
left: 0;
right: 0;
Looks like you're centering a div? <div> is a block element, by default. They're centered by using margins. You were close -- you need to make both the left AND right margin auto. margin-left:auto;margin-right:auto;. That will center it inside its parent element, which needs to be 100% width (block elements will expand to maximum width of parent by default). If it's an inline element, you can use text-align:center; on its parent (parent still needs to be 100% width), and that will do the trick.
In the HTML for your link, it looks like you need to set the position:fixed in the div above the ul menu. It looks like you're setting both position:fixed and trying to center at the same time. Get the parent div positioned in the fixed location, and then its child ul should be able to be centered via margin-left: auto; margin-right: auto;.
Have you tried giving a width to the content div?
.content {
position: relative;
width: 1024px;
margin: 0 auto;
}
That seems to solve the issue in Chrome.
By setting position: fixed; without a size for the enclosing container, the menu uses the window border for the container, then with all the items floating left... well they all are on the left.