okay so in php tags i have this:
<?php
echo "<ul>";
echo "<li id='lis'> WELCOME ".$_SESSION['username']."!<ul><li><a href='#'>link1</a></li></ul></li>";
echo "<ul>";
?>
i am trying to make it so it will show the link1 on hover. so i am using jquery and my code for that is:
</style>
<script type="text/javascript"src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').fadeToggle(400);
});
});
i have no idea what to do to fix this, please help! if you have any suggestions on how to fix the code please leave them down below i would really appreciate it.
here is the whole thing:
<html>
<head>
<title></title>
<style type="text/css">
ul{
margin:0;
padding:0;
list-style: none;
float: right;
}
ul li{
float: left;
width: 150px;
height: 30px;
line-height: 30px;
}
ul li a{
background-color: cyan;
color: white;
text-decoration: none;
}
ul li li {
color:#fff;
display: none;
}
ul li{
text-decoration: none;
color: #fff;
}
.top{
position: static;
right: 0;
top: 0px;
}
</style>
<script type="text/javascript"src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').fadeToggle(400);
});
});
</script>
</head>
<body>
<?php
echo "<ul>";
echo "<li id='lis'> WELCOME ".$_SESSION['username']."!<ul><li><a href='#'>hello</a></li></ul></li>";
echo "<ul>";
?>
</body>
</html>
that is named welcome.php
i have another file named index.php where i include that into my php.
hide your li containing the link, then toggle it .
$(document).ready(function() {
$('#lis').hover(function() {
$(this).find('ul>li').fadeToggle(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
<li id='lis'>WELCOME ".$_SESSION['username']."!
<ul>
<li style="display:none;"><a href='#'>link1</a>
</li>
</ul>
</li>
</ul>
Add a class that hides the link on render.
Then target the a and toggle that.
In your case it would not work if you hide the li as there is no element to hover if you hide the li
JS
$('li').hover(function() {
$(this).find('ul > li > a').fadeToggle(400);
});
HTML
link1
CSS
.hide {
display: none;
}
jsFiddle
Because your $('li') select ALL <li>s in the document, include the <li><a href='#'>link1</a></li>, try to use #id selector instead:
$(document).ready(function(){
$('#lis').hover(function(){
$(this).find('ul>li').fadeToggle(400);
});
});
Related
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
i have a navigational bar at the side of my website but the problem is that when i change the tab in the navigational bar the active class does not change here is my code
<!DOCTYPE html>
<html>
<body style="background-color:yellow">
<font color="red"><div align="center"><h1>About</h1></div></font>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #875050;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="prodject.htm">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
and here is my java script code
$(".nav li").click(function() {
if ($(".nav li").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
is there any way to fix this
You don't have nav class in HTML
<ul class="nav">
<li><a class="active" href="prodject.htm">Home</a></li>
</ul>
You don't need if, directly use selector with the method.
$(".nav li").click(function() {
$(".nav li.active").removeClass("active");
$(this).addClass("active");
});
OR,
$(".nav li").click(function() {
$(this).siblings(".active").removeClass("active");
$(this).addClass("active");
});
You don't have a nav class in your dom tree. Add to ul element class attribute with nav value:
<ul class="nav"></ul>
make sure you also have the class attribute for those a tags but also maybe you target the a tag and not nav li
$("a").click(function() {
$(this).siblings("active").removeClass("active");
$(this).addClass("active");
});
You do not have added nav class to ul tag use this code <ul class="nav"></ul> and make changes in jquery use below jquery code.
$(".nav li").click(function() {
$(".nav li.active").removeClass("active");
$(this).addClass("active");
});
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");
});
});
It seems my apparent attempts at mastering the jQuery language have failed me.
I am attempting to try and get the DIV id of the UL LI select box but my alert box comes back "undefined", thus I am looking for expert help.
Here is the markup and code in question:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background: url(arrow.png) no-repeat scroll right top;
border: 1px solid rgb(170,170,170);
width: 180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
</style>
<script type="text/javascript">
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
//alert($(this).closest('div.select').attr("id"))
//alert($(this).closest('[id]').attr('id'))
//alert($(this).closest('div.select').attr('id'))
});
}
</script>
</head>
<body>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
</body>
</html>
.text($(this).html() this line messes with the DOM, and cause problems with traversal. I advice you uses other ways to accomplish the text change. Like
$(this).closest("div").contents().first().replaceWith($(this).text());
$(".select ul li").click(function(e) {
$(this).closest("div").contents().first().replaceWith($(this).text());
var id = $(this).closest('[id]').attr('id');
alert(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
//alert($(this).closest('div.select').attr("id"))
//alert($(this).closest('[id]').attr('id'))
//alert($(this).closest('div.select').attr('id'))
});
Ok, what I'm 99% sure is happening is due to you detaching the element. Your setting the text() of the div.select, which is the parent of your select. That is effectively removing the li element you clicked as a child. So later when you try to do a closest it will not return anything as it's no longer a child. You will most likely need to store that information before you change the text so you have the value without having to look it up afterwards.
$(".select ul li").click(function(e) {
var $parent = $(this).closest('div.select');
$parent.text($(this).html());
alert($parent.attr('id'));
});
I have been searching for an answer for this question but still, my problem exists. I tried all the answers from here (StackOverflow) and from other websites but it still didn't solved my problem.
Additional Information:
There's no error on DevTools.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Test</title>
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<script src="sample.js"></script>
</body>
</html>
CSS:
/*Nav Styles*/
.nav li {
text-transform: uppercase;
list-style-type: none;
display: inline;
}
.nav a {
text-decoration: none;
color: black;
}
/*Active Menu*/
.activeMenu {
color: red;
}
JS:
var x = function(){
$('.nav li').click(function(){
//alert($(this).text()); <-- It's working
$(this).addClass('activeMenu');
return false;
});
};
$(document).ready(x);
Thanks a lot!
The issue is because your CSS rule for .activeMenu is not specific enough to override the colour set on the a element. You need to make the rule more specific:
.activeMenu a {
color: red;
}
Or set !important on it. The former is better practice.
Example fiddle
You must change your css too:
.activeMenu a {
color: red;
}
var x = function(){
$('.nav li').click(function(){
//alert($(this).text()); <-- It's working
$(this).addClass('activeMenu');
return false;
});
};
$(document).ready(function() {
x();
});
.nav li {
text-transform: uppercase;
list-style-type: none;
display: inline;
}
.nav a {
text-decoration: none;
color: black;
}
/*Active Menu*/
.activeMenu a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<div class="container">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>