I am setting up a diamond div using CSS. But the diamond div is going out or the parent div.
Is there any way to calculate the diagonal length of the diamond div so I can set the width to the parent width?
HTML
<div class="col-md-2">
<div class="ab-iconbar text-center">
<div class="ab-baric">
<img src="images/icons/baby63.svg" alt="baby">
</div>
<div class="ab-icobox">
<h3>19<small>to</small>34</h3>
</div>
</div>
</div>
SCSS
.ab-iconbar {
#extend .ab-bg-yellow;
.ab-baric {
margin: 0 auto;
display: block;
width: 100%;
#extend .ab-bg-gsea; //bg color
text-align: center;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
img, .fa {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.ab-icobox {
#extend .ab-c-midnit;
padding: 10px;
}
}
JS
var ab_icbar_w = $('.ab-iconbar').width();
var ab_baric_w = $('.ab-baric').css('width', ab_icbar_w);
$('.ab-baric').css('height', ab_baric_w);
Current Output
You could use the Pythagorean theorem.
So
var diagLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
Pythagorus theorem would give you the diagonal length .
Get the height and width from jQuery,and use pythagorus theorem.
Related
I am trying to create diagonal div, at the bottom of another div. It should look like this: http://storage8.static.itmages.com/i/17/0706/h_1499339517_4995911_421bf6ae42.png.
I have problem when I adding 100vw value to my border-left, because horizontal scrollbar appears on my website. I also tried use Jquery to find the width of the body. It works but when I resize my browser, border width does not change. Any suggestions how to fix it?
var actualInnerWidth = $(".background-gradient").prop("clientWidth");
$('.background-gradient').css({
'border-top':'50px solid red',
'border-left': actualInnerWidth + 'px solid transparent'
});
.banner {
min-height: 50vh;
margin: 0;
padding:0;
background-color: red;
}
.background-gradient {
width:100%;
height:50px;
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="jumbotron banner">
</div>
<div class="background-gradient">
</div>
Here is jsfiddle: https://jsfiddle.net/b49mmm9a/1/
Try This i think you find this
.box {
background-color: skyblue;
margin-top: 40px;
padding: 1% 20px;
/* Added a percentage value for top/bottom
padding to keep
the wrapper inside of the parent */
-webkit-transform: skewY(-5deg);
-moz-transform: skewY(-5deg);
-ms-transform: skewY(-5deg);
-o-transform: skewY(-5deg);
transform: skewY(-5deg);
}
.box>.wrapper {
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg);
}
<div class="box">
<div class="wrapper">
<h1>This is a heading</h1>
<p>This is a sub-heading</p>
<p>
How do I draw a Diagonal div?
</a>
</p>
</div>
</div>
http://jsbin.com/daruruhola/edit?html,css,js,output
Here is simple JS/jQuery Code.
function setBorder(){
var actualInnerWidth = $(".background-gradient").prop("clientWidth");
$('.background-gradient').css({
'border-top':'50px solid red',
'border-left': actualInnerWidth + 'px solid transparent'
});
}
$(document).ready(function(){
setBorder();
});
$(window).resize( function(){
setBorder();
});
check codepen here https://codepen.io/sajiddesigner/pen/PjBRxQ
.kontainer {
width: 100%;
overflow: hidden;
}
<div class="kontainer">
<div class="banner"></div>
<div class="background-gradient"></div>
</div>
I have a list Hexagons In my web page like this
I had to use transform:rotate to have a correct text in it but in chrome text is Blurry ,in Mozilla it shows correctly
I searched a lot but there were no exact way.
I used this article to make these hexagons
http://www.queness.com/resources/html/css3-hexagon/index.html
and this is my html
<div class="hex hex-3">
<div class="inner">
<h4>Energy</h4>
<hr />
<p>
</p>
</div>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
and some part of css which I used transform:rotate in it
.hex {
transform: rotate(30deg);
-webkit-transform:rotate(30deg);
}
.inner {
transform: rotate(-30deg);
-webkit-transform:rotate(-30deg);
}
.hex .corner-1 {
z-index: -1;
transform: rotate(60deg);
}
.hex .corner-2 {
transform: rotate(-60deg);
}
.hex .corner-1:before {
transform: rotate(-60deg) translate(-87px, 0px);
transform-origin: 0 0;
}
.hex .corner-2:before {
transform: rotate(60deg) translate(-48px, -11px);
bottom: 0;
}
any idea how to fix it?
Have been busy and it took me a while to find out but following css solves the issue:
.hex .corner-1,
.hex .corner-2,
.hex .corner-1:before,
.hex .corner-2:before {
backface-visibility: inherit !important;
}
I was just having a similiar issue with a project that had a skewY tranform and found the bug while working on that, though in my project it was caused by a unnecessary rotateZ(0) transform.
As seen in the JSfiddle below, after the click event occurs two span (block) elements rotate 45deg to form an "X". However, both elements are pulled slightly left to form an "X" that is slightly off-center of the parent's true center-origin.
I would greatly appreciate a demonstration on how to have my "X" form in the parent's true center. Also, if someone can find an answer elsewhere it is greatly appreciated as my searches have come up empty.
Currently I am using the following "transform-origin" to form the "X"after the click event:
transform-origin: 21% 50%;
Without it, things are really a mess.
Here is the JSfiddle: https://jsfiddle.net/STEEZENS/L74p1ok3/
HTML
<a href="#" id="hamburger-icon" title="Menu">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
I was able to achieve the desired result by changing the transform-origin to an absolute value (px) and adding translateX, in addition to the rotation, to compensate(?) for the apparent translation that existed, previously.
https://jsfiddle.net/voz8Lnhd/1/
#hamburger-icon .line {
display: block;
position: absolute;
width: 75px;
height: 4px;
border-radius: 4px;
background-color: white;
transition: all .3s ease 0s;
transform-origin: 21px center;
}
#hamburger-icon.active-rotate .line-1 {
transform: rotate(45deg) translateX(6px);
-webkit-transform: rotate(45deg) translateX(6px);
-moz-transform: rotate(45deg) translateX(6px);
}
#hamburger-icon.active-rotate .line-3 {
transform: rotate(-45deg) translateX(6px);
-webkit-transform: rotate(-45deg) translateX(6px);
-moz-transform: rotate(-45deg) translateX(6px);
}
I had a button that rotated text along the Y axis , giving it a mirrored look. This no longer works for some reason because the button has been placed on the child (popup) and the text to be mirrored is on the parent.
Is there a javascript function i could use to rotate the text on the parent when a button is clicked / rotate it back when its clicked again. (preferably a toggle switch)
This is what I originally had when it was only one the parent page:
HTML link :
<li><a class="button small icon-text-height flipx" href="#" onclick="return false;"></a></li>
The CSS for the div with the text:
article .teleprompter
{
padding: 300px 50px 1000px 100px;
font-size: 30px !important;
line-height: 86px;
z-index: 1;
background-color: #141414;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
The CSS for the flipx part:
article .teleprompter.flipx
{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
z-index: 1;
pointer-events: none;
padding: 300px 50px 1000px 100px !important;
}
JS I Think should work:
<script>
function flipTXT(color)
{
if (parent_window && !parent_window.closed) {
parent_window.document.getElementById("teleprompter").style['-webkit-transform'] = rotateY(180deg);
}
}
</script>
I think one of the two solutions seen in the code at Bin below may work for you:
http://jsbin.com/buqexusamuda/1/
HTML
<p>Card: Flip</p>
<div class="card" href="#">Hello</div>
<p>Card 2: Mirror</p>
<div class="card card2" href="#">Hello</div>
CSS
.card, .card2 {
position: relative;
animation: all 2.5s;
perspective: 1000;
transition: 0.6s;
transform-style: preserve-3d;
width: 90px;
height: 32px;
text-align: center;
line-height: 32px;
z-index: 1;
background-color: #ccc;
color: #666;
}
.card2 { transform-origin: right center; }
.card.flip { transform: rotateY(180deg); }
SCRIPT
jQuery(".card").click(function(){
$(this).toggleClass("flip");
});
The simplest solution would be to use jQuery to add/remove the classes. If you can include jQuery, then you can do something along these lines:
<script>
$(document).ready(function(){
//Since the text is on the parent, you need to access it.
var parentWindow = window.opener;
//This gets the parent's DOM so you can grab the text from the parent window.
var parentDom = parentWindow.document;
//This grabs the text you want to transform.
var targetText = parentDom.getElementsByClassName("teleprompter");
//This toggles the class
$(".button").on('click', function(){
$(targetText).toggleClass("flipx");
});
});
</script>
I used a combination of jQuery and regular javascript so you don't have to roll your own code to add/remove and check for classes.
Here's the code to include jQuery in your page in case you don't have it handy:
This one will work with older non-HTML 5 compliant browsers and modern browsers.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This one will only work with more modern browsers:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First post here. Hope you can help me out with a problem I'm having:
I am writing a game, where a user needs to guess a word from shuffled letters by clicking on each letter to insert it in the first empty space of a "correct" field.
Now, when a letter is clicked, it needs to move to its new spot in an animated way. As I'm using span to create a separate field for each letter I couldn't figure out how to make this span move to its new location in an animated way using CCS3/JavaScript/JQuery.
The code is in JSFiddle here: http://jsfiddle.net/Pfsqu/
JS:
var randomNumber = Math.floor(Math.random() * words.length);
var word = words[randomNumber];
var chars = word.split('');
chars=_.shuffle(chars);
for (var i in chars) {
$('#shuffled').append('<span>'+chars[i]+'</span>');
$('#correct').append('<span>');
}
$('#shuffled > span').click(function() {
var letter = $(this);
letter.replaceWith('<span>');
$('#correct > span:empty').first().append( letter ); /* this part needs to be animated*/
CSS:
p > span{
background-color: white;
margin: 10px;
-webkit-border-radius: 15px;
border-radius: 15px;
width: 2.5em;
height: 2.5em;
display: inline-block;
text-align: center;
line-height: 2.5em;
vertical-align: middle;
animation: 1000ms move ease-in-out;
-webkit-animation: 1000ms move ease-in-out;
}
I think that it is quite difficult to animate the items the way that you are intending.
The way I would solve it would be keeping the same DOM element, and changing its properties.
For instance, see this
demo
The HTML is
<div class="solution">
<span class="q q4">W</span>
<span class="q q2">O</span>
<span class="q q3">R</span>
<span class="q q1">D</span>
</div>
I have set the letters of WORD in order, and then I have set to them one of the classes q1 to q4. This class will set the span to a specific position on screen.
This is achieved in this CSS (and also the position for the "solved" status
.solution {
margin-top: 100px;
-webkit-transition: all 5s;
position: relative;
}
.solution span {
border: solid 1px green;
padding: 10px;
margin-top: 80px;
-webkit-transition: all 2s;
position: absolute;
background-color: lightgreen;
font-size: 30px;
}
.solution span:nth-child(1) {
-webkit-transform: translate(0px, 0px) rotate(0deg);
}
.solution span:nth-child(2) {
-webkit-transform: translate(80px, 0px) rotate(0deg);
}
.solution span:nth-child(3) {
-webkit-transform: translate(160px, 0px) rotate(0deg);
}
.solution span:nth-child(4) {
-webkit-transform: translate(240px, 0px) rotate(0deg);
}
div.solution span.q {
background-color: yellow !important;
border: solid 1px red;
border-radius: 50%;
}
.solution .q.q1 {
-webkit-transform: translate(0px, -100px) rotate(360deg);
}
.solution .q.q2 {
-webkit-transform: translate(80px, -100px) rotate(360deg);
}
.solution .q.q3 {
-webkit-transform: translate(160px, -100px) rotate(360deg);
}
.solution .q.q4 {
-webkit-transform: translate(240px, -100px) rotate(360deg);
}
Now the jQuery is very easy
$('.q').click(function(){
$(this).removeClass('q');
});
I have used the webkit prefixes, but you can easily set it to work for others browsers
Edited answer:
Changing the nth-child styles to:
.answer1 {
-webkit-transform: translate(0px, 0px) rotate(0deg);
}
.answer2 {
-webkit-transform: translate(80px, 0px) rotate(0deg);
}
.answer3 {
-webkit-transform: translate(160px, 0px) rotate(0deg);
}
.answer4 {
-webkit-transform: translate(240px, 0px) rotate(0deg);
}
and the script to:
var element = 1;
$('.q').click(function(){
$(this).removeClass('q').addClass("answer" + element);
element = element + 1;
});
You got, as per your request, that the letters go to the first available place.
The only remining task is to construct the spans from the array of letters.
I think that you have already some code that does quite a similar job; it's only a matter of adapting it.
updated demo