i have this gallery that resizes image with javascript in order to keep original aspect ratio.
about document structure : stylesheet considering this particular object is as following :
#ThePicture {position:absolute;left:50%;height:100%;max-width:100%;}
then PHP build list of images for menu,and most recent one sets as #ThePicture
which is manipulated with following javascript
function KeepRatio() {
var height = document.getElementById('ThePicture').height;
var width = document.getElementById('ThePicture').width;
var origHeight = document.getElementById('ThePicture').naturalHeight;
var origWidth = document.getElementById('ThePicture').naturalWidth;
var ratio = origWidth / origHeight;
document.getElementById('ThePicture').width = height * ratio;
document.getElementById('ThePicture').style.marginLeft = - width/2;
}
i call this function once at the instance of window.onload and then at every instance of selecting new image to be viewed , thus on ...ThePicture').onload
Now the problem im having occurs only in Chrome : First there isnt any image set as ThePicture (which is almost certainly made by the Javascript function , because the initial image is in place after PHP constructed the entire page.),on FIRST click in menu to select new image , nothing happens , on SECOND click the image appears out of its intended position , and on THIRD click , the negative margin gets calculated,moving the image in its place.My page works fine in Opera and Mozilla.
Related
I'm wanting to tie the height of a button to the height of an external SVG after it's been resized by a browser.
Jsfiddle is here.
Here's the script:
function svgLoad() {
"use strict";
this.wrapper = document.getElementById('wrapper');
this.navID = document.querySelector('#slideMenu');
this.menuButton = document.querySelector('#menuButton');
this.logo = document.getElementById('logo');
this.logoWrap = document.getElementById('logoWrap');
this.navBar = document.getElementById('navBarWrap');
console.log(this.logo);
console.log(this.logo.clientHeight);
console.log(this.navBar.clientHeight);
this.loaded = function() {
this.logoHeight = Math.round(this.logo.clientHeight);
this.rect = this.logo.getBoundingClientRect();
console.log(this.rect.height);
console.log(this.logoHeight);
console.log(this.navBar.clientHeight);
// Sets height of menu button to match height of logo.
this.menuButton.style.height = this.logoHeight + 'px';
console.log(this.menuButton.style.height);
this.wrapper.style.marginTop = this.navBar.clientHeight + 'px';
}.bind(this);
this.logo.onload = this.loaded;
}
new svgLoad();
If I use window.onload everything displays fine, but I'd prefer the script to run once the SVG is ready. If I try running when the SVG object is loaded, I get different results across browsers.
Everything works fine in FF and Edge/IE using onload/addEventListener on the SVG.
In Chrome it it won't work at all, it consistently reports the SVG's size as 160px. It's showing the SVG as an anonymous function in the console, and within that the client height is calculated correctly; It just won't apply it to the script (possibly worth noting it reports the same height in the fiddle even though it doesn't load the SVG at all in Chrome).
Edit - having looked into this a bit more, Chrome seems to be changing the SVG's offsetTop property to make up the difference between the height it should dsisplay at and 160px.
I've playing with this and found an answer.
FF and IE/Edge will resize the SVG properly without either width or height specified on the object. Chrome requires that a height is specified before it sends the correct client height to the script.
For my purposes using rem/em was the best solution.
This question already has answers here:
jQuery event for images loaded
(14 answers)
Closed 8 years ago.
I want to create a picture preview plugin and for this i want to create a dynamic bar under the preview image with a title and so on
The Images have no consistent width so I need to adjust the bar everytime I select a new Picture.
The preview Image source is also created dynamicly with the source path of the clicked image but another directory.
To adjust the bar i ask for the preview image's width: var width = $("#maximized_image").width(); and I call this directly after I set the source of the preview image.
But my problem is that sometimes apparently the image is loaded after the width is defined so my width is 0 and my bar is not visible. Is it possible to wait for the image is loaded or force jquery to wait for it?
Or does anyone have another solution?
EDIT:
Here is what I have till now:
var img = $(this).attr("src");
var img_split = img.split('.');
var img_path = img_split[0];
var rest = img_path.substring(0, img_path.lastIndexOf("/") + 1);
var last = img_path.substring(img_path.lastIndexOf("/") + 1, img_path.length);
var max_image = rest + "/normal/" + last + "." + img_split[1];
$("#image_maximizer").css("height", win_h).css("width", "100%").css("display", "block").css("background", "rgba(0, 0, 0, 0.6)");
$("#render_img").attr("src", max_image);
var width = $("#maximized_image").width();
alert(width);
this sets the image but i don't get the image's width
you can load the image but render it off screen, get the width then load it where you need it (you wont be loading it twice as its already loaded/cached)
I'd suggest though that you load the image THEN load in the bar with a nice fade effect or something, I'm sure a slight 300ms etc delay wont make too much difference?
Using something like onLoad for the image will say when the image is loaded but it will still have to be rendered first
Run a function when the page is fully loaded including graphics:
$( window ).load(function() {
// Run code
});
jquery load event
I have this jQuery code which centralizes an image within a DIV horizontally and vertically:
var $itemImage = $('.a-img');
$itemImage.each(function() {
var $img = $(this);
var h = $img.height();
var w = $img.width();
$img.css('margin-top', +h / -2 + "px").css('margin-left',+ w/ -2 + "px");
});
It works when the page is first loaded. However, there's a link on the page that will show a pop-up box where you can update the photo. Once you click "Upload" on the pop-up box, the image on the main page will change without refreshing the entire page. The jQuery code that initially applied to the image no longer works (the image is no longer centralized).
How do I solve this problem?
Put this into a function, and call this function when you load the image. Oh, and this is JavaScript. Remove the $ on the variables: itemImage instead of $itemImage, img instead of $img.
How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.
I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.
I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.
I am writing a simple script that displays a dialog box when a user hovers over a profile picture. It dynamically determines the profile pics location on the page and then places itself to the left of it and about 100px above it. This part is working fine.
My issue arises when a profile pic is at the top of the screen and a user mouses over it. The dialog will appear but the top portion of it will be above the fold (i.e. not in the current browser window). Naturally this is not good usability and I would like it to appear on the screen.
My question is how do I know when a dialog will be off screen so I can recalculate its position on the page?
I saw this question which seems like the same as mine but unfortunately no actual solution was provided other then to link to a jQuery plugin. I am using Prototype.
Prototype already provides positions with Element.viewportOffset().
Edit, as Mathew points out document.viewport gives the rest of the information. For example,
var dialogtop = dialog.viewportOffset().top;
if (dialogtop < 0) {
// above top of screen
}
elseif (dialogtop + dialog.getHeight > document.viewport.getHeight()) {
// below bottom of screen
}
You'll want to find the profile pic's position relative to the document (here's a good article on how, though I suspect Prototype's Element.Offset already handles this), then compare it to the body's scrollTop property to see if it's close enough to the top that it needs to have its dialog repositioned.
I am familiar with this problem, however, last time I was able to use a library (Seadragon) to get the screen dimensions and mouse position. I was also working with a fixed size overlay so no code to share with you other than general approach.
For my pop up box I decided to use the event mouse position rather than location of the div on the page. I then compared the mouse position to the known screen size, which I determined on start or resize.
From How do I get the size of the browser window using Prototype.js?
var viewport = document.viewport.getDimensions(); // Gets the viewport as an object literal
var width = viewport.width; // Usable window width
var height = viewport.height; // Usable window height
In Prototype you can also get the mouse coordinates:
function getcords(e){
mouseX = Event.pointerX(e);
mouseY = Event.pointerY(e);
//for testing put the mouse cords in a div for testing purposes
$('debug').innerHTML = 'mouseX:' + mouseX + '-- mouseY:' + mouseY;
}
Source : http://remorse.nl/2008/06/mouse_coordinates_with_prototype/