what i need to achieve is the following:
a webpage for smartphone that contains a series of divs with heights, paddings, margins, etc.. and one particular div at the bottom that should be as high as the (window.innerHeight minus all the other divs' heights before him) so that the javascript can stick a fixed height to it (which has to be dynamic because i don't know the device screen height) and i can set via CSS overflow:auto and make it scrollable.
the js i started using is the following:
(function() {
function resize(delta) {
var heights = window.innerHeight;
jQuery('.dynamic-height').css('height', (heights - delta) + "px");
}
if (navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)) {
resize(20);
} else {
resize(0);
}
})();
you can ignore the if/else statement.
here is a very simple fiddle: http://jsfiddle.net/omegaiori/k56wj/
the div that has to have the dynamic height is div.dynamic-height (violet background).
thank you so much for your help, this would be a life saver! :)
Try this,
Demo
(function() {
function resize() {
total = 0;
jQuery('.cont div').each(function(){
total += parseInt($(this).css('margin-top').split('px')[0])+parseInt($(this).css('margin-bottom').split('px')[0])+$(this).height()
});
var heights = window.innerHeight;
var dy_height = heights-total
jQuery('.dynamic-height').css('height', dy_height + "px");
}
resize()
})();
Related
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);
};
The problem
I'm using javascript to calculate widths of elements to achieve the layout I'm after. The problem is, I don't want to load the code on smaller screen sizes (when the screen width is less than 480px for example). I'd like this to work on load and on browser/viewport resize.
I'd consider small screen devices 'the default' and working up from there. So, none of the following script is called by default, then if the browser width is greater than 480px (for example), the following script would be called:
The code
$(document).ready(function() {
//Get the figures width
var figure_width = $(".project-index figure").css("width").replace("px", "");
//Get num figures
var num_figures = $(".project-index figure").length;
//Work out how manay figures per row
var num_row_figures = Math.ceil(num_figures / 2);
//Get the total width
var row_width = figure_width * num_row_figures;
//Set container width to half the total
$(".project-index").width(row_width);
x = null;
y = null;
$(".project-index div").mousedown(function(e) {
x = e.clientX;
y = e.clientY;
});
$(".project-index div").mouseup(function(e) {
if (x == e.clientX && y == e.clientY) {
//alert($(this).next().attr("href"));
window.location.assign($(this).next().attr("href"));
}
x = y = null;
});
});
// Drag-on content
jQuery(document).ready(function() {
jQuery('#main').dragOn();
});
The extra bit
The slight difference on larger screens is to do with the browser/viewport height. This is in regards to the line:
var num_row_figures = Math.ceil(num_figures / 2);
You can see once the calculation has a value, it divides it by 2. I only want this to happen when the browser/viewport height is above a certain amount - say 600px.
I'd be happy with this being the 1st state and then the value is divided by 2 if the height is greater than 600px if it's easier.
Can anyone help me/shed some light on how to manage my script this way. I know there's media queries for managing CSS but I can't seem to find any resources for how to manage javascript this way - hope someone can help.
Cheers,
Steve
You can use window.matchMedia, which is the javascript equivalent of media queries. The matchMedia call creates a mediaQueryList object. We can query the mediaQueryList object matches property to get the state, and attach an event handler using mediaQueryList.addListener to track changes.
I've added an example on fiddle of using matchMedia on load and on resize. Change the bottom left pane height and width (using the borders), and see the states of the two queries.
This is the code I've used:
<div>Min width 400: <span id="minWidth400"></span></div>
<div>Min height 600: <span id="minHeight600"></span></div>
var matchMinWidth400 = window.matchMedia("(min-width: 400px)"); // create a MediaQueryList
var matchMinHeight600 = window.matchMedia("(min-height: 600px)"); // create a MediaQueryList
var minWidth400Status = document.getElementById('minWidth400');
var minHeight600Status = document.getElementById('minHeight600');
function updateMinWidth400(state) {
minWidth400Status.innerText = state;
}
function updateMinHeight600(state) {
minHeight600Status.innerText = state;
}
updateMinWidth400(matchMinWidth400.matches); // check match on load
updateMinHeight600(matchMinHeight600.matches); // check match on load
matchMinWidth400.addListener(function(MediaQueryListEvent) { // check match on resize
updateMinWidth400(MediaQueryListEvent.matches);
});
matchMinHeight600.addListener(function(MediaQueryListEvent) { // check match on resize
updateMinHeight600(MediaQueryListEvent.matches);
});
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
So i searched a bit and came up with this example from w3 schools .http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1
i think this is something you are trying to achieve.
For pure js , you can get the screen width by screen.width
I've been designing a web site for a while, its a two column layout, and I want each column to go to the bottom of the page regardless of resolution. Currently to accomplish this, I have two JavaScript files - One that adjusts the column length to fit the browser window, and the other JavaScript file is to match the resized one. One major problem I have, is that if you change the browser window size, the columns do no auto adjust, so they may not go to the bottom of the page. I am wondering if there is some way I could do this all in one file, and most importantly make the columns always stick to the bottom of the page no matter what the window size is. Here is the code for each JavaScript file:
Adjust column height to browser window:
$(function(){
var grid = $(window).height();
var gridFinal = grid - 140;
$('.grid').css({'min-height': ((gridFinal))+'px'});
});
Adjust the other column to match the resized one:
window.onload = getIDHeight;
function getIDHeight() {
var myHomeHeight = document.getElementById("home").offsetHeight;
document.getElementById("home-services").style.height = myHomeHeight - 15 +"px";
}
window.addEventListener('load', function (){
var myNewsHeight = document.getElementById("blog").offsetHeight;
document.getElementById("social-media").style.height = myNewsHeight - 15 +"px";
});
window.addEventListener('load', function (){
var myAboutHeight = document.getElementById("references").offsetHeight;
document.getElementById("about").style.height = myAboutHeight - 25 +"px";
});
window.addEventListener('load', function (){
var myServicesHeight = document.getElementById("services").offsetHeight;
document.getElementById("guidelines").style.height = myServicesHeight - 15 +"px";
});
window.addEventListener('load', function (){
var myTipsHeight = document.getElementById("tips").offsetHeight;
document.getElementById("recommendations").style.height = myTipsHeight - 20 +"px";
});
window.addEventListener('load', function (){
var myContactHeight = document.getElementById("contact-info").offsetHeight;
document.getElementById("email").style.height = myContactHeight - 15 +"px";
});
Any help here would be greatly appreciated. If there is a simpler way of doing this that increases functionality, please let me know.
You could do it with CSS. Set the height of html & body to 100%, then set the columns to height 100%
Fiddle here : DEMO
html,body{
height:100%;
}
#column1{
height:100%;
}
#column2{
height:100%;
}
I'm using the following bit of jquery to make the two main columns on my page the same height.
var $toEqualize = $('.equalheightbox');
$toEqualize.css('height', (function(){
return Math.max.apply(null, $toEqualize.map(function(){
return $(this).height();
}).get());
})());
Which works great except if the content of either div isn't big enough to stretch to the bottom of the page then the two columns are the same height but there's an unsightly gap at the bottom of my page. I'd like the columns to be the same height but also to be at least as tall as the browser window being used to show the page.
Anyone any ideas?
Not tested but that should do it:
var $toEqualize = $('.equalheightbox');
var wS = $(window).height();
$toEqualize.css('height', (function(){
return Math.max.apply(null, $toEqualize.map(function(){
return wS > $(this).height() ? wS : $(this).height();
}).get());
})());
For explainations:
$(window).height() is the height of the screen of the client (if you want less, check for the height of the parent.
wS > $(this).height() ? wS : $(this).height() // that will select at least the height of the screen (this expression is a shorthand for if (...) { ... } else { ... }
Why don't you add a container for both div, set them to have the full height of the parent and let them grow.
I'm trying to have an image gallery where a caption is vertically centered inside of a slideshow, here's the code I'm working with
$(window).load(function() {
var imageHeight = $('.flexslider .slides li img').height();
var captionTop = imageHeight - $('.title-cap').height();
var captionTop = captionTop/2;
$('.title-cap').css('top',captionTop + 'px');
var captionTopOne = imageHeight - $('.sub-cap-one').height();
var captionTopOne = captionTopOne/2;
$('.sub-cap-one').css('top',captionTopOne + 'px');
var captionTopTwo = imageHeight - $('.sub-cap-two').height();
var captionTopTwo = captionTopTwo/2;
$('.sub-cap-two').css('top',captionTopTwo + 'px');
var captionTopThr = imageHeight - $('.sub-cap-three').height();
var captionTopThr = captionTopThr/2;
$('.sub-cap-three').css('top',captionTopThr + 'px');
});
The caption is positioned absolutely, and I'm using top to do the centering...
So my thought process is, get the height of the base slideshow image to keep it responsive, minus the height of the current caption, and divide that by two ending with the top value.
The first instance is working, with "title-cap", but the next three are not. They all return the same wrong value. All caption classes have the same attributes, just different for assignment.
Also, what would I need to add in order for the values to dynamically change with the browser window size in real time.
Edit: Alright, did a little research and figured out the load/resize part.
This is what I have now
function setContent(){
[Added all of the above minus the onload part in here]
}
$(window).load(function() {
setContent();
});
$(window).resize(function() {
setContent();
});
Now just not sure why the sub-cap's aren't loading properly. Any ideas?
I've had similar problem when trying to get the size of hidden elements. I found this nice jQuery actual plugin. It might be what you need.