We Keep Coding

Change variable value on window width change jQuery

I am fairly new to jQuery/javascript and I have a quick question, probably very simple but I can't seem to figure it out.
I want to change a variable value when the window width has changed. The reason I'm doing it with jQuery is that I can't alter the width or height via css.
This is my code:
<script type="text/javascript">
var jwheight = 390,
windowSize = $(window).width();
$(window).resize(function(){
if (windowSize < 992) {
jwheight = 39;
}
})
player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);
</script>
So I want to change the height (jwheight) when the window width is smaller than 992px.
All help would be appreciated, thank you.

your windowSize is outside the resize function, so it will always have the same value. You should use the width inside the function as follows:
<script type="text/javascript">
var jwheight = 390;
$(window).resize(function(){
if ($(window).width() < 992) {
jwheight = 39;
}
})
player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);
</script>

Check the $(window).width() value inside the resize event, and resize the player depending on the result.
You would want to calculate the height depending on the width, then compare that to the current height so that you don't call player.resize when there isn't actually a size change:
var jwheight = 390;
$(window).resize(function(){
var newHeight = $(window).width() < 992 ? 39 : 390;
if (newHeight != jwheight) {
jwheight = newHeight;
player.resize(800, jwheight);
}
})
player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);

If statement works on resize, not ready?

I am trying to accomplish two things:
The main content div will be dynamically sized to fit the exact height of the window. I accomplish that goal with this function:
$(document).on( 'ready', function() {
panelsResize();
$(window).on( 'resize', panelsResize );
});
function panelsResize() {
var screenHeight = $(window).height();
var screenWidth = $(window).width();
if (screenWidth > 768) {
$( ".panels" ).css( "height", screenHeight );
}
};
The class .panels is applied to the main content area.
This works swell.
I am trying to fill the .panels with the images in.large. These images need to retain aspect ratio while being scalable. I have based my code on this answer.
This works, but not on ready. I have to resize the screen, dropping below the media query that switches the display for .large to none. When I resize to the higher media query, switching display to block, the functionality works perfect.
Any ideas?
Here's the function (and markup):
$(document).on( 'ready', function() {
bgResize();
$(window).on( 'resize', bgResize );
});
function bgResize(){
$( '.large' ).each(function() {
var th = $(window).height(),//box height
tw = $(window).width(),//box width
im = $(this).children('img'),//image
ih = im.height(),//inital image height
iw = im.width();//initial image width
if ( iw < tw ) {
im.css( { "width" : "100%", "height" : "auto" } );
}
else if ( ih < th ) {
im.css( { "height" : "100%", "width" : "auto" } );
}
var nh = im.height(),//new image height
nw = im.width(),//new image width
hd = (nh-th)/2,//half dif img/box height
wd = (nw-tw)/2;//half dif img/box width
if (nh<nw) {
im.css({marginLeft: '-'+wd+'px', marginTop: 0});//offset left
} else {
im.css({marginTop: '-'+hd+'px', marginLeft: 0});//offset top
}
});
};
This is the HTML:
<ul id="homePanels">
<li id="cat1" class="panels">
<div class="large">
<img src="#" alt="" />
</div>
<div class="small">
<img src="#" alt="" />
</div>
</li>
</ul>
The CSS:
#homePanels {
list-style: none;
margin:0;
padding:0;
overflow: hidden;
}
.large {
width:100%;
height:100%;
}
#media (min-width: 768px) {
.large{display: block;}
.small{display:none}
}
#media (max-width: 768px) {
.small {display:block;}
.large {display:none;}
}

i think it will work if you use jQuery ready() function.
$(document).ready(function() {
bgResize();
$(window).on('resize', bgResize );
});

You just need to change
$(document).on( 'ready', function()
for
$(document).ready( function()

Thanks! I made the change to the ready event.
I realized that using the image's width and height were causing the issue, since I was grabbing, basically, two 0s. So, since I knew the aspect ratio of the images, I used that to scale the images on screen resize.
var screenHeight = $(window).height(),
screenWidth = $(window).width(),
aspectRatio = 0.57066014669927,
screenAspectRatio = screenHeight / screenWidth;
if ( screenAspectRatio < aspectRatio ){
$("img").css({"width" : "100%" , "height" : "auto"});
} else if ( screenAspectRatio > aspectRatio ){
$("img").css({"width" : "auto" , "height" : "100%"});
}
But it's solved now. Thanks for your help!

Animate div on click

I'm trying to animate the margins of a div set by the window height and width.
Please see the fiddle.
http://jsfiddle.net/cf4zM/
The bottom and right margins animate fine on the first click, however left and top do not animate. After first click all margins animate.
Any help would be great.
$( document ).ready(function() {
$("#resizer").height(
$(window).innerHeight()
);
$("#resizer").width(
$(window).innerWidth()
);
});
var xminus = window.innerWidth/15;
var yminus = window.innerHeight/15;
function resizediv(){
var x = $("#resizer").width() - xminus;
var y = $("#resizer").height() - yminus;
var heightoffset = (window.innerHeight - $("#resizer").height())/2
var widthoffset = (window.innerWidth - $("#resizer").width())/2
$("#resizer").animate({
width : x,
height : y,
marginTop : heightoffset,
marginBottom : heightoffset,
marginLeft : widthoffset,
marginRight : widthoffset
}, 1000, function(){
});
}

Demo
It's because of the margin you are setting with jquery.
Check out margin of the div on each click through browser debugger you will find the error.
You can also set margin auto in the css assigning top, bottom, left, right position 0 in order to have absolute centering of the div and remove margin set from script.
CSS
#resizer{
background-color: white;
position: fixed;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
padding: 0;
border:1px solid #000;
}
jquery
$( document ).ready(function() {
$("#resizer").height(
$(window).innerHeight()
);
$("#resizer").width(
$(window).innerWidth()
);
});
var xminus = window.innerWidth/15;
var yminus = window.innerHeight/15;
function resizediv(){
var x = $("#resizer").width() - xminus;
var y = $("#resizer").height() - yminus;
var heightoffset = (window.innerHeight - $("#resizer").height())/2
var widthoffset = (window.innerWidth - $("#resizer").width())/2
$("#resizer").animate({
width : x,
height : y
}, 1000, function(){
});
}

You're setting the left margin to:
var widthoffset = (window.innerWidth - $("#resizer").width()) / 2
Originally, the resizer width is the same as the window's width, which means that at the first click, the offset will always be 0, which is causing the element to remain in its position.
On the other hand, width is set to:
$("#resizer").width() - xminus
which means that it will be reduced from the very first click.

Changing the size of a jquery UI dialog dynamically

I have a jquery dialog . I am displaying an asp.net gridview within the dialog.
I want the size of the dialog to change based on the size of the grid view.
There is a button, which shows the dialog when its clicked.
I want to set the size of the dialog such that the gridview fits in it perfectly.
I have my javascript code below :
$("#ViewModalPopup").dialog({
height: 800px,
scrollable: true,
width: 800,
modal: true
});
Here #ViewModalPopup is the div that encloses the modal popup.
I tried implementing the following logic to adjust the height of the dialog based on the size of the div :
var maxHeight = 600;
var currentHeight = $('#ViewModalPopup').height();
if (currentHeight < maxHeight) {
var desiredHeight = currentHeight
}
else
{
var desiredHeight = maxHeight;
}
$("#ViewModalPopup").dialog({
height: desiredheight,
scrollable: true,
width: 800,
modal: true
});
But it is not working as
var currentHeight = $('#ViewModalPopup').height();
is coming out to be null from the second button click onwards.
Is there any way I can change the size of the dialog dynamically ?

Set like
$("#ViewModalPopupDiv1").dialog("option", "maxHeight", 600);
API

/* set dynamic height of modal popup and scroll according to window height */
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function () {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function () {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});

How to run this jquery code only before and after particular screen size?

I have this jQuery code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$( document ).ready( function() {
var $body = $('body'); //Cache this for performance
var setBodyScale = function() {
var scaleFactor = 0.35,
scaleSource = $body.width(),
maxScale = 600,
minScale = 30;
var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('body').css('font-size', fontSize + '%');
}
$(window).resize(function(){
setBodyScale();
});
//Fire it when the page first loads:
setBodyScale();
});
</script>
But I want to activate this jQuery code only if #media only screen and (min-width : 1025px) and (max-width : 2048px) not after that and not before that.
before 1024px and after 2048px the script should not do anything.

I don't think it is possible to get the #media configuration from javascript.
What you can is obtain the document's width and check its value:
var docWidth = $(document).width();
if (docWidth > 1024 && docWidth < 2048) {
// execute your function
}
I don't know if it required, but if the user resize the window, you might also need to bind to the resize event:
$(window).resize(function(event) {
//execute your function
});
d.

Use the jquery resize event :
$(window).resize(function() {
// Check here the width
width = $(document).width();
if (width > 1024 && width < 2048) {
// do your code
}
});
I think you can do what you want with this