what I am trying to accomplish is to make my object scale with my browser window. As I increase the browser the object just moves directly up instead of just staying in the same position and scaling with the browser. The video that I have the object on scales just fine it's the object on top that I am having problems with. If anyone has any suggestions that would really help. Thank you!
Here is a JsFiddle but I'm not sure how helpful it'll be.
https://jsfiddle.net/tad1jcxt/
HTML:
<figure class="stayssame">
<video controls loop poster="placeholder.png" autoplay>
<source src="video.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
<h1 id="headline">Intermediate Web Design:
<br>
Fun, Insightful, Experience
</h1>
<object type="image/svg+xml" data="comweb2.svg" ></object>
</figure>
CSS:
object{
top:8.5%;
left:32%;
height: 100px;
width:200px;
}
#headline{
text-align: center;
position: absolute;
top:10%;
left:35%;
color:#00E3FF;
line-height:20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size:12px;
}
The desired screen position of your <object> (containing a graphic) is 8.5% of the screen height from the top, and 32% of the screen width from the left hand side. However, the top and left CSS properties only apply to absolutely positioned elements; e.g., position: fixed or position: absolute. Therefore, simply add position: absolute to your CSS properties for the <object> and you're good to go.
object{
position: absolute;
top:8.5%;
left:32%;
height: 100px;
width:200px;
}
I also strongly recommend that you not change the global definition of an <object> element in this case because it seems very specific to this instance. It is best to give your <object> an ID attribute and then use that to give it the CSS properties desired:
<style>
#logo{
position: absolute;
top:8.5%;
left:32%;
height: 100px;
width:200px;
}
</style>
<object id="logo" type="image/svg+xml" data="comweb2.svg" ></object>
For reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/left
https://developer.mozilla.org/en-US/docs/Web/CSS/top
In Yahoo mail, when you are writing an email and you drag a file onto the page and hover, the message area becomes highlighted. It can be seen here:
The part of this that I don't get is how to have the blue area appear with partial opacity over the things under it that are normally visible.
With:
#blueBox {
background-color: #FFD090;
opacity: 0.0;
}
If the msgContent is a child of blueBox:
<div id='msgBox'>
<div id='blueBox'>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
</div>
and when msgBox is hovered I increase blueBox opacity from 0 to say 0.6, the blueBox will show but the msgContent div is hidden until the hover event. It should be visible always.
If the msgContent div is not a child of blueBox, then the blueBox doesn't cover it.
I've tried rgba (http://jsfiddle.net/mkasson/nJcxQ/19/) like here on SO, but it doesn't cover over the child elements.
Couldn't do my usual watching/inspecting via browser's webdev tools because focus was never on the browser while dragging the file onto it.
Thanks!
Here is how I would go about this,
(What the problem is, you are using the parents background. You can't make the parents background go over it's content, that is not what a background does. It merely sites behind everything it is containing and acts as a background.)
html,
<div class="messageContent">
<span class="overlay"></span>
<p>Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.</p>
This is a link
</div>
css,
.messageContent {
color: #000;
position: relative;
height: 100%;
width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background: lightBlue;
opacity: 0;
height: 100%;
width: 100%;
display: block;
z-index: 100;
}
.messageContent:hover .overlay {
opacity: 0.6;
}
What I am doing is placing an absolute span tag inside of the parent to act as the color overlay. When the parent is hovered the overlay child will become active by increasing it's opacity.
JSFIDDLE
Here's how I would do it.
<div id='msgBox'>
<div id='blueBox'>
</div>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
CSS
#blueBox {
background-color: #FFD090;
opacity: 0.0;
position: absolute;
top: 0;
left: 0;
}
jQuery
$("#msgBox").hover(function(){
$("#blueBox").css({top:$(this).css("top")}).height($(this).outerHeight()).width($(this).outerWidth()).animate({opacity:0.6});
},function(){
$("#blueBox").animate({opacity:0}).height(0).width(0);
});
http://jsfiddle.net/54cx7/2/
The problem is that since content is a child of bluebox, then it inherits the 0 opacity.
When I use image tags in html, I try to specify its width and height in the img tag, so that the browser will reserve the space for them even before the images are loaded, so when they finish loading, the page does not reflow (the elements do not move around). For example:
<img width="600" height="400" src="..."/>
The problem is now I want to create a more "responsive" version, where for the "single column case" I'd like to do this:
<img style="max-width: 100%" src="..."/>
but, if I mix this with explicitly specified width and height, like:
<img style="max-width: 100%" width="600" height="400" src="..."/>
and the image is wider than the available space, then the image is resized ignoring the aspect ratio. I understand why this happens (because I "fixed" the height of the image), and I would like to fix this, but I have no idea how.
To summarize: I want to be able to specify max-width: 100%, and also somehow make sure the content is not reflowed when the images are loaded.
UPDATE 2: (Dec 2019)
Firefox and Chrome now deal with this by default. Simply add the width and height attributes as normal. See this blog post for more details.
UPDATE 1: (July 2018)
I found a much cleverer alternate version of this: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/. This still requires a wrapper element and it requires CSS custom properties, but I think it's much more elegant. Codepen example is here (credit to Chris Coyier's original).
ORIGINAL:
From this blog post by Jonathan Hollin: add the image's height and width as part of an inline style. This reserves space for the image, preventing reflow when the image loads, but it's also responsive.
HTML
<figure style="padding-bottom: calc((400/600)*100%)">
<img src="/images/kitten.jpg" />
</figure>
CSS
figure {
position: relative;
}
img {
max-width: 100%;
position: absolute;
}
The figure can be replaced with a div or any other container of your choice. This solution relies on CSS calc() which has pretty wide browser support.
Working Codepen can be seen here.
I'm also looking for the answer to this problem. With max-width, width= and height=, the browser has enough data that it should be able to leave the right amount of space for an image but it just doesn't seem to work that way.
I worked around this with a jQuery solution for now. It requires you to provide the width= and height= for your <img> tags.
CSS:
img { max-width: 100%; height: auto; }
HTML:
<img src="image.png" width="400" height="300" />
jQuery:
$('img').each(function() {
var aspect_ratio = $(this).attr('height') / $(this).attr('width') * 100;
$(this).wrap('<div style="padding-bottom: ' + aspect_ratio + '%">');
});
This automatically applies the technique seen on: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
At first I would like to write about the answer from october 2013. This was incomplete copied and because of them it is not correct. Do not use it. Why? We can see it in this snippet (scroll the executed snippet to the bottom):
$('img').each(function() {
var aspect_ratio = $(this).attr('height') / $(this).attr('width') * 100;
$(this).wrap('<div style="padding-bottom: ' + aspect_ratio + '%">');
});
img { max-width: 100%; height: auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:300px;border:1px solid red">
<img width="400" height="300" src="data:image/png;base64,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"/>
Some text
</div>
And we can see the text is afar from bottom. What is in this example incomplete/ incorrect? I will show it with correct example with pure JavaScript (we do not need to download jQuery for that).
Correct example with pure JavaScript
Please scroll the executed snippet to the bottom.
var imgs = document.querySelectorAll('img');
for(var i = 0; i < imgs.length; i++)
{
var aspectRatio = imgs[i].getAttribute('height') /
imgs[i].getAttribute('width') * 100;
var div = document.createElement('div');
div.style.paddingBottom = aspectRatio + '%';
imgs[i].parentNode.insertBefore(div, imgs[i]);
div.appendChild(imgs[i]);
}
.restrict-container div{position:relative}
img
{
position:absolute;
max-width:100%;
top:0; left:0;
height:auto
}
<div class="restrict-container" style="width:300px;border:1px solid red">
<img width="400" height="300" src="data:image/png;base64,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"/>
Some text<br>
<img width="400" height="300" src="data:image/png;base64,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"/>
Some text
</div>
The mistake from answer from october 2013: the image should be placed absolute (position:absolute) to the wrapped container but it is not so placed.
This is the end of my answer to this question.
For further information read more about:
What could we do with the new HTML5 technology for responsive images too? (this is previous extended version of my posting here. See there the second part).
For a css only solution, you can wrap the img in a container where the padding-bottom percentage reserves space on the page until the image loads, preventing reflow.
Unfortunately, this approach does require you to include the image aspect ratio in your css (but no need for inline styles) by calculating (or letting css calculate for you) the padding-bottom percentage based on the image height and width.
If many of your images can be grouped into a few standard aspect ratios, then you could create a class for each aspect ratio to apply the appropriate padding-bottom percentage to all images with that aspect ratio. This may save you a little time and effort if you are not dealing with a wide variety of image aspect ratios.
Following is some example html and css for an image with a 2:1 aspect ratio:
HTML
<div class="container">
<img id="image" src="https://via.placeholder.com/300x150" />
</div>
CSS
.container {
display: block;
position: relative;
padding-bottom: 50%; /* calc(100%/(300/150)); */
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The snippet below adds some extra html, css and javascript to create some visual top and bottom reference points and mimic a very slow loading image so you can visually see how the reflow is prevented with this approach.
const image = document.getElementById('image');
const source = 'https://via.placeholder.com/300x150';
const changeSource = () => image.src = source;
setTimeout(changeSource, 3000);
.container {
display: block;
position: relative;
padding-bottom: 50%; /* calc(100%/(300/150)); */
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.top, .bottom {
background-color: green;
width: 100%;
height: 20px;
}
<div class="top"></div>
<div class="container">
<img id="image" src="" />
</div>
<div class="bottom"></div>
If I understand the requirements ok, you want to be able to set an image size, where this size is known only on content (HTML) generation, so it can be set as inline styles.
But this has to be independent of the CSS, and also prior to image loading, so also independent from this image sizes.
I have come to a solution tha involves wrapping the image in a div, and including in this div an svg that can be set to have proportions directly as an inline style.
Obviously this is not much semantic, but at least it works
The containing div has a class named img to show that it , well, should be an img
To try to reproduce the loading stage, the images have a broken src
.container {
margin: 10px;
border: solid 1px black;
width: 200px;
height: 400px;
position: relative;
}
.img {
border: solid 1px red;
width: fit-content;
max-width: 100%;
position: relative;
}
svg {
max-width: 100%;
background-color: lightgreen;
opacity: 0.1;
}
#ct2 {
width: 500px;
}
.img img {
position: absolute;
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
top: 0px;
left: 0px;
box-shadow: inset 0px 0px 10px blue;
}
<div class="container" id="ct1">
<div class="img">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 400 300" width="400">
</svg>
<img width="400" height="300" src="missing.jpg">
</div>
</div>
<div class="container" id="ct2">
<div class="img">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 40 30" width="400">
</svg>
<img width="400" height="300" src="missing.jpg">
</div>
</div>
I find the best solution is to create a transparent base64 gif with corresponding dimensions as a placeholder for img tags where loading is triggered via js after page is loaded.
<img data-src="/image.png" src="data:image/gif;base64,R0lGODlhyAAsAYABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
For blog posts and such I use this PHP function to create them automatically
function CreatePreloadPlaceholderGif($width, $height) {
$wHex = str_split(str_pad(dechex($width), 4, "0", STR_PAD_LEFT), 2);
$hHex = str_split(str_pad(dechex($height), 4, "0", STR_PAD_LEFT), 2);
$hex = "474946383961".$wHex[1].$wHex[0].$hHex[1].$hHex[0]."800100ffffff00000021f904010a0001002c00000000010001000002024c01003b";
$base64= '';
foreach(str_split($hex, 2) as $pair){
$base64.= chr(hexdec($pair));
}
return base64_encode($base64);
}
echo CreatePreloadPlaceholderGif(300, 500);
// R0lGODlhLAH0AYABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
On the frontend the result is something like this
function loadimage() {
elements = document.querySelectorAll('img[data-src]');
elements.forEach( el => {
el.setAttribute('src', el.getAttribute('data-src'))
});
}
img {
background-color:#696969;
}
<div>300x500 image placeholder</div>
<img data-src="https://ibec.or.id/wp-content/uploads/2018/10/300x500.png" src="data:image/gif;base64,R0lGODlhLAH0AYABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
<div>After page load, run js command to replace src attribute with data-src</div>
<button onclick="loadimage()">Load image</button>
I want to change the parent of an iframe which is used for embedding a YouTube video.
When I change the parent:
Firefox and Chrome: Player stops playing and displays a new (stopped) player in new parent.
IE: Player continues playing and displays a new (stopped) player in second div. So user sees a stopped player but hears video.
Here is the sample fiddle: https://jsfiddle.net/mehmetatas/znuUf/1/
try {
var div1 = $('#div1')
var video = div1.find('.video')[0];
var div2 = $('<div id="div2"></div>');
$(video).appendTo(div2);
div2.appendTo($('.parent'));
div1.remove();
}
catch (e) {
alert(e.message);
}
It seems like iframe content is getting refreshed when parent changes.
Is it possible to video continues playing in new parent?
If not, Firefox and Chrome's behavior is OK, then how can I fix IE's behavior?
What I can think of is you use classes instead of ids in you HTML/CSS like this:
<input id="btn" type="button" value="move"></input>
<div class="parent">
<div class="div1">
<div class="video">
<iframe width="300" height="200" src="http://www.youtube.com/embed/98LHnO0xiMY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
and
.div1 {
position: absolute;
top: 50px;
width: 300px;
height: 200px;
border: solid 3px green;
}
.div2 {
position: absolute;
top: 50px;
left: 325px;
width: 300px;
height: 200px;
border: solid 3px red;
}
This way in your js script you simply need to state:
var div1 = $('.div1')
div1.removeClass('div1')
div1.addClass('div2')
this way your div will be positioned as the new div2 class says and move without stopping or refreshing.
HERE IS THE UPDATED FIDDLE
Hope this is what you were looking for.
I've seen this question pop up a couple of times without any clear resolution.
I'm loading a simple video
<video src="" controls></video>
Onto my page. The video works and plays well cross-browser (not showing all the format setup for this question since it isn't relevant).
I've then applied a border-radius to the video tag. This works, except in Chrome.
I can even pull up the console and see the border-radius applied to the video tag, but it isn't rendering the border radius.
Is anyone familiar with this issue? I've read it's a bug in Chrome, but I'm not sure if it's been resolved or if there might be a workaround?
I'm not sure but I think that this is what's meant by "using SVG":
The idea is to create a HTML overlay element that is the same width and height as the video, set multiple SVG backgrounds on it (border-radius's in whatever the background color is) and make it "mouse-invisible" (pointer-events: none):
Demo: http://jsfiddle.net/pe3QS/3/
CSS (minus the SVG's):
#video-container {
position: relative;
}
#overlay {
position: absolute;
width: 320px;
height: 240px;
left: 0;
top: 0;
pointer-events: none;
background-image: url('data:image/svg+xml...');
background-position: top right, top left, bottom left, bottom right;
background-repeat: no-repeat;
}
HTML:
<div id="video-container">
<video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
<div id="overlay"></div>
</div>
You could also use a psuedo-element (not on the video element, it would'nt display):
Demo: http://jsfiddle.net/pe3QS/2/
CSS:
#video-container:after {
position: absolute;
width: 320px;
height: 240px;
content: " ";
.....
HTML:
<div id="video-container">
<video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>
The SVG's are pretty simple to modify, just change the fill attribute on each of them.
This could probably also be done via JS.