We Keep Coding

Fits the diamond DIV to the parent DIV

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.

Flipping multiple divs by clicking different buttons using CSS/Javascript

I'm really new to Javascript. I've been playing around a bit, and had managed to get multiple div's on a page to flip individually, using tutorials and some other help. Now, I want to see if I can flip those same div's using a button or a hyperlink instead.
I thought it would be as simple as moving the class that controls the flip to the button, but that doesn't seem to be the case. I've read that I need to adjust my Javascript to work from a passed id.
Problem is, I don't know how to do this. I've tried passing the button id through to my Javascript function on click (like so: <button class="flip-it" onClick="flipThis(card-1)">Click Me</button>), but that doesn't work. I'm probably way off base here.
My fiddle is here. I've left the third div as I had it before, working, just to show you what I've started from.
Any help would be much appreciated.
HTML:
<p>some content above the flip card</p>
<h1>The CSS flip card:</h1>
<div class="large_box_main">
<div>
<div class="sm_box" id="card-1">
<div class="flipcard">
<div class="flipcard-front">
<div class="sm_img_box">
<img class="image" src="http://www.catchat.org/images/ferals_block_2009.jpg" />
</div>
<div class="sm_info_box">
<h2>Ginger</h2>
<h3>Cat 1</h3>
<h4>Male</h4>
<p class="info">Front</p>
<button class="flip-it" onClick="flipThis(card-1)">Click Me</button>
</div>
</div>
<div class="flipcard-back">
<div class="sm_info_box">
<h2>Ginger</h2>
<h3>Cat 1</h3>
<h4>Male</h4>
<p class="info">Back</p>
<button class="flip-it" onClick="flipThis(card-1)">Click Me</button>
</div>
</div>
</div>
</div>
<div>
<div class="sm_box" id="card-2">
<div class="flipcard">
<div class="flipcard-front">
<div class="sm_img_box">
<img class="image" src="http://www.petrescue.org.nz/files/animal/attachment/93/small_cats.h5.jpg" />
</div>
<div class="sm_info_box">
<h2>Tabby</h2>
<h3>Cat 2</h3>
<h4>Female</h4>
<p class="info">Front</p>
<button class="flip-it" onClick="flipThis(card-2)">Click Me</button>
</div>
</div>
<div class="flipcard-back">
<div class="sm_info_box">
<h2>Tabby</h2>
<h3>Cat 2</h3>
<h4>Female</h4>
<p class="info">Back</p>
<button class="flip-it" onClick="flipThis(card-2)">Click Me</button>
</div>
</div>
</div>
</div>
<div class="sm_box flip-it">
<div class="flipcard">
<div class="flipcard-front">
<div class="sm_img_box">
<img class="image" src="https://s-media-cache-ak0.pinimg.com/236x/0f/4a/56/0f4a5681046ad10f36098451bf2128d2.jpg" />
</div>
<div class="sm_info_box">
<h2>Siamese</h2>
<h3>Cat 3</h3>
<h4>Male</h4>
<p class="info">Front</p>
</div>
</div>
<div class="flipcard-back">
<div class="sm_info_box">
<h2>Siamese</h2>
<h3>Cat 3</h3>
<h4>Male</h4>
<p class="info">Back</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.large_box_main {
width:100%;
margin:0px 0px 10px;
float:left;
display:inline;
}
.sm_box {
width:180px;
/* The width of this element */
margin:10px 15px 20px;
border: 1px solid #e3d9ec;
border-radius: 10px;
float:left;
}
.sm_box:hover {
border: 1px solid #9975B9;
}
.sm_img_box {
width:165px;
margin:6px;
float:left;
display:inline;
}
.sm_info_box {
width:165px;
margin:8px;
background-color:#e3d9ec;
float:left;
display:inline;
text-align:center;
line-height:7px;
border-radius: 5px;
}
img.image {
display:block;
margin:0px auto;
}
.flipcard {
position: relative;
height: auto;
min-height: 0px;
/* Flip card styles: WebKit, FF, Opera */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transition: min-height 1s ease-out 0s, -webkit-transform 1s ease-out 0.5s;
-moz-transition: min-height 1s ease-out 0s, -moz-transform 1s ease-out 0.5s;
-o-transition: min-height 1s ease-out 0s, -o-transform 1s ease-out 0.5s;
/* only height adjustment for IE here */
-ms-transition: min-height 1s ease-out 0s;
}
/* The class that flips the card: WebKit, FF, Opera */
.flipcard.card-flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.flipcard .flipcard-front, .flipcard .flipcard-back, .front, .back {
top: 0;
left: 0;
width: 100%;
/* backface: all browsers */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
/* Flip card styles: IE 10,11 */
-ms-perspective: 800px;
-ms-transform-style: flat;
-ms-transition: -ms-transform 1s ease-out 0.5s;
}
.flipcard .flipcard-front, .front, .back {
position: relative;
display: inline-block;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flipcard .flipcard-back {
position: absolute;
display: none;
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
/* webkit bug: https://bugs.webkit.org/show_bug.cgi?id=54371,
You need this fix if you have any input tags on your back face */
-webkit-transform: rotateY(180deg) translateZ(1px);
}
/* The 2 classes that flip the faces instead of the card: IE 10,11 */
.flipcard .flipcard-front.ms-front-flipped {
-ms-transform: rotateY(180deg);
}
.flipcard .flipcard-back.ms-back-flipped {
-ms-transform: rotateY(0deg);
}
.info {
text-align:justify;
padding:0px 5px;
line-height:initial;
}
Javascript:
function flipThis() {
var $this = $(this);
var card = $this.find('.flipcard');
var front = $this.find('.flipcard-front');
var back = $this.find('.flipcard-back');
var tallerHight = Math.max(front.height(), back.height()) + 'px';
var visible = front.hasClass('ms-front-flipped') ? back : front;
var invisible = front.hasClass('ms-front-flipped') ? front : back;
var hasTransitioned = false;
var onTransitionEnded = function () {
hasTransitioned = true;
card.css({
'min-height': '0px'
});
visible.css({
display: 'none',
});
// setting focus is important for keyboard users who might otherwise
// interact with the back of the card once it is flipped.
invisible.css({
position: 'relative',
display: 'inline-block',
}).find('button:first-child,a:first-child').focus();
}
// this is bootstrap support, but you can listen to the browser-specific
// events directly as well
card.one($.support.transition.end, onTransitionEnded);
// for browsers that do not support transitions, like IE9
setTimeout(function () {
if (!hasTransitioned) {
onTransitionEnded.apply();
}
}, 2000);
invisible.css({
position: 'absolute',
display: 'inline-block'
});
card.css('min-height', tallerHight);
// the IE way: flip each face of the card
front.toggleClass('ms-front-flipped');
back.toggleClass('ms-back-flipped');
// the webkit/FF way: flip the card
card.toggleClass('card-flipped');
}
$('button.flip-it').click(flipThis);
$('div.flip-it').click(flipThis);
Cheers!
(Edited to show code)

I have created a modified function flipThis and removed the onclick actions from your html. jsfiddle
As I wrote in the comment, you have to recognize where you are currently in DOM. The code is self explanatory I suppose. And I also added a parameter to the flipThis function, so we know more precisely what we are working with. (not really needed, we could still work with $(this) but this is my way of doing things.
if($(e.currentTarget).prop('tagName')=="BUTTON")
$this = $(this).closest('.sm_box');
else
$this = $(this);

Flip text with javascript

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>

z-index qith jquery not working on rotated image

JsFiddle: http://jsfiddle.net/E4s9k/
HTML:
<body>
<section id="pics" class="clearfix">
<figure
id="pic1"
class="pictures"
>
<img
alt="figure1"
src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
title="pic1"
>
<figcaption class="figuredetails">Fig1</figcaption>
</figure>
<figure
id="pic2"
class="pictures"
>
<img
alt="figure2"
src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
title="pic2"
>
<figcaption class="figuredetails">Fig2</figcaption>
</figure>
</section>
<section id="content">
<p>hello</p>
</section>
</body>
CSS:-
#CHARSET "UTF-8";
#pics{
width:100%;
padding: 50px 50px;
}
.pictures{
float: left;
width:200px;
height:200px;
box-shadow: 10px 10px 5px #888888;
}
.pictures img{
width:100%;
height:auto;
}
#pic1{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
z-index: -1
}
#pic2{
position: absolute;
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
/* z-index: -2; */
}
#content{
clear: both;
}
.pictures > .figuredetails{
color: red;
padding-left: 20px;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
JQuery:
function pichoverfunc() {
$(this).css({"z-index":10});
}
function pichoverfuncO() {
$(this).css({"z-index":-10});
}
$(document).ready(
$("#pic2").hover(pichoverfunc, pichoverfuncO)
);
I'm trying to do something like this:-
Show 2 rotated images on the top of each other.
When hovered above any image (even near its egde), that image should come to the front and the one that is in front should go to back
This is a future things (in my to-do list) - Use more than 2 images to achieve the same functionality as in step 2.
The problem:
1. I cant hover on the second image
2. (This is linked to the requirement 3 above) If there are more than 2 images, then, how should I choose z-index for each image that is in the back?
What I've tried:-
I've used the Dev tools in chrome to inspect the #pic2 but, I still cant select it.
As I'm new to HTML, CSS, and Jquery, Any help would be great.

You dont need to use Jquery to change an element on hover. CSS has this functionality built in, take a look at this link. As you can see you can set a css class or id to change on hover. So for instance:
#pic2{
position: absolute;
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
/* z-index: -2; */
}
Then below that you could put somthing like this:
#pic2:hover{
z-index:10;
}
This should change the z-index of pic2 on hover with only CSS, also if you want to do this with many images try using a class instead of an id or maybe just do it using tag name. So for instance assign class="img-hover" to all the images youd like. Then in your css put:
.img-hover:hover{
z-index:10;
}
or if you want to just apply the hover to all img tags youd just put:
img:hover{
...
}

The root cause why your script does not work is probably the fact that:
z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative.
Read more on the z-index: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
When it comes to your JSFiddle, I cleaned it up a bit and simplified it a bit - http://jsfiddle.net/E4s9k/
HTML:
<body>
<img
id="pic1"
alt="figure1"
src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
title="pic1"
>
<img
id="pic2"
alt="figure2"
src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
title="pic2"
>
</body>
JS:
function handlerIn() {
$('img').css({"z-index": -10}); //Push all images back
$(this).css({"z-index": 10}); //Bring our target to front
}
function handlerOut() {
$('img').css({"z-index": 10}); //Bring all our images to front
$(this).css({"z-index": -10}); //Push target back
}
$(document).ready(function(){
$("img").hover(handlerIn, handlerOut);
});
CSS:
img {
position: relative;
width:200px;
height:200px;
box-shadow: 10px 10px 5px #888888;
}
#pic1{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
#pic2{
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}

JavaScript/HTML/CSS: Zooming

Let's say I've got a page with a div, and a button. When you click the button, the div should be zoomed in on. In other words, if that div was 100px, when you zoom, it should then become, say, 200px. And all the children of this div should also be doubled in size.
What's the best way to do this?
My understanding is that there's a CSS zoom, but only in IE--it's not part of any CSS standard.

You should use CSS3's transform: scale().
See: http://jsfiddle.net/Favaw/ - (I used jQuery for convenience, but it's not a requirement)
.zoomedIn2x {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
If you need to support older versions of IE than 9, then generate .zoomedIn2x using this tool:
http://www.useragentman.com/IETransformsTranslator/index.html
If you want to do this more dynamically (such as other levels of zoom), then instead use cssSandpaper.

You might want to look into the jQuery plugin Zoomooz: http://janne.aukia.com/zoomooz/

best solution is using
zoom: 50%
i made this example with javascript, you can test it and change it as you like
var zoomediv = document.getElementById('zoomediv')
var zoomin_button = document.querySelector('#zoomin')
zoomin_button.addEventListener('click', function(){
zoomediv.style.zoom = '125%'
})
var zoomout_button = document.querySelector('#zoomout')
zoomout_button.addEventListener('click', () => {
zoomediv.style.zoom = '75%'
})
div {
background: #f0f0f0;
border: 1px solid #e0e0e0;
width: fit-content;
padding: 1rem;
margin-bottom: 1rem;
}
button {
padding: 0 3rem;
}
<div id="zoomediv">
<h1>
Title
</h1>
<p>
this is a paragraph
</p>
</div>
<button id="zoomin">
<h1>
+
</h1>
</button>
<button id="zoomout">
<h1>
-
</h1>
</button>