Im using this jquery to try and control how wide and high a div opens depending on the screen resolution this is the code im using but it doesn't seem to be having any effect apart from cropping my image. I say it doesnt seem to work becuase it leaves a big space and when I look at firebug it tells me the box has expanded to the 600px x 488px when im viewing in the lower resolution.
Im not sure if the images are pushing the div out the that size because the pictures are exactly 600px x 488px but I need them to be the same file just smaller for dynamic PHP gallery updating in the future, how can I fix this code and how can I easily resize the images depending on the resolution?
$(document).ready(function(){
if ((screen.width>=1440) && (screen.height>=764)) {
$("#slideshow_box")
.animate({"height": "600px"}, 500)
.animate({"width": "488px"}, 500);
}
else {
$("#slideshow_box")
.animate({"height": "400px"}, 500)
.animate({"width": "288px"}, 500);
}
});
DEMO
As you can se HERE even if you resize your screen the calculated width is actually = your brand new ;) screen - size!
To get the actual 'screen' (window!) size in your browser you can use
$(window).width(); and $(window).height();
$(document).ready(function(){
var winW = $(window).width();
var winH = $(window).height();
alert("Window width is: "+winW+"px, window height is: "+winH+'px');
if ((winW>=1440) && (winH>=764)) {
$("#slideshow_box")
.animate({"height": "600px"}, 500)
.animate({"width": "488px"}, 500);
} else {
$("#slideshow_box")
.animate({"height": "400px"}, 500)
.animate({"width": "288px"}, 500);
}
});
HERE you can see it in action, just resize the frame.
$(window).resize(function() {
$('#size').html(
' Window width: '+$(window).width()+
'<br> Window height: '+$(window).height()
);
});
Hum, can't figure out your problem...seems to work for me, see http://jsfiddle.net/EtEzN/2/
For sure, your snippet resizes DIV layer only, so you have to resize containing images too!
EDIT: Fiddle is updated, so script regards browsers document height instead of screen height (remember: screen resolution <> browser resolution <> document resolution)
The images are indeed pushing out your div. If you want to change image size, then you can't just adjust the size of the containing div, you have to change the size of the img itself.
I'm assuming that the image is intended to be the same size as the div that contains it. Thus, your code should only require a slight modification:
$(document).ready(function(){
if ((screen.width>=1440) && (screen.height>=764)) {
// Since the image is already the same size as the div,
// don't change the image
$("#slideshow_box")
.animate({"height": "600px"}, 500)
.animate({"width": "488px"}, 500);
}
else {
// Resize the image along with the div
$("#slideshow_box, #slideshow_box img")
.animate({"height": "400px"}, 500)
.animate({"width": "288px"}, 500);
}
});
Also, the screen properties signify the resolution of the client's display screen, not the actual size of the browser window. Since you're using jQuery, you can use $(window).width() and $(window).height(), or if you're ever using plain JS, the window.innerWidth and window.innerHeight properties (for Firefox), or document.body.clientWidth for IE, although browser compatibility is annoying for this, so I'd probably stick with jQuery or another library.
Related
I am looking for some help concerning my Jquery. I have an animation, that is opening a navigation menu, running from the right window site into the middle. What I want to do now is: When the user is reducing the browser window width (lets say in a step of 100px), the Animation should run a 100px less into the middle. Below you can the the short version of my code. Is there a way to define the width using the value of a class, that I have written in my css?
$(".slide-left").click(function(){
$("#navibox").animate({ width: 863 }); });
You cannot define the width with the value in a class. Although to get the width of the window itself, you can use
window.innerWidth
If you'd like to have some code run when you resize you can add an eventListener, with the event name of 'resize' like this.
window.addEventListener('resize', (e)=>{})
The event passed from that callback has the property 'target' which is the window instance that you can grab the innerWidth from again.
If you have to update the animation with some new evaluated width, you can do it there.
Thanks! I already tried something like this:
$(window).resize(function(){
if ($(window).width() > 1000) { mywidth = 863; }
if ($(window).width() < 1001 && $(window).width() > 959 ) { mywidth = 823; }
if ($(window).width() < 960) { mywidth = 783; }
});```
In the animation I used:
```$("#navibox").animate({ mywidth });```
But that did not work...
I have a JQuery rotator in my website with a slides images and I want to make the website responsive. I'm using CSS media queries to do it. I want to change the slide width (which defines in JS) when the windows width is less than 800px. So long, I did something like this:
var responsiveSlideWidth;
if ($(window).width() < 800) {
responsiveSlideWidth = 700;
}
else {
responsiveSlideWidth = 960;
}
var defaults = {
container: '.rotatorWrapper',
animationduration: 1000,
slideWidth: responsiveSlideWidth
};
The problem is that it is working just after page reload. Thats means: if I resize the window size its is not working well until I reload the page.
You should try
$(window).resize(function (){
// your code
});
It will trigger every time the window is resized.
I have a script JS:
function thoat() {
var sples = $(window).width();
if (sples >= 320 && sples <= 480) {$('.projects').slice(0, 9).css('margin', '10px');
} else {$('.projects').slice(3, 6).css('margin', '10px');
}
}thoat();
Its when screen size btw 320 and 480 then select all elements if not select the three from bottom.
Its looks like work great but i try on a responsive screen test size with 320px and its not select all element not understand why? On 320px what write there not work
responsive test site where not work with 320px : screenfly
jsfiddle
Whats the problem? with script?
It works fine actually. The only problem is that you run your function just on DOM.ready(), but when you change the resolution on screenfly it does not cause the page reload, so DOM.ready() event is not fired, but $(window).resize() is. So you can add followingl line to your code
$(window).on('resize', thoat);
and it works!
jsfiddle
Screenfly
Just resize the screen to some mobile device and you'll see the result.
UPD It doesn't work at 320px cause of scrollbar, it's width is like 17px, and .width() method returns window width without scroll bar witdh, so , in your case it's out of range.
While trying to create a single page template with parallax scrolling I found and odd problem. I'm am suspecting that the problem is in either the jQuery portion of maybe even the CSS it self, but I am rather not sure.
My current jQuery code bit reads the window size of the visitors browser and adjusts the height of the slides for each different anchored page. This way I achieved full with backgrounds no matter the window size. But in same time I realized that If I add different CSS components, they will not expand the active anchor background height, but rather will overflow onto the other slide.
Here is the jQuery portion responsible for the slides height
$(function () {
$('.windows').css({
'height': (($(window).height())) + 'px'
});
$(window).resize(function () {
$('.windows').css({
'height': (($(window).height())) + 'px'
});
});
});
And here is the site URL https://docstax.net/esgh/
Go to Plans and resize your browser you will see what I mean by not adjusting the high of slide based on needed high of content inside.
Edit: As suggested by putvande there where way to many $(window) which I was aware of, do to that I updated and minimized the code.
Basically you don't want to manually add a height component to the div if the content is going to be too large for the container. Here's what I think would work:
$(window).bind("load", function()
{
var windowHeight = $(window).height();
$('.windows').each(function(index) {
if ($(this).height() < windowHeight) {
$(this).height(windowHeight);
}
});
$(window).resize(function() {
var windowHeight = $(window).height();
$('.windows').each(function(index) {
if ($(this).height() < windowHeight) {
$(this).height(windowHeight);
}
});
});
});
You can try like this one:
<script type="text/javascript">
$(function(){
var height = window.innerHeight;
$('.windows') .css({'height': height+'px'});
$(window).resize(function() {
var reheight = window.innerHeight;
$('.windows') .css({'height': reheight+'px'});
});
});
</script>
I tried your page, I'm failing to see a problem :
The sections are resized as they should. Content is display as it should considering the styles applied.
When a section is smaller than its content, the content starts bleeding out on other pages. Perfectly normal. You could set overflow: hidden; on your .windows to prevent that from happening and/or use media queries to resize the content.
Here is a lighter function by the way, just edited your code :
$(function() {
$(window).resize(function() {
$('.windows').css({ 'height': $(window).height() });
}).resize();
});
No need to write the code twice : setting the resize handler and triggering it manually should do.
Write it once, so when you need to change it, you'll change it only once.
You could also reset de scrollTop in your resize handler to keep focus on the same portion of the page.
I am in a process to make a slideshow responsive. I am using simple jQuery to achieve this. My logic is:
If width of window is < 620, make the changes in CSS through jQuery.
else
set default(fixed) css
I have a element who has top:470px fixed css when the window is of normal size. If the size of the window goes below 620, I've changed this to be relative to the image size (which changes on window resize). Here is my code:
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height());
}
else {
$('#controls').css('top', '470');
}
}
$(window).resize(resizeVideo);
In this way, the controls would stick to the bottom of the image when size is less than 620. Some of the problems which are stopping me right now are:
Whenever I'm maximizing the window from a size which is less than 620, the images scale back to its original sizes, but the #controls element remains at the same height as it was before maximizing.
When I resize the window to a size greater than 620, then too the #controls stay somewhere around 345px when in actual, the height of the image is greater.
Whenever the image in the slideshow changes and I resize the window at that time, the #controls goes at the top of everything, i.e. it doesn't apply the top: property at all.
I have asked all these queries in on single question because all of them are about the #controls element and I believe that fixing one would automatically fix others. Any pointers would be highly appreciated!
You need the 'px' suffix when manipulating the css via jQuery.
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height()+'px'); // $.height() returns the height without 'px' - so we need to add it manually
} else {
$('#controls').css('top', '470px');
}
}
$(window).resize(resizeVideo);
Think you have to wrap a closure function inside .resize() e.g. $(window).resize(function(){ resizeVideo(); });.
Also because the function resizeVideo is not a reference you will have to call it with ()
For the jquery .css() function they've made some css hooks you can use without strings so to apply css it will be:
$('#controls').css({top: 470 + "px"});