I currently have an animated image as the background of a website with HTML elements in front of it. Is it possible to replace that image with JSON geometry and still have my html elements in front of the geometry?
I've (unsuccessfully) looked into DOM Elements in ThreeJS. Tried putting my JSON in a div and controlling it with CSS..... That being said - is it possible to "style" or add JSON/js to a css?
Thanks to anyone that can help!!!
Yes, you can position the element you introduce that will contain your scene absolutely, stretch it across the screen and then add the rest of your elements in the DOM:
.scene {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
If you place it as the first child in the body, it will ensure that the rest of the content has a higher z-index, otherwise you will manually have to assign the value to the elements to ensure the scene isn't obfuscating the content.
Since the scene element will adjust to the screen size, you'll have to keep track when window resizes and ensure you update the scene dimensions with it, as one of the commenters pointed out.
Related
I'm implementing a simple app with Vue.js and want to add a component that acts as a popup. What I usually do and has always worked for me, was to add a div with the following code into the css:
.popupBg {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
}
This div acts as the overlay semi-transparent background and has another div nested inside of it that's the actual popup form container.
I've set up a clean new vuejs project yesterday and wanted to add one such popup with an overlay, but the fixed div stays contained inside on of one of its parent divs for some reason and not stretching over the entire html page.
App:
Html structure:
The overlay is contained inside the div with class traitGenerator container medium, the overlay is the div traitSelector popupBg
I've done the same procedure many times in projects before but this one baffles me. Isn't the whole point of position: fixed that it ignores everything else in the DOM? What am I doing wrong?
The parent div might have transform property set. Quote from the docs:
It is positioned relative to the initial containing block established
by the viewport, except when one of its ancestors has a transform,
perspective, or filter property set to something other than none (see
the CSS Transforms Spec), in which case that ancestor behaves as the
containing block.
I am trying to create a div that will fill any empty space at the bottom of a page if there is any, or disappear if the content of the page extends to/past the bottom. I know this can be done using java, but I would like to stick to CSS as much as possible with as few wrappers as possible.
I have experimented with a few different methods but nothing has worked out so far and most of what I have come across is sticky footers, tables, and filling the excess on specific div elements (which this isn't since I want it to work on the whole page at the body/html level).
The furthest I have gotten (which still doesn't work) is to try absolute positioning with alternated top & bottom values, but setting top: inherit and then bottom: 0px just doesn't play well... Example: http://jsfiddle.net/V4RnC/6/
The basic problem comes down to: 1. Keep the top of the div where it would usually be just after the previous div 2. Extend the bottom of the div to the bottom of the page 3. Vary with content and page size changes 4. Disappear if there is no excess space.
Any help would be greatly appreciated!
Update: So far everyone seems to think it's a job for Javascript, so I came up with this quick jQuery solution: http://jsfiddle.net/V4RnC/7/ Feel free to rip me a new one on the code as I always appreciate the learning opportunity :)
If you want something for background purpose here, I would use a div, that stretches over the complete visible area (if the visible area is as large as the content, it's just hidden behind the content).
Then it would be something like that here: http://jsfiddle.net/V4RnC/4/ http://jsfiddle.net/V4RnC/5/
Here's the css code I used:
#content {
background-color: #F00;
/* The overflow is to keep margins of the first and last element in here. Disable it and you get what I mean ;) */
overflow: hidden;
}
#fill {
background-color: #00F;
height: 100%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
Here's a bit more info on that: http://codecamel.com/fullheight
I can imagine, that I sometimes had to use min-height instead of height for the body or html ... but can't remember when or why ...
I want to achieve the effect described in the following question, but using CSS.
I remember seeing somewhere that this now can be done with HTML5, but now can't find the property name.
Stretching an UIImage while preserving the corners
You'll have to use 3 different images.
First, go into photoshop or Gimp or something and break the arrow image you have into 3 parts. The left side with the curve, and the right side with the arrow part. Save them as 3 different images.
Once you've got your images. Create one HTML image element:
<img src="img-middle.jpg" />
In your CSS, apply styling to the before and after pseudo-elements and add the two image bits that you don't want stretched.
img:before {
contents: '';
background: url('img-left.jpg');
height: 50px;
width: 20px;
position: absolute;
left: -20px;
}
img:after {
content: '';
background: url('img-right.jpg');
height: 50px;
width: 40px;
position: absolute;
right: -40px;
}
Make sure you change the width, height, left and right values to match the width and height of your two image files. This CSS allows these bits of the image to be added on to the left and right sides, no matter how wide the element is stretched. It's also cool since it's only one element, so the CSS stays pretty clean except for the requirement of the empty content:''; property.
So then you can stretch your middle image element dynamically. Lets say you want he arrow to stretch, have some jQuery that animates the width of the element, then the middle part will stretch and the corners will stay intact since they're technically not part of the original element, they're just appended.
ETA: As for the method described in the objective-C related post, there's no CSS property that breaks apart images like that unless it's in some obscure webkit nightly build that I've never heard of. Your option here is to break apart the other two sides. You could also combine the left and right portions of your image into a sprite and use the background-position:; CSS property to select bits of the image so that way you'd only have two image file requests, as you want to keep those low to speed up page load time.
you can create an element, assign pseudo elements to it for the left and right side caps, and use a CSS3 transition applied to the width property in order to achieve this effect.
i've set up a working demo on jsFiddle to illustrate how it's done. this demo uses background colors, but one could use images as well (repeating along the X axis for the center element).
check out the HTML5 rocks playground, you'll find some fascinating snippets demonstrating the power of CSS3 and HTML5 (naturally) and can use it as a quick reference as well.
Did you mean CSS3?
I think border-image is pretty much what you're looking for. It lets you take a single image and transform it into the border of an element.
It's kinda hard to work with, so Mozilla made a wonderful WYSIWYG editor:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator
I want an HTML element (let say a span or div) to be present on the page, but not take up any space, so I can switch on and off the visibility property, and nothing moves but the span disappears.
for example take a table. I want an 'edit' label to show at each row, when I move the mouse over. But I don't want it to take up space from the table width. I just want it to 'float' beside the table.
Any ideas how to achieve this?
I can not to use javascript. So I'll be very glad if this is possible with CSS only.
I have tried to use float, its not good because no element overlaps with it. (And i do want overlapping.)
I think you're after a CSS Tooltip. Here's an example of one:
http://psacake.com/web/jl.asp
div {
position: absolute;
left: 100px;
top: 100px;
}
This will take the div and position it relative to the first containing element with position other than static. If you have an item with a position of static (the default) or relative, it will affect the document flow and hence the position of other elements. If you set the position to absolute, it takes it out of the document flow and lets you 'drop' it onto the page at whatever pixel position you like. :D
Css position property
Without using javascript i suppose you could use CSS :hover. Like this:
<style type="text/css">
#world { display: none; }
#hello:hover #world { display: block; }
</style>
<div id="hello">
hello
<div id="world">world</div>
</div>
Demo: jsFiddle
The "float" property does not "float" an object over the other elements. It "float"s the element to one side or another.
To put an object over another object, use the z-index property combined with the position property.
z-index: 500;
position: absolute;
left: 50px;
top: 50px;
You can achieve this effect by making an additional column on the edge of your table that is invisible until its row is hovered over. You want to use visibility, not display, to hide and show because visibility maintains the allocated space of the cell.
Demo: http://jsfiddle.net/sCrS6/
You should be able to easily duplicate the code to make it work for your particular page.
This method also has the advantage of working more consistently across web browsers than using positioning, which often starts to have weird in IE behavior after a couple of elements are nested.
Which code in HTML will allow me to use an image as a background image for a table, but not so that it would be repeated several times vertically and horizontally (in case the table is several times bigger than the image), but in such way that the image height is stretched out to be equal to the height of the table, and its width is stretched out to be equal to the width of the table?
The CSS background options can't handle this reliably across browsers, so you need to put an <img> tag in the table and position it appropriately. As Petr Marek alluded to in the comments, you can do this with the CSS attributes z-index and position, but it's not elegant.
If you set position: relative on the table, you can set position: absolute on the <img> with top: 0; height: 100%; left: 0; width: 100%; to position and size the image, and set z-index: -1 to make it appear behind the other content.
Here's a working example on jsFiddle.
Although it works perfectly for me in Chrome, since you're putting content on top of an image I wouldn't be surprised if it caused some browsers to mess up text selection or something else.
Presentation is the job of CSS, not HTML. You can use background-size in supporting browsers.
HTML stands for Hypertext Markup Language. It is not code. It is intended to provide semantic meaning and structure to a web-accessible document. Entities such as images are purely presentational cruft that was added because we got bored just reading text all day.
That being said, you can use CSS to possibly achieve what you want, but it may be bit tricky. An idea that comes to mind is adding an image element to the page with a height and a width set to be 100% of its container, and then positioning your table, with a transparent background color, over it. You'll have to look into z-indexes, obviously.