I'm trying to launch a click event on an li but it doesn't seem to work.
$( document ).ready(function() {
$("#menu ul li").click(function(){
alert(this.id);
});
});
.wrapper {
display: grid;
grid-template-columns: 2fr 7fr 2fr;
grid-template-areas:
"left header header"
"left content ad"
"left content ad"
"footer footer footer"
}
.header{
grid-area:header;
position: sticky;
top:0;
background-color: red;
height: 100px;
text-decoration: none;
}
.left-sidebar{
grid-area:left;
top:0;
background-color: #22262A;
position: sticky;
height: 100vh;
padding:0px 0px 0px 0px;
font-size: 26px;
text-align:center;
}
.left-sidebar a{
padding: 15px 0px 15px 0px;
color:#000;
display: block;
text-decoration: none;
}
.nav a:hover{
background-color: #272b30;
}
.ad{
grid-area:ad;
background-color: navy;
}
.content{
grid-area:content;
padding: 5px 5px 5px 5px;
background-color: yellow;
height: 100vh;
}
.footer{
grid-area:footer;
background-color: grey;
height: 125px;
}
#logo{
margin-top: 50px;
margin-bottom: 50px;
}
.no-list{
display: block;
text-decoration: none;
}
#menu ul li{
background-color: yellow;
z-index: 500;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="assets/js/main.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="ad">advertisements</div>
<div class="left-sidebar">
<nav id="menu">
Sylent
<ul class="nav" id="test2">
<li id="getBierTest" onclick="alert()">try</li>
</ul>
</nav>
</div>
<div class="content">main content div</div>
<div class="footer">footer div</div>
</div>
</body>
</html>
I used this in another project and it worked. But this time I'm using CSS grid and suddenly it doesn't. Any ideas what might caused this?
Thanks in advance.
I've copied your code into a Codepen:
https://codepen.io/chrisboon27/pen/NYYNvJ?editors=1111
The only problem I can see is that two alerts fire. The first one is empty, but the second one works. This happens because as well as adding the event via jQuery:
$( document ).ready(function() {
$("#menu ul li").click(function(){
alert(this.id);
});
});
you are also calling alert inline in your html, but without any arguments, so you just get an empty alert:
<li id="getBierTest" onclick="alert()">try</li>
If you remove the inline alert it might work for you.
Your code is absolutely correct. But always make sure that you a load JS after the page is fully loaded. Use $(document).ready() function to do that.
$( document ).ready(function() {
$("#menu ul li").click(function(){
alert(this.id);
});
});
try this if you are trying to target specific li
$("#menu ul li").on('click', function(){
alert(this.id);
});
More optimized solution can be
$(document).on('click', '#menu ul li',function(){
alert(this.id);
});
Hope this will help you
Related
I'm trying to create a simple navigation bar that fades content in and out when clicked; however, my fadeOut() jQuery call simply doesn't cause my div element to fade while the alert is appearing. If I copy the fadeOut() line and paste it into the console, the element fades. Can anyone see why fadeOut() isn't working? Any help and tips are appreciated!
HTML
<!DOCTYPE html>
<head>
<link REL=stylesheet HREF="./styles/style.css" TYPE="text/css" MEDIA=screen>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="./js/main.js"></script>
</head>
<html>
<body>
<ul>
<li><a class=active id="home-btn" href="">Home</a></li>
<li><a id="about-btn" href="">About me</a></li>
<li>Resume</li>
<li><a id="contact-btn" href="">Contact</a></li>
</ul>
<div id="home" style="margin-left:20%;padding:1px 16px;height:1000px;">
<p>Hi, I'm Austin. Check out my site.</p>
</div>
</body>
</html>
JS
$(document).ready(function(){
$( "#about-btn" ).click(function() {
$( "#home" ).fadeOut("slow");
alert("clicked");
});
});
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
height: 100%
background-color: #f1f1f1;
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
li a {
text-align: center;
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
.active {
background-color: #6b8d2f;
color: black;
}
This is because you're using a click event on an a element. You need to prevent the default event. Change your JS to this:
$(document).ready(function(){
$( "#about-btn" ).click(function(event) {
event.preventDefault(); // the new line
$( "#home" ).fadeOut("slow");
});
});
You need to preventDefault in order to see the output
$(document).ready(function(){
$( "#about-btn" ).click(function(e) {
e.preventDefault();
$( "#home" ).fadeOut("slow");
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
height: 100%
background-color: #f1f1f1;
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
li a {
text-align: center;
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
.active {
background-color: #6b8d2f;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class=active id="home-btn" href="">Home</a></li>
<li><a id="about-btn" href="">About me</a></li>
<li>Resume</li>
<li><a id="contact-btn" href="">Contact</a></li>
</ul>
<div id="home" style="margin-left:20%;padding:1px 16px;height:1000px;">
<p>Hi, I'm Austin. Check out my site.</p>
</div>
hello try this below jquery.Use Prevent default to prevent the button's default action It will also works with alert! if you use before fadeout.If you use after the fadeout will work though but it wont't be much visilable
.. hope it helps
$(document).ready(function(){
$( "#about-btn" ).on('click',function(e) {
e.preventDefault();
alert("clicked");
$( "#home").fadeOut("slow");
});
});
i have some setup... where tool tip appears on hover... so i have to put tool tip and anchor tags in same div... tool tips pointer events set to none.. but i cant set pointer events of container div to none because then Hover event is not detected... but i want the underlying element below tool tip to be clickable... please help me out (if possible) without java script... i have set up the dummy scenario below... also including code pen link.... and yeah... positions are not changeable...in my case the underlying div is partially visible as shown in this code below.. and i want it to be clickable/ fire alert function... yeah if there is other way by changing composition of UN-ordered list.. and separating it from that container please let me know... but tool tip should be visible on hover on switch...
<html>
<head>
<style>
.menudescription{
float: left;
width: 150px;
height: 30px;
text-align: center;
background-color: #A1BA94;
margin: 20px 0px 0px 12px;
font-size: 20px;
line-height: 25px;
font-family: 'Kaushan Script', cursive;
color: white;
border: solid white 2px;
opacity: 0;
pointer-events: none;
}
ul li {
list-style-type:none
}
#menulist{
clear: both;
width: 230px;
height: 342px;
position: fixed;
right: 0;
top: 5%;
z-index: 1000;
}
.menulistitem{
clear: both;
height: 60px;
width: 60px;
float: right;
position: relative;
text-align: center;
vertical-align: middle;
background-color: #A1BA94;
margin: 2px;
padding-top: 4px;
}
.menulistitem:hover + .menudescription{
opacity: 1;
}
.underlyingdiv{
height:200px;
width:50px;
background-color:red;
position:relative;
float:right;
margin:20px 40px;
display:block;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menulist">
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li></ul>
</div>
<div class="underlyingdiv" onClick="myfunction()"></div>
<script>
function myfunction(){
alert("hello");
}
</script>
</body>
</html>
below is the code pen link...
http://codepen.io/theprash/pen/MKwWoN
Check this out
The red container is clickable and the tooltip is visible on hover.
Things I do:
Added position:relative to li.
Removed floats to divs inside lis added below css to .menudescription
position: absolute;
right: 100%;
top: 0;
This will help to position the tooltip relative to li
Override the width of #menulist to 60px and remove padding-left for the same. This will make sure that the red container is clickable.
Working Code pen
I'm very new to jquery/javascript and I'm trying to make an animated dropdown box when I click onto a button within my navbar.
My code works within jsfiddle http://jsfiddle.net/SQHQ2/2898/
But when I try to implement this within my website and refresh the page, the div disappears completely. I used inspect element and it appears to change to "display:none". I've tried changing the div to a button but still no avail. I just want the button to work! lol
Please can someone show me where I'm going wrong?
This is my html:
<div class="col-md-4 right">
<ul id="user-bar">
<li><div class="btn-burger" id="userlinksbox"><span class="fa fa-bars"></span></div></li>
<li>My Account</li>
<li>Logout</li>
</ul>
</div>
<!----- USER LINKS BOX ----->
<div class="user-links-box">
<h1>Test</h1>
</div>
My CSS:
.user-links-box {
height: 400px;
width: 285px;
padding: 15px;
top:-400px;
right:0px;
position: absolute;
background-color: #111;
color: #fff;
text-align: center;
z-index: 4;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
And finally, the js I'm using:
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
});
Try these changes :
HTML
<div class="user-links-box" style="display:none">
<h1>Test</h1>
</div>
CSS
.user-links-box {
height: 400px;
width: 285px;
padding: 15px;
top:40px; // CHANGED HERE
right:0px;
position: absolute;
background-color:#111;
color:#fff;
text-align: center;
z-index: 4;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#userlinksbox { display: inline-block!important; }
JS
$(document).ready(function(){
$("#userlinksbox").click(function(){
$('.user-links-box').slideToggle();
});
});
Is it really #userlinksbox?
Your fiddle tells me #user-links-box
try this
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').css({'display':'block'});
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
});
How about placing the .css() function in #Vilvan's answer outside the .toggle() function?
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
$('#userlinksbox').css({'display':'block'});
});
Moving a li element into a ul HTML list with jQuery UI Sortable does not work with jQuery Mobile (dragging works, but the ul does not accept the li element). If you comment the line where jQuery Mobile is imported, it will work. If you un-comment it again, it will stop working. But I need jQuery Mobile for my project. Furthermore, the shape of the element being dragged changes as you lift it (Firefox 29).
You can find a screenshot of the HTML file here.
Context: I'm working on a hybrid / web app using jQuery Mobile. It's an educational app and in one exercise type, the user has to drag some terms into the right list but placing the term in the list doesn't work because the list doesn't accept the new li tag. I simplified the scenario so that there is only one term to move into one list.
<html>
<head>
<title>jQueryUI Sortables</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- remove this line and the example will work (Firefox) -->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!-- but I need jQuery Mobile in my project! -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
$(function() {
$("#part_0").sortable({
connectWith: "#col_0"
});
$("#col_0").sortable({
connectWith: "#part_0"
});
});
</script>
<style>
li { margin: 0px; padding: 10px; float:left; border-radius: 5px; }
.smallList {list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.bigList {width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.part {margin: 0px; padding: 10px; border-radius: 5px; background-color: Orange; color: White;}
</style>
</head>
<body>
<ul id="part_0" class="smallList">
<li class="part">Drag this</li>
</ul><br /><br /><br /><br />
<ul id="col_0" class="bigList">
<li class="part">Into</li>
<li class="part">This</li>
<li class="part">List</li>
</ul>
</body>
</html>
After days of trying, I finally found a work-around. I don't know why, but with jQuery Mobile, you need to set the ul tag to float: left which is not necessary, if you use jQuery UI without jQuery Mobile. I don't think it's obvious, but adding this single line into the CSS makes the dragging work again:
<style>
/* BEGIN INSERTION: */
ul { float: left; }
/* END INSERTION */
li { margin: 0px; padding: 10px; float:left; border-radius: 5px; }
.smallList {list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.bigList {width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.part {margin: 0px; padding: 10px; border-radius: 5px; background-color: Orange; color: White;}
</style>
I could not find, for the life of me a jQuery less way to accomplish getting the value of the clicked li item and populating the textarea box id="result" with the clicked result.
How can this be done? This seems like rocket science to me.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width: 200px;
float: left;
font-family: Arial;
font-size: 10pt;
position:relative;
}
#one {
height: 200px;
border: 1px solid red;
display: none;
position:absolute;
background: #C0C0C0;
}
#two {
width: 8px;
height: 8px;
border: 1px solid blue;
float: left;
position:absolute;
}
#menu, ul {
list-style: none;
margin: 0;
cursor: default;
width:194px;
padding:6px;
}
#menu, ul, li {
padding: 2px;
}
#menu li:hover{
background: blue;
color: #fff;
}
#result {
border: 1px solid #000;
width: 206px;
}
</style>
<script type="text/javascript">
function showMenu(){
document.getElementById("one").style.display="block";
}
function hideMenu(){
document.getElementById("one").style.display="none";
}
</script>
</head>
<body>
<div id="container">
<div id="one" onclick="hideMenu()">
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div id="two"><img src="images/arrow_double.png" onclick="showMenu()"></div>
<br>
<textarea id="result"></textarea>
</body>
</html>
This is my suggestion, though it's not tested in Internet Explorer:
// pick a name that's useful to you:
function textToTextArea (e) {
/* most browsers pass the event object to the function,
IE does, or did, not; here we use the passed-event if it's
available, or the window.event if it's not there (implying IE):
*/
e = e || window.event;
// finding out the text property we can access to retrieve an element's text:
var text = 'textContent' in document ? 'textContent' : 'innerText';
/* getting the textarea by its 'id',
and setting its innerHTML to be equal to the text of the clicked 'li':
*/
document.getElementById('result').innerHTML = e.target[text];
}
var list = document.getElementById('menu');
list.onclick = textToTextArea;
JS Fiddle demo.
Incidentally, in jQuery the above could be abbreviated to:
$('li').click(function(){
$('#result').val($(this).text());
});
JS Fiddle demo.
It's not always the best solution, but it saves a lot of time and handles cross-browser issues very well (saving us from normalizing for the event object); and while you don't (and shouldn't) have to justify not-using jQuery, sometimes it's worth remembering that there are other, more useful, things we can all be doing rather than simply avoiding it for arbitrary (and in this case unspecified) reasons.
DEMO jsFiddle
Description
This is a pure JavaScript answer, it uses the this on each li item. This event binding can be done in the window.onload event with a for loop if you'd prefer. It works on all browsers, the layout looks wrong to me but as that isn't the question I didn't care.
Let me know if you need more assistance.
HTML
<div id="container">
<div id="one" onclick="hideMenu()">
<ul id="menu">
<li onclick="itemPicked(this)">Item 1</li>
<li onclick="itemPicked(this)">Item 2</li>
</ul>
</div>
</div>
<div id="two">
<img src="http://realestatecommunities.com/wp-content/uploads/2011/01/blue-arrow-down.jpg" height="20px" width="20px" onclick="showMenu()" />
</div>
<br/>
<textarea id="result"></textarea>
JS
function showMenu() {
document.getElementById("one").style.display = "block";
}
function hideMenu() {
document.getElementById("one").style.display = "none";
}
function itemPicked(el) {
document.getElementById("result").value = el.textContent;
}
CSS
#container {
width: 200px;
float: left;
font-family: Arial;
font-size: 10pt;
position:relative;
}
#one {
height: 200px;
border: 1px solid red;
display: none;
position:absolute;
background: #C0C0C0;
}
#two {
width: 8px;
height: 8px;
border: 1px solid blue;
float: left;
position:absolute;
}
#menu, ul {
list-style: none;
margin: 0;
cursor: default;
width:194px;
padding:6px;
}
#menu, ul, li {
padding: 2px;
}
#menu li:hover {
background: blue;
color: #fff;
}
#result {
border: 1px solid #000;
width: 206px;
}