Welcome Guest ( Log In | Register )

Outline · [ Standard ] · Linear+

 CSS class never executed?, Not sure this is due to html or css

views
     
TSred4900
post Oct 23 2017, 03:19 PM, updated 7y ago

Casual
***
Junior Member
464 posts

Joined: Aug 2008
What I'm trying to do:
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">
     &copy; 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");
       }
   });

})();


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;
   }


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)
Attached File  TheWorld___Copy.zip ( 1.62mb ) Number of downloads: 3
RuL3s
post Oct 23 2017, 03:45 PM

New Member
*
Junior Member
39 posts

Joined: Dec 2009
Your hide-sidebar class still need to set position. just putting left alone won't work. try position absolute

This post has been edited by RuL3s: Oct 23 2017, 03:45 PM
TSred4900
post Oct 23 2017, 04:30 PM

Casual
***
Junior Member
464 posts

Joined: Aug 2008
QUOTE(RuL3s @ Oct 23 2017, 03:45 PM)
Your hide-sidebar class still need to set position. just putting left alone won't work. try position absolute
*
Sama saja... no effect
RuL3s
post Oct 23 2017, 06:05 PM

New Member
*
Junior Member
39 posts

Joined: Dec 2009
Is your css even loaded? Is there any mistake when you put in position? Try debug and troubleshoot.
olumis
post Oct 23 2017, 09:19 PM

Getting Started
**
Junior Member
54 posts

Joined: Oct 2016
From: Tambunan, Sabah


You can consider using the css float property for your #sidebar. Example: https://jsfiddle.net/mkzsrghn/ and also in full layout http://jsfiddle.net/rRm7k/
TSred4900
post Oct 24 2017, 11:22 AM

Casual
***
Junior Member
464 posts

Joined: Aug 2008
QUOTE(RuL3s @ Oct 23 2017, 06:05 PM)
Is your css even loaded? Is there any mistake when you put in position? Try debug and troubleshoot.
*
Yeap, wasn't exactly loaded. It was loaded from cache.

So I just disabled the cache and it's working okay now

 

Change to:
| Lo-Fi Version
0.0171sec    0.49    6 queries    GZIP Disabled
Time is now: 29th March 2024 - 08:41 PM