Raymond Eiber
Reputation: 39
How to make a div slide into the viewport, without knowing its height
I need the CSS code for the green box. The green box should be almost complete invisible, if you click on the visible area, then the rest should slide up.
The height of the green element should be unknown. I'm currently adding style="bottom: -27em" manually
It is important that this element stays sticky at the bottom even if the window is resized.
How can I accomplish this task?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="width: 300px" class="overflow-hidden h-screen float-right m-4 relative">
<!-- Trigger Button -->
<div id="time-trigger" class="fixed" style="bottom: -27em" data-state="closed">
<div style="width: 300px" class=" w-6 cursor-pointer flex rounded-t-lg bg-violet-800 justify-center items-center text-white leading-10">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Time Trigger</span>
</div>
<div class=" bg-white text-black p-4">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<script>
$("#time-trigger").on("click", function() {
if ($("#time-trigger").attr('data-state') == "closed") {
$("#time-trigger").css("bottom", "");
$("#time-trigger").attr("data-state", "open")
} else {
$("#time-trigger").css("bottom", "-27em");
$("#time-trigger").attr("data-state", "closed")
}
});
</script>
</body>
</html>
Upvotes: 0
Views: 91