centering image with a colspan = 2

[wegz15]

How exactly would I do that? I’m still trying to learn javascript. I’ve watched several videos and most of it has not clicked yet.

[sdetweil]

@wegz15 use the same code u have to make a div object, and then append the image to that, and append the DIV to the dom

var iconCell = document.createElement("tr");
				iconCell.colSpan = 3;
				iconCell.style.textAlign = "center";
				iconCell.className = "bright-weather-icon";
				row.appendChild(iconCell);
var iconDiv = document.createElement("div");
var icon = document.createElement("span");
				icon.style.textAlign = "center";
				icon.className = "wi-weathericon " + forecast.icon;
				iconDiv.appendChild(icon);
                                iconcell.appendChild(iconDiv)

[wegz15]

@sdetweil that does not load anything. I copied and pasted it as you wrote it. It just says “Loading…”

[wegz15]

So, I got it to load. There was a capitalization mistake. It still won’t center. Looking at it in the inspector I noticed that the class name is the cell image I want to display. How would I get the class to be standardized and the source html to change based on the weather? So there is basicall nothing in the cell for it to center. The colspan attribute does not show up as well.

<tr class= "bright-weather-icon" style="text-align: center;">
   <div>
       <tr class="wi-weathericon night-cloudy" style="text-align: center;"> </tr>
   </div>
</tr>

[sdetweil]

@wegz15 I don’t understand the question…

YOU set the classname

icon.className = "wi-weathericon " + forecast.icon;

see https://stackoverflow.com/questions/8603914/center-image-in-table-td-in-css/8603927

[wegz15]

Sorry, I’m pretty new at this. I took a basic web design class with very basic css about 15 years ago. I guess what I’m asking is how do I source an image? I want to display the weather image based on the api response. My assumption of why it is not working is because currently the image is being called by the class name. When I inspect the cell in chrome inspector I see this:

(span class=“wi-weathericon rains” style=“text-align: center;”) (/span)

The code calls for (icon.className = "wi-weathericon " + forecast.icon;)

When I change it to imgSrc = "wi-weathericon " + forecast.icon; I get an empty sqaure displayed. I tried imgSrc = /modules/icon/"wi-weathericon " + forecast.icon; and that makes the module not show up.

[sdetweil]

@wegz15 you would use the image tag
note the image tag below has a e+xtra space after the open as this forum uses that tag, and stuff disappears

< img src="url"></img>

so,

var i= createElement("img")..
i.src=....

[wegz15]

Here is what I added…

var iconCell = document.createElement("tr");
				iconCell.colSpan = 2;
				iconCell.style.textAlign = "center";
				iconCell.className = "bright-weather-icon";
                                row.appendChild(iconCell);
				

				var icon = document.createElement("span");
				icon.colSpan = 2;
				icon.style.textAlign = "center";
				icon.className = "wi-weathericon" + forecast.icon;
				iconCell.appendChild(icon);
				
				var i=document.createElement("img");
				i.src = "wi-weathericon " + forecast.icon;
				iconCell.appendChild(i);

that shows up with an empty square below the current left aligned image. I tried deleting the var icon and got just a blank sqaure…here is the code plus element from chrome.

                                var iconCell = document.createElement("tr");
				iconCell.colSpan = 2;
				iconCell.style.textAlign = "center";
				iconCell.className = "bright-weather-icon";
				row.appendChild(iconCell);
				
                                var i=document.createElement("img");
				i.src = "wi-weathericon " + forecast.icon;
				iconCell.appendChild(i);

chrome inspector shows this:

< tr class="bright-weather-icon" style="text-align: center;">< img src="wi-weathericon night-rain">< /tr>

and then the css shows this:

.night-rain{
	content: "";
	height:70px;
	width:105px;
	display: block; 
	background-image : url("/css/icon/45.png");
	background-size: 105px 70px;
	background-position: center;
	text-align: center;
}

so I need that to be the class so it replaces it with the correct image…but still don’t know how to center that

[wegz15]

well I got it to work. I ended up having to set the left border to 50% in the css.