I'm trying to create this floating modal popup that sits in the top right-hand corner of the screen. I want the background to be active (as in I can do things normally on the webpage without the popup bothering it.
The problem arises when I want to resize the modal to the content on the inside. So for example, if I were to write a paragraph inside that popup, it would automatically resize the modal to contain that text. Preferably I want the width to be constant but I want it to extend downward depending on the text.
Here's what I have so far:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "inline-block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
right: 0;
top: 0;
width: 50%; /* Full width */
height: 50px; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: orange;
position: absolute;
right: 0px;
border: 1px solid #888;
width: 100%;
height: 100%;
margin: auto;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
So when the "modal-content" div increases in size due to text, I want the parent div (myModal) to adjust its size accordingly. I can't figure out how to do this. Any ideas?
Thanks!
I removed the overflow:auto so the scrollbar will not appear when there's a long text. The modal expands automatically and has a minimum height of 100 pixels.
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "inline-block";
}
span.onclick = function() {
modal.style.display = "none";
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
right: 0;
top: 0;
width: 30%;
/* Full width */
height: auto;
min-height: 100px;
/* Full height */
background-color: orange;
border: 1px solid #888;
}
.modal-content {
}
/* The Close Button */
.close {
color: #aaaaaa;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 0;
right: 0;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus nunc, rhoncus in pellentesque vitae, bibendum vitae nunc. Morbi a arcu blandit, maximus tortor rhoncus, commodo libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus egestas odio mauris, eu imperdiet ligula lobortis malesuada. Cras sit amet laoreet odio. Vivamus feugiat tortor a ullamcorper pulvinar. Mauris vestibulum semper ex nec pretium. Curabitur in elementum leo, et mollis dui. Integer convallis scelerisque metus, vel pulvinar metus sollicitudin eu. Nunc eu tristique odio.</p>
</div>
</div>
Remove position absolute from modal content and add some padding
<!DOCTYPE html>
<html>
<head>
<title> Modal Content </title>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
right: 0;
top: 0;
width: 50%; /* Full width */
height: auto; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: orange;
border: 1px solid #888;
margin: auto;
padding:20px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "inline-block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
Related
I want to show a div on link click and hide if click outside the div.
The script is not working.
I cant close side bar by pressing outside the div.
Here is my code
<body>
<div id="mySidenav" class="sidenav ">
×
ITEM 1
ITEM 2
ITEM 3
ITEM 4
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" style="cursor: pointer; background: green; border: 1px solid black; padding: 5px;">Click me to get the right sidebar.</span>
<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
<div id="main">
... rest of the content ...
</div>
</body>
This is my javascript functions :
<script type="text/javascript">
/* Simple appearence with animation AN-1*/
function openNav() {
document.getElementById("mySidenav").style.width = "934px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "white";
}
$(document).mouseup(function(e){
var container = $("#mySidenav");
// If the target of the click isn't the container
if(!container.is(e.target) && container.has(e.target).length === 0){
container.hide();
}
});
/* Simple appearence with animation AN-1*/
</script>
<!-- container -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
Here's an example of how you can use event.stopPropagation(). This will allow you to have your $(document).click() function which will close the sideNav, and also prevent that from happening when someone clicks in the sideNav.
https://api.jquery.com/event.stoppropagation/
$(document).click(function() {
console.log('doc clicked');
})
$('.sideNav').click(function(e) {
console.log('box clicked');
e.stopPropagation();
})
.sideNav {
width: 200px;
height: 400px;
background-color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='sideNav'></div>
I got your mouseup handler working by changing container.hide() to closeNav().
Here is an example by modifying your code:
function openNav() {
document.getElementById("sidebar").style.width = "200px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("sidebar").style.width = "75px";
document.body.style.backgroundColor = "white";
}
$(document).click(function(e) {
var container = $("#sidebar");
// If the target of the click isn't the container
if (!container.is(e.target) && !container.has(e.target).length) {
closeNav()
}
});
closeNav()
#sidebar {
background-color: #cccccc;
width: 75px;
height: 100%;
position: fixed;
transition: width 750ms;
}
.content {
margin-left: 75px;
display: flex;
height: 100vh;
}
body {
margin: 0;
transition: background-color 750ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<button onclick="openNav()">Open</button>
<br/> Your sidebar content here!
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Accumsan in nisl nisi scelerisque eu ultrices. Ornare suspendisse
sed nisi lacus. Massa tempor nec feugiat nisl pretium fusce id velit.
</div>
Currently i want to show my navbar when i am scrolling on my webpage and hide my navbar when i am scrolling back. I search all over on Google, and i could not find something that could help me. I am surprised that this wasn't on the web yet. Maybe i didn't search good enough, however, after several hours of frustrating myself, i decided to get some help from the pro's here. ;-)
Would appreciate any help!
<body>
<nav>
<ul>
<li>Help</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"</script>
</body>
nav{
position: fixed;
padding: 30px 70px;
width: 100vw;
height: 10vh;
background: black;
transition: .5s ease;
z-index: 5;
}
nav ul{
float: right;
margin-right: 100px;
padding: 0px 40px;
}
$(window).scroll(function () {
var scroll = $(window).scrollTop();
var p = $win.scrollTop() / max;
var x = window.matchMedia("(max-width: 800px)")
console.log(scroll);
if (scroll > 0) {
$('nav').css({
"top": "0%",
});
} else {
$('nav').css({
"top": "-25%",
});
};
});
I think you mean something like that https://www.w3schools.com/howto/howto_js_navbar_slide.asp
Or something like this:
let lastScrollTop = 0;
function scrollFunction() {
scroll = document.body.scrollTop || document.documentElement.scrollTop;
if (scroll > lastScrollTop) // Scrolling Down
document.getElementById("navbar").style.top = "0";
else // Scrolling Up
document.getElementById("navbar").style.top = "-50px";
lastScrollTop = scroll;
}
window.onscroll = function() {scrollFunction()};
let lastScrollTop = 0;
function scrollFunction() {
scroll = document.body.scrollTop || document.documentElement.scrollTop;
if (scroll > lastScrollTop) // Scrolling Down
document.getElementById("navbar").style.top = "0";
else // Scrolling Up
document.getElementById("navbar").style.top = "-50px";
lastScrollTop = scroll;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: -50px;
width: 100%;
display: block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div id="navbar">
Home
News
Contact
</div>
<div style="padding:15px 15px 2500px;font-size:30px">
<p><b>This example demonstrates how to slide down a navbar when the user starts to scroll the page.</b></p>
<p>Scroll down this frame to see the effect!</p>
<p>Scroll to the top to hide the navbar.</p>
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
And someone already did it in jQuery
How can I determine the direction of a jQuery scroll event?
I am working on a php code as shown below in which I have added ellipsis (...) after a particular word limit.
<?php
$programs = array();
foreach ( $xml_files as $file ) {
$xml = simplexml_load_file($src_dir."/".$file) or die('Unable to load XML');
$path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$programs[] = array( "episode_title" => (string)$path_title_en,
"description" => (string)$path_description_en;
}
$program["episode_title"] = substr($program["episode_title"],0,50).' (...)'; /* ellipsis is added after a particular word limit */
$program["description"] = substr($program["description"],0,100).' (...)'; /* ellipsis is added after a particular word limit */
?>
<table>
<tr>
<td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?></td> /* Line A */
<td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td> /* Line B */
</tr>
</table>
Line#A display the following text:
Flooding Concerns in
ABCSGSGSGSGSGSG and
SHSHSGFASGXDS (...)
Problem Statement:
I am wondering what JS code I need to add so that on click of (...) , full text show up in the modal something like this.
Here is my fully tested implementation of your string extraction and the required modal feature from the w3schools demo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.triggersModal {
padding: 50px;
border: solid 2px black;
margin: 50px;
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<?php
$episodes = [
[
'episode_title' => 'Lorem Ipsum',
'description' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."],
[
'episode_title' => "The standard 'Lorem Ipsum' passage, used since the 1500s",
'description' => '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."'
]
];
foreach ($episodes as $index => $episode) { ?>
<div class="triggersModal" data-index="<?php echo $index; ?>">
<div><?php
if (strlen($episode['episode_title']) <= 50) {
echo $episode['episode_title'];
} else {
echo substr($episode['episode_title'], 0, 50) , "(...)";
}
?></div>
<div><?php
if (strlen($episode['description']) <= 100) {
echo $episode['description'];
} else {
echo substr($episode['description'], 0, 100) , "(...)";
}
?></div>
</div>
<?php } ?>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalFullTitle"></p>
<p id="modalFullDescription"></p>
</div>
</div>
<script>
// Transfer data from php to javascript
let episodes = <?php echo json_encode($episodes); ?>,
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index');
document.getElementById("modalFullTitle").innerHTML = episodes[index]['episode_title'];
document.getElementById("modalFullDescription").innerHTML = episodes[index]['description'];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
You will need to replace my hardcoded input (above) with your file scrapings. To create your $episodes array and display the main layer's content with a single loop, use this inside the <body> tag where you want to display the clickable readmore boxes:
<?php
$episodes = [];
$index = 0;
foreach ($xml_files as $file) {
$xml = simplexml_load_file("{$src_dir}/{$file}");
if (!$xml) {
continue;
}
$episode_title = (string)$xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$description = (string)$xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$episodes[] = ['episode_title' => $episode_title, 'description' => $description]; // used downscript to deliver data to clientside/js
?>
<div class="triggersModal" data-index="<?php echo $index; ?>">
<div>
<?php
if (strlen($episode_title) <= 50) {
echo $episode_title;
} else {
echo substr($episode_title, 0, 50) , "(...)";
}
?>
</div>
<div>
<?php
if (strlen($description) <= 100) {
echo $description;
} else {
echo substr($description, 0, 100) , "(...)";
}
?>
</div>
</div>
<?php
++$index;
}
?>
Things to notice:
All of the click events are written in the script block instead of inside the html to keep things clean and readable.
Using an ellipsis is only necessary if the string has enough length to merit it.
Pass the data from php to js with json_encode().
Don't use die().
My preference is to not name variables (in php or js) that will only be used once. There are some exceptions, but this is my default philosophy.
Since the lookup array (episodes) is an indexed array, the only relevant value to pass from the clicked element is the index. A data- attribute is a maintain the relationship between the main display and the data to be displayed in the modal.
Using <table> tags to display non-tabular content is not recommended. I have done very little to style the page & modal. I didn't want to depart too far from the demo that you supplied.
HTML elements that need to be identified should contain an id for easy location for javascript. Elements that occur in multiple locations should contain class.
After testing my script, there is no problem with displaying quoted text on the main page or in the modal.
I tried to keep the syntax simple/readable, but I often prefer ternary operators (inline conditions) in my php and js. Some people prefer the shorthand <?= and ?> when displaying php. I'm cool with that too; choose whatever you like.
Last but not least, if your input strings are coming from insecure channels or if they contain html, it would improve the stability/security of your application to encode html entities using htmlspecialchars($string, ENT_QUOTES, 'UTF-8') on any strings being displayed to the screen (after counting the string length, but before displaying). Here's a good reference: https://stackoverflow.com/a/1996141/2943403
Here is my source code transferred to a runnable Stackoverflow snippet:
// Transfer data from php to javascript
let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}],
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index');
document.getElementById("modalFullTitle").innerHTML = lookup[index]['episode_title'];
document.getElementById("modalFullDescription").innerHTML = lookup[index]['description'];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
.triggersModal {
padding: 50px;
border: solid 2px black;
margin: 50px;
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="triggersModal" data-index="0">
<div>Lorem Ipsum</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
</div>
<div class="triggersModal" data-index="1">
<div>The standard 'Lorem Ipsum' passage, used since the(...)</div>
<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalFullTitle"></p>
<p id="modalFullDescription"></p>
</div>
</div>
</body>
</html>
Another runnable snippet which has been adjusted to present cell text individually...
// Transfer data from php to javascript
let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}],
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index'),
content = this.getAttribute('data-content');
document.getElementById("modalText").innerHTML = lookup[index][content];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
.box {
padding: 50px;
border: solid 2px black;
margin: 50px;
}
.triggersModal {
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="box">
<div class="triggersModal" data-index="0" data-content="episode_title">Lorem Ipsum</div>
<div class="triggersModal" data-index="0" data-content="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
</div>
<div class="box">
<div class="triggersModal" data-index="1" data-content="episode_title">The standard 'Lorem Ipsum' passage, used since the(...)</div>
<div class="triggersModal" data-index="1" data-content="description">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalText"></p>
</div>
</div>
</body>
</html>
And here is a pastebin dump of an php execution of the above: https://pastebin.com/YnhNq6rD
You should use a modified demo to be able to use custom text in that modal. https://www.w3schools.com/code/tryit.asp?filename=G4QNZITEFN72
Then modify your code to be able to send full text in that modal window
<?php
$programs = array();
foreach ( $xml_files as $file ) {
$xml = simplexml_load_file($src_dir."/".$file) or die('Unable to load XML');
$path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$programs[] = array("episode_title" => (string) $path_title_en, "description" => (string)$path_description_en;);
}
foreach ( $programs as $program ) {
$episode_title = substr($program["episode_title"],0,50).' (...)'; /* ellipsis is added after a particular word limit */
$description = $program["description"] = substr($program["description"],0,100).' (...)'; /* ellipsis is added after a particular word limit */
?>
<table>
<tr>
<td style="width:8%; text-align:center;"><?php echo $episode_title; ?></td> /* Line A */
<td style="width:8%; text-align:center;"><?php echo $description; ?></td> /* Line B */
</tr>
</table>
<?php } ?>
with adding an onClick handler to that tags which will call the showModal function with full text.
I just update your code with modal UI, Script and few logic to pass content to modal. Try this I hope it'll help you out. Thanks
var modal = document.getElementById("readMoreModal");
var btn = document.getElementsByClassName("readMoreModalTrigger")[0];
var closeBtn = document.getElementById("close");
// When the user clicks on <span> (x), close the modal
closeBtn.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Append Readmore content in modal
function readMoreMethod(text) {
document.getElementById("modal-content-append").innerHTML = text;
modal.style.display = "block";
}
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#close:hover,
#close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<?php
$programs = array();
foreach ( $xml_files as $file ) {
$xml = simplexml_load_file($src_dir."/".$file) or die('Unable to load XML');
$path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$programs[] = array( "episode_title" => (string)$path_title_en,
"description" => (string)$path_description_en;
}
$program["episode_title"] = substr($program["episode_title"],0,50).' <a class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('$program["episode_title"]')">(...)</a>'; /* ellipsis is added after a particular word limit */
$program["description"] = substr($program["description"],0,100).' <a
class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('$program["description"]')">(...)</a>'; /* ellipsis is added after a particular word limit */
?>
<table>
<tr>
<td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?><a class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('tadsad sadsad asdasd asdas dsad ')" href="">(...)</a></td>
<td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td>
</tr>
</table>
<!-- The Modal -->
<div id="readMoreModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close">×</span>
<p id="modal-content-append"></p>
</div>
</div>
Here is the HTML/CSS/JS for you.
const trigger = document.querySelector(".trigger");
trigger.addEventListener("click", () => {
const fullTextSibling = trigger.previousElementSibling;
fullTextSibling.classList.add("active");
const closeModal = document.querySelector(".full_text > div > button");
closeModal.addEventListener("click", () => {
fullTextSibling.classList.remove("active");
});
});
.full_text {
display: none;
}
.full_text > div {
min-width: 300px;
min-height: 100px;
background: white;
padding: 20px;
border-radius: 10px;
}
.full_text.active {
display: flex;
background: #80808069;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
align-items: center;
justify-content: center;
}
<div class="container">
Lorem, ipsum dolor
<div class="full_text">
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
<button>X</button>
</div>
</div>
(...)
</div>
I started learning javascript this week and I'm getting my head round the basics. I've started building what will be a "FAQ" section for a page that uses a toggle switch to open and close target divs.
However, by default the div's display is set to visible. I've put a function in that will set this to hidden, so that the dropdown's are collapsed on page load. I've tried stacking them (the toggle function, and display functions), separating them with a semi-colon within "onLoad" in the body tag.
Now, before I applied these functions to run "onLoad" both worked fine. However now only the 2nd function works that toggles the divs, but the function stating to have the divs collapsed onLoad is not.
Where am I going wrong here?
Also, seeing as I'm new to this, if there's a better way, or more shorthand version of this feel free to let me know :)
function toggleOnLoad() {
document.getElementById('dropdown01').style.display = 'none';
}
function toggleFunction() {
var dropDown = document.getElementById('dropdown01');
var dropDownCollapse = document.getElementById('toggle-image').src = "Images/banner_toggle_collapse.png";
var dropDownExpand = document.getElementById('toggle-image').src = "Images/banner_toggle_expand.png";
if (dropDown.style.display != 'none') {
dropDown.style.display = 'none';
document.getElementById('toggle-image').src = dropDownExpand;
} else {
dropDown.style.display = '';
document.getElementById('toggle-image').src = dropDownCollapse;
}
}
css: body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 3em 1em 3em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300;
height: 3em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 2em;
background-color: #eeeeee;
}
HTML & Javascript:
<body onLoad="toggleOnLoad(); toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<button id="toggle" onClick="toggleFunction()">
<img id="toggle-image" src="" alt="toggle" style="max-height: 100%; max-width: 100%">
</button>
</div>
</div>
<div id="dropdown01" class="dropdowns">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</div>
</div>
</body>
Do create an init function manually.
window.addEventListener("load", myInit, true); function myInit(){ // call your functions here.... };
By doing this you can call that set of functions anytime.
The better way to do it i believe is to call your functions inside window.load instead of the body as follows:
window.onload=function(){
toggleOnLoad();
toggleFunction();
}
Your idea is correct. Probably we can simplify the implementation.
First, let's define a new class hidden to remove elements.
.hidden {
display: none;
}
Now we just can toggle this class to show and hide the content.
function toggleFunction() {
...
content.classList.toggle('hidden')
...
}
Also remove toggleOnLoad function from the body and add hidden to the content div
<body onLoad="toggleFunction()">
...
<div id="dropdown01" class="dropdowns hidden">
...
</body>
Finally, the toggleFunction must add the right class based on the hidden class of the content.
function toggleFunction() {
dropDown.classList.remove(expand, collapse)
...
const state = content.classList.contains('hidden') ? collapse : expand
dropDown.classList.add(state)
}
This is functional snipped:
const content = document.getElementById('dropdown01')
const dropDown = document.querySelector('#toggle-image')
const collapse = 'fa-plus-square'
const expand = 'fa-minus-square'
function toggleFunction() {
dropDown.classList.remove(expand, collapse)
content.classList.toggle('hidden')
const state = content.classList.contains('hidden') ? collapse : expand
dropDown.classList.add(state)
}
body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 2em 1em 2em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300px;
height: 2em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 1em;
background-color: #eeeeee;
}
.hidden {
display: none;
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<body onLoad="toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<i id="toggle-image" class="fas fa-plus-square" onClick="toggleFunction()"></i>
</div>
</div>
<div id="dropdown01" class="dropdowns hidden">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>
here's my situation:
So I'm trying to toggle a sidebar by clicking another div. It's a 100% height sidebar that is fixed to the right side of the viewport. Essentially I am trying to wrap a 300px div around both the 50px wide toggle div and the 250px wide sidebar div, and I want to hide the sidebar portion using a negative margin-right pixel value. Using the .toggle:active selector (so this occurs when the toggle div is clicked), I want to show the sidebar portion by setting that margin-right pixel value back to 0px.
Code so far:
<div class="wrapper">
<a href="#">
<div class="toggle">Toggle</div>
</a>
<div class="cart">Cart</div>
</div>
CSS so far:
.wrapper {
position:fixed;
width:300px;
height:100%;
background-color:orange;
top:0;
right:0;
margin-right:-250px;
}
.toggle {
position:relative;
display:block;
width:50px;
height:100%;
background-color:grey;
float:left;
}
.toggle:active .wrapper {
margin-right:0px;
}
.cart {
position: relative;
width:250px;
height:100%;
background-color:red;
float:right;
}
Here's the jsfiddle!
Here's my question:
How can I target .wrapper to change a css attribute when .toggle:active is engaged? Also, how can I specify when the sidebar is visible and when it's not?
I'm new to Javascript, but it seems like I'll need it to do this due to the callback function. If CSS-only is possible, I'd lean toward that solution. Please note that I want to use margin-right so that I can opt to use CSS transitions later to animate my element sliding left and right.
CSS Only Solution
DEMO: http://jsfiddle.net/Victornpb/yJYJC/30/
Just use this:
/* Closed */
.wrapper{
margin-right:-250px;
}
/* Opened */
.wrapper:hover{
margin-right:0px;
}
Javascript solution
DEMO: http://jsfiddle.net/Victornpb/yJYJC/6/
JS:
var wrapper = document.getElementsByClassName('wrapper')[0];
var toggle = document.getElementsByClassName('toggle')[0];
window.onload=function(){
toggle.onclick=function(){
wrapper.classList.toggle('opened');
}
}
CSS:
.wrapper{
position:fixed;
width:300px;
height:100%;
background-color:orange;
top:0;
right:0;
margin-right:-250px;
}
.wrapper.opened{
margin-right:0px;
}
A CSS-only solution (DEMO):
<div class="wrapper">
<label for="toggle">
Toggle
</label>
<input id="toggle" type="checkbox" />
<div class="cart">Cart</div>
</div>
(The hidden checkbox is used to determine the toggle state)
#toggle {
display:none; /* hide checkbox */
}
/* the label associated with the checkbox (trigger) */
label{
display:block;
}
/* move the div adjacent to the input (.cart) inside the visible area */
/* when the input is checked */
#toggle:checked ~ .cart{
right:0;
}
/* the div that's being toggled */
.cart {
position: absolute;
width: 250px;
height: 100%;
right: -250px;
}
:active only works for links (i.e. <a> tags), so it can't be used on .toggle, since it's a <div>. Even if you put it on the link, I don't think it'll do what you want though, and there's no way to "target" the parent.
Having a <a> surrounding a <div> like that is pretty strange too, you shouldn't need that.
So, you'll need javascript, yes. But you can't really target a class in javascript. You have two solutions:
If you can add an id to the wrapper, you can create a function in javascript that will toggle the state of the sidebar:
<div class="wrapper" id="myId">
<a href="#">
<div class="toggle"
onclick="document.getElementById('myId').style.marginRight = (document.getElementById('myId').style.marginRight == '0') ? '-250px' : '0';">Toggle</div>
</a>
<div class="cart">Cart</div>
</div>
Notes: The part (document.getElementById('myId').style.marginRight == '0') ? '-250px' : '0' tests if the margin-right is 0 and if so changes it to -250px and vice versa. What I've done here might not be the best way to do, but I wanted to limit it to something short so you can use it this way, if you don't really understand javascript very well. You will be able to improve it when you'll get to know it better.
Also, you will have to put the onclick on every .toggle div you have... You can use event handlers, but I'm pretty sure you don't know what that mean and that might not be a good idea to simply copy-paste this. You can always use the second point for that, since it makes things relatively easy to understand.
If you really want the class (or need to repeat this a lot), you will have to use jQuery, a javascript library, by adding this (preferably in the <head>):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
Then you can add this (to the head preferably still):
<script type="text/javascript">
$(document).ready( function()
{
var cart_visible = false;
$('.toggle').on('click', function()
{
if ( cart_visible )
$('.wrapper').css('margin-right', '-250px');
else
$('.wrapper').css('margin-right', '0');
cart_visible = !cart_visible;
});
});
</script>
This time I used a boolean (that takes true or false as a value) to check if the cart was visible or not, changing the value at each click at the same time as the margin-right. This does the same thing as before, just toggles between -250px and 0, but you don't need to put it in every .toggle you might create and it works with a class. It makes you use jQuery though (that's not really a problem though I think)
I don't really see why you want to change margin-right though... If you just want to make it disappear, you can use display: none;, or if you really want to change the position, you can use right (in this case).
CSS Only, two sidebar with different behaviour
There are two different CSS only animated sidebar:
inspired from #vitim.us, use hover for show/hide
inspired from #niceass, use a hidden checkbox to click for show/hide
Features:
Smooth animation
Vertical text on sidebar (wich rotate when open)
Resize body when sidebar are shown
Clean box for body and sidebar
scrollable sidebar content (displaying his scrollbar).
hover (forked from #vitim.us's answer) with some improvements
If not completely finalized, there is some way to
write Open cart / Your cart verticaly
suppress newline between Open/Your and cart by using no-breakable space in the CSS.
resize main content dynamicaly, while side bar is displaying.
body {
font-family: sans;
font-weight: normal;
font-size: 10pt;
}
.main {
width: calc( 100% - 3em );
transition: width ease 1300ms;
}
.wrapper:hover ~ .main {
width: calc( 100% - 17em );
}
h1 {
font-weight: bold;
font-size: 1.3 em;
}
h2 {
font-weight: bold;
font-size: 1.15 em;
}
.wrapper{
position:fixed;
width: 16em;
height:100%;
background-color:orange;
top:0;
right:0;
margin-right:-14em;
/* Makes opening smoothly */
transition: margin-right ease 1300ms;
-moz-transition: margin-right ease 1300ms;
-webkit-transition: margin-right ease 1300ms;
-o-transition: margin-right ease 1300ms;
}
.inner {
position: relative;
width: 100%;
float: left;
display: inline-block;
transform: rotate(90deg) translate(-3em,0em);
transition: transform ease 1300ms;
}
/* opened */
.wrapper.opened,
.wrapper:hover{
margin-right:0px;
}
.toggle {
position:relative;
display:block;
width:2em;
height:100%;
background-color:#CCC;
float:left;
font-weight: bold;
text-align: center;
padding-top: 50%;
transition: background-color ease 1300ms;
transition: color ease 1300ms;
}
/* toggle style when wrapper is hovered */
.wrapper:hover .toggle{
background-color: #555;
color: white;
}
.wrapper:hover .toggle .inner{
transform: rotate(270deg);
}
/* Warn: there is NBSP, not spaces, after Open/Your */
.wrapper:not(:hover) .toggle .inner:before{
content:"Open";
}
.wrapper:hover .toggle .inner:before{
content:"Your";
}
.cart {
position: relative;
width:13.5em;
height:100%;
background-color:rgba(255,255,255,.4);
float:right;
padding: .2em;
overflow: scroll;
}
<div class="wrapper">
<div class="toggle"><div class="inner"> cart</div></div>
<div class="cart">
<h2>Cart</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="main">
<h1>Little <i>no-js</i> css side-bar demo</h1>
<p>This little demo let you see how a side-bar could be done without being using javascript...</p>
<h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
toggle:checked (forked from #niceass's answer)
Same improvements, but using an invisible checkbox, so you have to click on (text of) the sidebar to open them.
(This answer is linked to What does "for" attribute do in HTML tag?)
body {
font-family: sans;
font-weight: normal;
font-size: 10pt;
}
#toggle { display:none; }
.main {
width: calc( 100% - 3em );
transition: width ease 1300ms;
}
#toggle:checked ~ .main {
width: calc( 100% - 17em );
}
h1 {
font-weight: bold;
font-size: 1.3 em;
}
h2 {
font-weight: bold;
font-size: 1.15 em;
}
.wrapper{
position:fixed;
width: 16em;
height:100%;
background-color:orange;
top:0;
right:0;
margin-right:-14em;
/* Makes opening smoothly */
transition: margin-right ease 1300ms;
-moz-transition: margin-right ease 1300ms;
-webkit-transition: margin-right ease 1300ms;
-o-transition: margin-right ease 1300ms;
}
#toggle:checked ~ .wrapper {
margin-right: 0pt;
}
#but {
position: relative;
width: 100%;
float: left;
display: inline-block;
transform: rotate(270deg) translate(-3em,0em);
transition: transform ease 1300ms;
}
/* opened */
#zone {
position:relative;
display:block;
width:2em;
height:100%;
background-color:#CCC;
float:left;
font-weight: bold;
text-align: center;
padding-top: 50%;
transition: background-color ease 1300ms;
transition: color ease 1300ms;
}
/* toggle style when wrapper is hovered */
#toggle:checked ~ .wrapper #zone {
background-color: #555;
color: white;
}
#toggle:checked ~ .wrapper #zone #but {
color: white;
transform: rotate(90deg);
}
#toggle:not(checked) ~ .wrapper #zone #but:before {
content:"Open "; /* non break space */
}
#toggle:checked ~ .wrapper #zone #but:before{
content:"☒ Your ";
}
#toggle:not(checked) ~ .wrapper #zone #but:after {
content:" ☐"; /* figure space */
}
#toggle:checked ~ .wrapper #zone #but:after {
content:"";
}
.cart {
position: relative;
width:13.5em;
height:100%;
background-color:rgba(255,255,255,.4);
float:right;
padding: .2em;
overflow: scroll;
}
<input id="toggle" type="checkbox" />
<div class="wrapper">
<div id="zone"><label for="toggle" id="but">chart</label></div>
<div class="cart">
<h2>Cart</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="main">
<h1>Little <i>no-js</i> css side-bar demo</h1>
<p>This little demo let you see how a side-bar could be done without being using javascript...</p>
<h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
I would recommend using jQuery for this. It is simple and less chance for errors.
$('.toggle').click(function() {
$('.cart').toggle();
});
http://api.jquery.com/toggle/