How to apply animations to items in a list - javascript

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>

Related

Change Navbar Color on scroll

My navbar cannot change color on scroll, i am already using this script. please help me
<script>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$(".navbar-fixed-top").css("background-color", "#f8f8f8");
} else {
$(".navbar-fixed-top").css("background-color", "transparent");
}
});
});
</script>
i am using bootstrap
Hope this works, you have to use scrollTop() to get vertical scrollbar position and accordingly made changes in your selected div i.e. over-here is .navbar.
$(document).ready(function(){
$(window).on("scroll",function(){
var wn = $(window).scrollTop();
if(wn > 120){
$(".navbar").css("background","rgba(255,0,0,1)");
}
else{
$(".navbar").css("background","rgba(1,1,1,1)");
}
});
});
body{
height:1600px;
}
.navbar{
background:rgba(1,1,1,1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
I am just curious on why arent you using affix that already comes with bootstrap?
Here is the link :
http://www.w3schools.com/Bootstrap/bootstrap_affix.asp
in your case change add this line for your nav tag
<nav class="navbar navbar-fixed-top"data-spy="affix" data-offset-top="(scroll value)" >
and css
.affix.navbar{
background-color: color-you-prefer;
}
Use the css class for color:
.anycolor {
background-color: #f8f8f8";
}
and do that with this code :
if ($(window).scrollTop() > 50){
$('.navigation').addClass( "anycolor");
}
else {
$('.navigation').removeClass("anycolor");
}

Tab panels swipe-able in mobile view?

I have a tabbed menu and I want the tabbed menu (the ul class="tabs") to be swipe-able in mobile view.
EDIT: I found a snippet on using Slick JS, I never knew about this JS but I want it to apply this codepen on my current tabbed menu.
How to combine with my current tabbed menu properly? I tried to combine it but the current UI design of my tabbed menu getting messed up.
Here's my codepen of tabbed menu
<section class="wrapper">
<ul class="tabs">
<li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 3</span></li>
</ul>
<ul class="tab__content">
<li class="active">
<div id="tab1" class="content__wrapper">
</div>
</li>
If all you want to do is swipe horizontally on a menu, to reveal any other nav items not visible in the viewport, you can do that with css.
#media screen and (max-width: 768px) {
.tabs {
overflow-x: scroll;
white-space: nowrap;
}
}
Use jquery.mobile. This is ideal for your purpose. I wrote a sample of how it works. What you will have to do next is to bind the swipe event with your click tabs. I suggest you use next() for the right swipe and prev() for left swipe to target the tabs.
See this sample:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("swipeleft",function(){
alert('swiped left');
});
$("p").on("swiperight",function(){
alert('swiped right');
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
</div>
<div data-role="main" class="ui-content">
<p style="background:red; height:250px; font-size:50px">If you swipe me in the left or right, an event will be triggered.</p>
</div>
</div>
</body>
</html>

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;

Highlight the navigation tab on current page with CSS?

I'm new to html/css stuff so please bear with me.
I have specific images that I want to use as a navigation menu.
My html,css basically look something like this:
HTML
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
CSS
a#main:
{
background-image:url(main-normal.png);
margin-right:0px;
}
a#main:hover:
{
background-image:url(main-highlight.png);
}
a#tips:
{
background-image:url(tips-normal.png);
margin-right:0px;
}
a#tips:hover:
{
background-image:url(tips-highlight.png);
}
a#news:
{
background-image:url(news-normal.png);
margin-right:0px;
}
a#news:hover:
{
background-image:url(news-highlight.png);
}
#main,#news,#tips
{
background-repeat:no-repeat;
display:block;
text-decoration:none;
text-indent:-30000px;
}
When I hover over the image it does get change to highlighted image but when I click on the link the tab goes back to normal image. I want it to stay highlighted when the user is currently on that page. Can anyone help me with this?
I tried "visited" but it doesn't seem to work and everything I found on Google search was a little bit different than what I'm trying to do.
Thanks in advance.
To answer the specific question, when a user clicks a link, they are taken to a new page. The links have no concept in and of themselves as to what page they exist on.
So you have a few options. The common solution is to use server-side code to send HTML with some indicator that that is the current link. You could add a class like 'current' for example. Furthermore, if that is the page you are on, there's no need for the link either, so one should not have that text linked.
But if you don't have access to the server, then you need to add this manually. You could either create a new style for .current and then on that page, apply that class to your active link.
However, perhaps you are including this menu as an include...meaning the code is the same for every single page. In that case, you will want to target the active link with your CSS. So on each page you'd have a custom bit of CSS on the page.
On the tips page, for example, you'd do this:
#tips {put your style here for active links}
To get a bit fancier/more automated, you could write some javascript that would:
parse the URL
figure out the file name of the page
match that filename up to something in your list of links
apply the class for you dynamically
PS. there is no real need to use the syntax of a#tips in your CSS. The reason is that if you are using an id, there can only be one id on the page, so the a is somewhat redundant.
There are many ways to do this. With PHP, JavaScript or pure CSS with some extra markup.
Since you said you are new to HTML/CSS I think the CSS way would be best for you?
So you have 3 pages with exact the same menu code? Just put this on each site:
For your main page:
<div id="navigation">
<a id="main" class="active" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
Your tips page:
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" class="active" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
Your news page:
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" class="active" href="domain.com/news">news</a>
</div>
Add CSS:
#main.active {background-image:url(main-highlight.png);}
#tips.active {background-image:url(tips-highlight.png);}
#news.active {background-image:url(news-highlight.png);}
This example works fine for me...
Home Page
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
</head>
<body id="home">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
</ul>
</nav>
</body>
Second Page
<html>
<head>
<title>Second</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
<body id="second">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
</ul>
</nav>
</body>
A way to highlight the navigation tab on the current page with CSS is to create an active class to append to the class of the tag you are currently on. Your active css class would detail how you want it to look when it's considered active. Then, depending on what tab you are on, you insert the active as class for that tab as seen below.
`
<html>
<head>
<title>Highlight Nav Tab of Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
.navbar {
background-color: purple;
font-size: 12px !important;
line-height: 1.42857143 !important;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: purple !important;
background-color: #fff !important;
}
</style>
<body id="about.html" data-spy="scroll" data-target=".navbar" data-offset="60">
<!--navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li >Home</li>
<li class = "active">About</li>
<li >More</li>
<li >Contact Us</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
`
Image shows what nav highlight looks like

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