Develop Reference

how to keep image vertical on side bar

I am making the clone of just dial for practice but i got stuck in sidebar.
It is showing horizontal image instead of vertical on sidebar. Please tell me the
solution so i can proceed.
image : enter image description here
HTML CODE
<aside class="side-border" id="side-border-right">
<div class="right-side"><img src="images/j1.png"</div>
</aside>
CSS CODE
.side-border {
background: none repeat scroll 0 0 #ccc;
bottom: 0;
color: #9ca0a6;
font-size: 11px;
letter-spacing: 0px;
font-weight: 400;
padding: 0 24px;
position: fixed;
text-align: center;
text-transform: uppercase;
top: 0;
white-space: nowrap;
width: 171px;
z-index: 40;
}
.side-border>div {
display: inline-block;
height: 12px;
left: 24px;
line-height: 12px;
margin-top: 150px;
position: absolute;
text-align: center;
top: 50%;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform-origin: 0 0 0;
-moz-transform-origin: 0 0 0;
-webkit-transform-origin: 0 0 0;
-o-transform-origin: 0 0 0;
width: 300px;
}
.side-border>div.right-side {
left: auto;
right: 34px;
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform-origin: 100% 100% 0;
-moz-transform-origin: 100% 100% 0;
-webkit-transform-origin: 100% 100% 0;
-o-transform-origin: 100% 100% 0;
}

Just use this css in .right-side element. You don't need to use style in the parent element. Although you can use these styles in image also. Look here...
.right-side {position: absolute; right: 0px; top: 50%; transform-origin: 100% 0% 0; transform: rotate(90deg) translateX(50%);}
<div class="right-side"><img src="http://www.cutetravelmate.com/images/priority_shinet1.gif"</div>

How to apply animation to vertically centered element with CSS

I have a div within another div to which I would like to apply a CSS animation. The problem seems to be that I am applying multiple transforms to the div. In order to center the inner div, I am using the following:
#inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I then add the following class to the div on click:
.spin {
animation: whirl 1s ease-in-out;
}
#keyframes whirl {
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
It seems that the fact that I have already used a transform to center the div makes it so that the animation doesn't work correctly. If I remove the transform: translate(-50%, -50%); line from the CSS, the animation works correctly, but the div is not centered.
Here is a jsfiddle I made to demonstrate the issue.
Thanks for your help!

The issue is because the translate is lost on animation.change it by adding both translate and rotate on animation
#keyframes whirl {
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
function spin() {
$("#inner").addClass("spin");
}
#main {
background-color: black;
position: relative;
width: 400px;
height: 400px;
}
#inner {
background-color: red;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 10px;
transform: translate(-50%, -50%);
}
.spin {
animation: whirl 1s ease-in-out;
}
#keyframes whirl {
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="inner" onclick="spin()"></div>
</div>

IE11 3d transformations and perspective

I have created a 3d block that I am animating with tweenmax. I know that IE doesn't support transform-style: preserve-3d so you need to move it to the child, but because there are multiple blocks (more than the example) it doesn't really work especially when using the js to tween them.
My question is there a way to preserve the 3d using javascript for Internet Explorer?
http://jsfiddle.net/ktcle/mhca1k10/2/
.box {
display: block;
width: 180px;
height: 60px;
position: relative;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
outline: 1px solid transparent;
}
.box::before,
.box::after,
.box i,
.box i::before,
.box i::after,
.box b {
content: '';
display: block;
position: absolute;
}
.box::before {
background: red;
width: 60px;
height: 60px;
-ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
-webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
}
.box::after {
background: pink;
width: 60px;
height: 60px;
-ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
-webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
}
.box i {
background: green;
width: 180px;
height: 60px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-ms-transform: translate3D(0, 0, 0px);
-webkit-transform: translate3D(0, 0, 0px);
transform: translate3D(0, 0, 0px);
}
.box i::before {
background: purple;
width: 180px;
height: 60px;
-ms-transform: rotate(180deg) translate3D(0, 0, -60px);
-webkit-transform: rotate(180deg) translate3D(0, 0, -60px);
transform: rotate(180deg) translate3D(0, 0, -60px);
}
.box i::after {
background: orange;
width: 180px;
height: 60px;
-ms-transform: rotateX(90deg) translate3D(0px, -30px, -30px);
-webkit-transform: rotateX(90deg) translate3D(0px, -30px, -30px);
transform: rotateX(90deg) translate3D(0px, -30px, -30px);
}
.box b {
background: silver;
width: 180px;
height: 60px;
-ms-transform: rotateX(90deg) translate3D(0px, -30px, 30px);
-webkit-transform: rotateX(90deg) translate3D(0px, -30px, 30px);
transform: rotateX(90deg) translate3D(0px, -30px, 30px);
}

Trigger click on one anchor when another is clicked

When I click on the link, I would like the link to be also clicked. However, nothing happens with my code, see fiddle.
HTML:
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next" onClick="load()">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
JavaScript:
function load() {
$("#foo").tigger('click');
}
function burn() {
$(this).css("color", "red");
}

I personally prefer writing it this way: JS Fiddle
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
nav a {
position: absolute;
top: 50%;
display: block;
outline: none;
text-align: left;
z-index: 1000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
nav a.prev {
left: 0;
}
nav a.next {
right: 0;
}
nav a svg {
display: block;
margin: 0 auto;
padding: 0;
}
/*--------------------*/
/* Fillpath (http://www.nizuka.fr/)*/
/*--------------------*/
.color-10 {
background: #f3cf3f;
}
.nav-fillpath a {
width: 100px;
height: 100px;
}
.nav-fillpath .icon-wrap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
position: absolute;
left: 50%;
width: 3px;
height: 50%;
background: #566475;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
z-index: 100;
height: 0;
background: #fff;
-webkit-transition: height 0.3s, -webkit-transform 0.3s;
transition: height 0.3s, transform 0.3s;
}
.nav-fillpath a::before,
.nav-fillpath .icon-wrap::before {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-135deg);
transform: translateX(-50%) rotate(-135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a.next::before,
.nav-fillpath a.next .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(135deg);
transform: translateX(-50%) rotate(135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::after {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.nav-fillpath a.next::after,
.nav-fillpath a.next .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.nav-fillpath h3 {
position: absolute;
top: 50%;
margin: 0;
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 0.85em;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.nav-fillpath a.prev h3 {
left: 100%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.nav-fillpath a.next h3 {
right: 100%;
text-align: right;
-webkit-transform: translateY(-50%) translateX(50%);
transform: translateY(-50%) translateX(50%);
}
.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
height: 50%;
}
.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(-125deg);
transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpath a.next:hover::before,
.nav-fillpath a.next:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(125deg);
transform: translateX(-50%) rotate(125deg);
}
.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(-55deg);
transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpath a.next:hover::after,
.nav-fillpath a.next:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(55deg);
transform: translateX(-50%) rotate(55deg);
}
.nav-fillpath a:hover h3 {
opacity: 1;
-webkit-transform: translateY(-50%) translateX(0);
transform: translateY(-50%) translateX(0);
}
#media screen and (max-width: 520px) {
.nav-slide a.prev,
.nav-reveal a.prev,
.nav-doubleflip a.prev,
.nav-fillslide a.prev,
.nav-growpop a.prev {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.nav-slide a.next,
.nav-reveal a.next,
.nav-doubleflip a.next,
.nav-fillslide a.next,
.nav-growpop a.next {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.nav-slide a,
.nav-reveal a,
.nav-doubleflip a,
.nav-fillslide a {
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
.nav-growpop a {
-webkit-transform: translateY(-50%) scale(0.6);
transform: translateY(-50%) scale(0.6);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
Update:
using this is better because this way you separate your javascript all in .js or <script> instead of having it scattered on DOM elements so keep the HTML "clean", something like the inline CSS vs external CSS. Beside doing it this way you can easily attach more than one event..
This post jQuery.click() vs onClick has more detailed answer.

There is a typo in load() function:
function load() {
$("#foo").trigger('click'); //'r' was missing
}
Please note that
$(this)
inside burn() function returns window instance, is that what you are expecting there?
In case you want to change color of a link that gets clicked here is a HTML code (notice event parameter added):
Name Surname
and js:
function burn(element) {
$(element).css("color", "red");
}
This solution with 'this' lets you reuse burn() function for more that one link, it doesn't bind you to #foo elemenent only.

Define styles inside component but do not inline them [React]

I like the idea of having everything inside React component (including styles).
But I do not like the idea of inline styles (1-duplications, 2-heavy mess on Elements tab).
Is there any existing way to define styles inside component but do not have to inline them?
I mean in dev and production environments. Never inline them.
Kind of: still using CSS, but isolated to one component...
Complete requirements:
Styles defined inside component
no inline
support preudo-classes/elements
support #-rules

Yes, you can use jss, it has also react integration

I've done this by having a .sass file that I import in the component's jsx file. I then put a class on the outermost div of the component, and namespace everything in the .sass file by that class.

Yes, made Style It because I wanted to just write plaintext CSS and not go through the object literal syntax.
Fulfills all of your requirements and some. No build step or anything to configure, automagically scopes to keep your selectors out of the global CSS namespace, XSS safe by default, tiny, and flash of unstyled content (FOUC) free.
npm install style-it --save
Functional Syntax (JSFIDDLE)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return Style.it(`
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
`,
<div id="heart" />
);
}
}
export default Intro;
JSX Syntax (JSFIDDLE)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return (
<Style>
{`
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
`}
<div id="heart" />
</Style>
}
}
export default Intro;
Heart example pulled from CSS-Tricks