We Keep Coding

JS calculate current center of screen

I searched a lot but couldn't find the answer I want. I have a JS script which shows an image when a fixed element is hovered. However I would like to always have the image at the center of the screen, not matter where the user scrolls. How can I reach that?
My JS function:
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"width="400" style="display:block;position:absolute;top: 0; left: 0; bottom: 0; right: 0;margin: auto;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change img to span using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
JSFiddle: https://jsfiddle.net/rbmd6a39/
I can get offset from the top of page using
window.pageYOffset;
But I don't know where to put that value to have it in the center.

You could give that image styles that would make it fixed in the center of your screen. No need for JS there.
Now also works on very large images with max-width, max-height and object-fit: contain!
.always-centered {
display: block;
position: fixed;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
transform: translate(-50%, -50%);
z-index: 99;
}

You don't actually need to use JavaScript for centering it. You could use position: fixed and center using left: 50%; transform: translateX(-50%);in CSS, which would be less demanding of the client computer.
Using JS, though, it'd be pretty much the same thing: the image would need to be fixedly positioned and you'd define left as half of the viewport minus half of your image width.
I suggest using CSS and classes if possible, since this is less convoluted and all calculations will be dealt be the browser itself.

Styles apply just to first two slides

I 'm trying to do kind of slideshow on the background using two img tags. I have a couple of random images, so I have a javascript function to get a random name. But the main problem is: when I zoom or resize window first two slides crop well and display without any problem, but after that every slide is changing if I try to resize the window or zoom in-out.
Here you can see that bug: cullycross.github.io(nevermind about big images, im gonna resize them)
Here is my code:
function randomBackground () {
var active = $('#background .active');
var next = ($('#background .active').next().length > 0) ? $('#background .active').next() : $('#background img:first');
next.attr('src', getRandomName());
var imgHeight = next.height();
var windowHeight = $(window).height();
var diff = imgHeight - windowHeight;
if(diff > 0) {
next.css('top', -diff*0.6);
}
next.css('z-index', 2);
active.fadeOut(1500, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
}
window.onload = function() {
$('#background .active').attr('src', getRandomName());
$('#background').fadeIn(1500);
setInterval(randomBackground, 5000)
}
Here is css:
#background {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
#background img {
position: absolute;
z-index: 1;
float: left;
bottom: 0px;
left: 0px;
top: 0px;
height: auto;
width: 100%;
}
#background img.active {
z-index: 3;
}
Here is part of html:
<div id="background">
<img id="current-image" class="active" />
<img id="next-image" />
</div>

It seem to affect only the images loaded after first run.
Try adding images directly into html, using a
<ul><li><img ...></li></ul>
structure, and get the image from there.

You should decrease the fadeout delay. The problem is caused from the browser since the delay is big it can't handle both fadeout and zoom in/out
active.fadeOut(300, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
And try to use light size pictures, with the same aspect ratio

I didn't found an answer, but I found a library, that makes possible that thing, that I want. Thx to https://github.com/srobbin/jquery-backstretch

Zoom on a picture on resizing

I'm developing a website where I have to display a picture (not a problem).
But, I have to display it as this link: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
So, On resizing, I have to zoom on the picture to never scale it.
Does some on know how to do it?
Here is what I have:
html:
<div id="container_images">
<ul>
<li><img src="images/desktop/myimage.jpg" alt="An awesome image"></li>
</ul>
</div>
CSS:
#container_images{
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -999;
height: 100%;
width: 100%;
}
#container_images li{
display: block;
list-style: none;
z-index: -30;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:1;
}
#container_images li img{
width: 100%;
height: 100%;
display: block;
}

If I understood correctly you don't need the browser's inbuilt zooming (ctrl+), you just want to make the picture fill in the whole window of the browser when the window is resized.
You will need 2 things for that.
First, you need some javascript to execute on window resize event, then you will need some simple maths to calculate the center of the picture taking into account the new window size and set left/top margin of the picture to new values.
You can easily do that with jQuery:
$(window).resize(function() {
var h = $(window).height();
var w = $(window).width();
var pic = $('#container_images img');
var pic_width = pic.width(), pic_height = pic.height();
$(pic).css('margin-left': (w - pic_width)/2).css('margin-top': (h - pic_height)/2);
});
One thing to remember is that if your picture's width/height is already changed from its original size, you will get that new size from width() and height() functions.
So you either should make sure the original is not touched, or use one of the solution out there for grabbing the original picture size (e.g. How do I get actual image width and height using jQuery?).
Also the above snippet is to just get you started, you should grab the picture and its parameters in some init function and only recalculate/modify css on resize event.

How to get this kind of web page effect

The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.

Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.

You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal

This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.

It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;

You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals

How to automatically scale down a 100% div without showing browser vertical scrollbars?

I have a table with three rows. I have 1 main #container div (height 100%) and inside it is a table with 3 rows. The first and last row have fixed size content. In the second row is a #content div with 100% height and overflow:auto. (actually the table has a lot more rows and the page has more divs, but for the sake of clarity i scalled it down for this question).
If there is more content in #content than fits, a vertical scrollbar should appear next to that div's content. However, a vertical scrollbar appears at the browser window itself. When i set the #content div to a fixed size however, that vertical scrollbar does appear in the correct place.
I must be doing something wrong, or maybe misinterpreting something :) Any ideas? Maybe there's jquery/javascript out there that can monitor the page and when loading/resizing the browser, scales down that particular div?
EDIT: I just created a small example: http://wierdaonline.com/softest.html
In the ideal situation, the whole thing (table) should always be visible in the browser window, without any window scrollbar other than in the #content div.

It's much easier to create a fixed header and footer without using tables and using fixed position:
#header
{
position: fixed;
top: 0;
height: 20px;
}
#middle
{
position: fixed;
top: 20px;
bottom: 20px;
overflow: auto;
}
#footer
{
position: fixed;
bottom: 0;
height: 20px;
}

Set overflow: scroll in the div. You shouldn't need Javascript for this.

The #container 100% is 100% of the page height which can be more than the window height. Setting html and body height to 100% (=100% of the window) could help, depending on what you are trying to achieve.

Edit: these changes should work for the height, a similar thing can be done with the width if you so desire.
javascript:
window.onresize = function() {
var tehdiv = document.getElementById('content2');
if($(window).height() < 100) { tehdiv.height = 50; }
else if($(window).height() > 2000) { tehdiv.height = '100%'; }
else { tehdiv.height = ($(window).height()/2);}
};
the content div's table:
<td valign='top' id='content2'>
Would something like this work?
window.onresize = function() {
var minh = 50;
var minw = 50;
var tehh = (window.height/2);
var tehw = (window.width/2);
var tehdiv = document.getElementById('yourdiv');
tehdiv.height = (tehh > minh)? tehh : minh;
tehdiv.width = (tehw > minw)? tehw : minw;
};
That would make it scale to half the window size, as long as it can be bigger whan 50. You could also change the min to max and make it perform tehdiv.height = 100% at that point.

Well since you have no choice but to use tables, I modified the HTML, but actually left the CSS the same from the demo I posted in a comment above, check it out here - the only problem I've found is in IE7 where the header and footer table cell doesn't go 100% across:
CSS
#header, #footer {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
border: #000 1px solid;
margin: 5px;
}
#footer {
top: auto;
bottom: 0;
}
#content {
position: absolute;
top: 25px;
left: 0;
bottom: 25px;
right: 0;
overflow-y: auto;
background: #ddd;
margin: 5px;
}
HTML
<table id="page">
<thead>
<tr><td id="header">Header</td></tr>
</thead>
<tfoot>
<tr><td id="footer">Footer</td></tr>
</tfoot>
<tbody>
<tr><td><div id="content">Content goes here</div></td></tr>
</tbody>
</table>
It's still better to not use tables, if you get around to switching the HTML around.