javascript - Set height on div with CSS3 transform (rotate) -

-

goal

i'm working on collapsible sidebar using jquery animation. have vertical text on sidebar acts label , can swap on animateout/animatein effect.

normally use image of text i've swapped vertically, , switch out on animation, css3 transforms i'd work instead.

problem

the problem i'm facing setting height on rotated container makes expand horizontally (as it's rotated 90deg) doesn't work. tried set width (hoping expand vertically, acting height), has odd effect of causing width of parent container expand well.

fix?

how can set height on rotated (transformed) element without affecting width of parent container? far have been unable this.

live example

here's fiddle demonstrates problem: fiddle

the collapse-pane class have rotated , contains span have text inside. you'll notice has width set, widens border, affects 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 image showing problem, don't have view fiddle.

weird div spacing

update

i've made problem statement little clearer, original post confusing issues.

thanks help!

if don't want rotated divs size expand it's parent size, need take out of flow. may use absolute positioning this.

the following demo uses technique , positions "expand" element setting transform orign , 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");         }     }); });

Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more