1

How could I realize a button which is turned 90° to the right or to the left by default? I dont want to let him turn onClick, but he should be already turned when the page is loading?

Additionally how could I position this button in a vertical center rightsided to a grid?

Like this: http://www.abload.de/img/unbenanntfk3b.png

Thanks, zY

m90
  • 11,434
  • 13
  • 62
  • 112
dotchuZ
  • 2,621
  • 11
  • 39
  • 65

2 Answers2

3

DEMO FIDDLE

enter image description here

<div class="grid">
    <div class="block block_a">
        <div class="content"></div>
    </div>
    <div class="block block_a"></div>
    <div class="button"> button </div>   
</div>

var btn = $('.button');
btn.css('transform','rotate(90deg)');

a fix for IE would be replacing the div with an image or just set a separate css playing around with the button styles.

As the OP asked '...Argh! please... make it work in IE!?...' ;) here is an example on how to do that:

DEMO FOR IE 8,7,(and believe it or not) 6!

Just add to the previous code - and modify for your needs the 'px' to best position the DIV

if($.browser.msie && $.browser.version<="8.0"){
    btn.css({
        filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)',
        top:'100px',
        left: '184px'   
    });   
}

ONE ONLY THING... (sad but true)

The IE DX filter only permits 4 stages of rotation (1,2,3,4) , so you won't be able to rotate an element by a fancy degreed position like 37° or doing like : BasicImage(rotation=2.3).

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • perfect, is there a fix for IE? in IE the button is not rotated... thanks – dotchuZ Aug 30 '11 at 08:44
  • yeah. your example is based on fixed pixel-sizes, is it possible to adapt this dynamically? this means, always to the right of the content area and centered? – dotchuZ Aug 30 '11 at 09:01
  • Yes! i am at work now. as soon as i'll have free - i'll make a demo! with the ie fix too – Roko C. Buljan Aug 30 '11 at 09:03
  • zyrex... my apologies for the delayed response. I added a demo! look and let me know! (P.S. I've '+1' your question cause it's clear and useful to all other users!) – Roko C. Buljan Sep 02 '11 at 20:49
  • thanks thats very useful, one last question as mentioned above, is it possible to provide an example without fixed heights and weights? thank you – dotchuZ Sep 06 '11 at 06:24
  • This should do the trick. You still need to fine-tune a bit the jQuery css for the button. Play around: http://jsfiddle.net/qTZRh/12/ – Roko C. Buljan Sep 06 '11 at 08:34
1

I'm not sure if I get what you're after a 100% but my first guess would be to just use the CSS writing-mode property ('lr-tb' in your case).

See: http://www.w3.org/TR/2001/WD-css3-text-20010517/#PrimaryTextAdvanceDirection

m90
  • 11,434
  • 13
  • 62
  • 112
  • its going the right direction, how do I apply this to my button? Collapse – dotchuZ Aug 30 '11 at 08:14
  • Oh, apparently this CSS3-property isn't as supported as it should be.... See: http://stackoverflow.com/questions/716970/rotating-table-header-text-with-css-transforms – m90 Aug 30 '11 at 08:22
  • thanks this works! any idea how to set its position next to the right side of block a? – dotchuZ Aug 30 '11 at 08:29