As I am not a javascript developer, the code I have been given for debugging is somewhat challenging. The issue at hand involves an iOS module where a .js CSS file has been set up and images are loading improperly, resulting in the need for horizontal scrolling.
I have provided my code below. Despite setting the style to block for display, the desired output is still not achieved.
function resizeImages(container, maxWidth) {
var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var img = images[i];
var width = parseInt(window.getComputedStyle(img, null).getPropertyValue('width'));
var height = parseInt(window.getComputedStyle(img, null).getPropertyValue('height'));
if (width > maxWidth) {
var ratio = maxWidth / width;
img.style.width = (maxWidth - 30) + "px";
// Some image heights are set to 'auto' so they do not need their height set
if (height != 0) {
img.style.height = parseInt(height * ratio) + "px";
}
}
img.style.display = "block";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
}
}
In this function, can the layout be defined or should another approach be considered?
Your assistance with this matter would be greatly appreciated.
EDIT************* A snippet of the HTML response from the call has been printed out:
<link rel="stylesheet" href="/7.0.2.0/styles/jive-base.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive-content.css" type="text/css" media="all" />
<style>
/* Improve default page styles for mobile */
body { background-color: #FFFFFF; min-width: 100px; padding-top: 20px; padding-left: 10px; padding-right: 10px;}
p {width: 98%; }
div.jive-rendered-content { width: 98%; }
.jive-rendered-content img.jive-image { margin: 5px; }
/* Remove link icons from inline links */
.jive-link-profile-small, .jive-link-socialgroup-small, ...etc...
...Remaining Content trimmed for brevity...
My apologies for the cluttered HTML, but I tried my best to provide the essential information while cleaning it up slightly:
<body><link rel="stylesheet" href="/7.0.2.0/styles/jive-base.css" type="text/css" media="all"/>
...Remaining Content trimmed for brevity...