Need help to change hover to OnClick using Javascript - javascript

I want to have something like a dropdown menu. I now have a hover in css but I know I have to use javascript to make it clickable. Can anyone help me making it clickable?
This is my current html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="jumbotron">
<p>What will you be making for dinner tonight?</p>
<li class="inspiration">
Give me some inspiration!
<div class="recipe">
With those temperatures it is not a bad idea to have a BBQ! Here is a recipe for hummus to have as a side dish!
<ul>
<iframe width="392" height="220" src="https://www.youtube.com/embed/SfcSo-j-doc?rel=0&showinfo=0" frameborder="20px" allowfullscreen></iframe>
<ul>
</div>
</li>
</div>
</body>
</html>
and my css:
.inspiration {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
cursor: pointer;
color: #012556;
font-size: 20px;
}
.inspiration:hover {
background: #555;
color: #012556;
font-size: 20px;
}
.inspiration:hover .recipe {
display: block;
opacity: 1;
visibility: visible;
}
.inspiration .recipe {
display: block;
padding: 0;
color: #fff;
position: center;
width: 1000px;
padding-top: 20px;
padding-bottom: 20px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
.jumbotron {
background-image:url(http://www.superiorequipmentsupplies.com/wp-content/themes/superior_v1.73/library/images/hero-residential.jpg);
height: 640px;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 42px;
font-family: 'Shift', sans-serif;
font-weight: bold;
text-align: center;
}
.jumbotron p {
font-size: 20px;
color: #fff;
text-align: center;
}
I still don't get what to put in my javascript file

Add onclick in your li element
<li class="inspiration" onclick="functionname()">

Using event listeners, and the getComputedStyle() to get the styles and getPropertyValue() to get the visibility property. then using the if else as a toggle for opening and closing the menu dropdown. the css should be visibility: hidden for recipe class
<script>
var inspiration = document.getElementsByClassName("inspiration");
var expandMenu = function() {
var recipe = document.getElementsByClassName("recipe");
var CSSprop = window.getComputedStyle(recipe,null).getPropertyValue("visibility");
if(CSSprop == "visible"){
recipe[0].style.visibility = "hidden";
}else {
recipe[0].style.visibility = "visible";
}
}
inspiration[0].addEventListener("click", expandMenu);
</script>

Using Jquery syntax you can do this.
Add the following code to <head> tag and from css remove hover.
<script>
$(document).ready(function(){
$(".inspiration").click(function(){
$("#recepe").toggle();
});
});
</script>

Related

Click menu close outside of menu not working - buttonevent.matches if not a function

The dropdown menu which is supposed to close when clicking outside of the menu button is not working. I have had this problem before but the problem re-occurred and can't get to a solution. Help would be appreciated. I am not sure as to why the code doesn't work, so some clarification would be helpful.
let btnn = document.getElementById("btn");
btnn.addEventListener('click', function() {
let dropdown = document.getElementById('dropdown');
dropdown.classList.toggle("visible");
})
window.onclick = function(event){
if (!event.target.matches('#btn')) {
let dropd = document.getElementById('dropdown');
dropd.classList.remove("visible");
}
}
body {
height: 100vh;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.logo {
display: block;
text-align: left;
background: red;
height: 10vh;
}
.logo #logo {
display: inline;
line-height: 10vh;
font-size: 3em;
margin-left: 0.8em;
}
button#btn {
display: inline;
float: right;
margin-right: 2em;
margin-top: 0;
margin-bottom: 0;
border: none;
background-color: red;
padding: 0;
}
nav {
display: block;
background-color: black;
width: 100vw;
}
nav ul {
display: none;
list-style-type: none;
margin: 0;
padding-left: 0;
}
nav ul li {
text-align: center;
}
.link {
display: block;
color: white;
font-size: 2.4em;
background-color: blue;
text-decoration: none;
width: 100vw;
height: 7vh;
line-height: 7vh;
border-bottom: 2px solid black;
text-align: center;
}
.visible {
display: block;
}
.fa-bars:before, .fa-navicon:before {
content: "\f0c9";
font-size: 50px;
line-height: 10vh;
}
#media only screen and (min-width: 480px) {
.fa-bars:before, .fa-navicon:before {
font-size: 35px;
}
/* #dropdown {
display: block;
} */
}
#media only screen and (min-width: 600px) {
.fa-bars:before, .fa-navicon:before {
font-size: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<!-- <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="logo">
<p id="logo">Logo</p>
<button id="btn"><i class="fa-solid fa-bars"></i></button>
</div>
<nav>
<ul id="dropdown">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>
let me restructure your javascript better. It will solve your problem and the code is precise too I think.
document.querySelector("body").addEventListener("click", function(event){
let dropd = document.querySelector('#dropdown');
if (!event.target.parentNode.matches('#btn')) {
dropd.classList.remove("visible");
} else {
dropd.classList.toggle("visible");
}
});
In your previous code, I believe your button click was overridden by the window click. Here, I'm clicking on the body and simply matching the button id. If it matches, then I'm doing the toggle and otherwise, I'm removing the class.
*** I've used parentNode. If you're wondering why I'd used that you can just simply console log to see where the button click happens. You will see that the click is getting the icon inside the button. That is why I took the icon parent to check if the click is happening where I want it.
You can use document.body.addEventListener('click', fn, true);. Your js file should be like this maybe
let btnn = document.getElementById("btn");
btnn.addEventListener('click', function() {
let dropdown = document.getElementById('dropdown');
dropdown.classList.toggle("visible");
})
document.body.addEventListener("click", () => {
let dropd = document.getElementById('dropdown');
dropd.classList.remove("visible");
}, true);

How can I fix this toggle function?

I am working an a project for setting up a basic responsive web page for myself. I have everything the way that I want it for my set up but I am having problems with my function to open and close the hamburger menu on screens with a max-width of less than 480px. If I take the method toggleMenu() off of my div with a menu class and I uncomment out the javascript code that is currently commented out and comment out the code that is currently active, everything works perfect on every click. However if I leave the code as is and run it in the browser the menu only toggles open on every other click, so the first time I click it nothing happens, the second time I click it, the menu opens up, the third time I click it nothing happens and finally when I click the fourth time the menu closes back up again. The other issue that I am having is currently I have to include an external script file or put a script inside of my html file rather than relying on my build.js file to import the code. My question is what am I missing to get my menu to open and close correctly while still calling a function from my menu class and how would I write this as a module that I can bundle and run from my build.js file. Any help is greatly appreciated and thank you in advance.
My HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bring in google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<!-- Bring in bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Bring in JSPopper -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="src/js/index.js" defer></script>
<!-- Bring in my style sheet -->
<link rel="stylesheet" href="src/assets/css/basic-style.css">
<title>Basic Page Setup</title>
</head>
<body>
<nav class="navbar">
<div class="logo-container">
<a href="#">
<img src="src/assets/images/seethrough_1.png" alt="seethrough_1" class="logo-image">
<span class="logo-text">LOGOHERE</span>
</a>
</div>
<ul class="nav-list" id="navi-list">
<li class="list-item">
About Us
</li>
<li class="list-item">
Contact
</li>
<li class="list-item">
Support
</li>
</ul>
<div class="menu" id="toggle-menu" onclick="toggleMenu()">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
</nav>
<div class="main-content">
<p class="my-story">
Not many have a story like mine. At 2 years old I was diagnosed with leukemia
and went into chemotherapy. This brings a great many problems, not least among
them a compromised immune system. I caught a cold that turned into pneumonia
and I died. It didn’t stick. In that time I saw things that would influence my life
profoundly. I can’t explain what happened but when I woke up, the pneumonia was
gone along with the leukemia. I have also overcome Pancreatic Cancer, Crohn's Disease,
and Diabetes just to name a few of the hurdles I found myself lifted over. I give all glory
to God, but I tell you these things not to garner sympathy or convince you that my God is
real. I tell you this because I believe all these things made me a purposeful person. I got a
certification in Computer programming on purpose. I write clean code on purpose. I believe
you are reading this on purpose. Let me show you what I can do for you on purpose.
</p>
</div>
<div class="footer-container">
<div class="logo-copyright">
<span class="copyright">©</span>
<img src="src/assets/images/seethrough_1.png" alt="seethrough_1" class="footer-logo">
<span class="footer-text">WebTek</span>
</div>
<div class="webmaster-contact">
<span class="footer-info">This page created and designed by</span>
Thomas E. Kremer
</div>
</div>
<!-- <script src="dist/build.js" defer></script>
-->
<!-- <script src="src/js/index.js" defer></script> -->
</body>
</html>
My CSS File:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style the logo image and text */
/* .company-logo {
text-decoration: none;
}
.logo-image {
width: 75px;
height: 75px;
}
.logo-text {
font-family: Montserrat Alternates;
font-weight: 600;
font-style: none;
font-size: 35px;
color: rgba(0, 0, 0, 1);
line-height: 32px;
letter-spacing: 0.03em;
} */
.logo-image {
width: 55px;
height: auto;
}
.logo-text {
font-family: Montserrat Alternates;
font-weight: 600;
font-style: none;
font-size: 36px;
line-height: 32px;
letter-spacing: 0.03em;
}
.navbar a{
text-decoration: none;
color: rgba(0, 0, 0, 1);
}
.navbar a:hover {
color: blue;
}
.navbar {
align-items: center;
background-color: #FFFFFF;
color: rgba(0, 0, 0, 1);
display: flex;
font-family: Poppins;
font-size: 25px;
justify-content: space-around;
}
.nav-list {
list-style-type: none;
}
.nav-list .list-item {
display: inline-block;
padding: 20px 10px;
}
/* Hide menu on larger screens */
.menu {
display: none;
}
.menu-line {
background-color: green;
width: 25px;
height: 3px;
margin-bottom: 4px;
}
/* Style the footer and footer elements */
.footer-logo {
margin-top: 0px;
margin-bottom: 10px;
width: 55px;
height: 55px;
}
.copyright {
font-family: Montserrat Alternates;
font-weight: 600;
font-size: 25px;
}
.footer-text {
margin-top: 25px;
font-family: Montserrat Alternates;
font-weight: 600;
font-style: normal;
font-size: 21px;
}
.webmaster {
text-decoration: none;
}
.footer-info {
font-family: Poppins;
font-weight: 200;
font-size: 18px;
font-style: normal;
line-height: 32px;
letter-spacing: 0.03em;
}
.webmaster-contact {
margin-top: 13px;
}
.footer-container {
display: flex;
justify-content: space-evenly;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #FFFFFF;
text-align: center;
}
.my-story {
margin-top: 25px;
padding: 0 25px 0 25px;
font-family: Poppins;
font-weight: 200;
font-style: normal;
font-size: 16px;
}
/* Media query for smaller devices, hamburger menu */
#media all and (max-width: 480px) {
.navbar {
flex-direction: column;
position: relative;
}
.logo-container {
width: 100%;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Show menu */
.menu {
display: block;
position: absolute;
right: 10px;
top: 10px;
}
.nav-list {
list-style-type: none;
width: 100%;
text-align: center;
padding: 20px;
display: none;
/* padding-left: 0; */
}
.nav-list .list-item {
display: block;
border-top: 1px solid black;
padding: 10px;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content:inherit;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #FFFFFF;
text-align: center;
}
.copyright {
font-family: Montserrat Alternates;
font-weight: 600;
font-size: 20px;
}
.footer-logo {
margin-top: 0px;
margin-bottom: 10px;
width: 45px;
height: 45px;
}
.footer-text {
margin-top: 25px;
font-family: Montserrat Alternates;
font-weight: 600;
font-style: normal;
font-size: 25px;
}
.logo-copyright {
display: inline-block;
margin: 0;
padding: 0;
}
.webmaster-contact {
display: inline-block;
margin: 0;
padding: 0;
}
.active {
display: block;
}
.inactive {
display: none;
}
}
My JavaScript File:
/* Toggle hamburger menu */
/* const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
}); */
function toggleMenu() {
const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
});
}
So recap, I am trying to have the hamburger menu open and close with each click and run the script from my bundled build.js file rather than from within my html file or from another external javascript file, either as a module or as an onclick function. Thank you all again for the help in advance.
Your function toggleMenu() is setting an event listener on the first click, then the second click is triggering that listener!
Your first method works (commented out).
Use standalone JS - with no 'onclick' event:
// JS EVENT LISTENER METHOD (my preferred method)
const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
});
// HTML EVENT METHOD
// When you call the named function from HTML `onclick="toggleMenu()"`
// the event listener is not required. You can just toggle
// the .active class as usual.
// <div class="menu" id="toggle-menu" onclick="toggleMenu()">
function toggleMenu() {
const naviList = document.getElementById('navi-list');
naviList.classList.toggle('active');
}
Using both methods together will cancel each other out! It's really toggling .active twice - too fast to see!
tested with codepen
addEventListener VS onclick comparison

How do I make two unordered list fade in and fade out when my menu is clicked depending on which is showing?

I have a menu made with 3 div's nested in one div, that I am trying to have two different unordered list fade in or fade out depending on which one is showing when it is clicked. It almost works, however after i click on the menu the first time, every other time both list fade in together instead of just one.
HTML and CSS are good, but in js I've tried several variations of code to get it working, but this is the closest I can get it to work.
$(document).on('click','.menu', function()
{
$(".pagelinks").fadeOut('slow', function(){
$(".homelinks").fadeIn('slow');
});
});
$(document).on('click','.menu', function()
{
$(".homelinks").fadeOut('slow', function(){
$(".pagelinks").fadeIn('slow');
});
});
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
h1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 595px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 77%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.nav:hover{
cursor: pointer;
}
.pagelinks
{
margin: auto;
margin-left: 37%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
.homelinks
{
margin: auto;
margin-left: 54%;
position: fixed;
top: -10px;
display: block;
}
.homelinks ul
{
list-style-type: none;
}
.homelinks ul li
{
display:inline-block;
padding:30px;
margin: auto;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
}
.homelinks ul li:hover
{
color: deepskyblue;
transition: 0.6s;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="main.js" async></script>
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
<nav class="pagelinks">
<ul>
<li>Mortgage</li>
<li>Auto</li>
<li>Personal</li>
<li>Refinance</li>
<li>Investment</li>
</ul>
</nav>
</div>
<nav class="homelinks">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<script src="main.js"></script>
</header>
<div>
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
This looks like a situation in which you could use the toggleClass() function. Create and apply a .visible class on one of the <nav> elements. On the click event, do something like $('nav').toggleClass('visible'). See https://api.jquery.com/toggleClass/.
This is just the asynchronous nature of Javascript. What's happening is when you click the '.menu' for the first time two callback functions are called which get stacked in the event loop and when they execute '.homelinks' and '.pagelinks' both fade in.
What you need to do is simply give a class named 'visible' to any one of the two ('.homelinks' or '.pagelinks') and in your function just check for the element with visible class - fade this element out and fade the other one in and after that toggle visible class to the other element and remove visible class from original element.
For instance
initially - '.homelinks' has visible
'.pagelinks' does not have it
Now on click event
fadeout - element with visible class ('.homelinks')
fadein - the other element ('.pagelinks')
remove - visible class from '.homelinks'
add - visible class to '.pagelinks'
Here check this out in Codepen
$('.menu').click(function()
{
console.log("clickk");
let pl = $('.pagelinks');
let hl = $('.homelinks');
if(pl.hasClass('visible')){
pl.fadeOut('slow',function(){
hl.toggleClass('visible');
pl.toggleClass('visible');
hl.fadeIn('slow',function(){});
});
}else{
hl.fadeOut('slow',function(){
hl.toggleClass('visible');
pl.toggleClass('visible');
pl.fadeIn('slow',function(){});
});
}
});

onmouseenter event wont work on div element

A part of a webpage i am designing consists of several div elements placed side by side. Each one contains an image. I want to summon a drop-down menu when the user's mouse enters the div. However, testing it with a simple "print hello" function didn't yield the results i was expecting.
At this point, the images are placed properly, and their size is adjusted just like i specified. However, the cursor is not pointerand the function test doesn't run when the mouse enters the div. I've had this problem with click events in the past and i always tried to find a way around it. Can someone explain why it won't work?
Here's the html
#container {
background-color: black;
border-radius: 20px;
display: inline-block;
position: fixed;
width: 100%;
z-index: 2;
top: 0;
}
#icon {
background-color: burlywood;
border-radius: inherit;
border-radius: 20px;
}
#menu a {
font-size: 30px;
font-family: "Arial";
color: white;
text-decoration: none;
margin-left: 50px;
}
#flag {
width: 50px;
height: 50px;
}
#menu a:hover {
color: #e55d00;
}
body {
height: 2000px;
background-image: url("background.jpg");
}
#btt {
bottom: 0;
color: white;
position: fixed;
text-decoration: none;
}
#contain {
display: inline-block;
height: 1000px;
width: 100%;
max-width: 100%;
position: absolute;
}
#sidemenu {
width: 0;
height: 100%;
z-index: 1;
background-color: black;
transition: width 1s;
padding-top: 200px;
position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
}
#sidemenu a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
#sidemenu a:hover {
color: red;
}
#language {
margin-left: 250%;
}
#title a {
color: #e55d00;
text-decoration: none;
}
#title {
font-size: 50px;
text-align: center;
border-radius: 20px;
display: inline-block;
padding: 10px;
}
#projects {
margin-top: 200px;
}
#current {
width: 210px;
height: 200px;
cursor: pointer;
}
#current img {
width: inherit;
height: inherit;
}
#progress {
margin-left: 200px;
width: 210px;
height: 200px;
cursor: pointer;
}
#progress img {
width: inherit;
height: inherit;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Projects</title>
<link type="text/css" rel="stylesheet" href="projects.css">
</head>
<body>
<div id="container">
<table>
<tr>
<td>
<div id="icon">
<img src="img.png">
</div>
</td>
<td>
<div id="title" title="Home">
Electrocats
</div>
<div id="menu">
News
Projects
About Us
menu item 4
</div>
</td>
<td>
<div id="language">
<a href="#" title="Translate to Greek">
<img id="flag" src="Greece-icon.png">
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="contain">
<div id="sidemenu" onmouseleave="hideMenu()">
contact
Films
</div>
</div>
<!-- here is the code with the problem -->
<div id="projects">
<table>
<tr>
<td>
<div id="current" onmouseenter="test">
<img src="high-voltage.png">
</div>
</td>
<td>
<div id="progress" onmouseenter="test">
<img src="engineering1.jpg">
</div>
</td>
</tr>
</table>
</div>
<a id="btt" href="#top">Back to top</a>
<script>
function summonMenu() {
var menu = document.getElementById("sidemenu");
menu.style.width = "400px";
}
function hideMenu() {
var menu = document.getElementById("sidemenu");
menu.style.width = "0";
}
function test() {
console.log("hello");
}
</script>
</body>
</html>
Hello See the below Fiddle Here I did this using alert but you can do the same using console.log Hope It helps you .
Div Hover Fiddle
also Added a fiddle with a dropdown list visible on mouse enter event what are you trying to made i guess so .
dropdown Fiddle
In the end, setting the position of the div that contains the images to absolutesolved the issue. I've yet to understand why, but i believe it has something to do with the z-index values specified in the css file. I would really appreciate it if someone could explain why the issue was solver this way.

Why won't my nav button or button text move to the center?

So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.

Categories

Resources