I am learning Animation with Dojo Toolkit. I am trying to animate a div. I have created two div's upper and lower div. when i create animation object for upper div, lower div is moving to the upper div space and overlapping each other. how do i prevent lower div moving to upper div place while animating upper div.
the code i am trying to solve is here.
jsfiddleDOTnet/Mostwanted_cJ/26rhq/
The problem is that, in order to make a DOM node moveable like in the animation, they give it the following inline CSS: position: absolute. Due to this, it will be "removed" from the normal flow, so your second div will not be aware of the first one, so they will overlap.
To solve this problem, you should wrap your #box1 inside a container-div which has position: relative. Your #box2 will be aware of the container and your #box1 is relatively positioned towards your container. The full HTML would be:
<div class="container">
<div id='box1'></div>
</div>
<div id='box2'></div>
And the CSS would be:
#box1 {
width: 300px;
height: 100%;
background-color: #FF0000;
}
#box2 {
width: 300px;
height: 300px;
background-color: #686868;
}
.container {
position: relative;
height: 300px;
}
As you can see I also slightly changed the height. You need to give your container a height so that #box2 will be positioned correctly. Now, because you give the container a height, you can change the height of #box1 into 100%. Because it's relative towards the container, 100% is equal to 300px.
I also updated your JSFiddle.
Related
I sometimes "protect" a custom UI control by placing a transparent div over the top of it. e.g. I have made an interactive data grid, and when I want to disable it, such as when I bring up a dialogue in front of it, I append a transparent div to the grid's outer container, with height and width stretched, so that it is not possible to click on anything. In the contrived example below, someFunction() will not get called when clicking where 'Blah' is, because the span will be covered by a transparent protector.
HTML:
<div class="control">
<span class="clickable-example" onclick="someFunction()">Blah</span>
<div class="protector"></div>
</div>
CSS:
.control {
position: absolute;
width: 100px;
height: 20px;
}
.clickable-example {
z-index: 0;
}
.protector {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 20px;
z-index: 1;
background: transparent;
}
However, I have noticed that in Internet Explorer (even 10), this doesn't work. It seems that a div with background set to transparent (either explicitly with CSS, or implicitly by not setting it at all), the div does not block what is underneath it. I thought this is wrong, but I can't actually see from the spec that it is wrong. The spec simply says that what is underneath will "shine through". It doesn't say whether or not the background should act like a piece of glass.
I've reverted to using a fully transparent image instead of the transparent div, but I wondered whether anyone has any further info on this. (The fact that it works with a transparent image proves that it's not a z-index problem).
I'm trying to use fluid images for a responsive project I'm working on. However, everything I've seen has just told me to put a max-width for the images and it should work. It does work, except for px-based container widths as seen here: http://codepen.io/anon/pen/cCfsF
Is it possible for px-based parents to have fluid images?
My HTML code is:
<div class="container">
<img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>
<div class="container2">
<img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>
and my CSS is:
.container {
width: 500px;
background: #f30;
}
.container2 {
width: 100%;
background: #f30;
}
img {
max-width: 100%;
}
In your example, .container has a fixed width of 500px, and the child images has a width of 100%, so the image will scale to fit the parent container. However, since .container has a fixed width, it will not change as you shrink or expand the window.
As you observed, for the case of .container2 with a percentage width that will respond to the window width, the image will re-size accordingly.
You are seeing the correct behavior, so the short answer to your question is no, at least for the layout that you are looking at.
I have a WinJS.UI.Flyout that I would like to have expand upward when content is added to it while it is visible. The flyout's anchor is at the bottom of the screen. If I call flyout.show(anchor, 'top'); it appears correctly at first, but then expands off the bottom of the screen when content is added. If I call flyout.show(anchor, 'bottom'); it expands upward, but it also covers over the anchor element, which I do not want.
This can be done by using -ms-flexbox display for the flyout and packing its content to the end.
flyout background can be set to transparent; it's size can be set to max possible; this way it serves as a outer container which aligns its content to the end. expandable content is placed inside another div flyout-content with background as white.
<div data-win-control="WinJS.UI.Flyout" id="flyout">
<div class="flyout-content">
expandable content here
expandable content here
expandable content here
expandable content here
</div>
</div>
css:
#flyout
{
background-color: transparent;
border: 0;
display: -ms-flexbox;
-ms-flex-pack: end;
-ms-flex-direction: column;
height: 400px;
}
.flyout-content
{
padding: 20px;
background-color: white;
}
I have a narrow view that I am inserting some HTML into. Every once in awhile there is an image that is too wide, so I have been wrapping the original HTML string, using this CSS to keep it under control:
<style type="text/css">p{max-width:100%;}img {max-width:100%;}</style>
<div style=\"word-wrap:break-word\">
.
. ...original HTML inside the div wrapper...
.
</div>
But it doesn't scale the width and height of the images proportionally, so the result is a very distorted image. Is there something else I can do, preferably with CSS or something equally as easy?
This is embedded inside a webview in an iOS application. I don't want write code to parse through the original HTML and look for images. I need a simple solution that takes advantage of the methods that are supported by the native UIView class.
UPDATE:
Using the example in the answer below from Kyle, I think the problem is occurring with images that have embedded width and height attributes:
Kyle's example:
<div style="word-wrap:break-word">
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
</div>
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
Modified, with width and height added to the first image link
<div style="word-wrap:break-word">
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png" WIDTH="100%" HEIGHT="100%">
</div>
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
Both using this CSS:
div {width:100px;}
p{max-width:100%;}
img{max-width:100%;}
It really isn't making any difference whether the container width attribute is set or not. I tried it both ways.
As a matter of fact, in this case (link) it looks like the image is first scaled up by the width and height attributes, followed by the width being scaled down by the CSS max-width. This leads a a very bizarre effect.
To maintain the right proportions use:
img {
max-width: 100%;
height: auto;
}
The height: auto fixes the proportions.
It's really easy, just add a width to the parent.
div
{
width: 100px;
}
Demo here.
I am not sure if I understood right your question, but here is an idea:
http://jsfiddle.net/FyC6r/4/
.mydiv
{
width:200px;
height:150px;
border: 1px solid red;
}
.mydiv img
{
width:100%;
}
<div class="mydiv">
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
</div>
this way you'll have a image resized proportionally dependson what you need first, the width or height.. leaving only width 100% in css it means that image will be resized to fit the div by width and height will be resized the same times as the width so the scale will be respected.
well..if want them resized by width and height then you'll have a image distortion due to different scale. you can paly with width and height of img style to change them and fit one image, but when another one is added with different sizes you'l get again a wrong displayed image. I would go for width to keep it resized, cause in the height, there is always space under the screen :)
**you should add display: inline-block and overflow: scroll to make it work **
for more examples click Here .
.demo{display: inline-block;
max-width:380px;
min-width: 220px;
min-height: 160px;
resize: both;
overflow: scroll;};
<div class="demo">i'm resizeble</div>
I have some text rotated 270 degrees, which I would like to apply the -moz-box-shadow/box-shadow/-webkit-box-shadow CSS propert to. Unfortunately, the browsers all render the box shadow as if the text block element has not been rotated (i.e the shadow position is 90 degrees away from where it should be as if in standard left-to-right rendering)
Is there a way to overcome this problem?
This works for me. Can you post your code so we can see what you're doing? (For example one thing you could be doing is setting your transform - rotate on a span element but setting your box-shadow on a container div.)
Here is some webkit code that works:
#RRottatte{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg);
width: 100px;
height: 100px;
top: 300px;
left: 200px;
-webkit-box-shadow: 6px 6px 0px red;
}
</style>
</head>
<body>
<div id="RRottatte">My Rotated Text</div></body>
</html>
You are probably applying the box shadow to a parent container (which is not rotated), you must apply it to the container which has the transform, i.e:
http://jsfiddle.net/QK9wG/