JSFiddle - React, Tailwind, and code Playground

by Josh Weir

HTML

<div style="position: relative;">this is here</div>
<div id="container" class="clearfix">
    <div id="textlayer">original text
        <br>asdfasdf
        <br>asdfasdfasdfasdf
        <br>asdfdfsdfsdf</div>
    <div id="text">Test Text
        <br>asdfasdf
        <br>asdfasdfasdfasdf
        <br>asdfdfsdfsdf</div>
</div>
<div>This is another unrelated div, shouldnt break this flow</div>
            <span id="foo"></span>

CSS

.clearfix:after{content: ""; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix{min-height: 0; height: 1%;}

#container {
    position: relative;
    border-color: red;
    border: solid;
    border-width: 1px;
    background-color: yellow;
}
#textlayer {
    float: left;
    width:auto;
    height:auto;
    background-color:white;
    filter:alpha(opacity=70);
    opacity:0.8;
    position:absolute;
    /*
    left:250;
    top:150;
    */
    display:none;
    overflow:hidden;
    border-color: black;
    border: solid;
    border-width: 2px;
}
#text {
    float: left;
    display:none;
    position: absolute;
    background-color:white;
    padding-top:100px;
    border-color: black;
    border: solid;
    border-width: 2px;
}

JavaScript

//var category = "Festivals+%2B+Events";
var category = getQueryVariable("category");
console.log(category);
if (category) var headertext = decodeURIComponent(category.replace(/\+/g, '%20'));
console.log(headertext);
$('#foo').text(headertext);

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
         var pair = vars[i].split("=");
         if(pair[0] == variable){return pair[1];}
  }
  return(false);
}