Issue Detected
A 'TypeError' has been thrown: ".goal_test".click is not defined as a function
Feel free to collaborate on the code by clicking this link:
Please note that my modified code is enclosed within asterisk symbols.
Issue Detected
A 'TypeError' has been thrown: ".goal_test".click is not defined as a function
Feel free to collaborate on the code by clicking this link:
Please note that my modified code is enclosed within asterisk symbols.
I have successfully made some modifications to your code, and it appears that everything is functioning as intended. Does this align with your desired outcome?
var app = angular.module('app', []);
app.controller('HomeController', function($scope) {
$scope.goal_title = "Investing in real estate";
$scope.dates = [
2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2026
];
$scope.goal_real_estate = false;
for (x in $scope.dates) {
if ($scope.dates[x] == 2016) {
$scope.goal_real_estate_2016 = true;
} else if ($scope.dates[x] == 2021) {
$scope.goal_retirement_2021 = true;
} else if ($scope.dates[x] == 2018) {
$scope.goal_involve_2018 = true;
} else if ($scope.dates[x] == 2026) {
$scope.goal_test_2026 = true;
}
}
});
$(document).ready(function(e) {
var viewport = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
console.log(viewport);
$('a').click(function(e) {
e.preventDefault()
})
$('.goal_wrap').click(function() {
var diff = $(this).parent()[0].offsetLeft;
$('.date .goal_wrap').removeClass('active bounce');
$(this).addClass('active bounce');
console.log(diff);
console.log((viewport - diff));
TweenLite.to($('.date').parent(), 1, {
x: ((viewport * 0.5) - diff),
onComplete: function() {
console.log('success');
/*TweenLite.to($('.timeline'), 1, {top:"50%"});*/
}
});
});
$('.goal_real_estate').click(function() {
console.log('goal click');
$('body').fadeTo('ease', 0.3, function() {
$(this).css('background-image', 'url(http://extrawall.net/images/wallpapers/378_1920x1080_abstract_city.jpg)');
}).fadeTo('slow', 1);
});
$('.goal_retirement').click(function() {
console.log('goal click');
$('body').fadeTo('ease', 0.3, function() {
$(this).css('background-image', 'url(https://wallpaperscraft.com/image/tropics_sea_palm_trees_vacation_84858_2412x1810.jpg)');
}).fadeTo('slow', 1);
});
$('.goal_involve').click(function() {
console.log('goal click');
$('body').fadeTo('ease', 0.3, function() {
$(this).css('background-image', 'url(http://www.churchmilitant.com/images/uploads/2015-06-12-niles-x.jpg)');
}).fadeTo('slow', 1);
});
// test
$('.goal_test').click(function() {
console.log('goal click');
$('body').fadeTo('ease', 0.3, function() {
$(this).css('background-image', 'url(http://extrawall.net/images/wallpapers/378_1920x1080_abstract_city.jpg))');
}).fadeTo('slow', 1);
});
// end of test
});body {
overflow: hidden;
padding: 0;
margin: 0;
transition: all 1s ease;
}
body {
background: url('http://extrawall.net/images/wallpapers/378_1920x1080_abstract_city.jpg') no-repeat fixed center;
background-size: cover;
}
body::before {
content: '';
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
a {
color: #fff;
text-decoration: none;
}
.timeline {
position: absolute;
bottom: 0;
top: 100;
width: 3000px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
border-top: 1px solid #fff;
padding-left: 80px;
}
.date {
color: #fff;
float: left;
width: 150px;
height: 50px;
/*padding-left: 80px;*/
}
.date::before {
content: '';
position: absolute;
height: 100vh;
width: 1px;
background: rgba(255, 255, 255, 0.7);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
/*Safari 5.1-6*/
background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
/*Opera 11.1-12*/
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
/*Fx 3.6-15*/
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 1));
/*Standard*/
margin-top: -100vh;
}
p.focus {
position: absolute;
top: 0;
margin-left: -14px;
padding-top: 10px;
}
p.focus::before {
content: '';
width: 20px;
height: 20px;
border: 1px solid #fff;
border-radius: 50%;
position: absolute;
top: -10px;
left: 3.5px;
}
p.focus::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
top: -5px;
left: 9px;
}
.goal_wrap {
position: absolute;
width: 50px;
height: 50px;
border: 2px solid #fff;
text-align: center;
border-radius: 50%;
line-height: 50px;
top: -100px;
margin-left: -24px;
font-size: 24px;
transition: all 0.5s ease;
}
.goal_wrap:hover {
width: 60px;
height: 60px;
line-height: 60px;
margin-left: -30px;
font-size: 30px;
cursor: pointer;
}
.goal_wrap.active {
top: -160px;
width: 80px;
height: 80px;
line-height: 80px;
margin-left: -40px;
font-size: 40px;
cursor: pointer;
}
.bounce {
animation: bounce 1s .5s;
transform: scale(0.85);
}
@keyframes bounce {
0% {
transform: scale(0.85);
opacity: 1;
}
50% {
transform: scale(0.95);
opacity: .7;
}
60% {
transform: scale(0.6);
opacity: 1;
}
80% {
transform: scale(1.6)
}
100% {
transform: scale(1.1)
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timeline Sequence V1</title;
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="structure" ng-app="app" ng-controller="HomeController">
<div class="preloaderimg">
<img src="https://wallpaperscraft.com/image/tropics_sea_palm_trees_vacation_84858_2412x1810.jpg" alt="" style="display: none;" />
<img src="http://extrawall.net/images/wallpapers/378_1920x1080_abstract_city.jpg" alt="" style="display: none;" />
<img src="http://www.churchmilitant.com/images/uploads/2015-06-12-niles-x.jpg" alt="" style="display: none;" />
</div>
<div class="timeline"></div>
<div class="timeline">
<div ng-repeat="date in dates track by $index" class="date date-{{$index}}">
<div class="goal_wrap goal_real_estate" ng-show="goal_real_estate_{{date}}">
<i class="fa fa-building" aria-hidden="true"></i>
</div>
<div class="goal_wrap goal_involve" ng-show="goal_involve_{{date}}">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
</div>
<div class="goal_wrap goal_retirement" ng-show="goal_retirement_{{date}}">
<i class="fa fa-leaf" aria-hidden="true"></i>
</div>
***********************************
<!-- test -->
<div class="goal_wrap goal_test" ng-show="goal_test_{{date}}">
<i class="fab fa-accusoft" aria-hidden="true"></i>
</div>
************************************
<!--end test -->
<p class="focus">
<a href="#">{{date}}</a>
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>{{goal_title}}</h1>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>Any help or advice you can offer would be greatly appreciated. I am still fairly new to using react. I recently took on a project for a client that was already in progress, and everything has been going smoothly up until now. I've come across a stumb ...
I have a question about using AngularJS. I have multiple sections and only want to display one at a time using <section ng-show="section6_us"> </section> and <section ng-show="section7_us"> </section>. My scope has many variables. ...
Recently, I created a calculator to convert kilograms to pounds and encountered an issue when trying to add a border to a p element. The problem was that the border extended all the way to the right side of the page. Here is the corresponding HTML code: &l ...
Struggling to create a responsive site that looks good on high dpi mobile devices? You're not alone. No matter how you adjust your h2 and p text sizes, they seem to be the same size when viewed in portrait mode on certain devices like the Galaxy S4. E ...
I've come across various methods for creating a sticky footer, such as Ryan Fait's approach found here, another one here, and also here. But why go through the trouble of using those techniques when simply applying #footer{position:fixed; bottom ...
Hey there! I'm in the process of adding a search feature to my Jekyll site, and I've opted to use Simple-Jekyll-Search, which you can check out here: Link. Take a peek at what's inside my search.html: <input type="text" id="my-search-in ...
I've noticed that the scroll bars are still visible even when I maximize the browser window. I don't see any reason for them to be there. There doesn't seem to be a height issue, so the vertical scrollbars shouldn't be appearing, right ...
I have a homepage with various criteria that users can select such as budget maximum and minimum. When they click on the "search" button, I want it to lead them to a list of links on another page that corresponds to their search using jQuery Mobile and ...
Currently, I am encountering an issue with the dropdown component while using Material UI v1.0 beta.26. In this updated version, you are required to utilize the Select component along with MenuItem. Although my dropdown is successfully populated upon rend ...
I am currently working on a dynamic drag and drop form builder, and I'm struggling to figure out how to log the data from the form. Below is the component.html file where I am implementing the drag and drop form: <div> <form-builder ...
signup.html <div ng-controller="UniqueCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="inputBasicDemo"> <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding=""> <div> <md- ...
I am trying to retrieve the value of my drop-down within the getData function. Although the data displays correctly in the run function, I am unsure of how to pass that data down to the getData() function. <select class="form-co ...
I've been working on a puzzle presented in the link provided below: HTML Structure Challenge This mind-teaser consists of three questions: Modify the HTML code of the website to enhance its structure as follows: Replace the generic outer div eleme ...
I successfully created a website using Django and React JS. In my project, I am working on passing an array named pict from the frontend JavaScript to the backend Python in Django. let pict = []; pictureEl.addEventListener(`click`, function () { console ...
I have implemented flex from here Whenever the content text increases in size, the div and the price do not remain aligned. See image here. My goal is to achieve the following: Make sure the div maintains the same size whether the content text is long ...
I attempted to integrate the SoundCloud iframe into my Angular 4 component, but encountered the following error message: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0. Here is the iframe code ...
Trying to capture the 404 page not found error in an express router. Using a simple example : const express = require('express'); const app = express(); const router = express.Router(); // ROUTER MID BEFORE router.use((req, res, next) => { ...
Clicking the Close button will submit the form to Lcar.php. The goal is to hide the CSS and remain on the current page after clicking the button. The issue of the form being submitted to Lcar.php when the Close button is clicked arises despite the fact t ...
Apologies if this question is not the most suitable for this platform. I recently set up Pure-FTPd service on a CentOS server. To check current connections, I use the command pure-ftpwho, which gives me the following output: +------+---------+-------+---- ...
I was attempting to create an application showcasing the use of AJAX. Being new to AJAX, I couldn't pinpoint the error in my code. The XMLHttpRequest object is being created, but nothing else seems to be working. The ready state doesn't change to ...