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.
Related
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");
}
);
I have problem with zooming on my webpage. I have bind on mouse wheel, to do dynamic zooming with mouse. Main element with background is about 4000px. Here is screenshot, how it looks like:
When I want to zoom out, to see a whole element, everything is messed (context menu dissapear, background-image is lost...). Here is screenshot on zoom out:
Thats is CSS on actual element:
element.style {
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate(-50%, -50%) translate3d(3145px, 1463.6364px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(5) scaleY(5) scaleZ(1);
width: 1437.5561545372866px;
height: 800px;
cursor: inherit;
}
.bg-slide {
background-color: transparent!important;
background-image: none!important;
z-index: -2;
border: 0!important;
}
It must be chrome issue, but I don't know where, because it works well in firefox, screenshot from ff:
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");
}
});
});
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.
When executing JQueryUI's slide transition on an element with a CSS transform the top half of the element is being hidden during the animation. Is there some way I can adjust my JQueryUI animation and/or CSS to prevent this from happening?
JSFiddle: I've created a JSFiddle with the appropriate code - http://jsfiddle.net/9dTkL/4/
To accomplish the vertical centering, I do the following:
<style>
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
</style>
The top and transform within the CSS allow the banner to fall into the center.
To perform the animation, I execute the following:
$('#banner-welcome').toggle(
'slide',
function()
{
document.location.href = "#/" + destination;
}
);
When the animation starts the top half of the #welcome-banner disappears, and the bottom half animates. I've removed the transform from the CSS and everything works great -- except that my banner is no longer centered.
I am performing the vertical centering this way due to a combination of AngularJS and ng-views. I had previously used JavaScript to center the element, but adding the logic to the $(window).resize() event caused problems in other ng-views. I needed a way to isolate this to the specific ng-view.
Is there something I can adjust with my animation or CSS that would not cause the top half of the banner to disappear?
toggle is removed as of 1.9: http://api.jquery.com/toggle-event/
so please use animate or slideDown or slideUp method
also the transform property doesn't need prefixes
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
have you tried adding transform-origin property
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform-origin: 50% 50% 0;
transform: translateY(-50%);
}
im not seeing the top part disappear in latest Firefox 24