Button's unexpected behavior while oncilck event fired in html/css - javascript

In the below code I am rotating the button to 90 deg and fixing the position.
I need this button to be fixed on that position even after on-click.
How ever after clicking the button the position changed to actual position (0 deg).
The button's scale-up and scale-down effects also not working while clicking.
I have attached an image for better understanding of the problem behavior.
#action_btn
{
position:absolute;
width:81px;
height:20px;
background-image:url(image/action_btn.png);
margin-top:82px;
margin-left:30px;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
#action_btn input
{
width:81px;
height:20px;
opacity:0.0;
}
#action_btn :active{
-webkit-transform: scale(0.95,0.95);
-moz-transform:scale(0.95,0.95);
}
Any help or suggestion is welcome.

Do you mean something like this?
I simply made a class called active and let that add to that div when its clicked by using jQuery. Heres the code:
$(document).ready(function() {
$('#action_btn').click(function() {
$(this).addClass('active');
});
});
And for the CSS:
#action_btn.active {
-webkit-transform: scale(0.95, 0.95);
-moz-transform:scale(0.95, 0.95);
}
EDIT: If you want it to toggle the class, use this fiddle.
It simply activates and deactivates the class when you click on the red box.

Related

Zoom in/out and rotate div with smooth transition

my first post!
I have been doing some experiments, trying to recreate something i saw.
Here is what i am trying to achieve:
Scroll at the end of this page and take a look at animated buttons for twitter, youtube, facebook
Now take a look at my code:
HTML
<div class="container">
<div class="letter">A</div>
</div>
CSS
*{
margin:0;
padding:0;
}
.container{
width:200px;
height:200px;
background:purple;
overflow:hidden;
}
.letter{
text-align:center;
font-size:50px;
line-height:170px;
color:white;
}
.letter:hover{
cursor:pointer;
}
.letter.zoom{
transform:rotate(15deg) scale(3);
transition: transform 0.6s ease;
}
Jquery
$(function(){
$('.container').on('click', function(){
$('.letter').toggleClass('zoom');
});
});
Now, if you run the code, you will see letter A, and on click it will zoom in and slightly rotate. Here are my issues:
1.how to do this on hover, using css3 or jquery or javascript?(not onmouseover/onmouseout)
2.how to make the rendering smoother?(the letter zooms in in poor resolution and than renders to full quality)
3.it has animated transition on zoom in. When it zooms out there is no animation or transition. How to do the animation on zoom out, on hover out?
I have tried to do separately just zoom in and just rotate, and it works, but if i want to do both in the same time, CSS3 is overriding one with another, and using this function is not giving me the result i want.
You can do this with just CSS:
Transition:
.letter {
transition: ease .25s; // when set on selector itself, will apply to all pseudo-classes such as: :hover, :active, :focus, etc.
-webkit-transition: ease .25s;
}
Zoom:
.letter:hover {
transform: scale(1.5); // Alternatively, you can use percentages
-wekbit-transform: scale(1.5); // Chrome / Safari
-moz-transform: scale(1.5); // Firefox
}
Rotate:
.letter:hover {
transform: rotate(15deg);
-wekbit-transform: rotate(15deg); // Chrome / Safari
-moz-transform: rotate(15deg); // Firefox
}

Responsive menu design on click

I am looking to make a Responsive menu which will have a Menu button for small screen and on click menu show slide down and menu button will change to X
Something like as show in image below
I am trying to do same but got on codepen http://codepen.io/anon/pen/jbaXEq
Not sure how to change Menu Button in to X and back to normal on toggle. Button is not also aligned with logo.
Any help or pointer to make it look professional.
UPDATE:
I have done made it so far http://codepen.io/anon/pen/EVbGbR?editors=110
I've updated your codepen:
http://codepen.io/anon/pen/NGwegr
Just use css to transform your button to X and back:
.menu-btn-w {
width: 40px;
height: 40px;
position: relative;
float: right;
left: 0;
bottom: 0;
}
/* these styles are used for the mb lines, when your button has the class transform-mb*/
.menu-btn-w.transform-mb .mb-1 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(4deg);
transform: rotate(45deg);
}
.menu-btn-w.transform-mb .mb-2 {
display: none; /* hide the second line with css */
}
.menu-btn-w.transform-mb .mb-3 {
margin-top: -10px; /* pull the third line up to make a correct X */
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-4deg);
transform: rotate(-45deg);
}
now toggle this class transform-mb on click:
$('.menu-btn-w').click(
function() {
$('.mobile-menu-w').toggle();
$(this).toggleClass("transform-mb");
}
);

mouseup and mousedown not working together in jquery

Description:
I have the following code that works fine
$("#pom").mousedown(function(){
alert("mouse_down");
});
It alerts when the mouse is down correctly
$("#pom").mouseup(function(){
alert("mouse_up");
});
It works correctly when the mouse is up
The problem starts when I put something else other than alert. In my case I am adding a class to $("#pom") on mousedown and remove the class when mouse is up but its happening in one way only. The class does gets added when the mouse is down but does'nt gets removed when the mouse is up. Any solution is appreciated :)
Problem Demo :
Demo
Just a pointer. The commented bit its causing the issue.
.rotate{
-webkit-transform: rotateY(50deg);
/*-webkit-transform-origin: 0% 50%;*/
}
UPDATE:
I may be missing the point about what you want your code to do, but anyways the element wasn't rotating. Try this (tweak it to your heart content):
#pom
{
width: 200px;
height: 100px;
background-color: yellow;
border-radius: 3px;
border: solid #444444 3px;
}
.rotate
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Finally, as Marc B points out, if you are moving the element on mousedown, chances are high that mouseup won't fire.

Set height on div with CSS3 transform (rotate)

Goal
I'm working on a collapsible sidebar using jQuery for animation. I would like to have vertical text on the sidebar that acts as a label and can swap on the animateOut/animateIn effect.
Normally I would use an image of the text that I've simply swapped vertically, and switch it out on animation, but with CSS3 transforms I'd like to get it to work instead.
Problem
The problem I'm facing is that setting the height on my rotated container makes it expand horizontally (as it's rotated 90deg) so that doesn't work. I then tried to set the width (hoping it would expand vertically, acting as height), but that has an odd effect of causing the width of my parent container to expand as well.
Fix?
How can I set the height on a rotated (transformed) element without affecting the width of the parent container? So far I have been unable to do this.
Live Example
Here's a fiddle that demonstrates my problem: Fiddle
The collapse-pane class is what I have rotated and contains the span I have my text inside. You'll notice it has a width set, that widens the border, but also affects the parent container.
The code:
CSS:
.right-panel{
position:fixed;
right:0;
top:0;
bottom:0;
border:1px solid #ccc;
background-color:#efefef;
}
.collapse-pane{
margin-top:50px;
width:30px;
border:1px solid #999;
cursor:pointer;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.collapse-pane span{
padding:5px;
}
HTML
<div class="right-panel">
<div class="collapse-pane">
<span class="expand">Expand</span>
</div>
<div style="width:0;" class="panel-body">
<div style="display:none;" class="panel-body-inner">
adsfasdfasdf
</div>
</div>
</div>
Here's an image also showing the problem, so you don't have to view the Fiddle.
Update
I've made the problem statement a little clearer, as my original post was confusing the issues.
Thanks for any help!
If you don't want the rotated divs size expand it's parent size, you need to take it out of the flow. You may use absolute positioning for this.
The following demo uses this technique and also positions the "expand" element by setting a transform orign and top/right values.
DEMO
CSS :
.right-panel {
position:fixed;
right:0;
top:0;
bottom:0;
border:1px solid #ccc;
background-color:#efefef;
}
.collapse-pane {
position:absolute;
border:1px solid #999;
cursor:pointer;
top:20%;
right:100%;
-ms-transform-origin:100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.collapse-pane span {
padding:5px;
}
jQuery :
$(document).ready(function () {
var height = $(".right-panel").height();
$('.collapse-pane').click(function () {
if ($(".collapse-pane span").html() == "Expand") {
$(".panel-body").animate({
width: 200
}, 400);
$(".panel-body-inner").fadeIn(500);
$(".collapse-pane span").html("Collapse");
} else {
$(".panel-body").animate({
width: 00
}, 400);
$(".panel-body-inner").fadeOut(300);
$(".collapse-pane span").html("Expand");
}
});
});

how to replicate JQtouch smooth iphone animations?

so, i know how to do this by theory, buy when i try the animation is really laggy.
what i"m doing:
i got this UL with all sort of items and text (really standard) and when i want to animate it
i just add with JS a class "flipout" like so:
element.className = "flipout";
the CSS for the animation looks like this:
.flipout{
-webkit-animation-duration: .55s;
-webkit-animation-name: flipout_anim;
-webkit-transform-origin: left;
}
#-webkit-keyframes flipout_anim {
from {
-webkit-transform: translateX(0%);
}
to {
-webkit-transform: translateX(-100%);
}
}
the same HTML moves smooth as silk with JQtouch..
what am i doing wrong?!
the solution:
use translate3d(x,y,z);
moves smooth.

Categories