I am currently creating a dropdown menu so I want the menu to be displayed when clicked by adding class via Javascript but classList is not working at all. I tried lots of time but couldn't. Also if i add style.display = "block", then it works! I am unable to figure out! Please Help me!
document.getElementById('dbtn').addEventListener('click', function() {
document.getElementById('d-content').classList.toggle('show');
});
#wrapper {
position: relative;
display: inline-block;
}
#dbtn {
background-color: #F44336;
font-size: 27px;
font-family: 'Droid Sans', sans-serif;
border: none;
padding: 0.3em 0.6em;
color: #FFFFFF;
cursor: pointer;
outline: none;
}
#d-content {
position: absolute;
display: none;
background-color: #F44336;
font-family: 'Droid Sans', sans-serif;
font-size: 22px;
border-top: 2px solid #FFFFFF;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
#d-content a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 0.3em 5em 0.3em 0.3em;
}
#d-content a:hover {
background-color: darkorchid;
}
.show {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown Menu</title>
</head>
<body>
<div id="wrapper">
<input type="button" id="dbtn" value="Select..." />
<div id="d-content" class="drop">
<a>USA</a>
<a>Canada</a>
<a>Europe</a>
</div>
</div>
</body>
</html>
Browser calculates css properties based on selectors order and selectors weight. In your case #id selector overrides your class selector.
.show {
display: block !important;
}
Or it's better not to use important at all:
#d-content.show{
display: block ;
}
You can read more about selectors weight here. Also you can alaways check those kind of things in dev console.
In CSS, the id selector has far more weight over the class selector.
You need to add !important; to your .show display rule.
The problem is you are using the wrong approach (Don't worry it happens, and it's okay). it would be easier if you just toggle the display property it will save lot of your time. you can toggle the display property using following snippest:
document.getElementById('dbtn').addEventListener('click', function () {
var dContent = document.getElementById('d-content');
dContent.style.display = dContent.style.display === 'none' ? 'block' : 'none';
});
Related
I use CSS to show and hide tooltips when I hover over them. Now I need this to work for mobile devices with a click function. I got the first tooltip running through toggling a class via Javascript. How can I apply that function for all tooltips now? I have around 30 to 40. Any idea how I can achieve my goal?
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.toggle("website-tooltiptext-visible");
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!
use an extra class.
add this to your css:
.website-tooltiptext-visible {
visibility: visible !important;
}
and replace this class inside your js code:
element.classList.toggle("website-tooltiptext-visible");
PS: NEVER use same id for multiple HTML elements. like ever!
EDIT: use below javascript code to select by class
Array.from(document.getElementsByClassName("website-tooltiptext")).forEach(
(element) => {
element.addEventListener("click", () => {
element.classList.toggle("website-tooltiptext-visible");
});
}
);
I made some CSS style for input button. After doing it, the prop('disabled',true) is not working for me (it used to work before the CSS changes)
HTML code:
<div id="navigation">
<button id="nextButton" type="button" name="nextButton">Next</button>
</div>
jQuery code:
$('#nextButton').prop('disabled',true);
CSS code:
button{
background: #cfe2f3;
background: -webkit-linear-gradient(#cfe2f3, #d0e0e3);
background: linear-gradient(#cfe2f3, #d0e0e3);
border: 0.5px solid #000;
border-radius: 5px;
color: #000;
display: inline-block;
padding: 8px 20px;
font: normal 700 18px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: none;
}
My propose it to disable the press on the Next button
Try to add some CSS to the disabled state:
button:disabled {
// your css rules
}
Add style to button as well when you make it disable so it will be confirm that button is disabled
$('#nextButton').css('border','1px solid red');
$('#nextButton').prop('disabled',true);
Hope so it will help you.
it is working.try this.I have linked jquery online
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#one{
background: #cfe2f3;
background: -webkit-linear-gradient(#cfe2f3, #d0e0e3);
background: linear-gradient(#cfe2f3, #d0e0e3);
border: 0.5px solid #000;
border-radius: 5px;
color: #000;
display: inline-block;
padding: 8px 20px;
font: normal 700 18px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: none;
}
</style>
<body>
<input type="button" id="one" name="button" value="button">
<script type="text/javascript">
$(document).ready(function(){
$("#one").prop('disabled',true).css({"opacity":"0.6"});
$("#one").on('click',function(){
alert(" I am enable");
})
});
</script>
</body>
</html>
try it with changing 'disabled' to 'enable', if it is enable, you may see an alert.
You can disable a button by using below mentioned steps.
Say your button class name = setAlg
Step 1:
Using Jquery attr Attribute :
$('.setAlg').attr('disabled', 'disabled');
Step 2:
Using Jquery addClass CSS Class :
$('.setAlg').addClass('disabled');
Step 3 :
Then by Declaring CSS Style Class :
<style type="text/css">
.disabled
{
background: none repeat scroll 0 0 burlyWood;
cursor: default !important;
}
</style>
I just started learning HTML/CSS/JS 2 days ago and today I made a little tool for personal use.
I made it on computer with a 1980 x 1080 resolution but on other resolutions it doesn't look right.
What I made is a little tool which basically allows me to put a band and the band's genre into an input field and then add it to a list.
Everything looks fine on different resolutions except for when I add a band to the list.
The text that's supposed to go into the border goes all the way to the right side of the screen and the border becomes just a tiny square.
Another question I had, which I might aswell ask in here:
I would like to add a function where I can click one of the bands I added to the list, then highlight the band I clicked, and remove it by clicking a remove button.
But I have no clue where to start.
Html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel='stylesheet' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2>Bands I Like</h2>
<form name="checkListForm">
<input type="text" id = "Item" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<ol class = "Header">
<li>Band // Genre</li>
</ol>
<br/>
<ol class ="Bands">
</ol>
</body>
</html>
Css:
.Header {
list-style-type: none;
position: relative;
}
.Header {
background: black;
border-radius: 5px;
border: 1px solid white;
margin: 4px 20px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
color:white;
text-align:center;
}
.Bands li {
list-style-type: none;
position: relative;
}
.Bands li {
background: #eeeeee;
border-radius: 5px;
border: 1px solid black;
margin: 4px 750px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
//text-align:center;
}
h2 {
font-family:arial;
color:white;
}
form {
display: inline-block;
}
#button{
display: inline-block;
height:20px;
width:70px;
background-color:grey;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
.list {
font-family:garamond;
color:#cc0000;
}
body {
background-image: url("http://fc04.deviantart.net/fs71/f/2011/027/d/e/sphere_of_doom_by_crackoala-d386se9.png");
JS/jQuery:
$(document).ready(function(){
$("#button").click(function(){
$('.Bands').append('<li>'+$('#Item').val()+'</li>');
$('#Item').val("");
});
$('.Bands').sortable();
});
You can find all my code here:
http://jsfiddle.net/mLkcr501/
Any help would be appreciated!
This line in your CSS was bumping it to the right.
margin: 4px 750px;
Then just needed to float the links left so the border thingy covered them:
.bands{
float:left;
}
http://jsfiddle.net/mLkcr501/1/
-Cheers,
you must use mediaquery to ajust the size on diferent resolutions.
#media (max-width: 640px){
'here contains the class or ids'{width:100%; float: left;}
.greyBox2{display:none;}
.text{width: 100%; text-align: left; font-size: 17px;}
}
I have one question about using variable (time2 in my case) in data-title CSS field.
This is example what i need : http://jsfiddle.net/9oydvza0/1/
What shall i do that this variable takes value id time2?
Code from link :
CSS:
<style>
.photo4 {
display: inline-block;
position: relative;
}
.photo4:hover:after {
display: block;
content: attr(data-title-id);
position: absolute;
left: 120%;
bottom: -250%;
z-index: 1;
background: #003399;
font-family: Segoe UI;
font-weight: lighter;
font-size: 13px;
padding: 5px 10px;
color: #fff;
border: 1px solid #333;
-moz-border-radius: 5px -webkit-border-radius: 5px;
border-radius: 5px 5px 5px 5px;
}
</style>
Javascript:
<script>
document.getElementById("time2").innerHTML = "ololo";
</script>
HTML:
<p id="time2"></p>
<div style="width:10px; float:left; padding-top:20px;">
<div class="photo4" data-title-id="time2">
<img src="http://placekitten.com/g/300/300" width="22" height="22px" />
</div>
</div>
</div>
In your CSS when you are hovering on class photo4 you are showing its data-title-id contents, which you have set to time2 in your html,So definately it will show time2,
So either set it to <div class="photo4" data-title-id="ololo">
OR if you want to set it dynamically with the content of id time2
then do this
var myDiv=document.getElementById("time2")
myDiv.innerHTML = "ololo";
document.querySelector('.photo4').setAttribute("data-title-id", myDiv.innerHTML);
SEE DEMO HERE
Use like this:
document.querySelectorAll('[data-title-id]').innerHTML = "ololo";
If you are OK with jquery you can use like below.
$(document).ready(function(){
$(".photo4").attr("data-title-id","ololo");
});
DEMO
But it doesn't work. You can see I'm trying to change the class of the div containing season.png onmousedown and revert it onmouseup.
What am I missing?
Thanks.
Mike
It's working just fine. There is nothing wrong with the code that you posted, so if you can't see it there has to be something wrong with your css.
I used this to test the code:
<html>
<head>
<title>Test</title>
<style>
.winter { border: 1px solid blue; }
.spring { background: yellow; }
.summer { background: green; }
</style>
</head>
<body>
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
<img src="Resources/season.png" />
</div>
</body>
</html>
It works for me so I guess you need to run some checks on your code. Make sure your css is included.
Post the complete code you are using so we can look for errors.
This is the code I used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onmouseevents on div</title>
<style type="text/css">
body
{
background-color: #FFF;
color: #000;
}
.page
{
margin: 10px auto;
width: 640px;
}
.winter
{
background-color: cyan;
}
.spring
{
color: magenta;
}
.summer
{
color: yellow;
}
</style>
</head>
<body>
<div class="page">
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
Cats!
</div>
</div>
</body>
</html>
As an alternative - I have used the hover pseudoselector for this.
Here's a personal example:
.sidebar ul.sidebuttons li a
{
font: bold italic x-large/1.1 trebuchet ms,verdana,sans-serif;
display: block; /* effect should be in a new box not inline */
text-decoration: none; /* turn off link underlining */
color: yellow;
background: black url(sidebar_off.png) no-repeat center;
padding: 10px 10px 10px 5px;
margin: 0px 0px 20px 0px;
border: white outset;
border-width: 2px 2px 2px 0px;
text-align: right;
text-transform: lowercase;
}
.sidebar ul.sidebuttons li a:hover
{
background: yellow url(sidebar_on.png) no-repeat center;
color: black;
border: black inset;
text-decoration: none;
border-width: 2px 2px 2px 0px;
}
The HTML looks like:
<div class="sidebar">
<ul class="sidebuttons">
<li>Go Somewhere</li>
If you're having trouble, try Firefox Web Developer add-on or something similar to check the style information on that part of the page. It might not be triggering what you think it should be triggering.
<style>
.summer{ background-color:red;}
.spring{ background-color:blue;}
.aa{ font-size:18px;}
.bb{ font-size:36px;}
</style>
<div class="aa spring" onmousedown="this.className='summer aa'" onmouseup="this.className='spring bb'">
aaaaaaaaa
</div>
I test this code, it works well.
I think, not javascript problem. Try to check css, or other things.
Maybe put js code and css code on the img is what you need.
It's very easy with jQuery:
$(".winter").mouseup(function() {
$(this).addClass("spring");
$(this).removeClass("summer");
},function(){
$(this).addClass("summer");
$(this).removeClass("spring");
});
The Javascript file I was using was a very inflexible library. I solved the problem a different way.