Hover effect on google font icon disappearing - javascript

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

Related

change font awesome menu toggler icon to close icon

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>

Unable to use position:sticky; while adding element through .innerHTML

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.

Override bootstrap container with js

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.

How to fix an element to the right of div?

I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...
Here is an Example
And here is what I've done so far:
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left: 2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 45vh;
right: 223px;
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
<!-- the button -->
</div>
<div class="right">
</div>
</div>
The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:
<div class="cont">
<div class="left"></div>
<div class="right">
<div class="results_toggle"></div>
</div>
</div>
.right {
position: relative; /* add this */
}
.results_toggle {
/* remove 'right' */
left: 0; /* add this */
}
Working example
The advantage of this method is that it will be completely unaffected by any change in screen resolution.
You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .
If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way
See snippet below
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left:2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 50%;
right:50%;
transform:translate(100%,-50%);
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide{
left:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
</div>
<div class="right">
</div>
</div>
For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :
The main div is represented by the red background. Inside you have your left div and aligned with your right button.
Here is the code to make this :
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
.cont
{
display: flex;
align-items: center;
background-color: red;
color: white;
}
.left
{
background-color: blue;
margin: 5px;
}
button
{
background-color: green;
}
</style>
</head>
<body>
<div class="cont">
<div class="left">
<p>Left div</p>
</div>
<div class="results_toggle">
<button>Right button</button>
</div>
<div class="right"></div>
</div>
</body>
</html>
not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box.
Here's a fiddle
edit:
another option: position: relative and float: left without left or right property
updated fiddle
It's because you've fixed each property.
You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.
Example
.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}
<div class="parent">
<button class="child">btn</button>
</div>

How to get jQuery to recognize mouse over image once per hover

I am trying to animate a picture when the mouse hovers over it. I am currently using "animate.css" to get the animation. There are two problems:
1) How do I get jQuery to "fire" my script once per hover? For example, if I create an alert, the alert will fire several times (putting the mouse over and taking it off).
2) What is wrong with my current jQuery syntax? The animation does not play.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<script type="text/javascript" src="scripts/test.js"></script>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
JS
$(document).ready(function()
{
$('#me-pic').hover(function()
{
$(".bounceIn").toggleClass("bounce");
});
});
My CSS
body,html
{
width: 100%;
min-width: 200px;
height: 100%;
padding: 0;
margin: 0;
}
.container
{
width: 100%;
min-width: 500px;
height: 100%;
}
.background
{
height: 100%;
width: 100%;
display: inline-block;
position: relative;
z-index: 1;
}
.align-vert
{
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.me-border
{
border-radius: 50%;
border: 2px solid #FFF;
vertical-align:middle
}
.navbar
{
position: fixed;
background-color: rgba(0, 0, 0, 0.9);
margin: 0;
padding: 0;
width: 100%;
height: 50px;
z-index: 2;
}
.nav-text
{
color: #a3a3a3;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#home
{
margin-right: 50px;
}
#home:hover
{
color: #777777;
}
#home a:hover, a:visited, a:link, a:active
{
text-decoration: none;
color: inherit;
}
#archive
{
margin-left: 50px;
}
#archive:hover
{
color: #777777;
}
.daryl
{
font-family: 'Work Sans', sans-serif;
display: inline-block;
padding-left: 20px;
font-size: 30px;
color: #FFF;
}
#first
{
background: #2C2D45;
}
#second
{
background: #354677;
font-size: 40px;
font-family: 'Work Sans', sans-serif;
color: white;
}
See here for animate.css
Could my CSS files cause a conflict?
Thanks in advance!
In your JS, I would instead use the mouseenter and mouseleave event handlers. Based on your explanation, this should serve nicely. It will fire exactly once when the mouse enters the div, and once when it leaves.
$(document).ready(function()
{
$('#me-pic').on('mouseenter', function() {
$(".bounceIn").toggleClass("bounce");
});
$('#me-pic').on('mouseleave', function() {
$(".bounceIn").toggleClass("bounce");
});
});

Categories