CSS3 Vertical text banner to left of content - javascript

I am no guru when it comes to CSS and I wanted to create a web page layout using CSS only if possible. The layout that I would like is to have two divs, one containing a banner and the other containing the content of the page with the banner to the left of the content. So far easy enough. The banner div contains two sub-divs, one containing the title of the page and the other containing some extra information such as contact information. Once again, not too hard.
The problem arises when I want the text displayed in the title to be vertical, reading from bottom to top. I did some searching around on the web and found the CSS3 transform rotate functionality which does what I want it to do.
#name {
border: solid 1px black;
background-color: yellow;
height: 50px;
font: normal normal bold 40px Helvetica, Arial, sans-serif;
padding: 10px;
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(270deg);
-moz-transform-origin: left bottom;
-moz-transform: rotate(270deg);
-ms-transform-origin: left bottom;
-ms-transform: rotate(270deg);
-o-transform-origin: left bottom;
-o-transform: rotate(270deg);
transform-origin: left bottom;
transform: rotate(270deg);
}
Unfortunately, when it comes to rendering the text in the browser, the space reserved by the browser for the rotated text is the width of the banner text before it was rotated, and not the width of the text after rotation (i.e. the height of the banner text before rotation). Hence my content div is sitting way out on the page when I would like it to be right next to my banner div.
To see what I mean, check out this JSFiddle.
How do I get the two divs to live side by side?
This doesn't haven't to be a purely CSS solution as I think I may have to use JavaScript/jQuery to calculate widths and heights etc. and then move the banner div accordingly, but a pure CSS solution would be nifty.

here's a fiddle: http://jsfiddle.net/sijav/UDfZE/53/
you should do this, make a max-width for #banner,
max-width:170px;
then put display:block-inline to main content too, that should do the trick.

http://jsfiddle.net/UDfZE/55/
float: left
Altered the above fiddle floating one element right the other one left will have them alongside each other.

Related

Problem with gridview image zoom with updatepanel

I'm new to asp.net, hopefully this makes sense. I have a gridview in an update panel. I must keep this arrangement to maintain scroll position with a frozen header and no paging. In the gridview I have an image column that zooms with mouse hover. This basically all works. Problem is that when I zoom near the top or bottom of the gridview the image is cropped. It won't expand beyond the panel edge so the image is cut during zoom. I tried to move the image with transform, translate and margins but it only helps for top or bottom, not both. Is there anyway around this? Can I center the image in the panel or allow it to expand beyond the panel edge? I prefer a mouse hover vs a modal window with a close button if that's possible. Here is the markup:
<asp:Image ID="ImageX" CssClass="zoom" runat="server" Height="122px" ImageUrl='<%#"\Images\" + Eval("ImagePath")%>' Width="150px" />
and the CSS:
.zoom {
transition: transform .2s;
width: 100px;
height: 100px;
}
.zoom:hover {
-ms-transform: scale(1.5); /*IE 9*/
-webkit-transform: scale(1.5); /*Safari 3-8*/
transform: scale(3.5) translate(40px, 40px);
}
Also note that the image can be sensitive. If I change settings in CSS the image can flicker like crazy when I mouse out. Thanks.

bxslider: vert. slides goes to far and then self-adjusts

Using bxslider, the contents go to far to the right or left and then snap back in place. This happens more when clicking the 'prev' button.
I've seen this answer, but 'box-sizing' didn't fix it.
Here is a fiddle - In it I don't use the bxslider css file, I've added before and it makes no difference. I've stripped this down to bare bones and it still goes to far and then snaps back in place.
Each li has multiple div's in it. The CSS is:
div.swatches {
width: 22px;
height: 30px;
margin: 0px 3px;
border: 1px solid #CCC;
display: inline-block;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
cursor: pointer;
}
bxSlider calculates slide positions dynamically with the best dimensions it can get from the parent element. Sometimes you get this weirdness. Try to specify slide width and number of slides, this would make bxSlider calculate positions with more precision. This should fix your issue:
$('.bxslider').bxSlider({
pager: false,
speed:1300,
maxSlides:2,
slideWidth:600
});
Your updated fiddle: https://jsfiddle.net/8ayxpeL9/3/

Can javascript get or set printer info?

Through Javascript (or jquery) is it possible to do one of the following...
Find out the current page size and orientation of the browser's print dialog.
OR
Set (or at least suggest) a page size and orientation to the browser's print dialog.
I have images of various sizes and dimensions, and I would like to provide a printable form which makes the best use of the selected page size. I.e. I want to scale and or rotate the image so that it takes up as much of the page as possible.
Or is there a way to handle this in CSS?
This is beyond the realm of JS as the print dialog is OS-specific.
However, the closest thing to a configuration would be media queries in CSS or the media attribute of <link> tags. Instead of suggesting page size and/or orientation, just adapt the page to look appropriate on print. This can also mean that the CSS on screen is totally different on print. Just make sure your HTML is created to adapt such.
Or better, provide a totally different page with totally different CSS for print. That way, you don't have to over-engineer that single page to look good on more than 1 media (and end up with spaghetti).
I don't know if there's any way to target specific page sizes that works in print media, but you can make a landscape-oriented image rotate 90 degrees when the user is printing in portrait orientation. This works in Firefox (haven't tested others):
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
body {
margin: 0;
}
}
#media print and (orientation:portrait) {
.landscapeImage {
-moz-transform-origin: 200px 200px; /* set both values to half of image height */
-ms-transform-origin: 200px 200px; /* set both values to half of image height */
-webkit-transform-origin: 200px 200px; /* set both values to half of image height */
transform-origin: 200px 200px; /* set both values to half of image height */
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
.landscapeImage { /* faux image */
height: 400px;
width: 600px;
display: inline-block; /* not part of solution */
box-sizing: border-box; /* not part of solution */
border: 4px solid black; /* not part of solution */
}
</style>
</head>
<body>
<div class="landscapeImage">
Pretend this is an image
</div>
</body>
</html>
Multi-page print jobs could potentially be a lot more complicated.

Hide image evenly on both sides on variable width site

I'm writing a HTML5 site in MVC5 that is of variable width and at its maximum width there's an image showing in full inside a div. As the site narrows, currently it takes away content from the right of the image, but I want it to take it away evenly from either side.
The outer wrapper div of the site is defined to keep the site centered, with styles as follows:
#wrapper {
min-width: 1152px;
max-width: 1680px;
margin: 0 auto;
position: relative;
}
The div that contains the image has the following styles:
#main {
position: relative;
overflow: hidden;
}
Currently I've just got the image within an img tag inside the main div, like follows:
<img src="#Url.Content("~/Content/Images/Home/home.jpg")"/>
How can I make the image narrow evenly on both sides as the site narrows and conversely, show the image on both sides evenly as it widens again up to its maximum? Is there a way in CSS, or will I need to do something in Javascript?
Thanks.
If using CSS transforms is an option, you could position the image by left: 50% and then use a negative translateX to make it centered.
This way it will show/hide the image evenly on both sides:
Example Here
<div class="img-container">
<img src="http://placehold.it/500x350" alt="">
</div>
.img-container { overflow: hidden; }
img {
vertical-align: middle; /* remove the vertical gap under inline level elements */
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
It's worth noting that CSS transform is supported in IE9 and newer.
Try this:
<img src="#Url.Content("~/Content/Images/Home/home.jpg")" style="background-position: center;"/>
It will center the background in the middle of the elemnt so that it should narrow it evenly

CSS3 Rotate3d in desired direction

In this demo of rotate3d from the W3C, the first example is rotating the face of a div toward the "upper left".
However, with the same vector I can't get the face of a div to rotate toward the "upper left". How can I get this same rotation?
jsfiddle
#r {
position: absolute;
top: 100px;
left: 100px;
border: 7px dotted;
width: 200px;
height: 100px;
background-color: red;
font-size: 20px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
#r:hover {
-webkit-transform: rotate3d(1, -1, 0, 70deg);
transform: rotate3d(1, -1, 0, 70deg);
}
What you have is correct. For me, the transformed version of the W3Schools first demo looked like this when inspected
The black outline was some weirdly warped version that doesn't make sense when you look at the code. The blue area is where it says the element is (and where it should be) and shows the correct transform
Here is what I see when I hover over your element
It's the same transform, just with a wider element. The problem is that our eyes can perceive that rotation as leaning back left of forwards right.
To show this you can look at this example I created for another question. With the shadows you can easily tell that the divs are following the mouse cursor
Now comment out lines 15 and 16 in the javascript to remove the shadows and try moving your mouse from the top left to the bottom right and then back. What do you find? it looks like the divs are moving the same way no matter which you go to!
Our eyes are stupid. Adding a small shadow to your element will make our eyes interpret the transform as you want them to. Updated jsFiddle
box-shadow: 10px 10px 5px #3D352A;
You can style the shadow however you like, but adding a small one makes it easier for our eyes to follow exactly what's happening
On a side note, don't use W3Schools, they are flawed, outdated, and often act unlike how they should. Don't be a W3Fool!
Like Zeaklous noted, it's our eyes who are fooled. So you'd have to add the perspective property to the container element. With this property you can control the strength of the 3d effect. It's the distance of the viewer's eye to the scene. The lower the value the more 3D effect there will be.
Another thing: It's better to have a container element for the face with position:relative and give that container the perspective property. Else you'd need perspective-origin property to center the 3D effect.
There also seems to be a bug in chrome. So sometimes the perspective works and sometimes not. A hack which I used is to add the perspective as transform: perspective( 400px ) to the child element.
Look the updated JSFiddle
Remember: Add the prefixes -moz and -o to support Mozilla and Opera, too.
Made four different variants, each in one direction...
<div id="ulb">
ULB<br/>
UPPER LEFT Backwards<br/>
rotate3d(-200,70,0,70deg);
</div>
<div id="urb">
URB<br/>
UPPER RIGHT Backwards<br/>
rotate3d(1,1,0,70deg);
</div>
<div id="llb">
LLB<br/>
LOWER LEFT Backwards<br/>
rotate3d(1,1,0,-70deg);
</div>
<div id="lrb">
LLB<br/>
LOWER RIGHT Backwards<br/>
rotate3d(1,-1,0,70deg);
</div>
JSFiddle

Categories

Resources