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>
Related
I try to load different pages using an ajax call. But the pages are not appearing on the main page.
This is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<script src="Scripts/jquery.min.js"></script>
<link href="Content/site.css" rel="stylesheet">
<style>
#newslinks li {
display: inline-block;
margin-right: 20px;
}
#newslinks li a {
padding: 5px 10px;
background-color: white;
color: black !important;
text-decoration: none;
}
#newslinks li a:hover {
background-color: rgb(110,138,195);
color: white !important;
}
#headlines #newsItem {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>
<script>
$(document).ready(function() {
$('#newslinks a').click(function () {
var url = $(this).attr('href');
$('#healines').load(url + ' #newsItem');
//evt.pr.preventDefault();
return false;
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>News Headlines</h1>
<ul id="newslinks">
<li>Today’s News</li>
<li>Yesterday’s News</li>
<li>Last Week’s News</li>
</ul>
<div id="headlines"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
So you see three links. But if you click on one of the links nothing happens. I am using IIS. And yes it is enabled.
Thank you
Misspelled headlines in $('#healines').load(url + ' #newsItem');.
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");
});
});
In this program the sub menu item are does not hide when the mouse move to other items,I want to hide the sub menu items when mouse move from their area .can you help me?.I really want a drop-down menu on click.
#main li{
list-style-type: none;
display: none;
text-decoration: none;
}
#main{
cursor: pointer;
}
#pappaya {
background-color:#339933;
text-decoration: none;
}
#pappayas {
background-color:#339933;
text-decoration: none;
}
.orang{
text-decoration: none;
}
#pappaya li{
text-decoration: none;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mango.css">
<script>
function mangoGrape(selector){
document.querySelectorAll(selector)
.forEach(function(node){
node.style.display="block";
})
}
</script>
</head>
<body>
</body>
<ul id="main" onclick="mangoGrape('.apple')">main1
<div id="pappaya">
<li class="apple"> sub1</li>
<li class="apple">sub2</li>
<li class="apple">sub3</li>
</div>
</ul>
<ul id="main" onclick="mangoGrape('.orang')">main2
<div id="pappayas">
<li class="orang">sub21</li>
<li class="orang">sub22</li>
<li class="orang">sub23</li>
</div>
</ul>
</html>
In this program the sub menu item are does not hide when the mouse move to other items,I want to hide the sub menu items when mouse move from their area .one another problem associated with this code is the text decoration property is not working properly.
You just forget hiding another item:
/*Do not show li when page showed/ li { display: none; }*/
#main li{
list-style-type: none;
display: none;
text-decoration: none;
}
#main{
cursor: pointer;
}
#pappaya {
background-color:#339933;
text-decoration: none;
}
#pappayas {
background-color:#339933;
text-decoration: none;
}
.orang{
text-decoration: none;
}
#pappaya li{
text-decoration: none;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mango.css">
<script>
function mangoGrape(selector){
// hide all lis first
document.querySelectorAll('li')
.forEach(function(node){
node.style.display="none";
})
// then show what you want
document.querySelectorAll(selector)
.forEach(function(node){
node.style.display="block";
})
}
</script>
</head>
<body>
<ul id="main" onclick="mangoGrape('.apple')">main1
<div id="pappaya">
<li class="apple"> sub1</li>
<li class="apple">sub2</li>
<li class="apple">sub3</li>
</div>
</ul>
<ul id="main" onclick="mangoGrape('.orang')">main2
<div id="pappayas">
<li class="orang">sub21</li>
<li class="orang">sub22</li>
<li class="orang">sub23</li>
</div>
</ul>
</body>
</html>
The onmouseout event occurs when the mouse pointer is moved out of an element, or out of one of its children.
<html>
<head>
<link rel="stylesheet" type="text/css" href="mango.css">
<script>
function mangoGrape(selector){
document.querySelectorAll(selector)
.forEach(function(node){
node.style.display="block";
})
}
function hide(selector){
document.querySelectorAll(selector)
.forEach(function(node){
node.style.display="none";
})
}
</script>
</head>
<body>
</body>
<ul id="main" onmouseout="hide('#pappaya')" onclick="mangoGrape('.apple')">main1
<div id="pappaya">
<li class="apple"> sub1</li>
<li class="apple">sub2</li>
<li class="apple">sub3</li>
</div>
</ul>
<ul id="main" onmouseout="hide('#pappayas')" onclick="mangoGrape('.orang')">main2
<div id="pappayas">
<li class="orang">sub21</li>
<li class="orang">sub22</li>
<li class="orang">sub23</li>
</div>
</ul>
</html>
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'));
});
this is a part of a code in which i'm trying to change the menu item color when hover on a different div. I can modify the background color but not the actual text color.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.navigation li a { color: grey;}
</style>
</head>
<body>
<ul class="navigation" id="nav">
<li id="a" onmouseover="chbg('red')" onmouseout="chbg('black')">ABOUT </li>
<li id="b" onmouseover="chbg1('red')" onmouseout="chbg1('white')">CONTENT</li>
</ul>
<script type="text/javascript">
function chbg(color) {
document.getElementById('b').style.Color = color;
}
function chbg1(color) {
document.getElementById('a').style.backgroundColor = color;
}
</script>
</body>
</html>`
Need help in solving this issue.
Thanks
You are applying color to the li but the a is already getting color: gray; from the CSS.
As mentioned in the comment you would be much better off handling stuff like this with CSS and not JavaScript.
a {
color: gray;
}
a:hover,
a:focus {
color: red;
}
li:hover {
background-color: gray;
}
EDIT: It also seems like you misspelled gray. In CSS the american spelling is used. This is part of why I use hex-values in stead.
Use CSS its much easier
.navigation #a {
background:black;
}
.navigation #b {
background:white;
}
.navigation li:hover {
background:black;
}
Demo
#a {
background-color: black;
}
#b {
background-color: white;
}
#b:hover {
background-color: red;
}
#a:hover > a {
color: green;
}
#b:hover > a {
color: yellow;
}
HTML
<ul class="navigation" id="nav">
<li id="a">ABOUT
</li>
<li id="b">CONTENT
</li>
</ul>