Databases
StackOverflow2013
Postsdbo
POjquery text rotation
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery text rotation
    primarykey
    data
    text
    <p>I've got a simple text inside a div, something like the following;</p> <pre><code>&lt;div id="banner"&gt; &lt;div&gt;This is an example text&lt;/div&gt; &lt;/div&gt; </code></pre> <p>I want the text inside the div to be rotated 20-30 degrees. I've already found <a href="https://stackoverflow.com/questions/4895422/rotate-text-with-css-javascript-jquery">this</a> topic on stackoverflow about it and it gives me the desired result in Firefox and Chrome but not in IE7, IE8 and IE9. I also tried <a href="http://code.google.com/p/jquery-rotate/" rel="nofollow noreferrer">jquery rotate</a>, but when using this it looks like the plugin is doing something with the div itself, making it disappear, instead of rotating the text inside the div. Is this even possible with javscript and/or css?</p> <p>NOTE: Cufon is also being used.</p> <p>Update after Codlers answer:</p> <p>This is the current applied css after the answer of Codler. Works in FF and Chrome.</p> <pre><code>-ms-transform: rotate(-20deg); -moz-transform: rotate(-20deg); /*-moz-rotation-point: 0 0;*/ -webkit-transform: rotate(-20deg); /*-webkit-rotation-point: 0 0;*/ -o-transform: rotate(-20deg); /*-ms-writing-mode: tb-lr; * html writing-mode: tb-lr;*/ </code></pre> <p>UPDATE 2: IE7 and IE8 are rotating the text now, but in IE9 i'm getting a big black square behind my rotated text. What can be causing this? CSS is now as below;</p> <pre><code>-moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); background-color:transparent; /*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/ /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand'); zoom: 1; z-index:1; position:absolute; padding : 45px 10px 15px 10px; </code></pre> <p>The Final working piece of code. Credits for this go toe Jeff and Codler.</p> <p>HTML:</p> <pre><code>&lt;div id="banner"&gt; &lt;div&gt;This is an example text&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Default CSS:</p> <pre><code>#banner &gt; div { -moz-transform: rotate(-20deg); /*FF*/ -o-transform: rotate(-20deg); /*Opera*/ -webkit-transform: rotate(-20deg); /*Safari, Chrome*/ -ms-transform: rotate(-20deg) !important; /*IE9*/ transform: rotate(-20deg); /*CSS3 default*/ background-color:transparent; zoom: 1; z-index:1; /*NEEDED FOR IE8*/ width: 191px; position:absolute; padding : 45px 10px 15px 10px; } </code></pre> <p>CSS FOR IE 7 &amp; 8 - Loaded conditionally:</p> <pre><code>#banner { filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important; padding-top:0px; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USRob
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjquery text rotation
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjquery text rotation
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjquery text rotation
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload