UMM: .svg-replacement + toggle Info-Layer inside <td>

by Fiddel

HTML

<table class="bricks">
<thead>
<tr>
<th>Title</th><th>Gültigkeit</th><th>Netzpunkt/System</th><th class="meldungsart">Meldungsart</th><th>Letzte Änderung</th>
</tr>
</thead>
<tbody>
	<tr class="row category5 status02">
		<td>
			<a href="944"><h3>Übernominierung</h3></a>
		</td>
		<td>
			<time datetime="2016-01-31 04:00:00">31.01.2016 04:00 Uhr</time><br>
			<time datetime="2016-02-01 04:00:00">01.02.2016 04:00 Uhr</time>
		</td>
		<td>
			<br>
		</td>
		<td class="meldungsart category5">
			<img src="https://www.open-grid-europe.com/cps/oge_statics/images/icons/icon_roundview_variante01.svg" class="svg info"/> 
			<span>(info text inside layer) lorem ipsum dolor sed amet</span>
			</td>
			<td>
			text text
		</td>
	</tr>
		<tr class="row category2 status01">
		<td>
			<a href="944"><h3>Übernominierung</h3></a>
		</td>
		<td>
			<time datetime="2016-01-31 04:00:00">31.01.2016 04:00 Uhr</time><br>
			<time datetime="2016-02-01 04:00:00">01.02.2016 04:00 Uhr</time>
		</td>
		<td>
			<br>
		</td>
		<td class="meldungsart category2">
			<img src="https://www.open-grid-europe.com/cps/oge_statics/images/icons/icon_roundview_variante01.svg" class="svg info"/> 
			<span>(info text inside layer) lorem ipsum dolor sed ametum dolor sed amet</span>
			</td>
			<td>
			text text
		</td>
	</tr>
</tbody>
</table>

CSS

.meldungsart{
   position: relative;
   cursor: pointer;
   max-width: 120px;
   background: lime;
}

.svg.info{
	width:37px;
	height:37px;
}

.meldungsart:hover .svg.info{
background-color:#ff0;
}

.svg.info + span
{
    display: none;
    position: absolute;
    top: 45px;
    left: -20px;    
    
    width:300px;
    height:300px;
    background-color:#ff0;
    
		 z-index:2
}

JavaScript

// imgToSvg().done(infoLayer, dritteFunktionWennImgToSvgFertig, vierteFkt, usw);
//imgToSvg().done(infoLayer());




function infoLayer() {
// click on .svg.info toggles Layer
var v = false;
$(".svg.info").click(function(){
    if (v == false){
       $(".svg.info + span").fadeIn(function(){v = true;}).css("display","inline-block");
    }
    if (v == true){
        $(".svg.info + span").fadeOut(function(){v=false}).css("display","inline");
    }
});
}infoLayer();



function imgToSvg() {
// replace all img[class="svg"]
$('img.svg').each(function () {
	var $img = jQuery(this);
	var imgID = $img.attr('id');
	var imgClass = $img.attr('class');
	var imgURL = $img.attr('src');

	jQuery.get(imgURL, function (data) {
		// Get the SVG tag, ignore the rest
		var $svg = jQuery(data).find('svg');

		// Add replaced image's ID to the new SVG
		if (typeof imgID !== 'undefined') {
			$svg = $svg.attr('id', imgID);
		}
		// Add replaced image's classes to the new SVG
		if (typeof imgClass !== 'undefined') {
			$svg = $svg.attr('class', imgClass + ' replaced-svg');
		}

		// Remove any invalid XML tags as per http://validator.w3.org
		$svg = $svg.removeAttr('xmlns:a');

		// Replace image with new SVG
		$img.replaceWith($svg);

	}, 'xml');

});
}imgToSvg();