We Keep Coding

Jquery height resize not working on mobile

I'm using jquery to resize an image on a mobile website: http://www.loiristorantino.com.br/mobile
On browser, if you resize your screen, it works fine but on mobile it's not working. Here's the code that I'm using:
var $inner = $('.inner');
var height = parseInt($inner.height()) + parseInt($inner.css('top'));
$('.tumb-img-border').css('height', height);
var doit;
function resizedw(){
var $inner = $('.inner');
var height = parseInt($inner.height()) + parseInt($inner.css('top'));
$('.tumb-img-border').css('height', height);
}
window.onresize = function() {
clearTimeout(doit);
doit = setTimeout(function() {
resizedw();
fontResuze();
}, 100);
};
I think it's something related with Jquery but I don't know how to change it to javascript.
Can you guys help me with this issue?

Ok, so I found the solution by myself. Since I got this resize function on google, this solution might help others. I just changed the following line and it worked:
//var height = parseInt($inner.clientHeight());// + parseInt($inner.css('top'));
var newheight = $('.inner').height();
$('.tumb-img-border').css('height', newheight);

Transit js code to newly opened window

Sorry for my Bad language skills.
I rewrite this question 10 times. But still hard to express my question...
My Question
I hope to know how to transit js code to newly opened window.
My situation
I have opening new window event and window resizing event js code
//When user click <a id="new-window">new window</a>, new window come up.
$('#new-window').click(function (){
var videoWidth = $(window).width()/2;
var videoHeight = videoWidth/5*3;
var windowWidth = videoWidth + 20;
var windowHeight = videoHeight + 20;
var w = window.open('', '', 'width=' + windowWidth + ', height=' + windowHeight);
//$(#video) is the
var html = $("#video").clone().attr({
"width" : videoWidth,
"height" : videoHeight
});
$(w.document.body).html(html);
event.preventDefault();
});
function videoFit() {
var videoScreen = $(window).width();
$('#video').css({'width': videoScreen, 'height':videoScreen/5 * 3});
}
$( window ).resize(function(){
videoFit();
});
But when I open developTool(chrome) in new window, there are no js files and css files which I put in the parent window.
following code just adjusted to parent window.
Is there any solution to transit js code?
Thank you for read my questions.

Google Maps works but without any maps displaying?

I've embedded a Google Map into my application. Interacting with the map works. Responding to map events works (map zoom_changed, marker dragend, etc). However, only some parts of the map are visible (the marker and the Google logo for example), but the maps themselves are not (at least they don't appear 95% of the time).
Can anyone tell me what's going on here?
EDIT: I'm using this as a KnockoutJS component (inserted with with <gui-map></gui-map>). The source code below. I don't believe the use of KnockoutJS has anything to do with the map issues because: a) all the observables are wired up correctly and working 100% of the time; and b) the map does work randomly without any code changes 5% of the time.
define(['knockout', 'underscore'], function(ko, _){
function Map(params, componentInfo) {
var self = this;
var defaultPosition = {lat:-25,lng:-130};
var width = ko.isObservable(params.width) ? params.width : ko.observable(params.width ? params.width : '100px');
var height = ko.isObservable(params.height) ? params.height : ko.observable(params.height ? params.height : '100px');
var center = ko.isObservable(params.center) ? params.center : ko.observable(params.center ? params.center : defaultPosition);
var zoom = ko.isObservable(params.zoom) ? params.zoom : ko.observable(params.zoom ? params.zoom : 12);
var marker = ko.isObservable(params.marker) ? params.marker : ko.observable(params.marker ? params.marker : defaultPosition);
var element = componentInfo.element;
element.style.display = 'block';
element.style.width = width();
element.style.height = height();
width.subscribe(function(){
element.style.width = width();
});
height.subscribe(function(){
element.style.height = height();
});
function onObservableCenterChanged(newValue){
onObservableCenterChanged.changing = 1;
console.log('updating center map');
map.setCenter(newValue);
setTimeout(function(){
onObservableCenterChanged.changing = 0;
}, 500);
}
center.subscribe(onObservableCenterChanged);
function onObservableZoomChanged(newValue){
onObservableZoomChanged.changing = 1;
console.log('updating map zoom');
map.setZoom(newValue);
setTimeout(function(){
onObservableZoomChanged.changing = 0;
}, 500);
}
zoom.subscribe(onObservableZoomChanged);
var map = new google.maps.Map(element, {
center: center(),
zoom: zoom()
});
var mapMarker = new google.maps.Marker({
position:center(),
map:map,
title:'',
draggable:true
});
map.addListener('center_changed', (function(){
var mapCenterChangeTimeout;
return function(){
if (mapCenterChangeTimeout) {
clearTimeout(mapCenterChangeTimeout);
}
mapCenterChangeTimeout = setTimeout(function(){
if (!onObservableCenterChanged.changing) {
var newCenter = map.getCenter();
console.log('updating center observble');
center({
lat:newCenter.lat(),
lng:newCenter.lng()
});
}
}, 500);
};
})());
map.addListener('zoom_changed', (function(){
var mapZoomChangedTimeout;
return function(){
if (mapZoomChangedTimeout) {
clearTimeout(mapZoomChangedTimeout);
}
mapZoomChangedTimeout = setTimeout(function(){
if (!onObservableZoomChanged.changing) {
console.log('updating zoom observable');
zoom(map.getZoom());
}
}, 500);
};
})());
mapMarker.addListener('dragend', function(){
var newPosition = mapMarker.getPosition();
marker({
lat:newPosition.lat(),
lng:newPosition.lng()
});
});
}
ko.components.register('gui-map', {
template:{
require:'text!components/gui/map.html'
},
viewModel:{
createViewModel:function(params, componentInfo){
return new Map(params, componentInfo);
}
}
});
});
EDIT2: I have succesfully got the above to work by wrapping the entire body of the Map function (with exception of the var self = this; assignment) in a anonymous function called with setTimeout() (with a delay of 5000 ms). However, all the code executes after the DOMContentLoaded event anyway, so I'm not sure why this is an issue.

The cause of the problem was that the Google Maps Javascript API does NOT render the map correctly if the element in which the map is contained is not visible. In my situation, the map was located in a hidden tab. The timeout mentioned above solved the problem because the delay gave me long enough to switch tabs before the function that calls the Google Maps API could be executed (if I delayed opening the tab until after the Google Maps API was called, the issue would re-surface).
I got around this issue by manually triggering a resize on the map, and manually updating the various controls on the map, e.g.:
google.maps.event.trigger(map, 'resize');
infoWindow.setContent(infoWindowElement);
infoWindow.close();
infoWindow.open(map, marker);
I hope this solution helps someone else.

How to change image size based on the element's distance in javascript

I'd like to draw a line that connects two circles, but when the window is being re-sized, the distance between the two circles changes therefore the height of the line image should change accordingly. Here is what I have now but it only does it once when the page loads, but I want the image height to be dynamically changing as the window is being re-sized:
function getDistance(id1, id2){
distX = id1.offsetLeft - id2.offsetLeft;
distY = id1.offsetTop - id2.offsetTop;
distance = Math.sqrt(distX*distX + distY*distY);
return distance;
console.log(distance);
}
var myImage = new Image(50, 100);
myImage.src = 'images/line.png';
myImage.height = getDistance(circle1, circle2);
document.getElementById("line").appendChild(myImage);

You have to add an event listener to the window resize event.
Add the following snippet on the end of your code:
window.addEventListener('resize', function(){
myImage.height = getDistance(circle1, circle2);
}, false);
Doing this way instead of assigning an event on window.onresize allows binding multiple functions to the event.
You can also use jQuery if you have it loaded on your site:
$(window).bind('resize',function(){/*code*/});

Try this:
var myImage = new Image(50, 100);
myImage.id = 'line-image';
myImage.src = 'images/line.png';
document.getElementById("line").appendChild(myImage);
window.onresize = function() {
document.getElementById('line-image').height = getDistance(circle1, circle2);
}

jQuery not firing on load/ready when server responce is slow

I fire a function on jQuery(document).ready() and on jQuery(window).load(). Both the same function. It is supposed to fire an image resize script.
However, sometimes, when the server is slow to respond, the script doesn't fire at all when the page is done loading.
I've been having this problem for quite a while now, and, maybe it's overkill, but by now, I call the function as shown below, in both the document ready and the window load:
jQuery('img', '.background').each(function(){
jQuery(this).load(function(){
jQuery(this).resizeImage();
});
});
The function it calls is:
jQuery.fn.resizeImage = function() {
console.log('fired');
var bgImg = jQuery(this);
/* get img sizes */
var imgwidth = bgImg.width();
var imgheight = bgImg.height();
/* get window sizes */
var winwidth = jQuery(window).width();
var winheight = jQuery(window).height();
/* get the ratio, checks wether window is bigger or smaller than the image */
var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight;
/* checks the difference */
var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight;
/* if you want the entire image to always fit the screen, change the > to < */
if(heightdiff>winheight) {
bgImg.css({
width: winwidth+'px',
height: heightdiff+'px',
marginLeft: '-'+winwidth/2+'px'
});
} else {
bgImg.css({
width: widthdiff+'px',
height: winheight+'px',
marginLeft: '-'+widthdiff/2+'px'
});
}
};
Using the console.log, I found that the function doesn't fire at all.
Can anyone point me in the right direction as to why this might not work?

Guess you're miss using the this
jQuery('img', '.background').each(function(){
var $self = $(this);
$self.load(function(){
$self.resizeImage();
});
});

Solved it myself.
The issue was in the following:
jQuery(window).load(function(){
jQuery('img', '.background').each(function(){
jQuery(this).load(function(){
jQuery(this).resizeImage();
});
});
});
Due to the double load (jQuery(window).load and jQuery(this).load) the code didn't execute at all. Since when the window is loaded, the images are already loaded as well.