I'm working with a function that uses an image to set a div's margin-top.
It finds the image height and the window height and sets the divs margin-top to the lesser of the two values. It works perfectly fine for all local browsers (IE, Chrome, Firefox).
When I upload it to GitHub it fails to recognize the image height however. Now when I run the code below on GitHub the console.log of the image height is 0. When I run it locally the console.log of the image height is correct. The image is loaded on GitHub, so it's not an issue of the image not making into the web page.
It seems like the script runs before the image loads on GitHub, but not locally. Anyone have any ideas?
var portfolioMargin = function() {
var windowHeight = window.innerHeight;
var imageHeight = $('#imageWrap img').height();
//if windowheight is bigger than image height make portfolio div margin equal to image height, else do the opposite
console.log("window height " + windowHeight);
console.log("image height " + imageHeight);
if (windowHeight > imageHeight) {
$('#portfolio').css('margin-top', imageHeight);
} else {
$('#portfolio').css('margin-top', windowHeight);
}
};//end portfolioMargin function
So I figured it out I think. You have to wrap the function in a window.load function to make sure all images have been loaded. From what I understand this won't work for dynamically added images however. Here is the code that fixed it:
//make sure images have loaded before running image height
$(window).load(function() {
portfolioMargin();
});
Related
https://jsfiddle.net/diegojsrw/od12s9b4/14/
c.font = "100vh sans-serif";
c.fillStyle = "white";
c.fillText(fps.toFixed(0), w/2, 0);
Initially, the text's height seems fine.
However, when I resize the window, the text doesn't resize together. The text is constantly drawn on canvas (using requestAnimationFrame).
The text size is only re-adjusted when I switch to another tab then switch back to this tab.
Any clues?
You are facing a webkit bug. Both latests Chrome and Safari are concerned.
In the Canvas2D API, relative units/values should get computed at setting and this computed value will get saved and used.
This means that your relative 100vw value will get computed to its corresponding value in absolute px unit.
This is one of the reasons it is advised to always use absolute units from the canvas API (among others like tweaks in roundings etc.).
But if you really want to use this unit, then you have to set it everytime it has changed, so you could go blindly and inside your loop just set ctx.font again before calling fillText(), but for performances, I would advise you use a dirty flag, that would get raised in the window's resize event, and only update the ctx.font property when this flag is raised.
But this is only fine for browsers that do follow the specs...
I have no real clue as to when webkit browsers will compute this value, as even resetting the font property to something else won't do, and even setting it to an other value (e.g switching between 20vh and 21vh) won't do either...
So the only workaround I can see for now, is to actually compute yourself this value. For viewport size, that's not so hard (innerWidth / (100 / vw_val)), but even for other relative units, you can actually set this fontSize on the canvas directly and call getComputedStyle() on the canvas.
let dirtySize = true; // this is our resize flag
const ctx = canvas.getContext('2d');
let fontStyle = ' Arial, sans-serif';
anim(0);
// the animation loop
function anim(time) {
// call the drawing methods
draw(Math.round(time/1e2));
// lwoer the flags
dirtySize = false;
// do it again next frame
requestAnimationFrame(anim);
}
function draw(txt) {
// clear
ctx.clearRect(0,0,canvas.width, canvas.height);
// only if needed
if(dirtySize) {
// get the cpmputed style from our DOM element
const fontSize = getComputedStyle(canvas).fontSize;
// or could be
// const fontSize = (innerWidth / (100 / 20)) + 'px';
ctx.font = fontSize + fontStyle;
}
// draw everytime
ctx.fillText(txt, 0, 100);
}
// on window's resize event
window.addEventListener('resize',
evt => dirtySize = true, // raise our flag
{ passive: true }
);
#canvas {
font-size: 20vw;
}
<canvas id="canvas"></canvas>
I built my scene in three js and everything was working properly when I rendered the scene on the . But now I need the scene to be on a div, 70% of the viewport to be specific, the other 30% being a left side panel with some info. I replaced every window.height and width for the width and height of the div itself, but now the events are all broken. I tried bubbling and capturing but the problem seems to be related with the camera or something in three js, because when I hover on a corner something is happening...but nothing is happening when i hover/click on the 3d globe. I google everything and didn't find an answer or people with similar issues..I'm hopeless, help? Thanks.
Edit: here's a fiddle: https://jsfiddle.net/2L686cnw/
Did you update all for the renderer relevant variables on window resize?
Just like this:
var onWindowResize = function(){
renderWidth = element.offsetWidth;
renderHeight = element.offsetHeight;
camera.aspect = renderWidth/renderHeight;
camera.updateProjectionMatrix();
renderer.setSize(renderWidth, renderHeight);
};
$(window).on('resize', function() {
onWindowResize();
});
The issue sounds like that you get wrong viewport coordinates for your click position. Most three.js examples add event listeners to window or document object and using event.clientX (and clientY) to transform the mouse screen coordinates to viewport coordinates to use it for raycasting.
Having the 3D scene within a separate div covering only part of the page, it should be a bit different:
function onClick(event) {
var mouse = new THREE.Vector2();
mouse.x = (event.offsetX / panelWidth) * 2 - 1;
mouse.y = - (event.offsetY / panelHeight) * 2 + 1;
// do raycasting
}
canvas.addEventListener('click', onClick);
I am using jquery mobile and I want to stop images from being resized larger than their actual dimensions, but still allow resizing if smaller particularly when displaying on desktop
I have rolled my own code below which works ok(ish) but I currently have 2 issues
when the image is resized beyond its actual size I get screen flicker as the image is displayed but the code kicks in and redisplays it to a smaller size
it doesn't always resize when double clicking the browser title bar
Can anyone help/advise on this please?
<img id="imgs" style="width:90%;" src="images/mypic.jpg" />
$(document).on('pageshow', '#index', function (event) {
resizeimage(awidth, aheight)
});
$(window).resize(function () {
resizeimage(awidth, aheight)
});
function resizeimage(maxwidth, maxheight) {
var width = $(imgs).width(); // Current image width
var height = $(imgs).height(); // Current image height
// **** this is trace output only
//$(windowwidth).text($(window).width());
//$(windowheight).text($(window).height());
//$(iwidth).text($(imgs).width());
//$(iheight).text($(imgs).height());
if (parseInt(width, 10) > maxwidth) {
//$(info).text('bigger'); // trace output
$(imgs).css("width", maxwidth); // dont allow image to resize larger than its actual size
} else {
//$(info).text('smaller'); // trace output
$(imgs).css("width", "100%"); // allow image to resize below its actual size
}
}
In image tag, if we don't supply width and height property, we will get nothing when retrieving the width and the height of the image. I am using the canvas element to load an image and scale it proportionally. In order to do this, I have to get the actual image size. Is it possible to do that in html 5?
The HTMLImageElement has two properties for this, naturalWidth and naturalHeight. Use those.
As in:
var img = new Image();
img.addEventListener('load', function() {
// once the image is loaded:
var width = img.naturalWidth; // this will be 300
var height = img.naturalHeight; // this will be 400
someContext.drawImage(img, 0, 0, width, height);
}, false);
img.src = 'http://placekitten.com/300/400'; // grab a 300x400 image from placekitten
It is wise to set source only after the event listener is defined, see Phrogz's exploration on that here: Should setting an image src to data URL be available immediately?
You cannot retrieve width/height before image has been loaded.
Try something like:
// create new Image or get it right from DOM,
// var img = document.getElementById("myImage");
var img = new Image();
img.onload = function() {
// this.width contains image width
// this.height contains image height
}
img.src = "image.png";
Anyhow onload will not fire if image has been loaded before script execution. Eventually you can embed script in html <img src="test.jpg" onload="something()">
if I understand you correctly, you can use the getComputedStyle method.
var object = document.getElementById(el);
var computedHeight = document.defaultView.getComputedStyle(object, "").getPropertyValue("width");
Not fully understood your question.
But you can use javascript to get the width and height of the image.
and then pass it into
/ Five arguments: the element, destination (x,y) coordinates, and destination
// width and height (if you want to resize the source image).
context.drawImage(img_elem, dx, dy, dw, dh);
while drawing image on canvas.
or check this if it helps
http://jsfiddle.net/jjUHs/
Is there a way to get a .png height without creating ImageView?
The methods I found on google require createImageView first and then doing a .height.
I want to avoid creating ImageView because I'm going to createImageView after I get the height of the png and perform some changes.
Or rather, I will be using the height value during the var imagevariablename = Ti.UI.createImageView itself, so I can't using imagevariablename.height because the declaration of var imagevariablename is not done yet.
I don't know of any way to get the height / width of an image without creating an imageView in Titanium. In my app, I create a temporary image view and read the attributes without ever adding it to a view / window. Then you can create the 'real' image view once you know the size:
var imageTemp = Ti.UI.createImageView({
image : someFile.read(),
height:'auto',
width:'auto'
});
Ti.API.info( "height=" + imageTemp.size.height);
Ti.API.info( "width=" + imageTemp.size.width);
imageTemp = null;
Try this code
var imageTemp = Ti.UI.createImageView({
image : <image>,
height:'auto',
width:'auto'
}),
imageSize = imageTemp.toImage();
Ti.API.info( "height=" + imageSize.height);
Ti.API.info( "width=" + imageSize.width);
imageTemp = imageSize = null;
If you create a Blob from your image you can get width and height from the blob
From Titanium docs:
If this blob represents an image, this is the height of the image in pixels.
In my condition this is run like this.
var imageTemp = Ti.UI.createImageView({
image : someFile.read(),
height:'auto',
width:'auto'
});
alert( "height=" + imageTemp.toBlob().height);
alert( "width=" + imageTemp.toBlob().width);
imageTemp = null;
I was working on this and had trouble with the code above using 3.2.2, testing on Android. Various attempts would just give me 1, 0 or SIZE for the width and height values. This DOES use an imageView, but the following gets me everything I need in this environment. I also am using the load event instead of postLayout. Hopefully this helps someone.
$.map.image = 'http://getyourownimage.com/dev/8fac94c6-872b-4bda-a56a-7dba09188c66.png';
$.map.zIndex = 1;
$.map.width = 'auto';
$.map.height = 'auto';
$.map.addEventListener('load',function(e){
var rect = $.map.getRect();
Ti.API.info(rect.width); //actual width of imageView
Ti.API.info(rect.height); //actual height of imageView
Ti.API.info($.map.getWidth()); //returns auto/SIZE, doesn't work
Ti.API.info($.map.getHeight()); //returns auto/SIZE, doesn't work
Ti.API.info($.map.toImage().width); //some scaled value, not useful
Ti.API.info($.map.toImage().height); //some scaled value, not useful
Ti.API.info($.map.toBlob().width); //image original/full size width
Ti.API.info($.map.toBlob().height); //image original/full size height
alert('rectX:'+rect.width+',rectY:'+rect.height+',mapGW:'+$.map.getWidth()+',mapGH:'+$.map.getHeight()+',tiX:'+$.map.toImage().width+',tiY:'+$.map.toImage().height+',tbX:'+$.map.toBlob().width+',tbY:'+$.map.toBlob().height);
});