My web application is using some of the css3 transformations and I was wondering the best way to do these based on the window's width and height. My css is doing multiple transformations and in a specific sequence, i.e the body does one, and an element on the body does a second after the transformation the body did. However, one of my transformations is hardcoded to move the element X pixels which I want to make dynamic based off the window's height and width.
Is there a way without javascript (I'd need to preserve the order of these transformations) to say something like:
.someClass {
transform:translate(windowHeight /2, windowHeight);
}
transform: translate may not be your best bet. I'd try position: fixed and use a window percentage value:
position: fixed;
top: 50%;
left: 50%;
One can use viewport based units. For instance:
transform: translate(50vw, 50vh);
Related
I have a game-level map image like this and I code by manual HTML - CSS - JS. I want to attach
the level number based on the coordinates of the image but it moves to another position for another screen. I have used relative position for the parent element and absolute position for child elements. (I tried using px, em, rem, in, cm unit, but it hasn't worked well)
I just want an idea for this problem. Thank you!
I think there are several ways to solve that problem.
You mentioned like (I tried using px, em, rem, in, cm unit, but it hasn't worked well), it's true you failed because you tried with fixed amount.
In order to make sure the child image is fixed on the certain place of parent image, you should use dynamic amount like following alternative solutions.
CSS
You can use percent in styling like.
.map {
position: absolute;
width: ###%;
height: ###%;
x: ###%;
y: ###%;
}
You can use javascript.
When loads the initial screen, you can calculate the ratio of the parent width to screen's width. And you can apply it to the styling using CSS selector or ID.
Update the design.
I think it's the proper and best solution. So you can update the design with map and markers together.
Hope it works for you!
I'm not sure if I get it right. You are trying to position the numbers relative to the whole background image? What are the other screen you refer? Can you show an actual screenshot of the issue?
I would do:
<div class="image">
<span id="span-1">1</span>
<span id="span-2">2</span>
</div>
and then use PERCENTAGES to the determine the position of the numbers:
.image {
position: relative;
background: red;
width: 100px;
height: 100px;
}
span {
position: absolute;
}
#span-1 {
left: 55%;
}
#span-2{
left: 20%;
top: 75%;
}
Sandbox
I am after some general pointers on how to go about the following.
I am trying to position some elements (divs) in a web page by absolute position, relative to the element in which they live.
The idea being that the containing element top/left should be exactly where it would be in the normal document flow, the width should be set such that it fills <body> up to the RHS, less a small margin, and height such that it fills the remainder of the display window, less the space taken up by a footer (also a div).
Having done that, I can then absolutely position sub-elements inside it. The problem is setting the width/height of the containing element.
I have tried various combination of position properties and javascript executed onload(), without success. I clearly am not taking the right approach.
What I am really after are some pointers from someone who knows how to do this as to the approach to be taken. The bottom line is that I need that containing element to expand to be as big as it can, given the constraints of the browser window and the space taken by the footer element.
.... More info following comments.
Basically, I am trying to display a schedule, not unlike a TV/radio schedule. I.e. a line per event class, then within each line lots of individual events displayed in boxes, with the 'box width/position' scaled to the start/end of the actual event on a timeline.
I've seen this done simply using HTML tables and lots of columns to get
the necessary granularity, then using colspan to vary the widths. However I thought I'd try to do it with absolute positioning of elements. The first problem being that the containing element then has no idea how big this thing is, because using position:absolute takes each element out of the document flow. Therefore, no scroll bars either, even with overflow-x:auto on the containing element.
I am getting nowhere fast with css/javascript (well, certainly nowhere, but not even very fast, actually), and I am starting to wonder of the only real way to control the UI closely is by writing a java applet to contain it all?
Hence my question: conceptually, what would be a good way of going about this?
for the container to contain an absolute element, the height must be set to a fixed height or dynamically set the height using Javascript.
See Example https://codepen.io/jacobgoh101/pen/kkWJaL
HTML
<div class="container">
<img src="https://s21.postimg.org/c1m6ky7dz/kingston_creative_market_cover_small_f.jpg">
</div>
CSS
.container {
position: relative;
width: 90%;
border: 1px solid #000;
}
.container > img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Javascript with jQuery
window.onload = function() {
var imgHeight = $('.container img').height();
var targetHeight = imgHeight * 1.2;
$('.container').height(targetHeight);
};
Is there a way to get the value of an element's offsetTop after some CSS styles are applied without actually applying that CSS?
For example, if an element's CSS currently is:
position: absolute;
top: 45px;
Is there a way to know what the offsetTop of that element would be for:
top: auto;
without actually applying top: auto;?
If we do actually apply it, even for a short time, it causes a flicker.
There is a simple trick for this:
Render the element but keep it invisible (using opacity: 0 or visibility: hidden or position it outside the viewport) and calculate its dimensions using JavaScript. This way you will avoid FOUC issues.
I'm looking for a solution how to position a div to exact position on background. I have a background image ( http://www.jewelryplatform.com/coming-soon.jpg ) and I need to position whole div with form, etc. on the center of the image where you can see the box for that. Second problem that the image will be resizing with windows size. Is there any easy way how to do that?
do you have much experience with css and media queries?
You can add breakpoints in your css and then assign specific style to an element at that breakpoint.
#formDiv{ position: absolute; left 50%; top:50%}
#media only screen and (max-width: 995px) {
#formDiv{ position: absolute; left 25%; top:25%}
}
I've created a fiddle that will keep a form over the center of a div.
The key is to do left: 50% for the form that will center it, and then negatively margin-left half its width to keep it center. The same applies for the top: 50%. Because everything is positioned using percentages it will move when you resize the box.
As mentioned in the previous response, you can also use media queries to resize the size of the form at different resolutions as well.
UPDATE
Also you can consider resizing the background image when the screen size changes. This can be achieved by setting the background-size property with again 100%. Here is a great resource for how to use it
I'm generating CSS sprites. I want to use these sprites at multiple sizes. I've searched but haven't been able to figure out how to functionally scale a CSS sprite--e.g. if the original sprite is at 150x150 and I want to display it at 50x50, how can I do that? background-size seems to break it.
I can just generate the sprites at the needed sizes, but when I do this via ImageMagick's -resize I take a noticeable resolution hit. Usually, if I find an image is unacceptably low resolution on a webpage, I just make a bigger image and scale its size, functionally increasing the resolution of the image.
Since I can't figure out how to scale a CSS sprite, I'm a bit stuck--how can I achieve arbitrary resolution using a CSS sprite?
The most elegant way you can do this is by using CSS3 background-size, but this is not supported on all browsers (e.g. IE<=8). You might look into IE specific transforms or filters that you can use and then add the -mz-, -webkit-, and -o- selectors to get the effect you want on the browsers you are targeting.
The least elegant way to do this is by faking the sprite scale and positioning.
The HTML
<div class="ex3">
<img src="http://www.placekitten.com/g/600/400"/>
</div>
The CSS
.ex3 {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
}
.ex3 img {
position: absolute;
top: -25px;
left: -25px;
width: 150px; /* Scaled down from 600px */
height: 100px; /* Scaled down from 400px */
}
The Fiddle
http://jsfiddle.net/brettwp/s2dfT/
I know of no way to change the size of a CSS sprite, sorry.
As for generating the CSS Sprites, try:
http://spriteme.org/
Or for general image editing:
http://www.gimp.org/
You could edit the individual image components, and then use SpriteMe to generate the Sprite. You don't want to generate the sprite and then resize the entire Sprite image, as then your CSS positions for each individual element would be thrown off.
The options I see are:
Either have the sprite's contents in different sizes in one sprite.
Or take the original sprite and manually resize it one time to create a smaller copy of it. Then reference the smaller sprite version for when you need the smaller images.