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

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;

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>

How to make jPanelMenu NOT force everything to the right?

I am using jpanelmenu everything works fine but is there a way so it wont push all the content to the right but instead over lay it
an explain would be like the Youtube's menu which is shown when you press the button next to the Youtube logo. The menu over lays everything.
Question: is there a way so it wont push all the content to the right but instead over lay it?
Got all the code from here
my jpanelmenu:
jsfiddle
code:
<script type="text/javascript" src="http://jpanelmenu.com/jquery.jpanelmenu.js"></script>
<input class="menu-trigger" type="button" value="M">
<div class="wrap">
<ul id="menu">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<style>
.wrap{
display:none;
}
</style>
<script type="text/javascript">
var jPM = $.jPanelMenu();
jPM.on();
</script>
Set .wrap{ position:fixed; }, see my example.

How to call a javascript for particular a link?

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');
});

Truouble implementing two smooth scrolling effects

I am making a webpage that is continuous scrolling. However I am unable to make it scroll smoothly
My html code is:
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- Logo -->
<a class="brand" href="index1.html">MAPPLAS</a>
<ul class="nav">
<li>Inicio</li>
<li>Portfolio</li>
<li>Equipo</li>
<li>Blog</li>
<li>Contacto</li>
</ul>
</div><!-- end .container -->
</div><!-- end .navbar-inner -->
</nav> <!-- end .navbar -->
My function is as follows:
((function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500);
event.preventDefault();
});
});
})();
I think there is a problem because I have another function which creates a buttom back-to-top, that function is as follows:
((function() {
$('<i id="back-to-top"></i>').appendTo($('body'));
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('body,html').animate({scrollTop:0},600);
});
})();
The thing is that one is working smoothly ( the back to top ) but the other is not. I am not an expert on js and I have tried including completely separated js scripts but nothing solves the problem.
Anyone has an idea why is not working??Thank u!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style type="text/css">
.container{
width:300px;
margin:0 auto;
}
.section{
margin-top:60px;
}
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
HTML
JavaScript
jQuery
PHP
CSS
</div>
<div class="section">
<h1 id="html">HTML</h1>
<p>
put your text about html here
</p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p>
put your javascript details here.
</p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p>
Put your details about javascript here
</p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p>
put your details about php here
</p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p>put your details </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function(event) {
var id = $(this).attr("href");
var offset = 60;
var target = $(id).offset().top - offset;
$('html, body').animate({scrollTop:target}, 3000);
event.preventDefault();
});
});
</script>
</body>
</html>

JQuery setting CSS display: none when should be block

I'm looking to load a text file into a content div when the user selects a tab, the content is being inserted into the HTML file but the content div is being set to style="display: none;.
How can I get it to set the display to block whenever the relevant tab is selected and set all other contents divs to hide?
JQuery:
$(document).ready(function() {
function resetTabs() {
$("#content > div").hide();
$("#tabs a").attr("id", "");
}
var myUrl = window.location.href;
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
var myUrlTabName = myUrlTab.substring(0, 4);
(function () {
$("#content > div").hide();
$("#tabs li:first a").attr("id", "current");
$("#content > div:first").fadeIn();
$("#tabs a").on("click", function (e) {
e.preventDefault();
if ($(this).attr("id") == "current") {
return
}
else {
resetTabs();
$(this).attr("id", "current");
$($(this).attr('name')).fadeIn();
}
});
for (i = 1; i <= $("#tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
$("a[name='" + myUrlTab + "']").attr("id", "current");
$(myUrlTab).fadeIn();
}
}
})()
});
$(document).ready(function() {
$("#tabContent1").load("test.txt");
$('a[name="#tab2"]').click(function() {
$("#tabContent2").load("test.txt");
});
});
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/common.css" />
<script src="JS/common.js"></script>
<title></title>
</head>
<body>
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>Specifications</li>
<li>Gallery</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
</div>
</body>
</html>
I'm also getting the following error:
Uncaught TypeError: Object #tabContent2 has no method 'fadeIn'
i
st.event.dispatch
st.event.add.y.handle
How are tabContent and the tab connected? Try setting the name of the tabs to the actual content id's like this:
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>Specifications</li>
<li>Gallery</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
</div>
This way your function $($(this).attr('name')).fadeIn(); should work a little bit better.
try this for your fadeIn
var title = $('#current').attr('name');
$(title).fadeIn()
instead of
$($(this).attr('name')).fadeIn();
(oops check edit)
Got it working using a combination of #Jaco Koster JSFiddle and the following JQuery.
$(document).ready(function () {
$("#tabContent1").load("test.txt");
$('a[name="#tabContent1"]').click(function () {
$("#tab2").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent1").load("test.txt");
$("#tabContent1").show();
$("#tabContent2").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
});
$('a[name="#tabContent2"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent2").load("test2.txt");
$("#tabContent2").show();
$("#tabContent1").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
});
$('a[name="#tabContent3"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab2").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent3").load("test3.txt");
$("#tabContent3").show();
$("#tabContent1").hide();
$("#tabContent2").hide();
$("#tabContent4").hide();
});
$('a[name="#tabContent4"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab2").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent4").load("test4.txt");
$("#tabContent4").show();
$("#tabContent1").hide();
$("#tabContent2").hide();
$("#tabContent3").hide();
});
});

Categories

Resources