I am looking to create an overlay effect (modal) type effect on my website, I have one working already that is a fixed width and height, but I want it to fill 85% of the available screen space?
How can I achieve this?
My old code looks like this,
$('#overlay').fadeIn('fast');
$('#lightbox').css({
position:'fixed',
left: ($(window).width() - $('#lightbox').outerWidth())/2,
top: ($(window).height() - $('#lightbox').outerHeight())/2
});
You want the overlay to fill 85% of the screen space? Then you need to calculate the required width/height & x/y coordinates for that.
var targetProcent = 85;
var targetWidth = $(window).width() * (targetProcent / 100);
var targetHeight = $(window).height() * (targetProcent / 100);
var targetX = ($(window).width() - targetWidth) / 2;
var targetY = ($(window).height() - targetHeight) / 2;
$('#overlay').width(targetWidth);
$('#overlay').height(targetHeight);
$('#overlay').css({
"position": "absolute",
"top": targetY+"px",
"left": targetX+"px"
});
Alot of the variable assignments could probably be cut out, but left them in for clarity.
Related
Is there a way of calculating / estimating what the image size would be depending on the screen resolution before the image has been rendered? I need more logical help rather than code to be honest. What do I need to calculate?
Image size: 800px * 450px
Window size: 424px * 728px
The image works out to be 424px * 239px. I need to calculate this in code so I can adjust positions of other elements following after (absolute / fixed elements).
What I have done so far is;
var ratio1 = (this.retrievedNewsArticle.featuredImage.width / this.retrievedNewsArticle.featuredImage.height);
var ratio2 = ($(window).innerWidth() / this.retrievedNewsArticle.featuredImage.width);
// Ratio 1 = 424
// Ratio 2 = 0.53
So what's next?
It sounds like you already know the image's size, and it sounds like you want the image to be the full width of the window, and just need to know how to determine the height of the image. If so, the target height is the image height times the windows width divided by the image width:
var renderedWidth = imageWidth;
var renderedHeight = imageHeight * (windowWidth / imageWidth);
That maintains the aspect ratio.
That assumes the image is always wider than the screen. Let's remove that assumption.
If you want the image to stretch to fill:
var renderedWidth, renderedHeight;
if (windowWidth >= imageWidth) {
renderedWidth = imageWidth * (windowWidth / imageWidth);
} else {
renderedWidth = imageWidth;
}
renderedHeight = imageHeight * (windowWidth / renderedWidth);
If you don't want the image to stretch to fill:
var renderedWidth, renderedHeight;
if (windowWidth >= imageWidth) {
renderedWidth = imageWidth;
renderedHeight = imageHeight;
} else {
renderedWidth = imageWidth;
renderedHeight = imageHeight * (windowWidth / imageWidth);
}
I want to get the screen and modify the css styles of my box.
Thats my code
if ($('.content').height() > $(window).height() - 100) {
$('.content').css("max-height", $(window).height() - 100);
}
Now I want to set the max height of the .content box lower than the height of my screen size.
If my content box is higher than my screen size, the css should set de max height and change the overflow to auto.
Looks like you could do this -
var content = $(".content");
// Cache the height in variables, no need to access DOM again and again
var screenHeight = $(window).height();
var contentHeight = content.height();
if(contentHeight>windowHeight-100){
content.css("overflow","auto"); // Note - this will change it for the current instance of the page and NOT in your CSS file
content.css("max-height",(windowHeight-100) + "px");
}
You can also combine the above two css properties in one single statement (written separately for explanation) -
content.css({"max-height":(windowHeight-100)+"px","overflow":"auto"});
I would suggest you to use the max height value along with px.
if ( $('.content').height() > ($(window).height() - 100) ) {
$('.content').css("max-height", ( $(window).height() - 100 ) + "px" )
.css("overflow","auto");
}
This would resolve you issue.
Do this -
var maxHeight = $(window).height() - 100;
if ($('.content').height() > maxHeight) {
$('.content').css({"max-height": maxHeight, overflow: "auto"});
}
Use unit "px"
$('.content').css("max-height", ($(window).height() - 100)+"px");
If you go to the slideshow I am working on here, you can see that the image resizes and moves correctly if you resize the browser window.
...unless you make the browser window's width smaller than a certain amount (i can't tell what defines that amount) and then it stretches the image instead of scaling it. How can I fix this?
Here is my resize code:
winWidth = $(window).width();
winHeight = $(window).height();
ratio = winWidth/winHeight;
if(ratio > imgRatio){
$('#curImg img').css({width:winWidth});
imgWidth = winWidth;
imgHeight = $('#curImg img').height();
$("#curImg img").css({top: (-1*Math.round((imgHeight-winHeight)/2)) + "px"});
$("#curImg").css({height: winHeight + "px"});
}else{
$('#curImg img').css({height:winHeight});
imgHeight = winHeight;
imgWidth = $('#curImg img').width();
$("#curImg img").css({left: (-1*Math.round((imgWidth-winWidth)/2)) + "px"});
$("#curImg").css({width: winWidth + "px"});
}
You could also check out this jQuery plugin:
http://srobbin.com/jquery-plugins/backstretch/
Or CSS tricks which looks at multiple solutions:
http://css-tricks.com/perfect-full-page-background-image/
You should take a look to tha background-size properties, especially at the cover values
Something I wrote that works:
//oWidth - container width
//oHeight - container height
//iWidth = image width
//iHeight = image height
iRatio = iWidth/iHeight;
wRatio = oWidth/oHeight;
if(iRatio<wRatio){
imageWidth = oWidth;
imageHeight = Math.ceil(iHeight*(oWidth/iWidth));
}
else{
imageHeight = oHeight;
imageWidth = Math.ceil(iWidth*(oHeight/iHeight));
}
$('#backgroundResizeImage').css({
'height': imageHeight,
'width': imageWidth
});
Hope this helps!
I rewrote your example a bit to make a self-contained demonstration.
Two notes unrelated to your question.
Make sure to cache any of your jQuery objects. You don't want to fetch items repeatedly, as that comes with an unnecessary performance cost.
My example shows this happening in the resize event for the window - I'm not sure how you had yours set up. For production, it's very important to throttle events bound to things like the window resize event, since they can be fired as fast as a browser can manage, which can lead to bad consequences. See this excellent article by John Resig on a time this bit Twitter in the ass.
The biggest relevant change is that I altered the way it's setting the heights and widths of images depending on how their ratio compares to the window. I think this way is a little clearer, but that's subjective. But it does work!
http://jsfiddle.net/L4k3s/2/
var $window = $(window),
$img = $('img'),
imgRatio = $img.width() / $img.height();
$window.on('resize', function (event) {
var imgWidth = $img.width(),
imgHeight = $img.height(),
winWidth = $window.width(),
winHeight = $window.height(),
ratio = winWidth / winHeight;
// The image is wider than the window
if (ratio < imgRatio) {
$img.width(winWidth);
$img.height(winWidth / imgRatio);
$img.css({
left: 0,
top: (-1 * Math.round((imgHeight - winHeight) / 2)) + "px"
});
// The image is taller than the window
} else {
$img.width(winHeight * imgRatio);
$img.height(winHeight);
$img.css({
left: (-1 * Math.round((imgWidth - winWidth) / 2)) + "px",
top: 0
});
}
});
I have an element that I need to position horizontally and vertically central on screen, I don't doing this with jQuery, but how would I go about it, currently my code looks like this,
$("dd a, dt a, .job_listings a, #similar_jobs a").live("click", function(){
var self = $(this);
$("#overlay").fadeIn('slow');
var targetProcent = 68;
var targetWidth = $(window).width() * (targetProcent / 100);
var targetHeight = $(window).height() * (targetProcent / 100);
var targetX = ($(window).width() - 827) / 2;
var targetY = 75;
$('#lightbox').load(self.attr("href"));
//usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint)
$('#lightbox').css({
"position": "absolute",
"top": $(window)+75+"px",
"left": targetX+"px"
}).fadeIn('slow');
//$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
#udders; may be you can define position :absolute to you element
css
div{
width:300px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
}
give margin half of the element height & width
check thess links for more:
Centering things Vertically (and Horizontally)
Centering page content vertically
I'm trying to work out how to enlarge all elements on a page, but keep the centre of enlargement in the centre of the window.
On this page, once the image reaches the top or the left side of the window the centre of enlargement changes. It also changes when you move the image. (exactly what you would expect)
I'm thinking I'd need to take a completely different approach to achieve what I want. But I'm not sure what that approach is..
Any ideas?
Well, here's my take.
Only thing is that I ditched the containers you were using. Is that cheating? Seems like they were only there to get the image centered. No need.
This works as expected with no side effects.
Here's a working demo you can test:
http://jsfiddle.net/YFPRB/1/
(You need to click on the pane with the baboon first.)
HTML
<body>
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />
</body>
CSS
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
jQuery
EDIT: Thanks to #stagas for the reminder to clean up redundancies.
var $img = $('img'); // Cache the image. Better for performance.
$img.draggable();
$img.css({left: ($('body').width() / 2) - ($img.width() / 2)})
.css({top: ($('body').height() / 2) - ($img.height() / 2)})
$(document).keydown(function(event) {
if (event.keyCode == 38) {
var adjustment = 1.25;
} else if (event.keyCode == 40) {
var adjustment = 0.8;
} else {
return;
}
var offset = $img.offset();
var width = $img.width();
var height = $img.height();
var newWidth = width * adjustment;
var newHeight = height * adjustment;
var diffWidth = newWidth - width;
var diffHeight = newHeight - height;
var hcenter = $('body').width() / 2;
var vcenter = $('body').height() / 2;
var leftPercent = (hcenter - offset.left) / width;
var topPercent = (vcenter - offset.top) / height;
$img.offset({top: offset.top - (diffHeight * topPercent), left: offset.left - (diffWidth * leftPercent)});
$img.width(newWidth).height(newHeight);
});
This is what I came up, it works as you say except the image will always go to the center after zooming in or out:
$('document').ready(function() {
zoomimg=$('#zoomimg'); // we store this in a variable since we don't need to traverse the DOM every time -- this is faster
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height(); // this is to work with Opera
zoomimg.css({'position': 'absolute', 'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)}).draggable();
$(document).keydown(function(event) {
event = event || window.event;
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height(); // this is to work with Opera
if (event.keyCode == 38) {
width = zoomimg.width();
height = zoomimg.height();
zoomimg.width(width*1.2).height(height*1.2);
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
zoomimg.css({'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)});
} else if (event.keyCode == 40) {
width = zoomimg.width();
height = zoomimg.height();
zoomimg.width(width*0.8).height(height*0.8);
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
zoomimg.css({'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)});
} else {
return
}
});
});
You should put an ID 'zoomimg' on the tag for it to work, and overflow:hidden on the #container . Also ditch that display:table and display:table-cell they're useless now that we center with Javascript. Also, pressing the down arrow key will cause the container to scroll down, so you should use other keys, as the arrows are reserved by the browser for scrolling the viewport.