We Keep Coding

How to align an element to the bottom of the window using JS

I have created a html-5 banner using Adobe Animate and have an element, which should be aligned to the bottom of the window depending on the height of this window.
My banner should be 100% height and on the first picture you can see the right position of the bottom elements. And on the second picture there is a space between the element and the background.
And my element should remain aligned to the bottom when changing the height of the window. How can I do it using js?
Here is my code which helps me move the element but it doesn't align it to the bottom:
this.frame_0 = function() {
var _second = this.second;
this.addEventListener("tick", res.bind(this));
function res() {
_second.y = window.innerHeight/2 + 120;
}
}
This is my file

use CSS to set the positions of element.
position:fixed;
left:ValueFromLeft;
bottom:0;
It's easy

If use CreateJS then you are using a canvas.
CSS solutions don't work, only JS.
Use the Window's resize event.
this.frame_0 = function() {
var _second = this.second;
function setSecondToTheBottom() {
_second.y = window.innerHeight - (_second.nominalBounds.height / 2);
}
setSecondToTheBottom();
window.addEventListener("resize", setSecondToTheBottom);
};

Justify images inside div using jquery

I have a centered div that takes 80% of the width of window, inside that div have a gallery images .container img {min-width:200px;} using jquery I want to make the images justified depending on the width of the .container, the code that worked for me is this :
$(window).on("resize", function(){
// get the width of the container
var albumContentWidth = $(".container").width();
// as we have in our css the min-width of image is 200
// see how many image can fit in each row
var imagePerRow = parseInt(albumContentWidth / 200);
// set the width of image using calc
$(".container img").css("width", "calc(100% / #{imagePerRow})");
});
The code above works fine, but for some reasons.. I don't want to use calc() instead I want to calculate this using pixels, so what I did :
$(window).on("resize", function(){
// get the width of the container
var albumContentWidth = $(".container").width();
// as we have in our css the min-width of image is 200
// see how many image can fit in each row
var imagePerRow = parseInt(albumContentWidth / 200);
// instead of using calc() divide the width of container by the possible number of images per row
var imageWidth = (albumContentWidth / imagePerRow).toFixed(2);
// set the width of image using calc
$(".container img").css("width", imageWidth);
});
However this is not working and the images don't get justified correctly when I resize !!

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

calculate height and apply to a div with jquery

I have a banner image that is only visible when i set a fixed height, i want to make it responsive so the only way i thought of doing that is calculating the height of the image with the width of the window.
the function to calculate the height is: windowWidth/1.845
how do i apply that function to a div css with jquery/javascript?
i tried this function but it didn't work
$(document).ready(function(){
var originalWidth = $( window ).width();
var newHeight = originalWidth/+(1.845)
;
function resize() {
$("#ei-slider").css("height", newHeight);
}
$(".target").each(resize);
$(document).resize(function(){
$("ei-slider").each(resize);
});
});

Try adding () when you call your function resize
$(".target").each(resize());
$(document).resize(function(){
$(".ei-slider").each(resize());
});
Also, you miss the point before ei-slider
And I highly recommend to you to use backstretch jquery plugin.
http://srobbin.com/jquery-plugins/backstretch/

Why is the image only visible when you set a fixed height? An image would be "responsive" automatically if you were to do this in your CSS.
img {
max-width: 100%;
width: 100%;
}
However if you need to do other things in the resize you probably want to listen for resizes on window and not document.
$(document).ready(function () {
var $window = $(window);
var originalWidth = $window.width();
var newHeight = originalWidth / 1.845;
function resize() {
// This will be .target or .ei-slider based on where it's called.
$(this).css("height", newHeight);
};
$(".target").each(resize);
$window.on('resize', function(){
$(".ei-slider").each(resize);
});
});

jQuery - Margin left minus half of the div's width

I want to achieve something like this:
I have a div, which width is not specified, so it changes basing on the content it has. First of all, I want to calculate that div's width. After that, I would like to add css style with jquery, which will margin that div left half of its width. So, if the div's width is 300px, I want this css added to the same div:
margin-left: -150px;
I hope I was clear. Thanks a lot.

use this code:
// get div width
var width = $('div').width();
// calculate margin size
var marginLeft = width / 2;
// set css
$('div').css('margin-left', -marginLeft);

var w = $("#left-shunted-div").width();
var left_mar = -(w/2);
$("#left-shunted-div").css("margin-left",left_mar);

You could simply do it like so:
// After dom load
$(function(){
// Select the div
var div = $('#myDiv');
// Get the width;
var width = div.outerWidth();
// Change the margin-left to half negative
div.css({'marginLeft' : -(width / 2) + 'px'});
});