Split two div text with a diagonal line - javascript

i tried different ways, but i can't find any way to do something like this through HTML, CSS.
At the moment I have:
HTML:
<div id="intro-slogan">
<div id="diagonal"></div>
</div>
CSS:
#intro-slogan{
display: inline-block;
margin-top: 5em;
clear: both;
height: 100%;
}
#diagonal{
background: red;
width: 18em;
height: 1px;
transform: rotate(-60deg);
}
I want something like this:

fiddle: https://jsfiddle.net/avakqez9/1/
<div class="one">
<h1>The Jocky</h1>
</div>
<div class="two">
<h1>of Mocky</h1>
</div>
CSS
div{
vertical-align: middle;
display: inline-block;
}
.one{
overflow: hidden;
margin-top: -1px;
transform: rotate(10deg);
border-right: 1px solid #000;
}
.one h1 {
margin-right: -20px;
transform: rotate(-10deg);
}
.two h1{
color: orange;
margin: 40px 0 0 -10px;
}

You could try wrapping each one of the original divs in a container, skewing the containers with the transform CSS3 property (check skewX and skewY) and skew the content div in the opposite direction (this way you keep the content non-skewed).
After that, perhaps overflow:hidden and some toying around with margins/paddings could finally do the trick.

Try using position:absolute , z-Index , border properties , using span element as descendant of #intro-slogan to position text "of giving" below text "the gift"
#intro-slogan {
display: inline-block;
margin-top: 5em;
clear: both;
height: 100%;
z-Index:0;
font-size:24px;
}
#intro-slogan span {
position:absolute;
top:145px;
left:74px;
}
#diagonal {
background: red;
width: 18em;
height: 1px;
transform: rotate(-60deg);
position:absolute;
left:-140px;
z-Index:10;
border:2px solid #fff;
}
<div id="intro-slogan">
The gift<div id="diagonal"></div><span>of giving</span>
</div>

For those who still need, i made it this way:
HTML:
<div class='centerMe'>
<div class='skew1'>
<div class='text part-1'>
<span>the Gift</span>
</div>
</div>
<div class='skew2'>
<div class='text part-2'>
<span>of Giving</span>
</div>
</div>
</div>
CSS:
.skew1,
.skew2{
overflow: hidden;
height: 300px;
cursor: pointer;
position: relative;
width: 27em;
float: left;
transform: skew(-20deg);
-o-transform: skew(-20deg);
-ms-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
}
.text{
top: 50%;
color: #fff;
right: 60px;
font-size: 2em;
position: absolute;
display: inline-block;
transform: skew(20deg);
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
-moz-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
.skew2:before{
content:'';
top: 55%;
left: 0px;
width: 2px;
height: 100px;
position: absolute;
background-color: #fff;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.centerMe{
top: 50%;
left: 50%;
min-width: 1200px;
position: absolute;
transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}

Related

How can I disable scrolling when my hamburger menu is open?

I am working on a website with a hamburger menu that fills the entire page when clicked. The only problem is the page behind still scrolls when the nav is open, and I can't figure out how to disable scrolling while the menu is open. I have tried changing overflow-y: hidden, but it doesn't seem to work.
Here is the HTML for the menu:
<div id="menu">
<div class="logotext">
ONWORD
</div>
<input type="checkbox" id="myInput">
<label for="myInput">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</label>
<aside>
<div class="aside-section aside-left">
<div class="aside-content">
<p> Languages of the land</p>
</div>
</div>
<div class="aside-section aside-right">
<ul class="aside-list">
<li>Start Learning</li>
<li>Language Map</li>
<li>History</li>
<li>Stories</li>
<li>Contact</li>
</ul>
</div>
</aside>
</div>
Here is the CSS:
.logotext a {
font-family: "Raleway", sans-serif;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
left: 1%;
z-index: 99999;
color: white;
position: absolute;
padding-left: 19px;
padding-right: 19px;
padding-top: 22px;
transition: 0.5s;
}
.logotext a:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.aside-section {
top: 0;
bottom: 0;
position: absolute;
z-index: 99998;
overflow: hidden;
}
.aside-left {
display: none;
width: 40%;
left: 0;
background-color: white;
background-image: url(../img/menu1.jpeg);
background-position: center;
background-size: cover;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-right {
width: 100%;
right: 0;
background-color: #000000;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 160px;
text-align: left;
padding-left: 50px;
z-index: 99998;
}
.aside-content {
margin-top: 150px;
padding: 0 40px;
position: relative;
color: #000000;
text-align: center;
z-index: 99998;
}
.aside-list li {
margin-bottom: 20px;
z-index: 99998;
padding-bottom: 7px;
}
.aside-anchor::after {
content: "";
position: absolute;
bottom: 0;
background-color: #000000;
left: 0;
right: 0;
height: 2px;
border-radius: 3px;
}
.aside-anchor::before {
border-radius: 3px;
content: "";
position: absolute;
bottom: 0;
background-color: #f5eded;
left: 0;
height: 1px;
z-index: 1;
width: 50%;
-webkit-transition: transform 0.2s ease-in-out;
-o-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.aside-anchor:hover:before {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
background-color: #dd8800;
}
.aside-anchor {
padding-bottom: 5px;
color: #fff;
text-decoration: none;
font-size: 14px;
position: relative;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ aside .aside-left {
transform: translateY(0%);
}
input[type="checkbox"]:checked ~ aside .aside-right {
transform: translateX(0%);
}
input[type="checkbox"]:checked ~ label .bar {
background-color: #fff;
}
input[type="checkbox"]:checked ~ label .top {
-webkit-transform: translateY(0px) rotateZ(45deg);
-moz-transform: translateY(0px) rotateZ(45deg);
-ms-transform: translateY(0px) rotateZ(45deg);
-o-transform: translateY(0px) rotateZ(45deg);
transform: translateY(0px) rotateZ(45deg);
}
input[type="checkbox"]:checked ~ label .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
input[type="checkbox"]:checked ~ label .middle {
width: 0;
}
.middle {
margin: 0 auto;
}
label {
top: 10px;
display: inline-block;
padding: 7px 10px;
background-color: transparent;
cursor: pointer;
margin: 10px;
position: absolute;
z-index: 99999;
text-align: right;
right: 1%;
transition: 0.5s;
}
label:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.bar {
display: block;
background-color: #ffffff;
width: 30px;
height: 3px;
border-radius: 5px;
margin: 5px auto;
transition: background-color 0.4s ease-in, transform 0.4s ease-in,
width 0.4s ease-in;
z-index: 99999;
}
.aside-section h1 {
margin: 0;
position: relative;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
font-size: 35px;
font-family: 'BritishShorthair';
}
.aside-section p {
font-size: 90px;
text-align: center;
line-height: 130px;
font-family: 'BritishShorthair';
margin-top: 0px;
color: white;
}
#media (min-width: 992px) {
h1 {
font-size: 40px;
}
.aside-left {
display: block;
}
.aside-right {
width: 60%;
}
}
When you said you set overflow-y: hidden. Did you do this on the body?

apply a jquery event to a css shape

I have made an unordered list that I have set to respond to a jQuery function that changes the type from the colour black to white. When positioning the type i set each a tag as a separate class for the list options ex: .home,.about, etc. After each option i included a css shape by using .home:after and putting in the relevant details for the shape
My question is there a way to apply a jQuery function to these shapes as well even though they are not referenced in the HTML and use the same class name as the a tags.
$(function(){ //start of jQuery
"use strict";
$('#menu').hover(function(){ /*selects the menu li only if it has a child ul (sub-menu) and adds the hover event */
$(this).find('ul').toggle(); /* selects the ul inside the li that has been rolled over and toggles the display on/off */
});
});
.table{
padding-top: 702px;
display: table;
margin: 0 auto;
}
#menu{
min-width: 0px;
list-style: none;
text-align: center;
overflow: hidden;
margin-top: -41px;
}
#menu li{
display: inline;
position: absolute;
}
/* formating for type on navigation bar*/
a{
text-decoration: none;
font-family: "Arial";
color: white;
font-size: 16pt;
font-style: italic;
font-weight: 900;
}
#menu a:hover{
color: #000000;
}
.home{
margin-top: 0px;
margin-left: -694px;
}
/* start of parallelogram */
.home:after{
content: " ";
display: block;
position: absolute;
width: 138px;
height: 38px;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
background: black;
margin-top: 0px;
left: -410px;
top: -9px;
z-index: -1;
}
/* end of parallelogram*/
.about{
margin-left: -370px;
}
/* start of parallelogram */
.about:after{
content: " ";
display: block;
position: absolute;
width: 138px;
height: 38px;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
background: black;
margin-top: 0px;
left: -250px;
top: -9px;
z-index: -1;
}
/* end of parallelogram*/
.work{
margin-left: -62px;
}
/* start of parallelogram */
.work:after{
content: " ";
display: block;
position: absolute;
width: 138px;
height: 38px;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
background: black;
margin-top: 0px;
left: -92px;
top: -9px;
z-index: -1;
}
/* end of parallelogram*/
.skills{
margin-left: 95px;
}
/* start of parallelogram */
.skills:after{
content: " ";
display: block;
position: absolute;
width: 138px;
height: 38px;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
background: black;
margin-top: 0px;
left: 66px;
top: -9px;
z-index: -1;
}
/* end of parallelogram*/
.contact{
margin-left: 244px;
}
/* start of parallelogram */
.contact:after{
content: " ";
display: block;
position: absolute;
width: 150px;
height: 38px;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
background: black;
margin-top: 0px;
left: 224px;
top: -9px;
z-index: -1;
}
/* end of parallelogram*/
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<div class="table">
<ul id="menu">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
WORK
</li>
<li>
SKILLS
</li>
<li>
CONTACT
</li>
</ul>
</div>

Need to dynamically set width of an element and ::after [duplicate]

I have an element whose :before style has to be modified based on calculations.
export class Content extends React.Component {
render() {
return (
<div className="ring-base">
<div className="ring-left" style={{/* Change here */}}></div>
<div className="ring-right" style={{/* Change here */}}></div>
<div className="ring-cover">
<div className="ring-text">10%</div>
</div>
</div>
);
}
}
CSS Code:
.ring-base {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
background: red;
transform: rotate(90deg);
overflow:hidden;
}
.ring-cover {
position: absolute;
height: 180px;
width: 180px;
background: #fff;
border-radius: 50%;
top: 5%;
left: 5%;
}
.ring-cover .ring-text {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 2em;
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
transform: rotate(-90deg);
}
.ring-right, .ring-left {
height: 100px;
width: 200px;
overflow: hidden;
position: absolute;
}
.ring-right:before, .ring-left:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 100px 0 0;
background-color: grey;
transform: rotate(0deg);
}
.ring-right {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
transform: rotateZ(0deg);
}
.ring-left {
transform: rotate(180deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ring-right:before {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform: rotate(0deg);
}
.ring-left:before {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
The ask is to be able to update the transform property for .ring-left:before and .ring-right:before via ReactJS.
If there is a way to not update the :before class and change the CSS to not make use of :before at all, then do suggest that as well.
Js-Fiddle
You can iterate document.styleSheets, set .style of .cssRules where .selectorText matches pseudo selector
let sheets = document.styleSheets;
let selector = "div::before";
let replacementContent = '"after"';
for (let sheet of sheets) {
for (let rule of sheet.cssRules) {
if (rule.selectorText === selector) {
rule.style["content"] = replacementContent;
}
}
}
div:before {
content: "before";
color: red;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background: green;
width: 50px;
height: 50px;
display: block;
}
<div></div>

center div using javascript/jquery

I know there are few way to positon a div center vertically and horizontal using css. But for old phone support, I have to do it with js.
http://jsfiddle.net/ncsy9khf/1/
div{
width:50px;
height:50px;
background:orange;
position:relative;
margin: 0 auto;
display:block;
}
How do I do the calculation to know what value of my margin top to make the box center center?
This is my favorite way:
position:relative;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
This 5 lines can vertically and horizontally almost anything
Fiddle
I learned this method from this article
Support tables here
You can expect 95% of your users have this work perfectly
More browser friendly way:
position:relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
Friendly Fiddle
Just use plain CSS:
.parent {
position: relative;
width: 160px;
height: 160px;
background: #eee;
}
.centered {
position: absolute;
width: 50px;
height: 50px;
background-color: #FF9800;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="parent">
<div class="centered"></div>
</div>
The parent element must have position:relative; (In which you are planning to center the div)
Also there's no need to add display:block; to div elements - they are block elements by default

Centering rotated paragraph inside parent div

What I have so far:
http://jsfiddle.net/2Zrx7/2/
.events{
height:100px;
position: relative;
}
.tt_username{
position: absolute;
top:0px;
height: 100%;
width: 30px;
background: #ccc;
text-align: center;
}
.tt_username p{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
background: #ff0000;
font-size: 16px;
}
I need to center the text inside the grey div, this div's height is consistent, but the text is generated via ajax, for this reason I believe transform origin is not going to fix it. Would like a CSS solution, but welcome js as well.
Using display: table, combined with display: table-cell as well as vertical-align: middle:
Living demo: http://jsfiddle.net/2Zrx7/3/
.events{
height:100px;
position: relative;
display: table; /*added*/
}
.tt_username{
/* position: absolute;*/
top:0px;
height: 100%;
width: 30px;
background: #ccc;
text-align: center;
display:table-cell; /*added*/
vertical-align:middle; /*added*/
}
.tt_username p{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
background: #ff0000;
font-size: 16px;
}

Categories

Resources