How to call a javascript for particular a link? - javascript

the JavaScript is applying for all A LINK but it only has to work when i click this particular a link(#tornado,_bar -> ul -> li -> a links) , how do i have to mention this a link in js.
This js is not working,
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type="text/css">
.active{
background-color:#a00;
color:#fff;
}
</style>
</head>
<body>
<div id="viran">
<div id="mob" class="hide_yellow2">
<div id="tornado_bar">
visit
<ul>
<li><a title="index.html" href="#786">Home</a></li>
<li><a title="#about" href="#787">About</a></li>
<li><a title="#minnummannai" href="#788" >Minnum Mannai</a></li>
<li><a title="#inassembly" href="#789">In Assembly</a></li>
</ul>
</div>
</div>
<ul>
<li><a title="#minnummannai" href="#788" >Minnum Mannai</a></li>
<li><a title="#inassembly" href="#789">In Assembly</a></li>
</ul>
</div>
<script>
$('a').click(function (e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
</script>
</body>
</html>

The basic CSS selector you are looking for is a simple space: #tornado_bar a:
$('#tornado_bar a').click(function (e) {
e.preventDefault();
$('#tornado_bar a').removeClass('active');
$(this).addClass('active');
});

Related

How to apply animations to items in a list

I am new to HTML, CSS and JS/jQuery. I'm creating a test website just to get familiar with jQuery and can't seem to figure an issue out.
I have a navigation bar at the top of the page which contains a logo on the left and links on the right. I've set up the below jQuery code to fade the links in and out upon mouse enter/leave:
$(document).ready(main);
function main() {
$('.marquee').marquee({
/* pauseOnHover: true */
})
$('.nameorlogo, .navitems').mouseenter(function() {
$('.nameorlogo').fadeTo('fast', 1);
$('.navitems').fadeTo('fast', 1);
})
$('.nameorlogo, .navitems').mouseleave(function() {
$('.nameorlogo').fadeTo('fast', 0.5);
$('.navitems').fadeTo('fast', 0.5);
})
};
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>JSTest1</title>
<link href="../css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='../js/jquery-3.2.0.js'></script>
<script type="text/javascript" src='../js/main.js'></script>
<script type="text/javascript" src='../js/marquee.js'></script>
</head>
<body>
<header class=topheader>
<nav class=navtop>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</nav>
</header>
<main>
<div class=marquee>This is a test for JavaScript</div>
</main>
</body>
</html>
The problem I have is when I hover over a link, either nav links or the logo, everything fades in and out, I want them all to be independant.
I know you can do this in CSS, this is purely to help me learn and understand.
Thanks for your help.
Jim
Use the the this keyword like $(this) to refer to the currently hovered item
$(this).fadeTo('fast', 1);
Also, notice that .navitems is the whole UL element, while you need to target the LI elements. Therefore
$('.nameorlogo, .navitems li').mouseenter(function()
Additionally here's other similar ways to achieve what you desire:
using .on() method
$('.nameorlogo, .navitems li').on({
mouseenter : function() {
$(this).stop().fadeTo(250, 1);
},
mouseleave : function() {
$(this).stop().fadeTo(250, 0.5);
},
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
Using .hover() method
$('.nameorlogo, .navitems li').hover(function(evt) {
var isMouEnt = evt.type === "mouseenter";
$(this).stop().fadeTo(250, isMouEnt ? 1 : 0.5);
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>

Jquery scrollTop animation not working .... "Cannot read property 'top' of undefind

My jquery animation scrollTop is not working. When i click <a> it only takes me to the anchor without any animation. Can someone suggest any solution for this? When i run the web page, the error "Uncaught TypeError: Cannot read property 'top' of undefined" was displayed.
Here my html code :
<div class="BackgroundImg"></div>
<head>
<title>Ryan Robert 1.0</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" >
$(function(){
$("a").click(function(){
if(this.hash){
var hash = this.hash.substr(1);
var $toElement = $("a[name="+hash+"]");
var toPosition = $toElement.position().top;
$("html,body").animate({
scrollTop : toPosition
},2000,"easeOutExpo");
return false;
}
});
});
</script>
body part:
<ul>
<li><div id="menus">
.home</div></li>
<li><a href="#secondBox"><div id="menus">
.project</div></a></li>
<li><a href="#thirdBox"><div id="menus">
.skills</div></a></li>
<li><a href="#forthBox"><div id="menus">
.contact</div></a></li>
</ul>
</div>
<div id="firstBox">
<div id="profileDescriptionBox">
<div id="profileDescription">
<h1>.Welcome!</h1>
The thing is that you don't use prevent default!
So you are actually getting anchored like the default in the browser.
For a smooth animate I would suggest you do something like this:
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var offset = $(this.hash).offset();
if (!offset) {
return;
}
$("html,body").animate({
scrollTop : offset.top
},2000);
});
});
.box {
min-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
<li>First box</li>
<li>Second box</li>
<li>Third box</li>
</ul>
<div id="first-box" class="box">
First box
</div>
<div id="second-box" class="box">
Second box
</div>
<div id="third-box" class="box">
Third box
</div>
<div class="box">
Just extra to fill out
</div>
Or jsfiddle.net
https://jsfiddle.net/4xuvjuq5/
Have you tried to use offset().top?
var toPosition = $toElement.offset().top;

Javascript/jQuery onclick not working

i made a test.html document to test a script. Somehow it is not working and i can't get why nothing is happening. The Script is in -tags and wrapped with -tag and the css also has it´s -tags. Why shouldn't it work? Here is the code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$('#menu li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
</script>
<style>
.current {
text-decoration: underline;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="about-link" class="current" href="#">ABOUT</a></li>
<li><a id="events-link" href="#">EVENTS</a></li>
<li><a id="reviews-link" href="#">REVIEWS</a></li>
<li><a id="contact-link" href="#">CONTACT</a></li>
</ul>
</div>
</body>
</html>
Because your code for binding event handler is executed before the elements is present in DOM, the event is not bound on the element.
To solve this problem, you can either
Wrap your code in ready() callback, so that your code will be executed when DOM is finished loading
Move your script to the end of <body>, so all the elements are present in DOM and you can bind the events on it
Code:
$(document).ready(function () {
$('#menu li a').on('click', function () {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
});
EDIT
You can also use load(not recommended) event callback to bind the event, but this will wait for all the resources to load completely.
If you want to use Vanilla Javascript, you can use DOMContentLoaded event on document.
you are executing the code before the DOM content is loaded. Place your code in a ready block.
You are executing the JavaScript before the <body> tag loads, which contains your <li> elements.
To solve this problem, you have three choices :
1.You can insert the JavaScript code you have written inside a $(document).ready() callback. (see http://www.w3schools.com/jquery/event_ready.asp for more information)
Code :
$(document).ready(function () {
$('#menu li a').on('click', function () {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
});
2.You can use the JavaScript's built in window.onload function. (see https://thechamplord.wordpress.com/2014/07/04/using-javascript-window-onload-event-properly/ for more information)
Code:
window.onload = function () {
$('#menu li a').on('click', function () {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
}
3.Place your <script> tag before </body> tag in your page.
Code:
<head>
<style>
.current {
text-decoration: underline;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="about-link" class="current" href="#">ABOUT</a></li>
<li><a id="events-link" href="#">EVENTS</a></li>
<li><a id="reviews-link" href="#">REVIEWS</a></li>
<li><a id="contact-link" href="#">CONTACT</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$('#menu li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
</script>
</body>
Note: Using $(document).ready() is a better option than using window.onload. (see window.onload vs $(document).ready() for more information)
Your code is fine. Just wrap it in DOM ready and you are good to go.
$(document).ready(function(){
$('#menu li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
})

Converting Drop Down Menu to Two-tier Navigation

Hopefully a simple change.. I currently have a drop-down style navigation menu; i would like to change to a two-tier navigation style setup. Similar to http://liptrot.org/journal/entries/two-tier-navigation-with-some-jquery/
Current HTML and jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<link type="text/css" href="css/main.css" rel="stylesheet">
<!-- New JavaScript functions to enable dropdown navigation -->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<!-- New JavaScript functions to enable refresh of page content DIV -->
<script type="text/javascript">
function getPageContent(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
$('#welcome').hide();
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
<style>
nav ul {
text-align:left;
}
nav ul li {
float:left;
display:inline;
border-right: 1px solid #083D72;
}
nav ul li:hover {
background:#2D8FF0;
}
nav ul li a {
display:block;
color:#444;
}
nav ul li ul {
position:absolute;
width:180px;
background:#09427C;
font-size: 12px;
}
nav ul li ul li {
width:180px;
}
nav ul li ul li a {
display:block;
color:#444;
}
nav ul li ul li:hover a {}
nav ul li ul.fallback {
display:none;
}
nav ul li:hover ul.fallback {
display:block;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="">
<hgroup>
<h1 class="logo"><img src="images/logo.png" width="163" height="59" alt="Tables and Chairs"></h1>
<h2 class="heading">Welcome to Tables and Chairs</h2>
</hgroup>
</tr>
</table>
<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<li class="data-sources">Date <span class="icon-caret-down"></span>
<li>
<a onClick="getPageContent('Information.html')">Information</a>
<ul class="fallback">
<li><a onClick="getPageContent('ovens.html')">Ovens</a></li>
<li><a onClick="getPageContent('fridges.html')">Fridges</a></li>
<li><a onClick="getPageContent('tables.html')">Tables</a></li>
<li><a onClick="getPageContent('costing.html')">Costing</a></li>
<li><a onClick="getPageContent('install.html')">Installation</a></li>
</ul>
</li>
<li>
<a onClick="getPageContent('legal.html')">Legal Info</a>
<ul class="fallback">
<li><a onClick="getPageContent('terms.html')">Terms & Conditions</a></li>
<li><a onClick="getPageContent('data.html')">Data Protection</a></li>
</ul>
</li>
<li>
<a onClick="getPageContent('contact.html')">Contact Us</a>
<ul class="fallback">
<li>Contact Details</li>
<li><a onClick="getPageContent('comments.html')">Your Comments</a></li>
<li><a onClick="getPageContent('addinfos.html')">Additional Info</a></li>
</ul>
</li>
<li>
<a onClick="getPageContent('cookies.html')">Cookies</a>
</li>
</li>
</ul>
</nav>
<!-- MENU END -->
<!-- SECOND TIER START-->
<div class="sub-menu">
<div>
<!-- SECOND TIER -->
<div id="PageContent">
</div>
<footer class="site-footer" role="contentinfo">
<div class="wrap">
<small class="fr">© 2013 T&C All rights reserved</small>
</div>
</footer> <!-- END footer.site-footer -->
</body>
</html>
Thanks

jQuery event parent trigger effect for child [duplicate]

This question already has an answer here:
Is there a way to combine $(this) with :nth-child?
(1 answer)
Closed 8 years ago.
My html code is as follows: (info on bottom)
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link type='text/css' rel='stylesheet' href='style/style1.css'></link>
<script type='text/javascript' src='scripts/jquery-2.0.0.min.js'></script>
<script type='text/javascript' src='scripts/script1.js'></script>
</head>
<body>
<div id="title">
<h1>Welcome to My Site</h1>
</div>
<div id='menu_Bar'>
<div id='home' class='selector'>
<div class='back'>
<ul class='empty'>
<li>Home</li>
<div style='display: none'>
<li><a href=''>option 1</a></li>
<li><a href=''>option 2</a></li>
<li><a href=''>option 3</a></li>
<li><a href=''>option 4</a></li>
<li><a href=''>option 5</a></li>
</div>
</ul>
</div>
</div>
</div>
</body>
</html>
My jQuery is:
$(document).ready(function() {
$('.selector').mouseenter(function (){
$(this.'div ul div').slideToggle('slow');
});
Now I know the last part won't work (because I would be asking if it did). But I'm sure you see what I'm trying to do. I'm trying to make it so when the selector is hovered over it will open its set of links. I almost was going to use .options for the second part, but realized it would change (or effect) all in same class, which won't allow for similar buttons to be placed on the sides. So how would someone use the parent to affect the child of the parent?
The css:
div {
border: 1px solid black;
}
.empty {
list-style: none;
}
.options {
display: none;
background-color: lightblue;
}
.selector {
background-color: transparent;
}
It shoud be
$(document).ready(function() {
$('.selector').mouseenter(function (){
$(this).find('> div > ul > div').slideToggle('slow');
});
});
Demo: Fiddle

Categories

Resources