Okay, so I've got an image in the body of my webpage.
If the user's window height is less than 800px (the height of the image), the image should be squashed into it (so that the user can see the whole height of the image).
If, on the other hand, the window height is greater than 800px, the image should be vertically centred.
Any tippers?
Thanks.
using jQuery you could do something like:
var win = $(window);
win.load(function() {
var image = $("#img");
if (image.height() > win.height()) {
image.height(win.height());
} else {
// assuming your image is positioned absolute
// you should measure its dimensions and then position it
// depends on the ways it should be centered... in the current window or the whole document?
}
});
win.resize(function() { /* do something */ });
should do the trick to just resize the image to the height of the window if the image is bigger the selector needs to be adapted for your image element of course...
EDIT: added resize callback
Related
I have a slideshow on my home page that uses images in a landscape orientation. However, when the browser is resized, the images eventually get clipped. To prevent this, I want to swap the landscape-oriented images to square ones when the browser reaches a certain pixel width. But it must switch back when expanded again. How would I go about this?
jQuery provides this resize event, And you can use it like,
$(function() {
$(window).resize(function() {
var width = $(window).width();
var height = $(window).height();
$('yourimage').attr('src', toAnotherSource);
// or you can do anything with the image here.
});
});
I try to put a image in a full screen, and also the image can be zoomable.
I use for the zoom this jquery plugin http://www.jacklmoore.com/wheelzoom/
and for the full full screen, all options described here
Full-screen responsive background image
In my tests, is possible make zoom into the image, but if resize the window, the image not resize and appear spaces between the borders.
I do not know if it's better to put the image in a div, and make this div fullscreen.
If you provide us the fiddle we could be able to do something else but one option seems to be changing the image size on windows resize:
$(window).resize(function() {
//in order to call the functions only when the resize is finished
//http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
clearTimeout(resizeId);
resizeId = setTimeout(doneResizing, 500);
});
function doneResizing(){
var windowsWidtdh = $(window).width();
var windowsHeight = $(window).height();
//setting your image dimensions
$('#yourImage').css('height', windowsHeight );
$('#yourImage').css('width', windowsWidtdh );
}
I'm trying to make a fluid layout for my site but the problem is that if a window is re-sized to be small before the page loads and then they maximize their window, the page is a small size, my question here is how would i get the width and height of a window at its full size even if the page is small.
$(document).ready(function()
{
var Height = $(document).height();
var Width = $(document).width();
});
This gives me the window height and width, i want the maximized size even if the window is small.
Sounds like what you actually need to do is listen to the window's resize event and rearrange content as needed.
Alternatively, do it the modern way and use CSS Media Queries:
#media all and (max-width:480px) {
/* styles for when the window is less than or equal to 480px wide */
}
var Height = $("html").height();
var Width = $("html").width();
You could also try body, and it may even depend on the browser. It is possible for some specially positioned elements to extend past the body, I believe.
Here's an example of how to listen for window resize events:
HTML:
<body>
<p>Resize result window to see updated dimensions</p>
Dimensions: <div id="debug"></div>
</body>
JavaScript:
function updateSize() {
var $win = $(window);
$('#debug').html($win.height() + ' x ' + $win.width());
}
$(window).resize(updateSize); // listen for window resize
$(updateSize); // call on page load to get initial size
Try it on jsFiddle:
http://jsfiddle.net/TKAFc/
If you need the screen size, you should use screen.width and screen.height.
You can subtract the "window borders" so you will have the useful area:
screen.width - (window.outerWidth - window.innerWidth)
And the same for the height.
I've got a page that has a variety of text and images placed on the page. When the users resizes their window (or users that simply have different resolutions), the design needs to have everything scale proportionally. So I created this jQuery function that triggers on resize (or when page loads) and I look at every element I've put on that page so far and resize it based on the aspect ratio.
Like this:
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
As I add more and more to the page it is extremely tedious. Every padding, margin, font-size, width, height, etc. needs to be resized based on that ratio.
Is there a jQuery plug-in or some other suggestion that would help with this?
Thank you.
Think of it like this, when a user resizes the window, JQuery runs a function.
$(window).resize(function()
{
var Width = $(document).width();
var Height = $(document).height();
$('body').css({"height" : Height, "width" : Width});
}
Or The easy way in CSS,
body
{
width:100%;
height:100%;
}
I wanted to do something similar to this.
In this case when the user click in the image, this images is showed with 100% of the browser height, and the user can go to the next/previous image. When the user clicks again the image is showed in a bigger size(may be in the real size) and the user can go up and down in the image, but with out scroll, just moving the mouse.
What I want to do is when the user click the first time in the image go right to the last step: The biggest image with up and down synchronized with the mouse movement, and the possibility to go to the next image. In other words a mix with the features of the first and the second step of the original case.
Where I can see a tutorial, or a demo?? or how can I do the this??
Thanks
Basically, there are three parts to what you want to do.
Clicking on the image will show the image with respect to browser height
You can go to the next image while you are in this mode
Click on that image again will go into a supersize mode where your mouse position dictates what part of the image you are looking at
I'm not going to write a whole fiddle to demonstrate this because it's a decent amount of work but I can tell you the basic ideas.
With #1, when you click on the image, you will create a new div with a z-index of some high number (like 9999). The position would be fixed, and you will create
$(window).resize(function() {
var windowheight = $(window).height();
$("#imgdiv").css("height", windowheight);
});
Which will resize the image if the user decides to resize your window, this way it's always taking up the full height of your browser.
With #2, the arrows just create a new img tag. And the idea is something like
function loadnew() {
// create the new image
var newimg = "<img id='newimg'></img>"
$("#imgcontainer").append(newimg);
// make sure it has the same classes as the current img
// so that it's in the same position with an higher z-index
// then load the image
$("#newimg").addClass( "class1 class2" );
$("#newimg").css( "z-index", "+=1" );
$("#newimg").css( "opacity", 0 );
$("#newimg").attr("src", "url/to/img");
// animate the thing and then replace the src of the old one with this new one
$("#newimg").animate( {
opacity: 1;
}, 1000, function() {
$(oldimg).attr("src", $("#newimg").attr("src"));
});
}
Now with #3, you will size the image with respect to the width. The div fixed positioned. So again, you need a
$(window).resize(function() {
var windowwidth= $(window).width();
$("#imgdiv").css("width", windowwidth);
});
to make sure it's always taking up the whole screen. And for the mouse movement, you need to have a mousemove event handler
$("#superimgdiv").mousemove( function(e) {
// need to tell where the mouse is with respect to the window
var height = $(window).height();
var mouseY = e.pageY;
var relativepct = mouseY/height;
// change the position relative to the mouse and the full image height
var imgheight = $("superimg").height();
$("superimgdiv").css("top", -1*relativepct*imgheight);
});
And that's it. Of course I'm leaving out a bunch of details, but this is the general idea. Hopefully this can get you started. Good luck.