To see the issue go to this page and click the next text. The small, medium fullsize text will be off to the left (in IE8 or IE9, works fine in Chrome, FireFox) and will not be aligned with the left edge of the image.
Code (http://moments.qa.chucksoft.com/Scripts/mvc/views/show/Showview.js) Line 154:
ShowView.prototype.setImageSrc = function (imagesrc) {
var image = $('img#image');
image.attr('src', imagesrc);
image.load(function () {
var container = $('div#imagecontainer');
container.fadeIn(200);
var resizer = new Resizer();
resizer.resize(this.width, this.height, maxWidth, maxHeight);
var image = $(this);
var imageWidth = (resizer.width + 23);
container.width(imageWidth);
});
image.attr('src', imagesrc);
};
From what I can tell the container.width(imageWidth); is not rendered in IE8 or IE9. If the page is refreshed then it works. Using the built in developer tool shows the correct value in the html but if you use selector tool in the developer tool outline does not reflect the changed width value.
I've tried using vanilla javascript. That did not work. I've tried setting the image source twice. That did not work either.
I'm at a loss on how to fix this issue. Any insights would be much appreciated.
Update
To clarify, the issue arises when you transition from a landscape image to a portrait image, otherwise everything works as expected.
... ?
I have yet to figure this issue out. I have taken a different direction.
Related
I am setting up a specialised Print button. The page is complicated and needs some pre-processing before being sent to window.print().
I have the Highcharts code working at this point. It correctly resizes the charts on the page, and then, post print, it sizes them back to their original size.
The problem is that from then on, the charts will not respond to Media Query changes. The site is Responsive, built on Bootstrap, so this is not a functional result.
How do I change the chart size, but leave it able to respond to Media Queries?
The code I am using is:
Setup Code
var saveChartContainerWidth = $('.highcharts-container').css('width');
var saveChartContainerWidthSVG = saveChartContainerWidth.slice(0, -2);
$('.highcharts-container').css('width', '690px');
$(Highcharts.charts).each(function(i,chart){
var height = chart.renderTo.clientHeight;
var width = 690; // chart.renderTo.clientWidth;
chart.setSize(width, height);
chart.reflow();
});
Post Print Teardown Code
$('.highcharts-container').css('width', saveChartContainerWidth);
$(Highcharts.charts).each(function(i,chart){
var height = chart.renderTo.clientHeight;
var width = saveChartContainerWidthSVG;
chart.setSize(width, height);
chart.reflow();
});
With the help of #Ryan's link, and comments from a co-worker, I tried a number of solutions which, while not working, got me closer.
Having then a better idea of what to look for, I finally found this answer Highcharts + Bootstrap .table-responsive issue which provided a key ingredient.
The two keys are:
Do not set the size on either the SVG itself, or the direct Highchart's container. (I set it on a containing Div one level higher.)
Trigger a $(window).trigger("resize"); event.
This worked in all browsers tested (Firefox, Chrome, IE 9 - 11).
----------------- The Final Code -----------------------
// Setup
$('.chart-container').css('width', '690px');
$(window).trigger("resize");
// Teardown
$('.chart-container').css('width', '');
$(window).trigger("resize");
Do this after setting the size will do the trick.
window.onresize = () => {
chart.setSize($('parentElement').offsetWidth, height)
chart.reflow()
}
Yet if you change the onresize function to something else, it might not work. So this is more like a quick solution, yet it works perfectly
I'm trying to build a slideshow script will work with images of any width. Not too surprisingly, I'm having some centering issues that cause the portrait mode images to start off on the left when they initially display and then immediately move to the center after a short delay (giving it a bit of a "shooting ducks at a carnival" feel) .
I think that the solution is to get the image width right before it displays and then use that to center it, but I've been having some trouble finding reliable code that does that correctly. I've seen some examples that get the dimensions on load, but since the page (obviously) only loads once before the slideshow starts, that doesn't help much. I put it into CodePen for anyone to view that is kind enough to try and assist me:
http://codepen.io/Realto619/pen/fhdwK
I'm also having a problem with the getPrev() and getNext() functions not working on the first click, They work fine after that, and they seem to be firing on those first clicks, but they don't do what they're designed to until the second click.
Thanks in advance...
As I suspected, the problem was due to the image dimensions / image container not changing for each slide, so the css couldn't center it without having an accurate width for margin:0 auto; to work properly.
I created the following function and then called it in each of the other functions:
function getDim() {
iW = $(window).innerWidth();
iH = $(window).innerHeight();
natW = $(".fadein img").get(0).naturalWidth;
natH = $(".fadein img").get(0).naturalHeight;
natR = natW/natH;
adjH = iH*0.98;
adjW = adjH * natR;
$(".fadein").css('width',adjW);
$(".fadein img").css('width',adjW);
$(".fadein img").css('height',adjH);
}
Hopefully this will help someone else with a similar issue that comes here.
I recently found the perfect mini-script for the pictures section of the site I've been working on non-stop for the last half year. I had it working but apparently in Firefox it doesn't want to play nice. What's even odder is I've played with it a bit; all my references are fine, but the thing won't do what I say anymore. Another oddity is I searched Google for some of the code, found it again (to examine it), and wouldn't you know: that incarnation runs perfectly on WebKit and even ran flawlessly on Firefox! I am about to pull my hair out, so, any help is appreciated. By the way, the script in question gets dynamically loaded towards the end of the DIV. My site (pictures section): http://www.elemovements.com/pictures and the replica: http://www.gmcbryde.com/. Here is the code, as well, just for good measure (which you can find unminified at http://el.x10.mx/js/logic/pictures.js [you need only concern yourself with the first 40-50 lines or so]):
if ( $('div.highslide-gallery').length ) {
$( function() {
var $Div = $('div.highslide-gallery'),
$Ul = $('ul.horiz-list'),
$UlPadding = 0;
$Ul.width(9000);
$Div.width( $Div.parent().parent().width() - 26 );
var $DivWidth = $Div.width();
$Div.css( {overflow: 'hidden'} );
var lastLi = $Ul.find('li:last-child');
$Div.mousemove(function(e){
var $UlWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + $UlPadding;
var left = (e.pageX - $Div.offset().left) * ($UlWidth-$DivWidth) / $DivWidth;
$Div.scrollLeft(left);
} );
} );
}
The issue I am experiencing is that the DIV just won't move in Firefox. In WebKit, it works as expected but all that happens in good ol' Mozilla is the mousemove() event gets fired. I appreciate anyone's help. Thank you.
I just remembered that Firefox requires an initial width for elements, and I had forgotten to again include the CSS I had for it after I first scrapped it. That made all the difference. Thanks anyway!
I am having an issue positioning a background image using the following jquery background position command in Firefox, Google Chrome, and Safari. The code works correctly in IE 8.
$('#element').css({ backgroundPosition: 'xpx ypx' });
The desired effect is a continuous stream of fluid from the right side of the screen to the left, blurred out while behind the main page content. This is achieved using 2 fluid images, one completely sharp and one completely blurred. As the user resizes the window, a jquery function calculates the appropriate positioning of the blurred image (set as a background image) and edits the backgroundposition css attribute.
The x position of the image is calculated dynamically based on window size and the y position is static. The css appears to be modified correctly (note the backgroundposition display in the right most text box). However, the background image I am attempting to overlay is absent in mozilla/chrome/safari. See jscript code below:
$(window).resize(function () {
// image positioning variables
var windowwidth = $(window).width();
var imgwidth = $('#imgFluid').width();
var offset = $('#divFluidBlur').offset();
// calculate and implement position
blurPositionLeft = (windowwidth - imgwidth) - offset.left;
$('#divFluidBlur').css({ backgroundPosition: blurPositionLeft + 'px' + ' 30px' });
// debug: display actual css Background Position of element to text box
$("#txtActualBackgroundpos").val(document.getElementById ("divFluidBlur").style.backgroundPosition); }
Thanks in advance for your help,
Andrew
What you are doing should work. Anyway, you may want to try a little cleaner version: $('#divFluidBlur').css('background-position', blurPositionLeft + 'px' + ' 30px'); And you may want to use Firebug to temporary disable or change values of other styles that could be iterfering.
Could you privide an online example of the problem?
Ahoy!
I've built a little script to check the size of the left-hand margin on page load, resize a div there to fill it, and change the header div to float next to it.
Here's the code:
function buildHeader() {
var containerMarginLeft = $(".container_16:not(:first)").css("margin-left");
var headerHeight = $("#header").height();
$("#stripe").width(containerMarginLeft).height(headerHeight).css("float", "left");
$(".container_16:first").css("float", "left");
$("#header").css("margin-left", 0).width(950);
}
$(document).ready(function(){
// Manipulate layout for the first time
buildHeader();
// Manipulate layout when window is resized
var resizeTimer = null;
$(window).bind('resize', function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(buildHeader, 100);
});
});
And the demonstration is here: http://robertmay.me.uk/mockups/plane.html (it creates the line that stretches on the left).
Now, it works in webkit browsers. It doesn't work in Mozilla, and I've not even tried it in IE.
Anyone have any ideas as to why it doesn't seem to work in Mozilla? I have a feeling it might have something to do with the CSS.
$(".container_16:not(:first)").css("margin-left");
This line gives a result of '0px' in Firefox regardless of how wide the window gets. However, Firebug Lite in Safari shows this value as changing depending on the width of the window.
The problem seems to be with the .css('margin-left') part of the statement, since $(".container_16:not(:first)") returns the same element in both browsers. Indeed, Firebug in Firefox shows the Computed Style for this element as having '0px' for marginLeft and marginRight, but this is non-zero in Safari.
As expected, changing from 'margin-left' to 'marginLeft' makes no difference, nor does accessing the attribute directly, like $(".container_16:not(:first)")[0].style.marginLeft, because Firefox is computing it wrong in the first place.
Sorry I don't have an answer, but hopefully this will lead you in the right direction. For me though I would try to align the layout using just CSS, resorting to JavaScript fixes only as a last resort.