We Keep Coding

Issues with responsive mobile menu

How do I make this work? I keep fiddling around with the codes but I get no luck. I'm trying to make a responsive mobile menu. I tried searching google and can't find any solution. Thanks
<div class="sidenav" id="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
Home
Order
About
</div>
<div class="main_header">
<div class="main_nav">
<span onlick="openNav()">&#9776</span>
</div>
<h1>Treat your tastebuds</h1>
Order a coffee
</div>
<script type="text/javascript">
function openNav() {
document.getElementById("main_nav").style.width = "100%";
}
function closeNav(){
document.getElementById("closeNav").style.width="0";
}
</script>
Here is the CSS
.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition:0.5s;
}
sidenav a{
color: white;
text-decoration: none;
display: block;
transition: 0.3s;
font-size: 16px;
font-weight: 100;
text-align: center;
padding: 1em 0;
}
.main_header{
background-image: url(coffee1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
text-align: left;
color: white;
width: 100%;
height: 750px;
}
.main_header h1{
font-size: 36px;
font-weight: 900;
margin-left: 2em;
margin-top: 8em;
}
.btn_one{
margin-left: 11em;
color: white;
background-color: darkslategray;
text-decoration: none;
padding: 1em 2.5em;
}
.main_nav{
height: 40px;
}
.main_nav span{
color: white;
font-size: 30px;
text-decoration: none;
line-height: 40px;
margin-left: 0.25em;
float: left;
cursor: pointer;
}

Utilizing the bootstrap framework is an option.
Here is an example that provides a side navigation.
https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

You have various typos in your code as well as undefined elements that you're attempting to manipulate.
Firstly, you have:<span onlick="openNav()">&#9776</span> which contains a typo. It's 'onclick', not 'onlick'.
Next, you're attempting to manipulate an element "main_nav", but in your HTML and CSS, you defined main_nav as a class (using a period). So, if you change your html to <div class="main_nav"> your issue for that will be fixed.
I'm unsure what your final menu design will be, but those changes will fix the problems you're running into.

Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

I've a problem that I wasn't able to solve for a while now, even looking to other Q/A on SO.
I would like to switch from a button to another one with an ng-show.
When ng-mouseovertriggers, I would like to hide the current button, button-db, and show a second one, button-shout
When ng-mouseleave triggers, I would like to do the opposite, hiding button-shout and showing button-db.
I'm already able to make this work with the following code:
HTML:
<div class="footer">
<div ng-show="hoverEdit" class="half button-db"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<span class="shout-value">200</span>
</div>
<div ng-show="!hoverEdit" class="half button-shout"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="icon-over" ng-src="./assets/css/img/logo-white-m.png"
style="width: 29px; height: 21px;"></div>
</div>
<div class="half button-action">
<span class="icon-cart" ng-src="./assets/css/img/icon-cart.png"
style="width: 29px; height: 21px;"></span>
</div>
</div>
JS:
$scope.hoverEdit = true;
$scope.hoverIn = function(){
$scope.hoverEdit = false;
};
$scope.hoverOut = function(){
$scope.hoverEdit = true;
};
With the code above I'm able to get the following starter situation:
button-db on the left and button-action on the right
And I would like that, when ng-mouseover triggers, button-db (The Purple Rectangle) gets hidden while button-shout (~Green Rectangle with another image) gets shown and vice-versa (this is actually working), like in the following image:
What I'm trying to achieve -> button-shout on the left at button-db's place
But, instead, I get the following result:
What I get instead, when I go over button-db I get this uknown blank div instead of button-shout
button-shout doesn't get shown and it is not present in the DOM and it does not have height and width even if I managed to build it like I did with the other buttons.
I'm using the following CSS classes:
half gives dimensions to the buttons and sets their position
.pod .footer .half {
display: table-cell;
padding-top: 1px;
padding-left: 8px;
padding-right: 8px;
vertical-align: middle;
height: 45px;
}
button-db has both :before and :after with a little images and shout-value to handle the int number between them
.pod .footer .button-db {
background-color: #6ab5ac;
text-align: center;
color: #fff;
background-color: #6455a0;
}
.pod .footer .button-db .shout-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .shout-value:before {
content: "";
display: inline-block;
background-image: url("./assets/css/img/shout-megaphone-white.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 30px;
height: 23px;
position: absolute;
left: -17px;
top: 0px;
}
.pod .footer .button-db .shout-value:after {
content: "";
background-image: url("./assets/css/img/shout-db-white.svg");
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
width: 28px;
height: 27px;
position: absolute;
right: -19px;
top: -1px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-db .shout-value .db {
vertical-align: super;
font-size: 10px;
display: inline-block;
padding: 0;
}
.pod .footer .button-db .db-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .db-value:after {
content: "dB";
background-image: none;
width: 28px;
height: 23px;
position: absolute;
right: -19px;
top: 0px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
button-shout button to get shown when ng-mouseover triggers; It does not need any :before and :after, it only has 1 image and no values
.pod .footer .button-shout {
background-color: #6AB6AC;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
button-action cart button, button-shout would look pretty much like it but for the color and the image
.pod .footer .button-action {
background-color: #ffae00;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
The functionalities I implemented using both ng-mouseover and ng-mouseleave work perfectly as I want. I don't get why button-shout has no dimensions and does not get shown at button-db's place when doing ng-mouseover.
I already tried using ng-if, adding and removing classes, using z-index and display: none & display: block but I always get this problem.
I noticed that button-shout inherits nothing except for half's placement.
Here is a little Plunker I put up with only two buttons to let you understand how it should work. It works on the Plunker but not in my application.
When mouseover triggers, one button hides and the other one is shown and when mouseleave triggers, the old one is shown back.
1) Have you any idea on why it doesn't get shown properly?
2) How can I fix this?
I hope I've been as much clear as possible, Thanks in advance.

To be honest i'm not really sure of what the problem is so i'll post here a snippet that try to reproduce what you currently have. Feel free to tell us if this snippet reproduces your problem and for answeres to use it as a base for an answer.
Note : in your HTML i removed the ng-mouseleave on 1st element and ng-mouseenter on 2nd because they were conflicting each other and throw duplicate events.
angular.module("app", []).controller("ctrl", ['$scope', function($scope){
$scope.hoverEdit = true;
$scope.hoverIn = function(){
console.log("HOVER IN");
$scope.hoverEdit = false;
};
$scope.hoverOut = function(){
$scope.hoverEdit = true;
console.log("HOVER OUT");
};
}]);
.pod .footer .half {
display: table-cell;
padding-top: 1px;
padding-left: 8px;
padding-right: 8px;
vertical-align: middle;
height: 45px;
}
.pod .footer .button-db {
background-color: #6ab5ac;
text-align: center;
color: #fff;
background-color: #6455a0;
}
.pod .footer .button-db .shout-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .shout-value:before {
content: "";
display: inline-block;
background-color: black;/*url("./assets/css/img/shout-megaphone-white.svg");*/
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 30px;
height: 23px;
position: absolute;
left: -17px;
top: 0px;
}
.pod .footer .button-db .shout-value:after {
content: "";
background-image: white;/*url("./assets/css/img/shout-db-white.svg");*/
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
width: 28px;
height: 27px;
position: absolute;
right: -19px;
top: -1px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-db .shout-value .db {
vertical-align: super;
font-size: 10px;
display: inline-block;
padding: 0;
}
.pod .footer .button-db .db-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .db-value:after {
content: "dB";
background-image: none;
width: 28px;
height: 23px;
position: absolute;
right: -19px;
top: 0px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-shout {
background-color: #6AB6AC;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
.pod .footer .button-action {
background-color: #ffae00;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div class="pod">
<div class="footer" ng-app="app" ng-controller="ctrl">
<div ng-show="hoverEdit" class="half button-db"
ng-mouseover="hoverIn()">
<button class="shout-value">100</button>
</div>
<div ng-show="!hoverEdit" class="half button-shout"
ng-mouseleave="hoverOut()">
<button class="shout-value">200</button>
</div>
<div class="half button-action">
<button class="shout-value">300</button>
</div>
</div>
</div>
Of course since i don't have the images, i changed them to black and white background. What i can see is that i have a black crap that seems to not be in the right place, however this doesn't seems to be what your problem is.

Check if mouseover trigger the function or not. Mouseover should change value on ng-show value from false to true in your html.

I may be mis-reading, but why are any functions needed here? If you are just trying to toggle a class, how about this? it will not require any controller functions.
https://plnkr.co/edit/HMACVKTlLzbkfWhy4v1S?p=preview
<div class="half"
ng-init="hover = false"
ng-class="hover ? 'button-shout' : 'button-db'"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
<div class="icon-over">300</div>

CSS - Formatting a Navigation div beside multiple divs

I designed my site so that a navigation bar spans down the whole site. It is handled in a div. The rest of the site is inside divs as well, and will be placed beside the navigation div.
After placing the first div beside the navigation div, everything worked out. When I tried to add a second div beside the navigation div and under the first div, it goes outside of the body. I can I fix this?
THE ORANGE BORDER DIV IS THE ONE I AM TRYING TO FIX
Here is my site
: JSFiddle would be to large and hard to understand, so please use the console in your browser to help me out.
firstBox is the div that isn't working how I want it to. #navigationPane and #topBox are in the right position
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
function dBug(data) {
console.log(data);
}
dBug("document ready");
$.stellar();
});
</script>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 1000px;
min-height: 800px;
max-height: 1200px;
margin-left: auto;
margin-right: auto;
font-family: Verdana,Helvetica,Arial,sans-serif;
border: solid green 1px;
}
h1 {
text-align: center;
margin-top: 10px;
color: white;
margin-top: 20px;
}
p {
color: white;
text-align: center;
}
#small {
font-style: italic;
font-size: 10px;
margin-top: -12px;
}
#topBox {
height: 400px;
width: 929px;
border: solid blue 1px;
float: right;
margin-top: -1px;
margin-right: -1px;
background-image: url(image.jpg);
background-size: 1400px 600px;
background-position: -0% 60%;
cursor: default;
}
#firstBox {
height: 400px;
width: 928px;
border: solid orange 1px;
float: right;
cursor: default;
}
#navigationPane {
width: 70px;
margin-left: -1px;
border: solid red 1px;
min-height: 1200px;
max-height: 2000px;
margin-bottom: -1px;
margin-top: -1px;
background-color: purple;
}
#box {
width: 500px;
height: 150px;
border: dotted white 2px;
clear: none;
background-color: rgba(0, 0, 0, 0.85);
margin-left: 200px;
margin-top: 120px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#navigationPane img {
margin-left: 5px;
margin-top: 10px;
}
a:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="topBox" data-stellar-background-ratio="0.2">
<div id="box" >
<h1>WH Programming</h1>
<p>Will Houle Programming - Student Developer</p>
<p id="small">A site created to host tutorials, past lab assignments, and future endeavors.</p>
</div>
</div>
<div id="navigationPane">
<img src="twitter.png" />
<img src="humber.png" />
</div>
<div id="firstBox">
</div>
</body>
</html>
I know the coding is very unorganized, but for now this is what im working with

Have you tried to add some css property which is useful for you?
however, let me tell you. you should use position and top property for the box which is going out of thr body.
here is that code:
<div id="firstBox" style="
position: relative;
top: -800;"></div>
or
in your #firstdiv of css stylesheet add these two:
position: relative;
top: -800;

IJavaScript not working/linking properly [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I recently started learning HTML,CSS and Javascript and i am still getting the hang of it.
I want the hidden menu to be shown (menu) when the div class (mainLeft) is clicked. but, my javascript query to hide/show it doesn't work.
HTML Code
<head>
<link type="text/css" rel="stylesheet" href="satmap.css" />
<script type="text/javascript" src="C:\Users\mbashir\Documents\HTML\satmap.js"></script>
<title>SATMAP Home</title>
</head>
<body>
<div id="main">
<h1> XYZ</h1>
</div>
<div id="mainLeft">
<h1> Current Stats </h1>
</div>
<div id="SME">
<h4> my Explorer </h4>
</div>
<div id="DataAnalysis">
<h4> Data Analysis </h4>
</div>
<div id="ProdMonitor">
<h4> Production Monitoring </h4>
</div>
<div class="menu">
<div class="icon-close">
<h4> Disappear </h4>
</div>
<ul>
<li>Gain Table</li>
<li> Remember Me</li>
</ul>
</div>
</body>
CSS Code
body {
background-color: white;
}
h1{
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
h4{
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
#main {
display: table;
height: 50px;
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #13b5ea;
}
#SME {
display: table;
position: absolute;
width: 250px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
background-color:#13b5ea;
}
#DataAnalysis {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 28%;
margin-left: -100px;
margin-top: -100px;
background-color:#13b5ea;
}
#ProdMonitor {
display: table;
background-color:#13b5ea;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 72%;
margin-left: -100px;
margin-top: -100px;
}
#mainLeft {
display: table;
height: 50px;
width: 600px;
margin-right: auto;
background-color: #13b5ea;
cursor: pointer;
}
.menu {
background-color:#13b5ea;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
Javascript Code
var main = function(){
$('#mainLeft').click(function(){
$('.menu').animate({
left:'0px'
},200);
$('body').animate({
left: '285px'
}, 200);
});
};
$(document).ready(main);

Have you verified that your javascript is firing at all? Such as adding console.log('test') or alert('test')? If it is firing, then you can move on to look at other things.
I think your problem might be because you're animating a left value that doesn't mean anything yet because the elements haven't been given a CSS position value that uses it. Try giving the #mainLeft element a position: absolute and see what happens.

You have said the JS file is in the same folder as the page, so you would link it like:
<script src="satmap.js"></script>
Also noted, is in the HTML provided, you did not have JQuery Library included, and since the coding you were using is dependent on JQuery, that would be a problem! :)
You can download the JQuery library from JQuery.com, or link to the CDN host like:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Hover over div content to reveal new div content

<center>
<div class="trivlimp">
<center><div class="lyrics"><!-- |field_1| --></div></center>
</div>
<div class="imp">
<div class="trgls"><!-- |points| --> Gallons</div><br>
<div class="trals"><!== |field_2| --></div><br>
<div class="trpc"><!-- |posts| --> posts</div><br>
<div class="trttr"><!-- |field_3| --></div><br>
</div>
</center>
I'd like to be able to hover over the div "trivlimp" to show the div "imp" right on top of "trivlimp"; hiding the first div underneath the div "imp". I tried doing this by :hover but completely failed and only ended up making it more frustrating for myself. I'm not against using Jquery, but I'd like to do this completely by css; but if it is easier using jquery I'll use it.

http://jsfiddle.net/Thrw2/3/
html code
<center>
<div class="trivlimp">
<center><div class="lyrics"> |field_1| </div></center>
</div>
<div class="imp">
<div class="trgls"> |points| Gallons</div><br>
<div class="trals">|field_2| </div><br>
<div class="trpc"> |posts| posts</div><br>
<div class="trttr">|field_3|</div><br>
</div>
css code
.trivlimp { background-color:#FF0000;
width: 260px;
height: 400px;
text-align: center;
position: absolute; }
.imp { width: 260px;
height: 400px;
background-color:#676767;
display: none;
position: absolute;
top: 0; }
.lyrics {
margin-top: 50%;
background-color: #CC0066;
width: 180px;
padding: 5px;
height: 130px
overflow: auto;
text-align: justify;
text-transform: uppercase;
font-family: Georgia;
font-style: italic;
font-size: 10px;
line-height: 10px;
}
.trgls {
width: 190px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color:#6666FF;
text-transform: uppercase;
}
.trals {
width: 170px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #00FF00;
text-transform: uppercase;
}
.trpc {
width: 150px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #FFCC00;
text-transform: uppercase;
}
.trttr {
width: 130px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #009900;
text-transform: uppercase;
}
jquery
$(function(){
$('.trivlimp').hover(function() {
$('.imp').show();
},
function() {
$('.imp').hide();
});
});

I don't quite understand your question, but you could use the following:
.imp {
display: none;
}
.trivlimp:hover + .imp {
display: block;
}

I would use jQuery to work with the hover states. I'm somewhat not following the question as well. So I popped your code into JSFiddle and brewed up what I thought was along the lines of what you're looking for. I used jQuery's mouseover/mouseout:
$('.trivlimp').mouseover(function() {
$('.imp').show();
});
$('.trivlimp').mouseout(function() {
$('.imp').hide();
});
​http://jsfiddle.net/arsCr/

Do something like this: http://jsfiddle.net/chanckjh/PWtTw/
html:
<div class="trivlimp">
</div>
<div class="imp">
</div>​
css:
.trivlimp{
border: 1px solid red;
width: 500px;
height: 300px;
}
.imp{
border: 1px solid blue;
width: 500px;
height: 300px;
background: blue;
display: none;
}
​
jquery:
$(function() {
$('.trivlimp').hover(function() {
$('.imp').show();
}, function() {
$('.imp').hide();
});
});​