Apologies for the long winded question but any help would be much appreciated!
I have a navigation div on a website that disappears when the screen gets smaller to be replaced by a menu button, using a media query. The menu button uses JavaScript to show and hide the menu.
This all works apart from one small bug that I can't figure out, it's a bit hard to explain so I'll bullet point it -
1) Open small browser window so button shows.
2) Open and close menu using button.
3) Maximise screen.
4) The button disappears (which it should) but the menu doesn't reappear.
You can see a live example here - http://andrewbruce.me
I'll put relevant code below -
var clicks = 0;
function decide(x) {
if (clicks == 0) {
document.getElementById("nav").style.visibility = "visible";
document.getElementById("nav").style.opacity = "1";
x.classList.toggle("change");
clicks = 1;
}
else if (clicks == 1) {
document.getElementById("nav").style.visibility = "hidden";
document.getElementById("nav").style.opacity = "0";
x.classList.toggle("change");
clicks = 0;
}
}
#nav {
height: 100%;
width: 22%;
text-align: center;
box-shadow: 2px 2px 5px #888888;
visibility: visible;
opacity: 1;
transition: all .3s ease-in-out;
background-color: #1b1d1f;
float: left;
position: fixed;
z-index: 2;}
#media handheld, screen and (max-width: 1000px) {
#nav {width: 40%; visibility: hidden; opacity: 0;}
.menuButton {visibility: visible;}
}
<div class="menuButton" onclick="decide(this);">
<div id = "bar1"></div>
<div id = "bar2"></div>
<div id = "bar3"></div>
</div>
Try this.
I hope helps.
#media (min-width: 1000px){
#nav{
opacity:1!important;
visibility: visible!important;
}
}
You should not change style by this method document.getElementById("nav").style, it will add inline style and override your properties. Instead create a class with those properties, then use scripts to toggle it.
For example:
CSS
.nav-hidden {
visibility: hidden;
opacity: 0;
}
JS
element.classList.add("nav-hidden");
element.classList.remove("nav-hidden");
use below JS
window.addEventListener("resize", menuChange);
function menuChange() {
if (window.innerWidth > 999){
document.getElementById("nav").style.visibility = "visible";
document.getElementById("nav").style.opacity = "1";
x.classList.toggle("change");
}
}
I'm trying to trigger a rotate animation in an SVG on my website. It definetly work but the problem is when i'm moving my mouse when i'm on hover the element it cancels the animation.
So i include an object svg element:
<object type="image/svg+xml" data="branching4.svg" id="branching">
Your browser does not support SVG
</object>
which is a long SVG document but here is stylesheet attached to it:
#rectangle1, #rectangle2, #rectangle3{
perspective: 1500px;
}
#rectangle1.flip .card, #rectangle2.flip .card, #rectangle3.flip .card {
transform: rotateX(180deg);
}
#rectangle1 .card, #rectangle2 .card, #rectangle3 .card{
transform-style:preserve-3d;
transition:1s;
}
#rectangle1 .face, #rectangle2 .face, #rectangle3 .face{
backface-visibility: hidden;
}
#rectangle1 #front1{
transform: rotateX(0deg);
}
#rectangle1 #back1{
transform: rotateX( 180deg );
}
#rectangle2 #front2{
transform: rotateX(0deg);
}
#rectangle2 #back2{
transform: rotateX( 180deg );
}
#rectangle3 #front3{
transform: rotateX(0deg);
}
#rectangle3 #back3{
transform: rotateX( 180deg );
}
#rectangle1.flipped, #rectangle2.flipped, #rectangle3.flipped {
transform: rotateX( 180deg );
}
You can see the svg structure in the jsfiddle
And finally the script:
window.onload=function() {
var svgDoc = $("#branching")[0].contentDocument; // Get the document object for the SVG
$(".st4", svgDoc).css("font-family", "robotolight,Helvetica Neue,Helvetica,Arial,sans-serif");
$("#rectangle1", svgDoc).hover(function(){
$(this, svgDoc).toggleClass("flip");
});
$("#rectangle2", svgDoc).hover(function(){
$(this, svgDoc).toggleClass("flip");
});
$("#rectangle3", svgDoc).hover(function(){
$(this, svgDoc).toggleClass("flip");
});
};
I also tried with CSS, it's the same problem.
Here is a jsfiddle:
https://jsfiddle.net/7f7wjvvt/
1st question:
How can i have a fluid rotate transition when moving the mouse on the element ?
2nd question:
How can i have a Y rotation that stay on the spot and not translate to the left ? Try it in the fiddle
3rd question:
Why the jsfiddle display the svg well in firefox and not in chrome?
Also, perspective doesn't seem to work in chrome ... WHY ?
Any ideas ?
Unfortunately, I think many of the problems you're experiencing are simply the result of bad browser support for (3D) css transforms on svg elements.
Moving the cards <g> elements to their own <svg> inside an ordinary <div>, and applying the interactivity to the div element would make stuff a lot easier.
.card {
display: inline-block;
transform-origin: center;
perspective: 1000px;
background: grey;
}
.card-inner {
width: 100px;
height: 200px;
transition: transform .4s;
}
.card-inner:hover,
.card:hover > .card-inner {
transform: rotateY(180deg);
}
<div class="card">
<div class="card-inner" style="background: yellow">
Add svg card here
</div>
</div>
<div class="card">
<div class="card-inner" style="background: blue">
Add svg card here
</div>
</div>
<div class="card">
<div class="card-inner" style="background: green">
Add svg card here
</div>
</div>
How can i have a fluid rotate transition when moving the mouse on the element ?
Once the card rotates, it easily looses hover. The hover state will be applied to underlying element though. If you make sure this is the card's parent, you can use this css rule for styling:
.card-inner:hover,
.card:hover > .card-inner {
transform: rotateY(180deg);
}
How can i have a Y rotation that stay on the spot and not translate to the left ? Try it in the fiddle
You'll have to use transform-origin, like you tried. It just doesn't work for svg elements...
transform-origin: center;
Why the jsfiddle display the svg well in firefox and not in chrome? Also, perspective doesn't seem to work in chrome ... WHY ?
Like I said, it just isn't supported properly...
Re your first problem with the flip
It looks like the problem is that when the cards spin, they shrink. Then the mouse is no longer over the card and when the card moves around again it re-enters and the mouseenter event fires again. Then the whole process repeats (as long as the mouse is moving).
The solution is to prevent the event from firing again until the animation i complete.
There are several ways to fix this, but here is one solution:
// Flag to keep track of whether rectangle1 is flipping
var flipping1 = false;
$("#rectangle1").mouseenter(function() {
// Only toggle the animation if we aren't already doing so
if (!flipping1) {
// Add the class to start the flip
$(this).toggleClass("flip");
// Set flag to mark that we are flipping
flipping1 = true;
// Then in just over a second, turn the flag off again
setTimeout(function () {
flipping1 = false;
}, 1010);
}
});
Here's a fiddle showing this technique working on just rectangle1.
https://jsfiddle.net/7f7wjvvt/4/
I don't have a complete answer but for your first question I'd suggest replacing the .hover with a .mouseenter trigger, and for the second one just lose the perspective.
Also, I tried prefixing your css but to no avail, seems there's some compatibility issues between the browsers here.
I want to make a 3D rectangle (parallelepiped) which the users can move with the arrows. It works fine in Chrome, but in Firefox some transitions (a lot actually) are different from Chrome. Look at this fiddle (this is my whole code) and compare it in both browsers to understand better.
Because the first fiddle contains a lot of code, I'll simplify it and pick one random strange transition. Look at this fiddle, and press the "Left" button or the left arrow one time. It works fine, but when you press it again, the rectangle rotates 3 times instead of 1 time.
Is this a Firefox bug or what am I doing wrong?
The code below is what you'll find in the simplified fiddle.
var position = 'show-front';
$('#left').bind('click', function() {
if (position == 'show-front') {
$('#box').removeClass().addClass('show-right');
position = 'show-right';
} else if (position == 'show-right') {
$('#box').removeClass().addClass('show-back-3');
position = 'show-back-3';
} else if (position == 'show-back-3') {
$('#box').removeClass().addClass('show-left');
position = 'show-left';
} else if (position == 'show-left') {
$('#box').removeClass().addClass('show-front');
position = 'show-front';
}
});
$(window).bind('keyup', function(event) {
switch (event.keyCode) {
case 37: // left
$('#left').click();
break;
}
});
.container {
width: 150px;
height: 100px;
position: relative;
margin: 25px auto 25px auto;
perspective: 600px;
}
#box {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
#box figure {
display: block;
position: absolute;
border: 1px solid black;
line-height: 98px;
font-size: 45px;
text-align: center;
font-weight: bold;
color: white;
}
figure {
margin: 0;
}
#box .front,
#box .back {
width: 148px;
height: 98px;
}
#box .right,
#box .left {
width: 48px;
height: 98px;
left: 50px;
}
#box .top,
#box .bottom {
width: 148px;
height: 48px;
top: 25px;
line-height: 48px;
}
#box .front {
background: hsla(000, 100%, 50%, 0.7);
}
#box .back {
background: hsla(160, 100%, 50%, 0.7);
}
#box .right {
background: hsla(120, 100%, 50%, 0.7);
}
#box .left {
background: hsla(180, 100%, 50%, 0.7);
}
#box .top {
background: hsla(240, 100%, 50%, 0.7);
}
#box .bottom {
background: hsla(300, 100%, 50%, 0.7);
}
#box .front {
transform: translateZ(25px);
}
#box .back {
transform: rotateX(180deg) translateZ(25px);
}
#box .right {
transform: rotateY(90deg) translateZ(75px);
}
#box .left {
transform: rotateY(-90deg) translateZ(75px);
}
#box .top {
transform: rotateX(90deg) translateZ(50px);
}
#box .bottom {
transform: rotateX(-90deg) translateZ(50px);
}
#box.show-front {
transform: translateZ(-50px);
}
#box.show-right {
transform: translateZ(-150px) rotateY(-90deg);
}
#box.show-back-3 {
transform: translateZ(-50px) rotateX(180deg) rotateZ(-180deg);
}
#box.show-left {
transform: translateZ(-150px) rotateY(90deg);
}
<section class="container">
<div id="box" class="show-front">
<figure class="front">1</figure>
<figure class="back">2</figure>
<figure class="right">3</figure>
<figure class="left">4</figure>
<figure class="top">5</figure>
<figure class="bottom">6</figure>
</div>
</section>
Based on the assumption that Firefox is just buggy in this regard (see analysis below), here is a workaround that works on Firefox. It wraps the #box element in another div, and only transitions the wrapper. And the wrapper is only ever rotated 90 degrees from the starting point in one direction at a time, so Firefox can't mess it up.
Once the transition finishes, the rotation is reset back to the starting position and simultaneously the inner box is rotated to the new position, both without transition, so the change is not visible.
The second important change is using the current computed transformation of #box and adding the rotation to that, so that we don't have to keep track of the rotations as we go.
Note that the order of rotations matters. To achieve what you're trying to do (rotating in "world space" rather than "object space"), you need to apply the rotations in reverse order. E.g. to rotate "right", use .css("transform", "rotateY(90deg) " + currentComputedTransform). This will resolve the issue you mentioned in comments where it appears to rotate around the wrong axis. See below for more information.
Note also that I don't allow a rotation to start if there's already one in progress, because that won't work. You could queue up keystrokes in an array if you want to be able to that, but you might also want to reduce the transition duration proportional to queue length in that case so it doesn't take forever.
Updated fiddle: https://jsfiddle.net/955k5fhh/7/
Relevant javascript:
$("#box").wrap("<div id='outer'></div>");
var pending=null;
function rotate(axis,angle,dir) {
if (pending) return;
$("#outer").removeClass().addClass(dir);
var current=$("#box").css("transform");
if (current=='none') current='';
pending="rotate"+axis+"("+angle+"deg) "
+ current;
}
$("#outer").bind('transitionend', function() {
$(this).removeClass();
$("#box").css('transform',pending);
pending=null;
});
$('#up').bind('click', function() {
rotate('X',90,"up");
});
$('#down').bind('click', function() {
rotate('X',-90,"down");
});
$('#right').bind('click', function() {
rotate('Y',90,"right");
});
$('#left').bind('click', function() {
rotate('Y',-90,"left");
});
Previous analysis
I've been playing with JS-based solutions and I came across this useful post https://gamedev.stackexchange.com/a/67317 - it points out that to rotate objects in "world space" instead of "object space", you just need to reverse the order of the rotations.
Based on that, I simplified your fiddle to the following:
var rot = "";
var tr = "translateZ(-50px)";
$('#up').bind('click', function() {
rot=" rotateX(90deg)"+rot;
$("#box").css("transform",tr+rot);
});
$('#down').bind('click', function() {
rot=" rotateX(-90deg)"+rot;
$("#box").css("transform",tr+rot);
});
$('#right').bind('click', function() {
rot=" rotateY(90deg)"+rot;
$("#box").css("transform",tr+rot);
});
$('#left').bind('click', function() {
rot=" rotateY(-90deg)"+rot;
$("#box").css("transform",tr+rot);
});
https://jsfiddle.net/955k5fhh/ (note that it's not a complete solution, because eventually the rot string will get too long)
And on Chrome, that behaves as expected. And once again, Firefox gets it wrong, even if you're just chaining e.g. a sequence of rotateX(90deg) transformations.
So I went one step further and rolled up adjacent rotations in the same axis...
var rots = [];
var tr = "translateZ(-50px)";
function transform() {
var tf = "translateZ(-50px)";
rots.forEach(function(rot) {
tf += " rotate" + rot[0] + "(" + rot[1] + "deg)";
});
console.log(tf);
$("#box").css("transform", tf);
}
function addRot(axis,angle) {
if (rots.length==0 || rots[0][0]!=axis) {
rots.unshift([axis,angle]);
} else {
rots[0][1]+=angle;
}
transform();
}
$('#up').bind('click', function() {
addRot('X',90);
});
$('#down').bind('click', function() {
addRot('X',-90);
});
$('#right').bind('click', function() {
addRot('Y',90);
});
$('#left').bind('click', function() {
addRot('Y',-90);
});
https://jsfiddle.net/955k5fhh/2/
Which, again, works well in Chrome, and works a bit better in Firefox, but still once you switch axes, you can wind up spinning the wrong way. And similarly if you click a button before a transition completes, it can spin the wrong way.
So I would conclude that unfortunately yes, Firefox is just buggy in this, but at least there are workarounds.
It looks like you are doing everything right, and the differences in rotation in Chrome vs Firefox is caused by the ways the two browsers process CSS3. When looking at the rotation from show-back-4 to show-top-4, your CSS file specifies the rotation to be 270deg. In Firefox, it does just that. In Chrome, it looks like it optimizes and doesn't do the full rotation, saving on processing power or something. So yeah, I think that it's just a difference in the browsers, not a bug in either one of them.
You could try using keyframes to get more control for the animation, something like this:
https://jsfiddle.net/L36v50kh/2/
I'm defining both starting and ending point for all transitions in the fiddle like this:
#keyframes front-to-right {
from {transform: translateZ(-50px) rotateY(0deg); }
to {transform: translateZ(-150px) rotateY(-90deg);}
}
That looks the same in both browsers but it's jumpy when clicking the button before the animation finishes.
You might also consider animating with JavaScript to get exact control and avoid defining every transition, something like this:
var applyRotation = function() {
$('#box').css('transform', 'rotateY(' + rotateY + 'deg)');
handleMultipleRotations();
};
var unwindTimeout;
var rotateY = 0;
var handleMultipleRotations = function() {
$('#box').css('transition-duration', '');
if (typeof unwindTimeout === 'number') {
clearTimeout(unwindTimeout);
unwindTimeout = undefined;
}
if (Math.abs(rotateY) >= 360) {
unwindTimeout = setTimeout(function() {
rotateY -= Math.floor(rotateY / 360) * 360;
$('#box').css({
'transition-duration': '0s',
'transform': 'rotateY(' + rotateY + 'deg)'
});
}, 1000);
}
};
$('document').ready(function() {
$('#left').on('click', function() {
rotateY -= 90;
applyRotation();
});
$('#right').on('click', function() {
rotateY += 90;
applyRotation();
});
});
/* minified to draw focus to js */ .container{width:150px;height:100px;position:relative;margin:25px auto;perspective:600px}#box{width:100%;height:100%;position:absolute;transform-style:preserve-3d;transition:transform 1s}#box figure{display:block;position:absolute;border:1px solid #000;line-height:98px;font-size:45px;text-align:center;font-weight:700;color:#fff}figure{margin:0}#box .back,#box .front{width:148px;height:98px}#box .left,#box .right{width:48px;height:98px;left:50px}#box .bottom,#box .top{width:148px;height:48px;top:25px;line-height:48px}#box .front{background:hsla(000,100%,50%,.7)}#box .back{background:hsla(160,100%,50%,.7)}#box .right{background:hsla(120,100%,50%,.7)}#box .left{background:hsla(180,100%,50%,.7)}#box .top{background:hsla(240,100%,50%,.7)}#box .bottom{background:hsla(300,100%,50%,.7)}#box .front{transform:translateZ(25px)}#box .back{transform:rotateX(180deg) translateZ(25px)}#box .right{transform:rotateY(90deg) translateZ(75px)}#box .left{transform:rotateY(-90deg) translateZ(75px)}#box .top{transform:rotateX(90deg) translateZ(50px)}#box .bottom{transform:rotateX(-90deg) translateZ(50px)}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div id="box" class="show-front"><figure class="front">1</figure><figure class="back">2</figure><figure class="right">3</figure><figure class="left">4</figure><figure class="top">5</figure><figure class="bottom">6</figure></div>
</section>
<section id="options"><p><button id="left">Left</button><button id="right">Right</button></p></section>
I'm trying to scale down a div (divB) that's inside of another div (divA). The problem is that divA's height is specified by its contents. When divB gets scaled down, the height of divA doesn't change... This happens when a transform is applied because it doesn't actually change the pixel count, it changes the size of the pixels themselves (at least I'm pretty sure that's what's happening). So the easy fix is to manually set the height of divA to be the size of divB multiplied by the scale factor.
However, if I do this, I need to reset the height manually every time the contents of divA change. In my case, this is very cumbersome as there will be a ton of changes to divA's contents. So, I'm wondering if there is a simpler way to do this, preferably using CSS.
Here is a simple JSFiddle to demonstrate the problem: http://jsfiddle.net/turtlewaxer1100/82cux/8/
Just add some elements, scale down, and you'll see what I mean about the height not adjusting. If you click "Fix Height" then it'll adjust the height properly, but then if you add more elements the height doesn't adjust unless you fix it again...
html
<div>
<div class="wrapper">
<div id="scalar"></div>
</div>
<div class="buttons">
<div id="button">
<input type="button" value="Add" />
</div>
<div id="scaleDown">
<input type="button" value="Scale Down" />
</div>
<div id="scaleUp">
<input type="button" value="Scale Up" />
</div>
<div id="fixHeight">
<input type="button" value="Fix Height" />
</div>
</div>
</div>
css
.wrapper {
float:right;
width: 200px;
background-color: black;
}
.section {
margin-left:75px;
height: 50px;
width: 50px;
background-color: red;
}
.buttons {
float:left;
}
.scaleDown {
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
jquery
var section = $("<div class='section'></div>")
$(document).ready(function () {
$("#button").children().click(function () {
$("#scalar").append(section.clone(false));
});
$("#scaleDown").children().click(function () {
$("#scalar").addClass("scaleDown");
});
$("#scaleUp").children().click(function () {
$("#scalar").removeClass("scaleDown");
});
$("#fixHeight").children().click(function () {
$(".wrapper").height($("#scalar").height()*.75)
});
});
So I couldn't find an answer using just CSS, but I did find a fairly simple javascript solution. There is a DOM event called "DOMSubtreeModified", which will fire every time any element within the current element's hierarchy is changed. So, what I did is test whether the height of the element is different from the previous height each time this event is fired. If it is different, then set it accordingly. This way you can catch all dynamic height changes without any regard to what specifically changed the height.
Here is a fiddle to demonstrate the idea: http://jsfiddle.net/turtlewaxer1100/E6D2H/5/
HTML
<div class="wrapper">
<div id="scalar"></div>
</div>
<div class="buttons">
<div id="button">
<input type="button" value="Add" />
</div>
</div>
CSS
.wrapper {
float:right;
width: 200px;
background-color: black;
}
.section {
margin-left:75px;
height: 50px;
width: 50px;
background-color: red;
}
.buttons {
float:left;
}
#scalar
{
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
JS
var section = $("<div class='section'></div>")
var scaleFactor = 0.75;
var originalHeight = 0;
$(document).ready(function () {
$("#button").children().click(function () {
$("#scalar").append(section.clone(false));
});
$(".wrapper").bind('DOMSubtreeModified', function() {
var height, heightOffset;
height = $("#scalar").height();
if (height && originalHeight !== height) {
heightOffset = height * scaleFactor;
$(this).height(heightOffset);
return originalHeight = height;
}
});
});
I have a problem with the web kit translate property.
When I reduce the browser window an iPhone screen appears.
In the iPhone screen I have implemented a slider functionality.
You can see two arrows; left and right arrow.
When you click the right arrow it moves to the next slider,
but in the right slider the images do not show up. It is due to the web kit property.
I don't know how to fix it.
I am providing two li tags; how to fix it?
http://jsfiddle.net/UL3R2/
<li style="display: table-cell; width: 417px; vertical-align: top; left: 0px; -webkit-transition: 0ms; -webkit-transform: translate(0px, 0px) translateZ(0px);"
data-index="0">
<li style="display: table-cell; width: 417px; vertical-align: top; border: 1px solid red; left: -417px; -webkit-transition: 0ms; -webkit-transform: translate(417px, 0px) translateZ(0px);"
data-index="1">
Here I am giving exaple of one function, as you hve written many function with same functinality,
Instead of append span, keep the span there with style="display:none"
with the script make it visible by changing the class or attribute.
$('document').ready(function() {
window.setTimeout(function() {
$('.cubeCellSecurity').each(function() {
var htmlText = $(this).attr('data-text');
$(this).append('<div class="cubeTextStyleSecurity">' + htmlText + '<span class='divStockSecurity' style="display:none">Security</span></div>');
$(this).hover(
function() {
$(".cubeTextStyleSecurity").style().attr("display","");
});
//function(){ $(this).style().attr("display","none"); });
});
}, 600);
});
An if you want me to update fiddle, Please remove the unnecessary html part from fiddle