JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div id="wrapper">
  <div id="info">Hello</div>
  <div id="close">Ausblenden</div>
  <div id="open">Einblenden</div>
</div>

CSS

html,
body,
#wrapper {
  position: relative;
  height: 100%;
}

#wrapper {
  overflow: hidden;
  height: 100%;
}

#info {
  display: none;
  background: red;
  position: absolute;
  width: 150px;
  height: 20px;
  top: 300px;
}

JavaScript

//Infobox einblenden

if($(window).width() > 900) {
    setTimeout(function() {
      $("#info").animate(initleft, 1000);
    }, 3000);
}

update();
$(window).resize(function() {
  update();
  console.log("resized");
});

function update() {
  var width = $(window).width();
  if (width > 900) {
  	//box left
  	console.log("über 899");
		styleleft = {"left": "0", "margin-left": "-150px", "display": "block"};
    $("#info").css("margin-right","");
    $("#info").css("right","");
		$("#info").css(styleleft);
    
    initleft = {"margin-left": "0", "left": "0"};
    closeleft = {"margin-left": "-150", "left": "0"};

    $("#close").click(function() {
    setTimeout(function() {
    	$("#info").css("display","none");
    }, 1000);
      $("#info").stop().animate(closeleft, 1000);
    });
    $("#open").click(function() {
    	$("#info").css("display","block");
      $("#info").stop().animate(initleft, 1000);
    });
  }
	else {
  	//box right
    console.log("unter 899");
		styleright = {"right": "0", "margin-right": "-150px", "display": "block"};
    $("#info").css("margin-left","");
    $("#info").css("left","");
    $("#info").css(styleright);
    
    initright = {"margin-right": "0", "right": "0"};
    closeright = {"margin-right": "-150", "right": "0"};

    $("#close").click(function() {
    setTimeout(function() {
    	$("#info").css("display","none");
    }, 1000);
      $("#info").stop().animate(closeright, 1000);
    });
    $("#open").click(function() {
    	$("#info").css("display","block");
      $("#info").stop().animate(initright, 1000);
    });
  }
}