Develop Reference

Image Centering Issue Inside Parent Div Element

I used JavaScript to create a slideshow on the homepage of my site. The problem I'm having is that the image will not center to the page, despite my best efforts. I can get it centered if I set the image child element like so:
#slider img {
left: 218px;}
but that doesn't center for different window sizes. I'm using fairly large images, but they can always be resized later. I used placeholders for the fiddle. How can you fix this?
Fiddle

U can easily center image by set up:
#slider img {
display: block;
margin: 0 auto;
width: 100%; // or your own width
}

Your images inside #slider have a position: absolute. This negates the scope of the container and the image is no longer relatively positioned inside the container div#slider.
Use margin: auto and display: block without absolute positioning.
Example: https://jsfiddle.net/sukritchhabra/smndp65m/

You could also do margin:auto.

Try
<div align='center'>Hello world</div>

detect if div is ontop other elements (visible in the viewport) with overflow:hidden

I'm adding a div at the bottom of a video inside an iframe.
Generally I append the new Div to the iframe's parent and it's fine.
BUT, if some parent divs have some css like width:100% and overflow:hidden, it doesn't work and the div remains behind the iframe's video.
<style>
.defaultPhoto{
width: 434px;
height: 278px;
overflow: hidden;
}
.defaultPhoto .photo{
width: 100%;
height: 100%;
overflow: hidden;
}
.wrapper{ background: red; }
</style>
<div class="defaultPhoto">
<div class="photo">
<iframe width="434" height="278" src="https://www.youtube.com/embed/2xbgl7OJrg4"></iframe>
<div class="wrapper" id="Div0" >test</div>
</div>
</div>
This works:
http://jsfiddle.net/kav7b3os/87/
This NO:
http://jsfiddle.net/kav7b3os/70/
So, how can I be sure to put my new created div at the bottom of an iframe video and be sure it is visible in the viewport?
I used also the elementFromPoint to detect if the div is visible, with no luck.

You have a height on your defaultPhoto div of 278px and then inside this you have set the height of your photo div to 100% (i.e. 278px) then inside this, you set the height of your iFrame to 278px. So, the iFrame takes up the full height of the parent container - the full 100%. Therefore, if you don't allow overflow your new wrapper div can't be seen. The way to fix this, if you don't want to allow overflow is to increase the size of the defaultPhoto div. Depending on your requirements, you could do this with javascript at the point you add your new div.
Check out this fiddle which shows your layout with a larger defaultPhoto:
http://jsfiddle.net/fn5zancp/2/
.defaultPhoto{
width: 434px;
height: 318px;
overflow: hidden;
}

Displaying Iframe on top of image?

Problem
I want to display an iframe within an image, but have no idea how to do this. Is there a better way than purely positioning with css?
I have a html page that displays other websites, and I would like to display an iframe within the screen of the image below on that page.

I made the screen a background image and then used a absolute positioned iframe.
i added a YouTube iframe to the screen in the demo.
Demo
.outer {
background-image: url('http://i.stack.imgur.com/6hnLq.png');
width:420px;
height:365px;
}
.inner {
position: relative;
background-color:;
left: 67px;
top: 109px;
width:277px;
height:150px;
}
............
<div class="outer"><iframe class="inner"></iframe>
you could even use a 2 or 3px border-radius to match the image.

Basically you want to place the iframe in a container that is positioned absolutely. Then place it directly over the image. Here is an example. Please note the iframe link will not work inside of the fiddle due to JS Same origin issues.
http://jsfiddle.net/weyg1opk/
<div class="image_container">
<img src="http://i.stack.imgur.com/6hnLq.png" class="preview_image">
<div class="container">
<iframe class="iframe_example" name="iframe_example">You do not have iframes enabled</iframe>
</div>
.container {
position: relative;
top: 110px;
left: 68px
}
.image_container {
width: 421px;
height: 365px;
}
.preview_image{
position: absolute;
}
.iframe_example {
width: 270px;
height: 155px;
z-index: 1000;
}

maybe you can:
Crop the image into pieces and replace the screen image with a iframe without border and fixed size
or
Use the monitor as background, and use a div with absolute position to exact match the screen size and position.

How to force overflow:hidden for layered images within a div?

I am having two IMGs on top of each other within a DIV like so:
<div class="container">
<img src="somepic.jpg" class="layer" />
<img src="otherpic.jpg" class="layer" />
</div>
With the following style:
DIV.container {
width: 400px;
height: 400px;
overflow: hidden;
z-index: 999;
display: block;
}
IMG.layer {
position: absolute;
}
Afterwards, I am casting some Dojo effects onto the images to fade one over the other and to scale them up, so that they will become larger than the DIV, which works all fine. But although I set overflow to hidden, I am seeing the entire images overlapping all the time.
So, how can I force the images to hide their overflow?

set the container to
position:relative;
That should make it work :)

Container should have css property position set to relative.
If it has this property set, the absolute positioned element inside the container will count position relatively from the container position and so it will not overflow it.
Nice day,
JB

Best way to size an element to the size of another element

I am using an old CSS trick to get a semi-transparent background for some content, without the content appearing semi-transparent. Here is the HMTL:
<div id="frame">
<div id="opacityFrame">
</div>
<div id="contentFrame">
<div>
<!-- Main Site Content Here -->
</div>
</div>
</div>
Here is the corresponding CSS:
#frame
{
width: 90%;
margin: auto;
position: relative;
z-index: 0;
}
#opacityFrame
{
background: #00ff00;
opacity: .15;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#contentFrame
{
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
My problem is that because #frame is position: relative, it's height does not dynamically expand with its content. Both #opacityFrame and #contentFrame are set to 100% height and width and they appropriately expand to fill #frame which is great. The issue is that I need #frame's height to grow with the contents of the child DIV of #contentFrame because that DIV's height dynamically adjusts with the content placed in it.
I ended up having to create a jQuery function:
function resizeFrame()
{
$('#frame').height($('#contentFrame > div').height());
}
NOTE: The reason there is a child DIV of #contentFrame is because #contentFrame's height always reads as zero for some weird reason. I'm assuming it has to do with its position being absolute.
This code works great and accurately resizes #frame's height to the height of the child DIV of #contentFrame. However, I do a lot of ajax that changes the content within that DIV. One solution would be to call resizeFrame() with EVERY ajax event but it just seems so tedious. Is there an event or something I can tie to that would execute this function without my explicitly having to call it? I tried the following events but they didn't seem to work; maybe I did them wrong.
$('#subFrame > div').resize()
$('#subFrame > div').change()
Neither of these seemed to fire when the contents of the child DIV were modified. Maybe I'm going about this the wrong way? I do not want to use transparent images for the background.

Try taking position: absolute off of the contentFrame but leaving it on the opacityFrame. That should cause it's parent to resize, and the opacityFrame to still overlay everything.

do you have to use opacity? If it's a solid color, consider RGBA or if it's not solid, consider a semi-transparent PNG. That way you can nest them.