I have a series of .jpeg menu tabs, which contain vertical text, and are oriented vertically (height > width). Attempting to create vertical tabs, such that they go from the top to the bottom of the screen in series, but after reading some documentation, I'm still not sure exactly where to start. Any tips? Sorry for the extremely vague question, but most search results assume you want a vertical menu with horizontal text.
You can use word-wrap: break-word; combined with a narrow width value to force your text to wrap for every single letter: http://jsbin.com/ominus/1/edit
Rotating would look better, but it's another option!
If browser compatibility is not a priority, you can try using CSS3:
.rotated-text {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Should work on IE9+ */
}
Working example: http://jsfiddle.net/C3qrT/
Then you must work to align text as you want.
Related
I am in front of a mystery: I have a box, the css defines the width of each side.
I use links to rotate the box, adding a class to show each side.
The link just clears the classes of the box, and adds one of the following class:
.show-front {
transform: rotateY(0deg);
}
.show-back {
transform: rotateY(-180deg);
}
.show-left {
transform: rotateY(-270deg);
}
.show-right {
transform: rotateY(-90deg);
}
However, depending on the side in front, the alignment of the div is not the same.
I isolated my problem and created a codepen at the following location: http://codepen.io/3MO/pen/XpwYBB
I check the dimensions and coordinates of each side brought to front, I cannot see the problem. What do I miss?
Thanks a lot in advance!
The divs don't fit inside the parrent.
You forgot the additional border-width on your boxSide divs.
Your #mainBox should have width: 1102px;.
I got an image inside bootstrap panel, i want to add functionality when i can click on a rotate button and the image would rotate.
i got the following:
.rotate{
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg); // IE9 only
transform: rotate(90deg);
}
if i add class to my img it rotates that 90degs but it comes out of the panel, it stops to follow the width and height restrictions, just rotates in place.
Is there a way to do that? I mean to rotate the image, in a way that it will still be in panel's borders.
EDIT:
i got this: http://jsfiddle.net/jjbjn160/
its overflowing the left side of panel, i want it to fit in to the panel.
set the style of the panel to overflow: hidden.
.panel {
overflow: hidden;
}
I want to create a zoom in effect on my large div. I have searched many questions and still don't know how this work.
I want to be able to zoom into the center of the user screen instead of the set position.
http://jsfiddle.net/kB27M/1/
I have tried css3 zoom feature and animate zoom property but still can't pull this one. Can anyone help me about it? Thanks a lot!
You should scale the div:
.scaled {
-moz-transform: scale(3);
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
div {
transition: all 500ms ease-in;
}
Simply apply the CSS class to the div and then use the transitionEndevent to apply further styles via .animate().
On transitionEnd (discard live(), use on()): jsfiddle
I am looking for jquery plugin or something for my vertical menu. here is the scenario.. I have a long list of categories e.g. 70 categories, which I have to display in the right/left navigation, but I want them to display only 10 categories and soon as someone rolls over categories (up/down) it automatically scrolls up/down and shows remaining categories within the specific height (10 visible at a time), I hope my question is clear if not, I will demonstrate with images.. can someone please point me to the right direction.. thanks...
Edit: something like this but with only category names and in vertical direction : http://valums.com/files/2009/menu/final.htm
As MrOBrian said...you can edit the style part in the source code. This also depends on target browsers. Here is something to get you started...
div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 145px;
width: 200px;
overflow: auto;
/* Added this part */
writing-mode: tb-lr;
filter: flipv fliph;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
/* Added this part */
}
My goal is to have the slider 1280px wide and centered on the page. I would like the edges of the content to have hidden overflow on both sides. For example I want the center of content to always stay in the center of the page with each side being cut off as the browser is resized, with no horizontal scroll bar appearing.
Is there a straightforward way to accomplish this?
I ended up with a somewhat interesting solution that worked for me in (at least) Chrome, Firefox, and Safari where I tested it. It may be slightly hacky, but the result was cool.
So here's what I did: I put a .wrapper with a width of 1280px. The margin is 0 auto except the left margin which is where it all happens. The left margin needs to be set to half of the div width. In this case that would be 640px. However, because it must overflow outside of the left screen it must be set to a negative number (i.e. -640px). Then in order to reverse that effect when the screen is larger then screen a left:50% pushed it over the correct amount. Obviously in order for the margin:0 auto to actually work, the position must be set to relative (or absolute if you would like).
.wrapper { width:1280px;
margin:0 auto 0 -640px;
position:relative;
left:50%
}
the one problem
I found one problem with it, though. Because we are using negative margin, it pushes the div to the left to where one can not see if their screen or browser window is too small. Let me know if this is a problem and makes it to where it doesn't work for you.
Add this css class
.overflowbothsides{
vertical-align: middle;
margin: 0 auto;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
solution with code and example
enter link description here