Add a button, click the button, the div on the left side (#sidebar) should move to the left and out of the page, the text on the button should also changes.
What happened:
The text changes happened. The #sidebar does not move at all.
The HTML:
CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The World</title>
<link rel="stylesheet" href="css/site.css"/>
</head>
<body style="font-family: sans-serif; font-size: 15px">
<div id="sidebar">
<img src="img/user.jpg" alt="Random guy" class="headshot"/>
<span id="username">Random Name</span>
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<div>
<button id="sidebarToggle">Hide Sidebar</button>
</div>
<h2>The World - from .NET Core 2.0</h2>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location</label>
<input />
</div>
<div><input type="submit" value="Add" /></div>
</form>
</div>
<div id="footer">
© 2017 Farid Ahamat
</div>
</div>
<script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/site.js"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>The World</title>
<link rel="stylesheet" href="css/site.css"/>
</head>
<body style="font-family: sans-serif; font-size: 15px">
<div id="sidebar">
<img src="img/user.jpg" alt="Random guy" class="headshot"/>
<span id="username">Random Name</span>
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<div>
<button id="sidebarToggle">Hide Sidebar</button>
</div>
<h2>The World - from .NET Core 2.0</h2>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location</label>
<input />
</div>
<div><input type="submit" value="Add" /></div>
</form>
</div>
<div id="footer">
© 2017 Farid Ahamat
</div>
</div>
<script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/site.js"></script>
</body>
</html>
The JS:
CODE
(function () {
var $sidebarAndWrapper = $("#sidebar,#wrapper");
$("#sidebarToggle").on("click", function () {
$sidebarAndWrapper.toggleClass("hide-sidebar");
if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
$(this).text("Show Sidebar");
} else {
$(this).text("Hide Sidebar");
}
});
})();
var $sidebarAndWrapper = $("#sidebar,#wrapper");
$("#sidebarToggle").on("click", function () {
$sidebarAndWrapper.toggleClass("hide-sidebar");
if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
$(this).text("Show Sidebar");
} else {
$(this).text("Hide Sidebar");
}
});
})();
The CSS:
CODE
body {
font-family: sans-serif;
font-size: 15px;
margin: 0;
}
label {
font-weight: bold;
display: block;
}
input[type=text], input[type=password], textarea {
width: 175px;
}
#main {
background-color: #e9e9e9;
padding: 4px;
margin: 0;
}
#footer {
background-color: #222;
color: #eee;
padding: 8px 5px;
position: fixed;
bottom: 0;
width: 100%;
}
.headshot {
max-width: 50px;
border: 1px solid #ff0000;
padding: 3px;
}
.menu {
font-size: 12px;
}
.menu li {
list-style-type: none;
}
.menu li.active {
font-weight: bold;
}
#sidebar {
background: #2A2C34;
color: #eee;
/*position: fixed;*/
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
margin: 0;
}
#sidebar.hide-sidebar {
left: -250px;
background-color: #a3bfff;
}
#wrapper {
margin: 0 0 0 250px;
}
#wrapper.hide-sidebar {
margin-left: 250px;
}
font-family: sans-serif;
font-size: 15px;
margin: 0;
}
label {
font-weight: bold;
display: block;
}
input[type=text], input[type=password], textarea {
width: 175px;
}
#main {
background-color: #e9e9e9;
padding: 4px;
margin: 0;
}
#footer {
background-color: #222;
color: #eee;
padding: 8px 5px;
position: fixed;
bottom: 0;
width: 100%;
}
.headshot {
max-width: 50px;
border: 1px solid #ff0000;
padding: 3px;
}
.menu {
font-size: 12px;
}
.menu li {
list-style-type: none;
}
.menu li.active {
font-weight: bold;
}
#sidebar {
background: #2A2C34;
color: #eee;
/*position: fixed;*/
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
margin: 0;
}
#sidebar.hide-sidebar {
left: -250px;
background-color: #a3bfff;
}
#wrapper {
margin: 0 0 0 250px;
}
#wrapper.hide-sidebar {
margin-left: 250px;
}
Also added the .sln file, if someone is interested to see what the heck is wrong with me...
This post has been edited by red4900: Oct 23 2017, 03:21 PM
Attached File(s)
TheWorld___Copy.zip ( 1.62mb ) Number of downloads: 3