I need to change the icon of my menu to close icon on click to close my aside menu.
Iv tried to play around with the add and remove class functions but couldnt work.
$(document).ready(function(){
$('#menu').click(function(){
$('.aside').toggleClass('toggle');
});
$(window).on('scroll load',function(){
$('#menu').removeClass('fa-times');
$('.aside').removeClass('toggle');
if($(window).scrollTop() > 0){
$('.top').show();
}else{
$('.top').hide();
}
});
});
#menu{
position: fixed;
top: 30px; right: 30px;
background: #333;
color: #fff;
cursor: pointer;
font-size: 20px;
border-radius: 10px;
padding: 10px;
z-index: 1000;
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/fontawesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js"></script>
<div id="menu" class="fas fa-bars"></div>
$(document).ready(function() {
$('#menu').click(function() {
$('.aside').toggleClass('toggle');
if ($('#menu').hasClass('fa-bars')) {
$('#menu').removeClass('fa-bars').addClass('fa-times').text('');
} else {
$('#menu').removeClass('fa-times').addClass('fa-bars').text('');
}
});
});
#menu{
position: fixed;
top: 30px; right: 30px;
background: #333;
color: #fff;
cursor: pointer;
font-size: 20px;
border-radius: 10px;
padding: 10px;
z-index: 1000;
width:20px;
text-align:center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/fontawesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js"></script>
<div id="menu" class="fas fa-bars"></div>
Related
I want to make the menu stick to the top of the page.
The code works just fine if I just add the code to the page.
However, I want to use javascript because I want to be able to change the menu on every page without having to do it manually on each one.
document.getElementById('menu-js').innerHTML = `<div id="menu">
<div class="dropdown">
<button class="dropbtn">Button_1</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Button_2</button>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
</div>`
#import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Arsenal|Rubik&display=swap');
#menu {
background-color: white;
top: 0px;
left: 0px;
position: sticky;
padding-left: 10px;
margin-top: -8px;
margin-left: -30px;
margin-right: -0.51%;
border-bottom-color: black;
border-bottom-style: solid;
border-bottom: 5px;
}
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 16px;
border: none;
margin: none;
font-family: 'Arsenal';
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f2d3d8;
min-width: 200px;
z-index: 1;
font-family: 'Arsenal';
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ffd3b6;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #c06014;
color: white;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;
}
hr {
margin-left: -20px;
color: #c06014
}
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='page-container'>
<div id='content-wrap'>
<h1>Content above menu</h1>
<div id='menu-js'></div>
<h1>body</h1>
<h2>body</h2>
</div>
<footer>
<hr>FOOTER</footer>
</div>
<script src='menu.js'></script>
</body>
</html>
If possible, I would like to only use these three languages.
Thanks!
Your code seems almost perfect in terms of sticky property.
Try to add a max-height property(value in pixel) to the menu-js div.
is there a way to have my html page in a fluid container (bootstrap 4) and be able to use js to make a menu appear and disappear over it with a toggle button in Javascript? (I already have my menu working but I can't make it appearing over the container)
var button = document.querySelector('.toggle_button'); // bouton sandwich
var nav = document.querySelector('.nav'); // menu deroulant gauche
var a = document.querySelector('.menu a');
//Derouler le menu
button.onclick = function() {
nav.classList.toggle('nav_open');
}
html,
body {
padding: 0;
margin: 0;
}
.toggle_button {
height: 3px;
width: 30px;
position: relative;
float: right;
margin-right: 10px;
margin-top: 5px;
cursor: pointer;
}
.toggle_button span {
height: 3px;
background-color: #2980b9;
width: 100%;
position: absolute;
top: 20px;
left: 0;
}
.toggle_button span:before {
content: '';
height: 3px;
background-color: #2980b9;
width: 100%;
position: absolute;
top: -10px;
left: 0;
}
.toggle_button span:after {
content: '';
height: 3px;
background-color: #2980b9;
width: 100%;
position: absolute;
top: 10px;
left: 0;
}
.menu {
height: 1000px;
width: 200px;
background-color: #2980b9;
}
.menu a {
color: #ecf0f1;
font-family: sans-serif;
text-align: center;
display: block;
padding-top: 30px;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
}
.logo {
text-transform: uppercase;
font-weight: bold;
font-size: 24px;
}
.nav {
margin-left: -200px;
transition-duration: 0.2s;
}
.nav_open {
margin-left: 0;
transition-duration: 0.2s;
}
.back {
background-color: #ecf0f1;
}
.bandeau {
background-color: #e67e22;
height: 50px;
display: sticky;
}
.bandeau a {
color: #ecf0f1;
font-family: sans-serif;
text-align: center;
display: block;
font-size: 30px;
padding-top: 0px;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<!-- Header contenant le titre de la page home.html et le type d'encodage ecrit -->
<head>
<title> SARL Garage BRINCAT </title>
<meta charset="utf-8" \>
<link rel="stylesheet" href="../bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Container global -->
<div class="container-fluid back">
<!-- Boutton sandwich -->
<div class="toggle_button">
<span></span>
</div>
<div class="container">
<div class="row">
<!-- Logo FIAT -->
<article class="col-md-3 bandeau">
<img src="res/FIAT.jpg">
</article>
<!-- Titre -->
<article class="col-md-9 bandeau">
SARL Garage BRINCAT
</article>
</div>
</div>
</div>
<!-- Menu deroulant -->
<div class="menu nav">
Mon logo
Neuf
Occasions
Contact
</div>
<script type="text/javascript" src="js/app.js"></script>
<!-- Page principale (hors menu) -->
</body>
</html>
i am not good yet i just began to learn web dev so i may have done ugly things ^^' i am trying to make my menu on the left come when i push the sandwich button on the top right corner , but i don't know how to do to make it "ovverride" the container-fluid that is the main page because my responsive menu isn't part of it and isn't a bootstrap component neither, thanks for your time :)
Just use position: absolute on the menu, setting it to a high z-index.
.menu {
height: 1000px;
width: 200px;
background-color: #2980b9;
position: absolute;
z-index: 1000;
}
You may have to adjust the top offset.
Hover effect on google font icon disappearing when trying to reach a link embedded in it. I implemented a similar concept but on image and it works perfectly. Pretty sure I am going wrong somewhwere in CSS
$('#LanguageQ').hover(function(){
$('.customtooltip').show();
}, function(){
$('.customtooltip').hide();
});
.customtooltip{
background-color: #666666 !important;
color: #E7E7E7;
padding: 5px;
z-index: 3;
position:absolute;
left:12%;
width: 36%;
font-size: 0.8vw;
display:none;
cursor: pointer;
}
div.mandatory {
display: inline-block;
width: 44%;
margin: 0 0.5%;
}
.mandatory {
position: relative;
}
.mandatory:active::before {
content: '';
}
.mandatory::before {
content: '*';
color: red;
position: absolute;
left: 2%;
z-index: 5;
font-size: 15px;
top: 4%;
font-weight: 800;
}
.Input-icon {
position: absolute;
top: 26%;
right: 6%;
z-index: 5;
font-size: 3ch;
color: #cecece;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div>
<div class="customtooltip">Can't find your language? Please contact us</div>
<div class="mandatory">
<div class="Input-icon material-icons"
id="LanguageQ">help_outline</div>
<input type="text" name="language[]" id="name_input" class=" nameinput form-control inputfield input gray mandatory"
list="huge_list" placeholder="Languages">
</div>
Expected:
I need to be able to go to the link when the hover text appears.
What I have tried so far:
Created a hidden div to increase the area of the hover able area (can add the code if required)
Any help or pointers will be appreciated. Thanks
Place the .customtooltip div after #LanguageQ div. This is necessary for the css code #LanguageQ:hover + .customtooltip {display: block;} to work.
Make the .customtooltip class's width: 100%;. Or change it's width/position as necessary.
Delete the jQuery code. I'm giving you a css only solution.
Add the following css:
#LanguageQ:hover + .customtooltip {
display: block;
}
.customtooltip:hover {
display: block;
}
.customtooltip{
background-color: #666666 !important;
color: #E7E7E7;
padding: 5px;
z-index: 3;
position:absolute;
left:12%;
width: 100%;
font-size: 0.8vw;
display:none;
cursor: pointer;
}
div.mandatory {
display: inline-block;
width: 44%;
margin: 0 0.5%;
}
.mandatory {
position: relative;
}
.mandatory:active::before {
content: '';
}
.mandatory::before {
content: '*';
color: red;
position: absolute;
left: 2%;
z-index: 5;
font-size: 15px;
top: 4%;
font-weight: 800;
}
.Input-icon {
position: absolute;
top: 26%;
right: 6%;
z-index: 5;
font-size: 3ch;
color: #cecece;
}
#LanguageQ:hover + .customtooltip {
display: block;
}
.customtooltip:hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div>
<div class="mandatory">
<div class="Input-icon material-icons"
id="LanguageQ">help_outline</div>
<div class="customtooltip">Can't find your language? Please contact us</div>
<input type="text" name="language[]" id="name_input" class=" nameinput form-control inputfield input gray mandatory"
list="huge_list" placeholder="Languages">
</div>
You can achieve this through many ways, one way is this:
$('.contain').hover(function() {
$('.customtooltip').show();
}, function() {
$('.customtooltip').hide();
});
.customtooltip {
background-color: #666666 !important;
color: #E7E7E7;
padding: 5px;
z-index: 3;
position: absolute;
left: 20%;
width: 75%;
font-size: 0.8vw;
display: none;
cursor: pointer;
}
div.mandatory {
display: inline-block;
width: 44%;
margin: 0 0.5%;
}
.mandatory {
position: relative;
}
.mandatory:active::before {
content: '';
}
.mandatory::before {
content: '*';
color: red;
position: absolute;
left: 2%;
z-index: 5;
font-size: 15px;
top: 4%;
font-weight: 800;
}
.Input-icon {
position: absolute;
top: 26%;
right: 6%;
z-index: 5;
font-size: 3ch;
color: #cecece;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mandatory">
<div class="contain">
<div class="customtooltip">Can't find your language? Please contact us</div>
<div class="Input-icon material-icons" id="LanguageQ">help_outline</div>
</div>
<input type="text" name="language[]" id="name_input" class=" nameinput form-control inputfield input gray mandatory" list="huge_list" placeholder="Languages">
</div>
Here, I have wrapped your .customtooltip and #languageQ div's together and applied the javascript hover function on the container itself. This way I have included both your elements in the hover function, which was previously including only the #languageQ div only, thus causing it to disappear as soon as you move out of the div.
Another way to work around the issue it to nest your target element (in your case: .customtooltip) inside the hovered one (#languageQ) without the need to use javascript at all. Just using css alone.
#Target:hover, #Hovered:hover + #Target
{
display: block;
}
I am creating a list of elements from user inputs. Each element in this list comes with a dynamically created button within my JavaScript.
I am trying to have it so that when I click on this dynamically created button ("started"), it will automatically remove the entire list element from the original li and move it to the top of another li.
My code: [EDIT: For some reason, my code snippet doesn't show the second list "doing" but it shows in my local console, not sure if it's problem with my code?]
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started'>Started</button>" + text + '</li>' + '</br>');
}
})
);
$(".addedTask").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').append($('#todo-list'( completedItem)).removeClass(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
/* cursor: pointer;*/
}
li:hover {
background: #ddd;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
}
#started {
float: left;
background-color: white;
border-radius: 6px;
}
.column {
background-color: #E3E3E3;
min-height: 100px;
width: 25%;
box-shadow: 1px 1px 3px $shadow;
display: inline-block;
position: asolute;
margin: 5px;
vertical-align: top;
position: relative;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
bottom: .5px;
color: #393939;
margin: 5px;
}
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
<html>
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js">
</script>
</body>
</html>
Here is an image of what it looks like on my end:
You're using the wrong selector .addedTask for the Event delegation.
Use prepend function to add the element at the top.
To test this snippet, click on Full Page after you click 'Run code snippet'
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started'>Started</button>" + text + '</li>' + '</br>');
}
})
);
$("#todo-list").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').prepend($(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
/* cursor: pointer;*/
}
li:hover {
background: #ddd;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
}
#started {
float: left;
background-color: white;
border-radius: 6px;
}
.column {
background-color: #E3E3E3;
min-height: 100px;
width: 25%;
box-shadow: 1px 1px 3px $shadow;
display: inline-block;
position: asolute;
margin: 5px;
vertical-align: top;
position: relative;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
bottom: .5px;
color: #393939;
margin: 5px;
}
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
<html>
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js">
</script>
</body>
</html>
Since you are adding HTML to the DOM later, the code $(".addedTask").on('click', "button", function() { will not work because at the time of execution this code there was no .addedTask elements.
You may instead want to delegate this to a higher node in the DOM. One easy way to accomplish this would be to rewrite this as
$("document").on('click', ".addedTask button", function() {
I'm trying to make a menu with jquery but when i hover over "Menu" and try clicking one of the buttons it slides back up. anyone who knows how to fix this?
Here is my Jquery:
$(document).ready(function() {
$(".slide").hide();
$("#menu").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
Here is the full code:
https://jsfiddle.net/lollz4/dh1kLh8L/
P.S. I'm new here so sorry if I'm doing anything wrong.
Add an additional wrapper around your menu and check for the hover state on that element instead:
$(document).ready(function() {
$(".slide").hide();
$("#menu-wrapper").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
* {
margin-top: 0px;
margin-left: 0px;
}
body {
background-color: #EBEDEF;
}
.page {
background: white;
width: 100%;
height: 52em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2px;
position: absolute;
margin: 0;
padding: 0;
}
#menu {
display: block;
position: absolute;
left: 0em;
top: 0em;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.slide {
display: block;
left: 0em;
top: 0em;
position: relative;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.logo {
height: 3em;
width: 100%;
background-color: #ABB2B9;
padding: 0px;
margin: 0px;
position: fixed;
}
div img {
margin: auto;
width: 8em;
height: 3em;
background-color: #607D8B;
border-radius: 2px;
display: block;
padding-top: 0;
}
div img:hover {
opacity: 0.80;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>
<title>Stefan's Website</title>
</head>
<body>
<div class="logo">
<img src="http://previews.123rf.com/images/alexutemov/alexutemov1511/alexutemov151100338/48202700-Pizza-flat-icon-logo-template-Pizza-food-silhouette-Pizza-piece-logo-pizza-slice-logo-Pizza-menu-ill-Stock-Vector.jpg" width="160em" height="90em">
<div id="menu-wrapper">
<button id="menu">
Menu
</button>
<button class="slide">
Pagina1
</button>
<button class="slide">
Pagina2
</button>
<button class="slide">
Pagina3
</button>
</div>
</div>
<!--<div class="page">
</div>-->
</body>
</html>