Develop Reference

How calculate div background image size on resize window

i have some problem which i can't figure out.
so
i have a div with background image.
<div class="a"></div>
and i want to make clickable some point of this background image. It's okey i can make this with adding to some div width z-index and make it clickable and positioning this with position:absolute e.g,
<div class="b">
<a class="clickablePoint" href="#"></a>
</div>
but how i can keep this clickable point on the same way when i resize the window if my background-image must be a responsive so background-size:100% auto.
maybe have some method to calculate background image height realtime when resize window ? or any other method? :(

Here's a minimal viable solution showing how to absolutely-position an element based on a full-width (background-size: 100% auto) background.
I'm setting the font-size of the element to 1vw (1/100th of the width of the viewport) and then calculating its left/top position and width/height size in em units, which become equivalent to a multiple of that 1vw.
As such, resizing this demo to any size will keep the box in the same place around the cat's nose.
body {
background: url('https://i.imgur.com/sVz3YRx.jpg');
background-size: 100% auto;
height: 50vw; /* for stack snippet height */
position: relative;
margin: 0;
}
.nose {
border: 1px solid yellow; /* for demo */
position: absolute;
font-size: 1vw;
top: 27em;
left: 59em;
width: 6em;
height: 5em;
}
<a class="nose"></a>

CSS div sizing relative to viewport borders?

I have a div containing some text and a YouTube video. I used CSS to give it a grey background. I also set the position to 4.4 em from the top, 1% from the left, and made it 98% wide. I want the bottom of the div to be 4.4 em from the bottom, no matter the size or zoom of the browser. How can I do this? Can I use CSS, or is Javascript required? If you give an answer containing Javascript code, please don’t use jQuery.
div {
position: absolute;
left: 1%;
width: 98%;
top: 4.4em;
background: grey;
}
body {
width: 100%;
color: white;
}
EDIT: Here is my HTML:
<div>
<h1>A Heading</h1>
YOUTUBE VIDEO HERE
</div>

You could either use a border that is transparent to simluate the 4.4em gap at the bottom, or you could use the "calc()" css function https://www.w3schools.com/cssref/func_calc.asp
Example:
height: calc(100vh - 4.4em);

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.

Webpage displays incorrectly on different resolutions due to incorrect css

I'm having some issues with a webpage of mine, mainly on mobile devices but it also affects desktop devices too, I would be willing to award a bounty (as and when stackoverflow allows me) to whomever can help with these problems
HTML: http://pastebin.com/raw.php?i=bbFsMcwT
CSS: http://pastebin.com/raw.php?i=SGMwt3cs
JSFiddle: http://jsfiddle.net/D8SJD/
Issue 1 - Left/Right Scroll Image Buttons
Currently my left and right scroll image buttons are done in html using onmouseover and onmouseout I want to be able to convert them into css based "buttons"
Issue 2 - Dynamic Resolution(s)
The header and footers aren't dynamic with different resolutions for example, I created the page designed on a 1680x1050 monitor which looks like: Desktop 1680x1050 however making the window smaller it looks like: Desktop Small Window
On a Nexus 4 mobile phone on default zoom it looks like: Mobile Original Zoom
On a Nexus 4 mobile phone zoomed out to as far as it can go it looks like: Mobile Max Distance
On a Nexus 4 zoomed out and scrolled to the bottom (so that the browsers URL bar disappears) it looks like: Zoomed out without URL bar (the footer of the actual webpage vanishes)
On a Nexus 4 zoomed out and scrolled just off from the bottom (so that the browsers URL bar is visible) it looks like: Zoomed out with URL bar (the footer returns)
.
The placeholder image and arrows are supposed to be in the center of the footer and headers and should shrink in accordance to the screen resolution.
Mobile device default zoom (if possible) needs to be decreased so they can see more and on getting smaller (if possible) if it gets close to Mobile Original Zoom then the Up to Top, Down to Key, placeholder logos should vanish...
Please see images at bottom of this post
For the mobile devices I tried things like below just for testing but none of them worked...
#media (max-width: 640px) {
#header > a img {
display: none;
}
}
EDIT 14/11/2013 # 01:58GMT
On a 1920x1080 screen it looks kind of okay although there is a big gap between the text and the placeholder image as seen below:
On a 1680x1050 screen it looks roughly how it should take note of where "Semi" is located and compare to the 1920x1080 image from above.
On a 600x600 screen it appears as follows, which as you can see there is a big gap between the placeholder and the left arrow but on the right arrow there is no gap and infact it overflows, as for the text it too is too far to the right.

Type
#media screen and (max-width:640px) {
/* Your specific styles go here */
}
and dont forget to add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Hope that helps :-)

I see a border around your links, remove from your links:
a{
border:none ;
}
for first issue you can do it with CSS, just remove <img> tag inside <a> tag like this:
<div class="footleft">
<a class="def" href="javascript: void(0);">
</a>
</div>
create image buttons like this:
then set background to <a> tag like this:
#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}
#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}
#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}
second issue, I think if you remove position:absolute; from #header .headimage and #footer .footimage it will be okay.
and if your want to centerize headmid and footmid and footmidtwo you have two choices,
First: set fixed width to them and use CSS like this:
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}
Second: if you need to have dynamic width you can use this CSS and JQuery:
CSS:
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}
JQuery:
var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();
$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));
jsFiddle is here

Okay I've tried to filter out all of the irrelevant code for this solution.
See the solution here.
Most of the time, it is best to use relative positioning to fit elements absolutely inside of another element. In your case, with three different strings to fit in a 300x80 window, it's a bit crowded. I tried to place things in a logical position to demonstrate.
By placing a container in the footimage div with relative position, you can then place every element inside the footimage div absolutely relavtive to the footimage div, rather than to the entire page.
For example, what you had:
#footer .footmid
{
position: absolute;
top: 50%;
left: 50%;
}
Will place the div of class footmid at a position 50% of the page height from the top of the page and 50% of the page width from the left of the page:
This will work if every user that visits your page has the exact same resolution, however it causes problems when the don't. Obviously, this isn't a perfect world, so different resolutions will visit your page.
What you can do is use relative positioning!
Basically I tell CSS that instead of moving 50% from the top and left of the window, move 50% from the top and left of the nearest parent element with relative positioning:
You can modify the bottom, left, and right attributes of my fiddle to move the footmid elements within the relative element .footimageContainer that is the same size and in the same position as the .footimage.
As far as your arrows, I wasn't quite sure what you were trying to accomplish; your question was pretty vague, so I simply made them fade out slightly when you mouseover them. Any mouseover/out events can be handled using CSS psuedo-elements.
.element //Native and mouseout
{}
.element:hover //onmouseover
{}
Remember that if you use pseudo-elements, you have to specify the attribute that will be changing in both the native and :hover rules.
.element
{color:red;}
.element
{color:black;}
If you have any additional questions on the arrows, let me know and I'll revise my answer.

http://jsfiddle.net/D8SJD/4/
Instead of using absolute positioning, you can just take advantage of the text-align center and images and text will center automatically.
If you want offset from center, try position:relative, and top, left, right etc and it will move relative to it's central position.
Elements that are display:inline; or display:inline-block; will align according to parents text-align property, in this case text-align:center.
#footer .footimage {
display:inline;
position:relative;
top:-10px;
}
#footer .footmid {
top: 50%;
width:100%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
width:100%;
position: absolute;
font-size: 15px;
}

As per issue 2, i could be wrong but when targeting the image through the structure of the site
i.e.
headImg a img{...}
The style wouldn't work. But if you add classes to the images the style will work; the case could be that there are some unclosed divs or elements messing with the architecture.
<div class="headimage">
<img class="placeholder" src="http://placehold.it/300x80"/>
</div>
#media screen and (max-width: 640px) {
.placeholder {
display: none;
}
}
JsFiddle here - http://jsfiddle.net/Q5bEb/

Visibility of stacked HTML popups

I'm developing a jQuery Backbone.js web app.
I have a table with table entries. The table has a white background.
If the user selects a table entry, a modal popup is shown. To show the user that the popup is now in modal mode, I used to have the jQuery UI diagonal stripes (ui-widget-overlay).
But I changed to an alternative. Those stripes were too "striking", "obtrusive" for me. I now change the opacity of the table to 0.5. I like this more.
The problem now is that I have popups in the popup window. And if I also change the opacity of the first popup to show the user that only the second popup is working now, the table shines through the first popup.
Is there any possibility, any alternative way to have a popup window (a div) "dim", "grey out" to half of its appearance without getting transparent?

I would add another div on top of the div that has the same dimensions but has grey background color with opacity 0.75. This should work pretty fine.
CSS
.inner {
position: absolute;
}
.fade {
background: grey;
opacity: 0.75;
}
HTML
<div class="outer">
<div class="inner">content</div>
<div class="inner fade"></div>
</div>​
This way you are pretty safe when it comes to cross-browser references. Also you can control the fade by adding an "id" attribute to the fade class and make it go away. This way, you can also make div inactive, as they div inner fade is on top of it.

Try with hsla (look here).
<style>
#el1 {
background: red;
width: 700px;
height: 700px;
}
#el2 {
background-color: hsla(190, 30%, 94%, 0.6);
width: 500px;
height: 500px;
}
#el3 {
background: green;
width: 300px;
height: 300px;
}
</style>
<div id="el1">
<div id="el2">
<div id="el3">
</div>
</div>
</div>
In my code, el1 is the holder and not transparent at all. Then, el2 as first child uses hsla for transparency. The contained el3 is not transparent again and this works.

You could lay a glass pane on top of your page and set the z-index appropriately so that your 2nd popup lies on top of it and everything else is hidden under it:
#pane {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
opacity:0.5;
z-index: 999;
}
Assure that your 2nd popup has a z-index higher than the pane and you're fine.