Here is my (simplified) situation:
http://jsfiddle.net/qFhaq/
Clicking the button launches an animation that expands the height of the div. While the div is expanding, the :after pseudo-element (containing the text 'look') disappears and then reappears at the end of the animation.
Is there a way to prevent the pseudo-element from disappearing, so that it's visible throughout the animation?
Add "overflow" CSS rule to #main and set it to "visible !important;"
#main{
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
overflow:visible !important;
}
I rewrite it that it used CSS3 transition:
JS (for fast, for better you can change it to vanilla js):
$(function(){
$("#clicky").click(function(){
$("#main").addClass('animate');
});
});
CSS:
#main{
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
-webkit-transition: height 2s linear;
}
#main:after{
content: "look";
height: 50px;
background-color: white;
margin-left: 210px;
border: 1px solid black;
}
#main.animate{
height: 500px;
}
http://jsfiddle.net/qFhaq/1/
Related
i have to add dashed outline on focus at a specific offset of 4px, this is working fine in all browsers except IE since it doesn't support outline-offset and i cannot add a wrapper element in the HTML as work around with padding because i am trying to make a generic fix across the application, and i cannot add a border: 4px solid transparent, because the elements have a border which is required, and Pseudo elements will not work because we have a pseudo class of focus and we cannot use box-shadow as it doesn't allow a dashed outline
this is what i want to achieve in IE.
Css which is working fine on chrome
.keyBoardUser input[type="radio"]:focus + div {
//border: 4px solid transparent // cannot use this
outline-offset: 4px;
outline: 1px dashed black;
}
keyboard user is a class which is added on tabbing using JS.
Please refer to this thread, use CSS pseudo elements or nested div to set the border property, and use it as a alternative method.
Sample code as below:
<style>
.keyBoardUser {
margin-left:20px;
text-align: center;
width:30px;
}
input[type="radio"]{
width:20px;
height:20px;
}
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.keyBoardUser input[type="radio"]:focus + div {
outline-offset: 6px;
outline: 2px dashed black;
}
}
/*Microsft Edge browser*/
#supports (-ms-ime-align:auto) {
.keyBoardUser input[type="radio"]:focus + div {
outline-offset: 6px;
outline: 2px dashed black;
}
}
/*IE Browser*/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.box {
position: relative;
text-align: center;
}
.keyBoardUser input[type="radio"]:focus + div:after {
content: "";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 40px;
height: 40px;
border: 2px dashed red;
}
.box input[type="radio"] {
margin-left: 5px;
margin-top: 5px;
}
}
</style>
Html code as below:
<div class="keyBoardUser ">
<input id="Radio1" type="radio" />
<div class="box"><input id="Radio1" type="radio" checked="checked" /></div>
</div>
The output like this:
IE browser:
Chrome browser:
Use a pseudo element on the sibling element to style the dashed outline. I am calculating the width and height dynamically.
Use the below class. This works on IE as well!
.keyBoardUser input[type="radio"]:focus + div::after {
content: "";
position: absolute;
display: block;
border: 4px solid transparent;
outline: 1px dashed #000;
width: calc(100% + 10px);
height: calc(100% + 10px);
top: -5px;
left: -5px;
}
I'm learning jQuery, testing its functionality, and have some problem with an example I made.
https://codepen.io/MaxVelichkin/pen/pBJeZy
/*remove animate2 class and assign animate1 class to target*/
$(function() {
$('#trigger').on('click', function() {
$('#target').removeClass('animate2');
$('#target').addClass('animate1');
});
});
/*remove animate1 class and assign animate2 class to target*/
$(function() {
$('#trigger2').on('click', function() {
$('#target').removeClass('animate1');
$('#target').addClass('animate2');
});
});
/*just a container around*/
#container {
margin: 10px;
width: 350px;
height: 350px;
border: solid green 1px;
}
/*green button*/
#trigger {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: green;
margin: 20px auto;
}
/*red button*/
#trigger2 {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: red;
margin: 20px auto;
}
/*Target div which will be changing*/
#target {
width: 100px;
height: 100px;
border: solid blue 1px;
margin: 10px auto;
}
/*Keyframes for green button*/
#keyframes myfirst {
0% {
background: white;
width: 100px;
height: 100px;
border-radius: 0%;
}
100% {
background: blue;
width: 150px;
border-radius: 100%;
}
}
/*Keyframes for red button*/
#keyframes mysecond {
0% {
background: blue;
width: 150px;
border-radius: 100%;
}
100% {
background: white;
width: 100px;
height: 100px;
border-radius: 0%;
}
}
/*cusstom class to be assigned by green button*/
.animate1 {
-webkit-animation: myfirst 3s;
animation: myfirst 3s;
height: 100px;
background: blue;
width: 150px;
border-radius: 100%;
margin: 10px auto;
}
/*cusstom class to be assigned by red button*/
.animate2 {
-webkit-animation: mysecond 3s;
animation: mysecond 3s;
height: 100px;
width: 150px;
border: solid red 1px;
border-radius: 0%;
margin: 10px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="trigger"></div>
<div id="trigger2"></div>
<div id="target"></div>
</div>
There are:
2 buttons, green and red.
2 sets of keyframes.
2 custom classes which start the animation of corresponding keyframes and applies the styles from the last keyframe.
target div, which style I want to change on button click.
When I click on the button, it assigns a class to the target div and removes the class, assigned by another button.
Question 1: Why the width of the target div is changing back to 100px after the green button animation ends (why it doesn't remain 150px)?
Question 2: Do I do everything right or there is a better jQuery approach?
Your #target is taking precedence since it is a id selector. This has a width of 100px. Your class animate1 is getting overwritten, so that's why you aren't seeing 150px.
you can code like this animation: myfirst 3s forwords;
Hello is it possible to make a image have a slanted right side border.
.fh {
border-right: 180px solid transparent;
}
<div class="fh"><img src="img/fh.jpg" style="max-height: 500px;"></div>
So what I basically want is this http://prntscr.com/glcq2l but with the image instead.
One possible solution is to have a div which you rotate and set overflow hidden. There is a wrap around it, just in case you want to use it it makes it easier to place the image.. fiddle to play around here (I left the borders just to help understand whats going on)
(The background image on the body is just there to show that the cut off corner is transparent and not a border or anything like that.)
body {
background-image: url(https://i.stack.imgur.com/xxGZk.jpg);
}
* { box-sizing: border-box; }
.wrap {
position: relative;
width: 400px;
height: 200px;
border: solid 2px black;
overflow:hidden;
}
.fh {
position: relative;
top: -5px;
left: -250px;
width: 600px;
height: 700px;
transform: rotate(45deg);
overflow: hidden;
border-top:solid 1px red;
border-bottom:solid 1px red;
border-left:solid 1px orange;
border-right:solid 1px lime;
}
.fh img {
position: absolute;
margin: -30px 0px 0 30px;
top: 0px;
left: 0px;
border:solid 2px green;
width: 400px;
height: 200px;
transform: rotate(-45deg);
}
<div class="wrap">
<div class="fh">
<img src="http://lorempixel.com/400/200/sports/1/" >
</div>
</div>
A lot of answers and possible solutions can also be found here: Cut Corners using CSS of course they need to be tweaked to your request.
I recently tried out the div with different shape like triangle trapezoid etc.
HTML:
<div class="triangle">HI nice to meet you guys</div>
CSS
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
Previously, the content appears properly when the div is a square (height and width are 100px).
When I style the div to look like a triangle, then the content oveflows.
How can I make this one as proportional in order to appear properly inside the div.
See fiddle: http://jsfiddle.net/7qbGX/2/
Any suggestion would be great.
try this: LINK
.triangle{
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
float: left;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.triangle p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
Your Height and width is 0. You won't fit any text into it. It will either overflow or you can set overflow to "hidden", but than you will not see anything cos the div have the size 0.
your div is invisible to see in your actual div try to give background-color to that div.
[see demo]http://jsfiddle.net/salwenikhil0724/7qbGX/6/
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
background-color:red;
}
.triangle p {
text-align: center;
top: 40px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
This is for displayed text properly, you need to mentioned width property as follows:-
<div style="width: 10em; word-wrap: break-word;">
Some longer than expected text with antidisestablishmentarianism
</div>
for Horizontal scroll you can put overflow-x:hidden its up to you dear.
I have a real simple page that has a header, footer, body, and left and right nav's.
All of them together make a nice rectangular page thats 100% of the width.
All made using div's in a css sheet.
I have 20 image thumbnails in the body and when the page is resized they push my footer out of place.
To fix this i would like to add a scrollbar to the body div.
I have already done this with overflow-y: auto;
However,
Adding the scrollbar seems to add some space to the right side of the body, forcing it to be placed underneath the left and right nav's blowing everything up. Please Help.
#headerElement {
width: 100%;
height: 50px;
border: 2px solid #000000;
background-color: #F8AA3C;
}
#bodyElement {
margin-left: 10%;
width: 80%;
color: blue;
height: 400px;
background-color: #F8883C;
border: 2px dashed #F8AA3C;
overflow-y: auto;
}
#leftNavigationElement {
float: left;
width: 10%;
height: 400px;
border: 2px dashed #FF0000;
background-color: #8F883C;
}
#rightNavigationElement {
float: right;
width: 10%;
height: 400px;
border: 2px dashed #0000FF;
background-color: #F888FC;
}
#footerElement {
clear: both;
border: 2px dashed #00FFFF;
height: 50px;
width: 100%;
}
Because the scroll bar is not inside the width of the div but still takes up space, you need to give it some space or negative margins. I would guess a width of 18 pixels for IE, and since you cannot set that in IE, that will have to be your default.
::-webkit-scrollbar { width: 18px; margin-right:-18px; }
::-moz-scrollbar { width: 18px; margin-right:-18px;}
::-o-scrollbar { width: 18px; margin-right:-18px;}
You'll need to either restructure the page so it flows better or force the scrollbar with {overflow-y: scroll} and adjust widths accordingly so the layout doesn't break.