We Keep Coding

Toggle class and change size on an element using jQuery

I am trying to have a div change its properties on a click function. Some of the properties I am changing with a call to toggleClass() which is fine and works great. However I also want to resize the div based on the size of the viewport. In order to have access to those numbers I am changing the width and height with jQuery. This command looks like this:
$('.box').click( function() {
$(this).toggleClass('box--grow', 0);
$(this).css('width', w * .9);
$(this).css('height', h * .9);
});
EDIT I want the height and width to go back to 100%.
I tried using the toggle class but that caused the entire div to disappear, and this solution doesn't work because when I click the div again the class is removed but the height is the same.
I am looking for a way to toggle this or to get the viewport width within the css. I tried both approaches but couldn't get anything to what I am looking for.

why not using CSS VH and VW values?
CSS:
.my90Class{
width: 90vw;
height: 90vh;
}
JS:
$('.box').click( function() {
$(this).toggleClass("my90Class");
});

You need to get the window size first, and then put everything into combined .ready() and .resize() functions, to make it responsive.
function myfunction() {
var w = $(window).width();
var h = $(window).height();
$('.box').click(function () {
if ($(this).hasClass('box--grow')) {
$(this).removeClass('box--grow');
$(this).css({
'width': '',
'height': ''
});
} else {
$(this).addClass('box--grow');
$(this).css({
'width': w * .9,
'height': h * .9
});
}
});
}
$(document).ready(myfunction);
$(window).on('resize', myfunction);
jsfiddle

You can check for the class with:
$(this).hasClass('box--grow')
Then to remove the class:
$(this).removeClass('box--grow');
And to add it back again:
$(this).addClass('box--grow');
The end would look like this save the original width and height before the event so you can add it back again:
var oldwidth = $('.box').css('width');
var oldheight = $('.box').css('height');
$('.box').click( function() {
if($(this).hasClass('box--grow')) {
$(this).removeClass('box--grow');
$('.box').css('width', oldwidth);
$('.box').css('height', oldheight);
} else {
$(this).addClass('box--grow');
}
});
untested but it would probably work

Why does innerWidth() give different result than get(0).width?

Testing in Chrome. If I create dynamically a canvas object, put it into a div like this:
$('<div />').css({
width: '95%',
margin: '0px auto',
border: '1px solid red'
})
.append(
$('<canvas />')
.attr({ id: 'myCanvas' })
.css({ width: '100%' })
)
.appendTo('body');
And then in all the resize events, i try to show size:
function updateCanvas() {
console.log($('#mycanvas').get(0).width);
console.log($('#mycanvas').innerWidth());
}
/* listening to whatever change it can be on the device */
var eventListen = function() {
window.addEventListener("orientationchange", eventResize, false);
window.addEventListener("resize", eventResize, false);
};
var eventResize = function() {
window.removeEventListener("orientationchange", eventResize, false);
window.removeEventListener("resize", eventResize);
window.setTimeout(function(){
/* small timeout in case of lot of resize (dragging) */
var w=innerWidth;
var h=innerHeight;
window.setTimeout(function(){
if ((innerWidth!=w) || (innerHeight!=h)) {
eventResize();
} else {
updateCanvas();
eventListen();
}
}, 100);
}, 100);
}
eventListen();
The results are differents! Pure DOM gives me actual size of the canvas, whereas $('#mycanvas').innerWidth() gives me bigger result...

I think this scheme should answer your question (found on google images)
(source: stacktrace.jp)
The difference between the width and the innerWidth is made by the padding.
EDIT: Correction
As PE pointed out, this difference is due to the fact that the width() method you are using is in fact the object property, which is different from the css property.
If you don't set your canvas property the width attribute defaults to 300, and the height attribute defaults to 150. The width and height CSS properties control the size that the element displays on screen.
More info:
http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting.html#attr-canvas-width

The difference is because you are checking two different things
get(0).width is the canvas' object's width property, which is not affected/changed by css styling, and is set either by the element's width attribute or the .width property in js. And defaults to 300x150 as per the spec.
jQuery's width(),innerWidth() etc methods are calculating the layout size of the canvas element, which is affected by the css styling.

Retaining "height" declaration in jQuery after an Ajax call (dropdown selection loads product data, resets height on other page elements)

I have some jQuery setting a height on product descriptions, this can be seen here:
https://www.gabbyandlaird.com/product/truition-products/truition-healthy-weight-loss-pack
The code I'm using to achieve this is:
$(document).ready(function() {
var $dscr = $('.commerce-product-field-field-long-description'),
$switch = $('#toggle'),
$initHeight = 70; // Initial height
$dscr.each(function() {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({ overflow: "hidden", height: $initHeight + 'px' });
$switch.toggle(function() {
$dscr.animate({ height: $dscr.data("realHeight") }, 200);
$switch.html("- Read More").toggleClass('toggled');
}, function() {
$dscr.animate({ height: $initHeight}, 200);
$switch.html("+ Read More").toggleClass();
});
});
I am by no means a Javascript expert (or even an amateur for that matter). My knowledge of jQuery is fairly limited, so I'm not sure what needs to be changed above so that when the dropdown selection reloads the data on the page, I don't lose the height value on the "Read More" section of the product description. Any assistance is greatly appreciated. Thanks!

as per your code above it looks you are doing everything when the document is ready.
here is what you can do.
var initialHeight = function(){
// you height initialization code here
}
$(function () {
$(document).ready(initialHeight); // initializes the height on document ready
$("#yourSelectBox").change(initialHeight); // initializes the height on combobox selection change
});
hope this helps.

How to make window size observable using knockout

Trying to do something about the browser window:
Is it possible to make the window size ($(window).width(), $(window).height()) observable using Knockout?
How to keep FUTURE Added Elements in the center of the window? Is there something can be done using the jquery live method or the knockout custom bindings?
Any Suggestion appreciated!

The only way to make them observable is to proxy them into observable properties.
var yourViewModel = {
width: ko.observable(),
height: ko.observable()
};
var $window = $(window);
$window.resize(function () {
yourViewModel.width($window.width());
yourViewModel.height($window.height());
});
I don't really understand your second question. Couldn't you just use css for this?
EDIT
Second question. One possibility would be write a binding handler to do this (untested).
ko.bindingHandlers.center {
init: function (element) {
var $el = $(element);
$el.css({
left: "50%",
position: "absolute",
marginLeft: ($el.width() / 2) + 'px'
});
}
}
The 50% and margin-left is a great way to center things in your scenarios since it automatcially works even if the window is resized. Obviously if the divs themselves resize you need to recalculate the left margin, this could always be bound to a value on the viewmodel.
Hope this helps.

To elaborate on Dean's comment of his winsize custom bindingHandler, this is how it can be used:
JS
ko.bindingHandlers.winsize = {
init: function (element, valueAccessor) {
$(window).resize(function () {
var value = valueAccessor();
value({ width: $(window).width(), height: $(window).height() });
});
}
}
self.windowSize = ko.observable();
HTML
<div data-bind="winsize: windowSize"></div>

Animate max-width on img [JQuery]

I have tried looking for a solution, but can't find anything good.
I am customizing a blog for a friend of mine. When it loads, I want all the img's in each post to have a max-width and max-height of 150px. When the user pushes the img, the max-values should increase to 500px, which is easy enough. The problem with my code is that I can't get an animation on it, which I want. Any help out there?
var cssObj = {'max-width' : '500px','max-height' : '500px;'}
$("img").click(function(){
$(this).css(cssObj);
});

I got it working, combining two of the other answers (and removing max-width & max-height in the css-code)
var cssBegin = {'max-width' : '250px','max-height' : '250px;'};
$('img').css(cssBegin);
var cssObj = {'max-width' : '500px','max-height' : '500px;'};
$("img").click(function(){ $(this).animate(cssObj,'slow'); });

instead of using .css(), try using .animate()
var cssObj = {'max-width' : '500px','max-height' : '500px;'}
$("img").click(function(){
$(this).animate(cssObj,'slow');
});

$(document).ready(function()
{
// define sizes
var cssBegin = { width: 150, height: 150 };
var cssMax = { width: 500, height: 500 };
// init images with the small size
$('img').css(cssBegin);
// init click event on all images
$("img").click(function(){
$(this).animate(cssMax, 'fast');
});
});

Since you are already using CSS class, you can use toggleClass method - Adds the specified class if it is not present, and removes the specified class if it is present, using an optional transition.
$("img").click(function() {
$(this).toggleClass( "cssObj", 1000 );
return false;
});
See the demo here - http://jqueryui.com/demos/toggleClass/