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>
Related
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()">☰</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()">☰</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.
I've been working on a small website for school and i want to add a button that'll make a 'login' div pop up out of thin air, i've already written the HTML/CSS for it but i haven't got too much experience in Javascript, that's why i am hoping for a possible answer here, i'm writing an open() function to open the div, and if it gets activated again it should close.
var open = false;
function open() {
open == false ? document.getElementById('login').style.display = 'block' : document.getElementById('login').style.display = 'none';
open = !open;
console.log(open);
}
* {
margin: 0;
padding: 0;
min-width: 1px;
min-height: 1px;
}
html,body {
width: 100%;
height: 115%;
overflow-x: hidden;
background-image: url('../img/bg.jpg');
}
header {
margin-top: 2%;
background-color: #FF0000;
margin-left: 12.1%;
width: 75%;
height: 180px;
}
header p {
font-size: 64px;
margin-left: 40%;
padding-top: 4.5%;
}
#nav {
margin-left: 12.1%;
width: 75%;
height: 50px;
background-color: #FF0000;
border-bottom: 1px solid #FFFFFF;
}
#nav ul li a {
display: inline-block;
text-align: center;
padding: 11px 14px;
text-decoration: none;
font-size: 24px;
}
#content {
margin-left: 12.1%;
width: 75%;
height: 73.9%;
background-color: #FF0000;
}
footer {
text-align: center;
background-color: #FF9900;
width: 75%;
margin-left: 12.1%;
}
#nav #right {
float: right;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #FFFFFF;
}
#nav ul li {
float: left;
}
#nav ul a:hover {
transition: 0.5s;
background-color: #FFFF0F;
}
#login {
display: none;
float: right;
margin-top: 2%;
margin-right: 5%;
width: 25%;
height: 20%;
background-color: #FFFFFF;
}
#login form {
margin-left: 15%;
margin-top: 8%;
}
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/LoginMenu.js"></script>
</head>
<body>
<header><p> Lost Story </p></header>
<div id="nav">
<ul>
<li>Home</li>
<li>Register</li>
<li>Downloads</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<div id="right">
<li>Log in/register</li>
</div>
</ul>
</div>
<div id="content">
<div id="login">
<form>
<p> username: </p>
<input type="text" name="firstname">
<p> password </p>
<input type="password" name="pass">
</form>
</div>
</div>
<footer> Website made by a rock </footer>
</body>
</html>
I'm still looking for an answer, last time no one tried to answer my question about javascript i hope this time it'll work out.
Thanks!
The problem is that open() points to window.open() on the global scope.
So rename your function to loginOpen()
Also your HTML is not valid. An UL can only have LI and OL as children. You have a DIV. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
actually you don't necessarily need javascript to work with dialogs.
I did a JSFiddle for you : https://jsfiddle.net/69fjnnx9/
You can see that with the :target CSS pseudo-class you can play on the display property of your login div, along with setting your link in the menu to #login, i.e the div you want to target.
Then, I added a 'Close' button in your login div which points to '#' and makes the login div disappear by loosing target when clicked.
Hope this helps !
Log in/register
Calls
window.open()
instead of the expected open() function you had created. See https://developer.mozilla.org/en-US/docs/Web/API/Window/open and try to avoid property names already used by the global Window object.
I'd like to slide down a tooltip element when hovering on another element.
I tried using jQuery, but i'm experiencing that nothing will be faded in if I hover on countbox1. countbox1 is a timer made with javascript.
I don't think the script is wrong. I think it doesn't detect jQuery for some reason.
I also tried to download jQuery and put this in the "src:" directly.
$(document).ready(function(){
$("#countbox1").onmouseover(function(){
$("#tooltip").fadeIn();
});
$("#countbox1").onmouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="home">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
<div id="countbox1"></div>
<hr style="width: 500px;">
</div>
If all you want is the tooltip to enter the screen on hover of something else, I'd suggest using CSS transition.
If you nest the <p id="tooltip"> within the #countbox1 and put a :hover-event on that, you can get exactly the thing you want.
HTML
<div id=home>
<div id="countbox1">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
</div>
<hr style="width: 500px;">
</div>
CSS
#home {
height: 50%;
background: red;
}
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
height: 50px;
background: #f4f4f4;
}
#countbox1:hover #tooltip {
opacity: 1;
}
#tooltip {
width: 500px;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
height: 30px;
background: #0000ff;
position: absolute;
left: 50%;
margin-left: -250px;
top: -15px;
opacity: 0;
transition: all 1s;
}
Here's a working demo. Hover over the grey area for the tooltip to enter the view.
Here's a working demo where the tooltip enters the screen from the top.
You might be using deprecated methods.
Replace your code for the one below, and try again:
$(document).on('ready',function(){
$("#countbox1").on('mouseover',function(){
$("#tooltip").stop(true).fadeIn();
});
$("#countbox1").on('mouseout',function(){
$("#tooltip").stop(true).fadeOut();
});
});
You should use mouseover instead of onmouseover:
$(document).ready(function(){
$("#home").mouseover(function(){
$("#tooltip").fadeIn();
});
$("#home").mouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<div id=home>
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p><div id="countbox1"></div>
<hr style="width: 500px;">
</div>
</body>
Check it out also on this JSFiddle.
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;
<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();
});
});