Pie Chart using chart.js not showing up but bar charts are? - javascript

Currently working on my portfolio and I am including some graphs using chart.js. I am able to get two bar charts up and working on my cloud storage case study, but cannot get the pie chart to work on my BusyBus case study. Here is the chart js code for the pie chart and my BusyBus case study code. Ideally the pie chart would show up where I commented <!---BusyBus Pie Chart Here---> Thank you in advance!
var pieChart = new Chart(buspie, {
type: 'pie',
data: {
labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
datasets: [{
backgroundColor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6",
"#f1c40f",
"#e74c3c",
"#34495e"
],
data: [12, 19, 3, 17, 28, 24, 7]
}]
}
});
-----------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Portfolio | Lily Wu</title>
</head>
<body>
<div class="container">
<header>
<img class="logo" src="images/logo.svg" alt="logo">
<nav>
<ul class="nav__links">
<li>Work</li>
<li>About</li>
<li>Resume</li>
</ul>
</nav>
<a class="cta" href="contact.html"><button>Contact</button></a>
<a onclick="openNav()" class="menu" href="#"><button>Menu</button></a>
</header>
<!---Mobile Nav--->
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Work
About
Resume
Contact
</div>
</div>
<script type ="text/javascript" src="mobile.js"></script>
<!---BusyBus Case Study Info--->
<section class="canopy-title">
<h1>BusyBus</h1>
</section>
<section class="canopy-description">
<p id="canopy-header-p">BusyBus is a public transit application that helps bus riders determine what time their bus is arriving to plan trips efficiently.</p>
</section>
<!---BusyBus BUTTONS--->
<section class="busybus-buttons">
<article>
<a class="view-mobile" href="canopy.html"><button>View Mobile Prototype</button></a>
</article>
</section>
<!---BusyBus PICS--->
<section class="busybus-pics">
<article class="busybus-mobile-img">
<img id="busybus-mobile-pic" src="images/busybusmain.jpg" alt="canopy">
</article>
</section>
<!---BusyBus Design Roles, Deliverables, Specifications--->
<section class="canopy-overview">
<article class="canopy-design-roles">
<h4>Design Roles</h4>
<ul>
<li>UX Design</li>
<li>Visual Design</li>
<li>Branding & Identity</li>
</ul>
</article>
<article class="canopy-deliverables">
<h4>Deliverables</h4>
<ul>
<li>User Surveys</li>
<li>Personas</li>
<li>Competitive Analysis</li>
<li>Concept & Brand Identity</li>
<li>User Stories</li>
<li>User Flows</li>
<li>Wireframes</li>
<li>User Testing</li>
</ul>
</article>
<article class="canopy-specifications">
<h4>Specifications</h4>
<ul>
<li><strong>Tools & Software</strong></li>
<li>Figma</li>
<li>UsabilityHub</li>
<li>Duration: 2 weeks</li>
</ul>
</article>
</section>
<!---BusyBus Problem & Solution--->
<section class="canopy-problem-solution">
<article>
<h4>Problem: Addition of New Bus Routes Cause Rider Confusion </h4>
<p id="canopy-body-text">Due to the addition of new bus routes, there are different buses stopping at the same bus stop. Bus riders need to know if the approaching bus is the bus they need to get on, or what time their desired bus is arriving at.</h4>
<h4>Solution: Bus Arrival Times Helps Riders Plan Efficient Trips</h4>
<p id="canopy-body-text">Design an app for bus riders to see what time their bus is arriving at the current bus stop. The app should show:<br><br>1) Bus number and terminal name<br><br>2) Show bus arrival time in minutes<br><br>3) Ability to see when the following bus is arriving</p>
</article>
</section>
<!---BusyBus 01 Research & Define--->
<section class="canopy-process-section">
<h2>What Public Transit Apps Are Out There?</h2>
<h6>Competitive Analysis</h6>
<p id="canopy-body-text">In order to better understand the competition and the client's required features for this product, I did a competitive analysis of two public transit apps Moovit and Google Maps</p>
</section>
<div class="busybus-competition-container">
<div class="busybus-competition">
<h5>Moovit</h5>
<img id="moovit-pic" src="images/moovit.png" alt="google">
<div class="busybus-competition-text">
<img id="check-icon" src="images/check-icon.png" alt="check-icon">
<p id="busybus-card-text">Suggests the bus route to get to the desired destination</p>
<img id="x-icon" src="images/x-icon.png" alt="x-icon">
<p id="busybus-card-text">Does not show what direction the bus is bound for.</p>
<img id="x-icon" src="images/x-icon.png" alt="x-icon">
<p id="busybus-card-text">The mintues next to the bus number may be misleading since it shows the minutes it takes to get to the destination, and not in how many minutes the bus will arrive</p>
</div>
</div>
<div class="busybus-competition">
<h5>Google Maps</h5>
<img id="googlemaps-pic" src="images/googlemaps.png" alt="google">
<div class="busybus-competition-text">
<img id="check-icon" src="images/check-icon.png" alt="check-icon">
<p id="busybus-card-text">Recommends a bus route to get to the desired destination</p>
<img id="x-icon" src="images/x-icon.png" alt="x-icon">
<p id="busybus-card-text">Does not fully show the whole bus route name/direction</p>
<img id="x-icon" src="images/x-icon.png" alt="x-icon">
<p id="busybus-card-text">The minutes next to the bus number may be misleading since it shows the minutes it takes to get to the destination, and not in how many minutes the bus will arrive</p>
</div>
</div>
</div>
<section class="canopy-text-block">
<p id="canopy-body-text">These platforms are well established within the public transit app space. They have a great set of features that keep users satisfied. However, improvements can be made in regards to the display of bus information. This allows a newcomer to enter the market. As a newcomer, BusyBus can provide clear bus information to the rider and help them better plan and schedule trips that require public transit.</p>
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>View SWOT Analysis</button></a>
</section>
<!---BusyBus User Surveys--->
<section class="canopy-text-block">
<h6>User Survey</h6>
<p id="canopy-body-text">To better understand the features that would a part of BusyBus, I conducted a user survey to find out what information is the most important to bus riders.</p>
</section>
<!---BusyBus Pie Chart Here--->
<section class="user-graph-1">
<canvas id="pieChart"></canvas>
</section>
<section class="canopy-text-block">
<p id="canopy-body-text">The majority of public transit app users believe improvements could be made on the current app they are using.</p>
</section>
<!---BusyBus Bar Chart Here--->
<section class="canopy-text-block">
<p id="canopy-body-text">The survey results indicate a majority of users value features such as seeing real time updates in regards to alerts on bus routes, as well as seeing when the following bus is arriving.</p>
</section>
<section class="cloud-uses-title">
<h4>Top 2 Features To Include in BusyBus First Iteration</h4>
</section>
<div class="busybus-competition-container">
<div class="busybus-feature">
<h5>Alerts for bus routes</h5>
<img id="bus-icon" src="images/alert_bus.png" alt="google">
</div>
<div class="busybus-feature">
<h5>Arrival time of current bus and next bus</h5>
<img id="bus-icon" src="images/arrival_bus.png" alt="google">
</div>
</div>
<section class="canopy-text-block">
<p id="canopy-body-text">Additional features that users would also like to see in an improved public transit app include being able to see how long it would take to get to the bus stop from their current location. This can help users better plan their trips. These additional features will be factored into later iterations of this app.</p>
<p id="canopy-body-text"><b>The user survey has helped identify the first set of features for BusyBus. BusyBus will help users identify different buses and arrival times due to the bus route expansion in the city.</b></p>
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>View User Survey Analysis</button></a>
</section>
<section class="canopy-process-section">
<h2>Identifying the Users</h2>
<h6>02 Strategy</h6>
<p id ="canopy-body-text">Based on the user research results, two personas were created to help further identify the direction of this new public transit app.</p>
</section>
<section class="user-personas">
<article>
<h5>Aleena, 32 years old - Sr. Software Engineer</h5>
<img id="user1" src="images/bus_user1.png" alt="persona1">
<p>"There are so many buses that stop at my stop, it would be great to know when the bus I want to get on is arriving. Also if there were any delays, I would like to know in advance."</p>
<div class="user-needs">
<p>Goals</p>
<ul>
<li>Being able to see what time the desired bus is arriving at, as well as what time the next bus is arriving</li>
<li>Being able to see any sudden changes in the bus schedule</li>
</ul>
</div>
<div class="user-needs">
<p>Frustrations</p>
<ul>
<li>Delayed buses causes delay in getting to work</li>
<li>Not knowing about bus delays in advance in order to find alternative modes of transportation</li>
<li>Changes in bus routes might mean getting on the wrong bus</li>
</ul>
</div>
</article>
<article>
<h5>Kevin, 22 years old - Business Student</h5>
<img id="user1" src="images/bus_user2.png" alt="persona1">
<p>"I take the bus to get to my part-time job. I need to know the intervals of my bus in case I miss the first one so I can give my co-workers a heads up I might be running a few minutes behind."</p>
<div class="user-needs">
<p>Goals</p>
<ul>
<li>Being able to see what time the desired bus is arriving at, as well as what time the next bus is arriving.</li>
<li>Being able to see sudden changes in the bus schedule</li>
</ul>
</div>
<div class="user-needs">
<p>Frustrations</p>
<ul>
<li>Delayed buses causes delay in getting to work</li>
<li>Desired bus that is arriving is labeled "Out of Service", therefore rider has to wait for another bus</li>
<li>Not knowing if multiple buses run through the desired destination.</li>
<li>Hard to keep track of changes for a file</li>
</ul>
</div>
</article>
</section>
<section class="canopy-text-block">
<h6>User Stories</h6>
<p id ="canopy-body-text">Before the design started it was important to create user stories and highlight the important tasks to create a prodcut that would be viable. A list of user stories were created with the high priorty tasks being the main focus for the first iteration.</p>
</section>
<section class="client-features">
<article>
<h5>High Priority Tasks For A BusyBus New User</h5>
<ul>
<li>As a new user, I want to see all bus routes at a specific bus stop.</li>
<li>As a new user, I want to find out what time my bus will be arriving.</li>
<li>As a new user, I want to be notified of any alerts/delays on my bus route.</li>
<li>As a new user, I want to see a map of the bus routes.</li>
</ul>
</article>
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>View User Stories</button></a>
</section>
<section class="canopy-process-section">
<h2>Prototyping for BusyBus</h2>
<h6>03 Information Architecture</h6>
<p id ="canopy-body-text">Before the actual designing started, it was important to create a paper prototype of the app with features that would allow users to complete the high priority tasks. The results from this user test will be used to help build out the actual app.</p>
</section>
<section class="bus-sketch-screens">
<article>
<img id="bussketch1" src="images/bus-sketch1.png" alt="bus_sketch">
</article>
<article>
<img id="bussketch1" src="images/bus-sketch1.png" alt="bus_sketch">
</article>
<article>
<img id="bussketch1" src="images/bus-sketch1.png" alt="bus_sketch">
</article>
</section>
<section class="canopy-text-block">
<h6>Usability Test</h6>
<p id ="canopy-body-text">The task for this usability test with the paper prototype was for the user to find out when the N4 bus was arriving at the Washington & State stop. The 3 users were able to do so by clicking on the Washington & State stop under "nearby stops," and were able to navigate to the next screen showing all 7 bus lines.</p>
</section>
<section class="canopy-text-block">
<h6>Key Findings From Usability Test</h6>
<p id="canopy-body-text">Users wanted to know what was the purpose of the "sort by" field next to near by stops. They wanted to know what was being sorted. Ideally in a second round of testing, this feature would be tested to see if it adds any value for the user.</p>
</section>
<section class="busy-sketch-screens">
<article>
<img id="bussketch1" src="images/sortby.png" alt="sortby_sketch_1">
</article>
</section>
<section class="canopy-text-block">
<p id ="canopy-body-text">Users were not sure what was meant by "Washington & State." It was not clear to users that it was a bus stop and not a bus line.</p>
</section>
<section class="busy-sketch-screens">
<article>
<img id="bussketch1" src="images/bus_stop.png" alt="sortby_sketch_1">
</article>
</section>
<section class="canopy-text-block">
<p id ="canopy-body-text">Under the favorite stops section it currently shows the bus stop name rather than the bus number. In the next iteration this will be changed to show the bus line number that users frequent the most to make that information compatible with the bus arrival time that is listed.</p>
</section>
<section class="busy-sketch-screens">
<article>
<img id="bussketch1" src="images/bus_stop_b.png" alt="sortby_sketch_1">
</article>
</section>
<section class="canopy-text-block">
<p id ="canopy-body-text">Users were confused by what the "up and down" arrows meant. This was meant to change the direction of where the buses were headed, for example "inbound" vs. "outbound". However this is feature confused users and will be removed and not included in the final design.</p>
</section>
<section class="busy-sketch-screens">
<article>
<img id="bussketch1" src="images/bus_arrow.png" alt="sortby_sketch_1">
</article>
</section>
<section class="canopy-text-block">
<p id ="canopy-body-text">With the results from the usability test, the next step is to design the screen that users will use to determine what time their bus is arriving. </p>
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>View Marvel Prototype</button></a>
</section>
<section class="canopy-process-section">
<h2>Branding & Identity</h2>
<h6>04 Colors</h6>
<p id ="canopy-body-text">To convey a feeling of trust and reliability for BusyBus, the main color that will be used is blue. Users expect accuracy and dependability when they use the public transit app to plan their trip, and blue can help get this message across. Grey colors will be used for the text.</p>
</section>
<section class="cloud-uses-title">
<h4>Primary Brand Colors for BusyBus</h4>
</section>
<section class="cloud-usage-colors">
<article class="cloud-uses-pics">
<img id="use-pic" src="images/busy_color1.png" alt="busybus_color">
<p id="use-text">Main Color<br>HEX # 2A56C6<br>RGB 42/ 86/ 198</p>
</article>
<article class="cloud-uses-pics">
<img id="use-pic" src="images/busy_color2.png" alt="content">
<p id="use-text">Main Color<br>HEX # 4D4D4D<br>RGB 77/ 77/ 77</p>
</article>
<article class="cloud-uses-pics">
<img id="use-pic" src="images/busy_color3.png" alt="share">
<p id ="use-text">Main Color<br>HEX # 8B8A93<br>RGB 139/ 138/ 147</p>
</article>
<article class="cloud-uses-pics">
<img id="use-pic" src="images/busy_color4.png" alt="share">
<p id="use-text">Alert Color<br>HEX # E46B75<br>RGB 228/ 107/ 117</p>
</article>
</section>
<section class="canopy-text-block">
<p id="canopy-body-text">Red is used as an alert color to signal to users any unexpected changes that may occur regarding the bus schedule.</p>
</section>
<section class="canopy-text-block">
<h6>Typography</h6>
<p id="canopy-body-text">Roboto was chosen as a typeface for the BusyBus app. This version of BusyBus is designed for Android and Roboto is a simple typeface developed for Android systems. The basic and clean look of Roboto helps deliver the bus information to the user in a straightforward manner.</p>
</section>
<section class="canopy-process-section">
<h2>05 Visual Design</h2>
<h6>High Fidelity Mock Ups</h6>
<p id ="canopy-body-text">With wireframes in place and a defined brand identity, I went on to develop the high fidelity mockups of BusyBus. The screen that will be mock up is the screen where users will see what bus is arriving and the time it will arrive. The following are screens of the design progression.</p>
</section>
<section class="bus-hifi-screens">
<article class="bus-uses-pics">
<h5>First Iteration</h5>
<img id="bus-design-pic" src="images/bus-design-1.png" alt="busybus_screen">
<p id="use-text">There is not enough distinction between the bus number and desitination. There needs to be more hierarchy</p>
</article>
<article class="bus-uses-pics">
<h5>Second Iteration</h5>
<img id="bus-design-pic" src="images/bus-design-2.png" alt="busybus_screen">
<p id="use-text">Distinction between the bus number and destination is clearer, but there is still opportunity to improve on the type of information being displayed.</p>
</article>
<article class="bus-uses-pics">
<h5>Third Iteration</h5>
<img id="bus-design-pic" src="images/bus-design-3.png" alt="busybus_screen">
<p id ="use-text">There is a clear distinction between bus number and destination. The alert info is being displayed to the bus rider as well.</p>
</article>
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>View Final Prototype</button></a>
</section>
<section class="canopy-process-section">
<h2>Coding the BusyBus Screen</h2>
<h6>Using HTML & CSS</h6>
<p id="canopy-body-text">To further move this prototype along, the next step was to translate the design into code. The overall structure of this code is written semantically to allow for organization and clarity when going through the code. <b>There are 3 sections for this screen: the header, the bus list, and the bottom navigation bar. The main component showing the arrival time of the buses was coded using list items.</b></p>
</section>
<section class="canopy-process-section">
<h2>Next Steps for BusyBus</h2>
<h6>Moving Forward</h6>
<p id="canopy-body-text">Some things to consider next is incorporating a map somewhere on the solution screen because this was a high priority tasks that was missed in the process. In addition, even though the solution screen has an established hierarchy, that can still be pushed further. For example, having a clearer distinction between buses that are in service versus out of service. This could be done by completely highlighting the out of service buses section in a muted color to indicate that they are not running.</p>
<p id="canopy-body-text">Further steps would be to test how users prefer the bus time to show up on the app. Would users prefer to see the actual arrival time of the bus such as "11:25 am", or would they prefer to see it as what it is currently, in time intervals such as the bus is arriving in "5 min, 20 min".</p>
<p id="canopy-body-text">These are a few things to consider as the project continues to develop and more users needs come to light through additional rounds of user testing.</p>
</section>
<section class="canopy-thankyou">
<p id="canopy-thanks">Thank you for stopping by!</p>
</section>
<section class="canopy-smile">
<img id="canopy-color-tag2" src="images/canopy-smiley.svg" alt="canopy_user_test_pic">
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>Next Project</button></a>
</section>
<!--- <article>
<p id="next-project">Next Project</p>
<img id ="next-arrow" src="images/next-arrow.svg" alt="next_arrow">
</article>--->
<!---Footer Section--->
<footer>
<h3>Let's connect and work together!</h3>
<ul class="socials">
<li><img id="social_icons" src="images/gmail.svg" alt="gmail"></li>
<li><img id="social_icons" src="images/linkedin.svg" alt="linkedin"></li>
<li><img id="social_icons" src="images/instagram.svg" alt="instagram"></li>
<li><img id="social_icons" src="images/github.svg" alt="instagram"></li>
</ul>
<p id="copyright">Copyright 2020 Designed & Developed by Lily Wu</p>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="chartinfo.js"></script>
</body>
</html>


Try Using :
new Chart(document.getElementById("pieChart"), {
type: 'pie',
data: {
labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
datasets: [{
backgroundColor: ["your color list"],
data: [12, 19, 3, 17, 28, 24, 7]
}]
}
});

Related

Applying changes in HTML for all elements at once

I have an html which contains many (80) small boxes with some info. All these boxes are displayed in grid.
All these boxes and tags are identical just Text is different inside each block. Each box has lets say 3 values: name, email and mobile number.
I want to swap the position of email and mobile number. It will take so much time to do manually. Is there any way or automatic process or tool by which I can just change one block and it will be applied to all others?
Code of boxes:
<div class="row gutters-40">
<div class="col-12 col-md-4 col-sm-4">
<div class="thumbnail">
<h4 class="service__title">Private limited Registration</h4>
<h2 style="font-weight: bold; color: purple; font-family: sans-serif;"><i class="fa fa-rupee"></i> 7500 Rs</h2>
<h5 class="doctype">Documents Required</h5>
<div class="docs">
<ul>
<li>Aadhar card & Pancard of Directors</li>
<li>Photo of Directors</li>
<li>Address Proof of Directors</li>
<li>Address Proof of Company address</li>
<li>Qualification & occupation of directors</li>
<li>Bank statement of Directors</li>
</ul>
</div><!--docs ends here-->
<div class="price_time">
<p class="service__paragraph" align="left" id="price"><i class="fa fa-info-circle"></i> Know More</p>
</div>
</div><!--Thumbnail ends here-->
</div>
<div class="col-12 col-md-4 col-sm-4">
<div class="thumbnail">
<h4 class="service__title">limited Liability partnership</h4>
<h5 class="doctype">Documents Required</h5>
<div class="docs">
<ul>
<li>Aadhar card of Directors</li>
<li>PAN Card of Directors</li>
<li>Passport size photo of Directors</li>
<li>Residential address proof of Director</li>
<li>Registered Office address proof</li>
<li>Appointment of auditor (ADT-1)</li>
</ul>
</div>
<div class="price_time">
<p class="service__paragraph" align="left" id="price"><i class="fa fa-rupee"></i> 7199</p>
<p class="service__paragraph" align="right" id="days"> <i class="fa fa-clock-o"></i> 10-15 days</p>
</div>
</div><!--Thumbnail ends -->
</div><!--box ends-->
</div> <!--row ends-->
As you can see my price is in last div inside p tag. I want it above h5 tag.
I have almost 80 such boxes. With multicursor and moving line up it will still take time.
I thought find and replace with regex can work but I can't evaluate how to do that. There is div class = docs is between these two elements which I want to swap, so I haven't figured out should such regex look like.

Well, I guess this is somewhat too custom task to find an out-of-box tool, so I'd suggest to write simple one of your own. Here's an outline:
open you page in browser
open dev tools Console, run a script to modify html
open dev tools Elements, copy the modified html bit
substitute the boxes part of html in your page with the modified one
if your html is modified also by some other JS, in step 1. use instead a dedicated html containing just the piece that's of interest.
Now, the script should do the following:
find all the boxes (document.querySelectorAll)
for each of them, do the necessary operations with elements, like
​ const elementToMove = ...
​ const destinationElement = ...
​ destinationElement.appendChild(elementToMove)
​ const elementToRemove = ...
​ elementToRemove.remove()

Making next pages via javascript without refreshing or new page?

How can I make this script to go new page without refreshing. Should I try it in javascript? Or there's an easier way? I tried to make with next/prev button but i couldn't do it, at least on myself. Here I put the code and I'll show you what i tried
If cannot be done with java, how else can i do, at least to give impression that page is not refreshing / changing.
<section id="wrap">
<div class="wrapper">
<div class="inner">
<section class="features">
<div class=page1">
<article>
<img src="images/pic04.jpg" alt="" />
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
Click pentru a viziona.
</article>
<article>
<img src="images/pic05.jpg" alt="" />
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
Click pentru a viziona.
</article>
<section class="features">
<article>
<img src="images/pic04.jpg" alt="" />
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
Click pentru a viziona.
</article>
<article>
<img src="images/pic05.jpg" alt="" />
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
Click pentru a viziona.
</article>
</div>
<div class=page2">
<article>
<img src="images/pic04.jpg" alt="" />
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
Click pentru a viziona.
</article>
<article>
<img src="images/pic05.jpg" alt="" />
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
Click pentru a viziona.
</article>
<section class="features">
<article>
<img src="images/pic04.jpg" alt="" />
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
Click pentru a viziona.
</article>
<article>
<img src="images/pic05.jpg" alt="" />
<h3 class="major">To be Edited</h3>
<p>To be Edited</p>
Click pentru a viziona.
</article>
</div>
<ul class="pagination">
<li><span class="button small disabled">Prev</span></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li><span>…</span></li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>Next</li>
</ul>
</section>
</div>
</div>
</section>
what i tried
<script>
$(document).ready(function(){
var pages = $('#container li'), current=0;
var currentPage,nextPage;
$('#container .button').click(function(){
currentPage= pages.eq(current);
if($(this).hasClass('prevButton'))
{
if (current <= 0)
current=pages.length-1;
else
current=current-1;
}
else
{
if (current >= pages.length-1)
current=0;
else
current=current+1;
}
nextPage = pages.eq(current);
pages.hide();
nextPage.show();
}).filter('.nextButton').click();
});
</script>

It's not possible to display new pages without having to load them.
But what you are trying to do is possible.
You just need to add the HTML content and CSS of the page you want in your current DOM. And then with some CSS rules and javascript, animate your DOM.
This can be done dynamically when you click your next button (then you display an activity indicator while it's loading the content of your next page)
Or when you first load your initial page. In that case the HTML of your next page will just be hidden, and you won't have any loading time when pressing "next".
I would recommend the first approach as your code can become really messy in the second case.
In your DOM you would have something like that:
<div class="myFirstPageClass">
your content of your first page
</div>
<div class="mySecondPageClass">
your second page
</div>
And in your js, if you use jQuery it would be something like that when you click on next:
$('.myFirstPageClass').hide();
$('.mySecondPageClass').show();
But yeah, as BShaps explained, you should definitely use a framework. They will help you structure you code.

Essentially it sounds like you're asking how to build a SPA (Single Page Application) with vanilla javascript. I don't really recommend it because it is a pain so I would suggest using a framework that makes creating a SPA much easier.
But, if you really want to try it with vanilla js then here is a link showing you how to do it: SPA with vanilla js

Javascript/JQuery Content Filter

I am displaying courses that I offer and am using Javascript/jQuery to display/hide based on element classes.
The page is here: http://dev.sharepoint-videos.com/sharepoint-2013-training-courses-dev/
Basically the script hides all of the content on the page and then displays items that match the class selector which is comprised of drop down and checkbox options. All is well except I would like to allow the appearance of keeping results static when more than one filter applies. e.g. if they select author and then level and then audience I would like the courses that apply to all 3 selectors to remain while the others are hidden.
HTML here:
function ApplyFilters() {
var effect = 'magictime swap';
var reseteffect = 'magictime twisterInUp';
var courses = jQuery(".courseContainer");
jQuery("p.zeroResults").text("").css("margin-top", "0px");
courses.hide();
courses.removeClass(effect);
courses.removeClass(reseteffect);
var speakerFilter = jQuery("#author_filter").val();
var levelFilter = jQuery("#level_filter").val();
var audienceFilter = jQuery("#audience_filter").val();
var Office365Filter = GetOffice365Value();
var classFilter = speakerFilter + levelFilter + audienceFilter + Office365Filter;
var count = jQuery(classFilter);
if (count.length > 0) {
//jQuery(classFilter).hide().fadeIn(1500);
jQuery(classFilter).hide().addClass(effect).show();
} else {
jQuery("p.zeroResults").text("No Results Match Your Select. Please 'Reset' your filters").css("margin-top", "-50px");
}
}
[two_third]
<h2>SharePoint 2013/Office 365 Courses</h2>
SharePoint 2013/Office 365 brings a fresh new interface and lots of new and improved functionality compared to SharePoint 2010. Watch the video based courses below to explore SharePoint 2013 products and technologies in depth.
<div class="clearfix course"></div>
<div style="border:1px solid #ccc;padding:8px;border-radius:7px;">
<b>Filter Classes By:</b><br />
<div style="display:inline-block;width:145px;">
Author<br />
<select id="author_filter" onchange="ApplyFilters();">
<option value="" selected="">All</option>
<option value=".MarcAnderson">Marc Anderson</option>
<option value=".ChrisBeckett">Chris Beckett</option>
<option value=".GerryBrimacombe">Gerry Brimacombe</option>
<option value=".MelissaEsquibel">Melissa Esquibel</option>
<option value=".SteveFox">Steve Fox</option>
<option value=".IraFuchs">Ira Fuchs</option>
<option value=".SarahHaase">Sarah Haase</option>
<option value=".JasonHimmelstein">Jason Himmelstein</option>
<option value=".JohnHolliday">John Holliday</option>
<option value=".AdamLevithan">Adam Levithan</option>
<option value=".JamieMcAllister">Jamie McAllister</option>
<option value=".ChrisMcNulty">Chris McNulty</option>
<option value=".AgnesMolnar">Agnes Molnar</option>
<option value=".BenjaminNiaulin">Benjamin Niaulin</option>
<option value=".MichaelNoel">Michael Noel</option>
<option value=".YaroslavPentsarskyy">Yaroslav Pentsarskyy</option>
<option value=".AsifRehmani">Asif Rehmani</option>
<option value=".DarvishShadravan">Darvish Shadravan</option>
<option value=".ScottShearer">Scott Shearer</option>
<option value=".DuxRaymondSy">Dux Raymond Sy</option>
<option value=".FabianWilliams">Fabian Williams</option>
</select>
</div>
<div style="display:inline-block;width:100px;margin-left:15px">
Level<br />
<select id="level_filter" onchange="ApplyFilters();">
<option value="" selected="">All</option>
<option value=".Overview">Overview</option>
<option value=".Intermediate">Intermediate</option>
<option value=".Advanced">Advanced</option>
</select>
</div>
<div style="display:inline-block;width:150px;margin-left:10px">
Audience<br />
<select id="audience_filter" onchange="ApplyFilters();">
<option value="" selected="">All</option>
<option value=".Designer">Designer</option>
<option value=".Developer">Developer</option>
<option value=".InformationWorker">Information Worker</option>
<option value=".ITProfessional">IT Professional</option>
<option value=".PowerUser">Power User</option>
<option value=".ProjectManager">Project Manager</option>
</select>
</div>
<div style="display:inline-block;width:70px;margin-left:30px">
Office 365<br /><input type="checkbox" id="365_filter" value="office365" onchange="ApplyFilters();" />
</div>
<div style="display:inline-block;width:50px;margin-left:0px">
<input type="button" id="reset_filter" value="Reset"/>
</div>
</div>
<!--<button class="subscribeToday">Subscribe Today!</button>-->
[/two_third]
[one_third_last]
<div class="subscribeContainer"><p>Subscribe to view our entire collection of <strong>[postcount]</strong> SharePoint Video Tutorials.</p><p><button class="subcribeButton">Subscribe Today</button></p></div>
<div class="allCourses"><button class="authorButton">Upcoming SharePoint 2013 Training Classes</button></div>
</div>
[/one_third_last]</h4>
<div class="clearfix course"></div>
<div id="courseContainer" style="width:100%;">
<p class="zeroResults" style="font-weight:600;"></p>
<!--Row 1 Start-->
<a class="courseLink" href="http://www.sharepoint-videos.com/sharepoint-2013-video-tutorials/"><div class="courseContainer wide AsifRehmani Overview InformationWorker">
<div class="courseHeader CHred">
<div class="courseAuthor">
<img src="http://sharepoint-videos.com/wp-content/uploads/2015/02/AsifRehmani_13.png" />
</div>
</div>
<p class="courseTitle red">SP13-131: The Basics – End User Training </p>
<p><strong>Author: Asif Rehmani</strong></p>
<p>These SharePoint 2013 end user video tutorials are specifically targeted to readers, members and site owners of SharePoint 2013. However, if you are a developer or IT administrator who is new to SharePoint, these will be very helpful in understanding the basics. </p>
</div>
</a>
<a class="courseLink green" href="http://sharepoint-videos.com/video-categories/sharepoint-2013-training-courses/sp13-132-sharepoint-2013-end-user-training-2/"><div class="courseContainer wide MelissaEsquibel Overview InformationWorker">
<div class="courseHeader CHgreen">
<div class="courseAuthor">
<img src="http://sharepoint-videos.com/wp-content/uploads/2014/07/MEsquibel2013.jpg" />
</div>
</div>
<p class="courseTitle green">SP13-132: End User Training Part 2 </p>
<p><strong>Author: Melissa Esquibel</strong></p>
<p>Watch additional End User Training videos on SharePoint 2013 Products and Technologies. These SharePoint 2013 End User video tutorials are specifically targeted to readers, members and site owners of SharePoint 2013.</p>
</div>
</a>
<!--Row1 End-->
<a class="courseLink blue" href="http://www.sharepoint-videos.com/sp13-150-sharepoint-2013-general-videos-training-course/"><div class="courseContainer wide AsifRehmani Overview PowerUser">
<div class="courseHeader CHblue">
<div class="courseAuthor">
<img src="http://sharepoint-videos.com/wp-content/uploads/2015/02/AsifRehmani_13.png" />
</div>
</div>
<p class="courseTitle blue">SP13-150: General Videos </p>
<p><strong>Author: Asif Rehmani</strong></p>
<p>View this series of videos that show a range of general SharePoint 2013 skill areas including customizing team sites, moving documents and document menus, apps, creating a testing environment, and much more.</p>
</div>
</a>
<a class="courseLink" href="http://www.sharepoint-videos.com/sp13-301-sharepoint-2013-branding/"><div class="courseContainer wide YaroslavPentsarskyy Intermediate Designer">
<div class="courseHeader CHyellow">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2009/08/ypentsarskyy_2010.jpg" />
</div>
</div>
<p class="courseTitle yellow">SP13-301: Branding </p>
<p><strong>Author: Yaroslav Pentaraskyy</strong><p>
<p>SharePoint 2013 comes with many customization and branding opportunities. Customize and brand your SharePoint sites to look ‘non-SharePointy’. This set of videos will give you a solid understanding on how you can improve user interface and brand your SharePoint... <!--sites with visual elements you have seen online or have been provided by a professional design team.--> </p>
</div>
</a>
<!--Row2 End -->
<a class="courseLink green" href="http://www.sharepoint-videos.com/sp13-302-sharepoint-2013-project-management-course/"><div class="courseContainer wide DuxRaymondSy Intermediate ProjectManager">
<div class="courseHeader CHred">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2009/07/Dux-pic.jpg" />
</div>
</div>
<p class="courseTitle red">SP13-302: Project Management </p>
<p><strong>Author: Dux Raymond Sy</strong></p>
<p>In today’s project-centric work environment, the ability to coordinate various projects with distributed teams and make high-level strategic decisions based upon consolidated project progress, risk and resource usage information is critical. Many organizations today waste...<!-- time and money relying on e-mail, spreadsheets and other manual processes when engaged in time sensitive, highly collaborative project activities. Learn how to use SharePoint Project Management features to their full extent.--></p>
</div>
</a>
<!--Row 3 Start-->
<a class="courseLink" href="http://www.sharepoint-videos.com/sp13-303-sharepoint-2013-development-course/"><div class="courseContainer wide YaroslavPentsarskyy Advanced Developer">
<div class="courseHeader CHgreen">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2009/08/ypentsarskyy_2010.jpg" />
</div>
</div>
<p class="courseTitle green">SP13-303: Development </p>
<p><strong>Author: Yaroslav Pentaraskyy</strong></p>
<p>Learn about development opportunities available in SharePoint 2013. Skills such as customizing typical SharePoint components, building collaboration solutions, SharePoint 2013 apps, custom site templates, and adding custom look and feel to your SharePoint 2013 site. </p>
</div>
</a>
<a class="courseLink blue" href="http://www.sharepoint-videos.com/sp13-304-sharepoint-designer-2013-workflow-course/"><div class="courseContainer wide ChrisBeckett Intermediate PowerUser">
<div class="courseHeader CHblue">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/04/tn_chris_beckett_125.jpg" />
</div>
</div>
<p class="courseTitle blue">SP13-304: Workflow</p>
<p><strong>Author: Chris Beckett</strong></p>
<p>Learn No-Code Workflow Development in SharePoint 2013. Automation of content management and business processes can free a busy professional from the time consuming aspects of facilitating the flow of work within and between teams, and reduce waste.</p>
</div>
</a>
<a class="courseLink" href="http://www.sharepoint-videos.com/sp13-305-sharepoint-2013-search-course/"><div class="courseContainer wide AgnesMolnar Intermediate ITProfessional">
<div class="courseHeader CHyellow">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/04/tn_AgnesMolnar.jpg" />
</div>
</div>
<p class="courseTitle yellow">SP13-305: Search Video Training Course </p>
<p><strong>Author: Agnes Molnar</strong></p>
<p>For those who want to learn about the Search capabilities and opportunities available in SharePoint 2013. This course covers such topics as content processing, continuous crawl, working with metadata, working with queries, managed navigation and search administration.</p>
</div>
</a>
<a class="courseLink green" href="http://www.sharepoint-videos.com/sp13-30-sharepoint-2013-javascript-and-jquery-course/"><div class="courseContainer wide MarcAnderson
Advanced PowerUser">
<div class="courseHeader CHred">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/04/tn_MarcAnderson.jpeg" />
</div>
</div>
<p class="courseTitle red">SP13-306: JavaScript and jQuery Course </p>
<p><strong>Author: Marc Anderson</strong></p>
<p>Learn about Javascript and jQuery based customization opportunities available in SharePoint 2013. Course covers elements such as jQuery selectors, element attributes, events and effects, Document Object Model (DOM), retrieving data, jQuery UI and much more</p>
</div>
</a>
<!--Copy Start -->
<a class="courseLink" href="http://www.sharepoint-videos.com/sp13-307-sharepoint-2013-enterprise-forms-course/"><div class="courseContainer wide DarvishShadravan Intermediate PowerUser">
<div class="courseHeader CHgreen">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/04/dravishPhotoNew.png" />
</div>
</div>
<p class="courseTitle green">SP13-307: Enterprise Forms</p>
<p><strong>Author: Darvish Shadravan</strong></p>
<p>Learn about available options for building digital forms in SharePoint 2013. You will learn an Introduction to SharePoint 2013 Forms concepts, What’s new with InfoPath 2013, How to build form Apps for SharePoint 2013, Access 2013′s no code approach, and much more. </p>
</div>
</a>
<a class="courseLink blue" href="http://www.sharepoint-videos.com/sp13-308-sharepoint-2013-administration-course/"><div class="courseContainer wide MichaelNoel Intermediate ITProfessional">
<div class="courseHeader CHblue">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/04/Michael-Noel.png" />
</div>
</div>
<p class="courseTitle blue">SP13-308: Administration</p>
<p><strong>Author: Michael Noel</strong></p>
<p>Learn Administration options available in SharePoint 2013. You’ll first get an introduction to SharePoint 2013 Administration, discuss options in Central Administration for you to manage your SharePoint farm, how to utilize PowerShell to administer SharePoint and much more.</p>
</div>
</a>
<a class="courseLink" href="http://www.sharepoint-videos.com/sp13-309-sharepoint-2013-records-management-course/"><div class="courseContainer wide JohnHolliday Advanced ITProfessional">
<div class="courseHeader CHyellow">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/04/tn_John-Holliday.jpg" />
</div>
</div>
<p class="courseTitle yellow">SP13-309: Records Management </p>
<p><strong>Author: John Holliday</strong></p>
<p>Learn how to develop a file plan for managing records, strategies for ensuring that end users adhere to compliance requirements, options for managing record declaration and retention, how to create and configure a records repository, and much more.</p>
</div>
</a>
<a class="courseLink red" href="http://www.sharepoint-videos.com/sp13-310-sharepoint-2013-business-intelligence-course/"><div class="courseContainer wide JasonHimmelstein Intermediate PowerUser">
<div class="courseHeader CHred">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/04/tn_JasonHimmelstein.jpg" />
</div>
</div>
<p class="courseTitle red">SP13-310: Business Intelligence </p>
<p><strong>Author: Jason Himmelstein</strong></p>
<p>Learn what it takes to build Business Intelligence solutions in SharePoint 2013. Loaded with the most current real world information and demonstrations including introduction to SharePoint 2013 Business Intelligence stack, deploying a SharePoint BI center, and much more.</p>
</div>
</a>
<a class="courseLink" href="http://www.sharepoint-videos.com/sp13-311-sharepoint-2013-beginning-development/"><div class="courseContainer wide SteveFox Advanced PowerUser">
<div class="courseHeader CHgreen">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/10/steve_fox_photo.png" />
</div>
</div>
<p class="courseTitle green">SP13-311: Beginning Development Course</p>
<p><strong>Author: Steve Fox</strong></p>
<p>This course is for those who are either new to SharePoint development or already know SharePoint but want to upgrade their development skills to SharePoint 2013. Learn about application models, developer tools, Apps, Client-Side Object Model, REST/OData APIs, and more.</p>
</div>
</a>
<a class="courseLink blue" href="http://www.sharepoint-videos.com/sp13-312-sharepoint-2013-project-2013-course/"><div class="courseContainer wide DuxRaymondSy Intermediate ProjectManager">
<div class="courseHeader CHblue">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2009/07/Dux-pic.jpg" />
</div>
</div>
<p class="courseTitle blue">SP13-312: Project 2013 Course</p>
<p><strong>Author: Dux Raymond Sy</strong></p>
<p>Learn about Project Management using Project 2013 and SharePoint 2013. You’ll learn to define project schedule based on a project start or finish date; utilize relevant project calendar; identify tasks and dependencies; enter task estimates based on duration and much more</p>
</div>
</a>
<a class="courseLink" href="http://www.sharepoint-videos.com/sp13-313-sharepoint-2013-managed-metadata-course/"><div class="courseContainer wide ChrisMcNulty Intermediate ProjectManager">
<div class="courseHeader CHyellow">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/04/chris_mcnulty.png" />
</div>
</div>
<p class="courseTitle yellow">SP13-313: Managed Metadata </p>
<p><strong>Author: Chris McNulty</strong></p>
<p>As SharePoint explodes in enterprise capacity, big data often results in a lot of big noise, too. Managed Metadata and Enterprise Content Management provide tools and analysis to help you separate valuable signals from all the useless background static. </p>
</div>
</a>
<a class="courseLink red" href="http://www.sharepoint-videos.com/sp13-314-cheap-thrills-in-sharepoint-course/"><div class="courseContainer wide IraFuchs Intermediate PowerUser">
<div class="courseHeader CHred">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/04/Ira-Fuchs-photo-square-01.png" />
</div>
</div>
<p class="courseTitle red">SP13-314: Cheap Thrills in SharePoint </p>
<p><strong>Author: Ira Fuchs</strong></p>
<p>Learn about automation using SharePoint Designer workflows and creation of a great scheduling and resource reservation system using SharePoint Calendars. The presenter will demonstrate some of the truly useful, valuable and easy things you can do with SharePoint that address real-world needs.</p>
</div>
</a>
<a class="courseLink" href="http://www.sharepoint-videos.com/sp13-315-sharepoint-online-office-365-branding-course/"><div class="courseContainer wide YaroslavPentsarskyy Intermediate Designer office365">
<div class="courseHeader CHgreen">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2009/08/ypentsarskyy_2010.jpg" />
</div>
</div>
<p class="courseTitle green">SP13-315: SP Online (Office 365) Branding</p>
<p><strong>Author: Yaroslav Pentsarskyy</strong></p>
<p>Learn about SharePoint Online (Office 365) Branding, Site Customization, Management and Responsive Design. Looking at varied SharePoint online sites, customization options using SharePoint Designer and Visual Studio, key branding artifacts and much more. </p>
</div>
</a>
<a class="courseLink green" href="http://www.sharepoint-videos.com/sp13-316-bcs-sharepoint-2013/"><div class="courseContainer wide FabianWilliams Advanced PowerUser">
<div class="courseHeader CHblue">
<div class="courseAuthor">
<img src="http://www.sharepoint-videos.com/wp-content/uploads/2013/04/fabian_williams.png" />
</div>
</div>
<p class="courseTitle blue">SP13-316: Working with External Data (BCS)</p>
<p><strong>Author: Fabian Williams</strong></p>
<p>Learn about working with External Data through the eyes of SharePoint Server 2013 and SharePoint Online. We will cover the the new Business Connectivity Services (BCS) and the new Workflow Engine. Learn how to manage workflows using No Code SharePoint Designer solutions and Visual Studio with OData and Declarative Workflow Solutions.</p>
</div>
</a>
<a class="courseLink" href="http://sharepoint-videos.com/sp13-317-making-enterprise-social-real-in-your-organization-with-yammer-and-sharepoint/"><div class="courseContainer wide NaomiMoneypenny Intermediate PowerUser">
<div class="courseHeader CHyellow">
<div class="courseAuthor">
<img src="http://sharepoint-videos.com/wp-content/uploads/2014/07/naomi_moneypenny_headshot.jpg" />
</div>
</div>
<p class="courseTitle yellow">SP13-317: Enterprise Social in Your Organization </p>
<p><strong>Author: Naomi Moneypenny</strong></p>
<p>Let’s go on a deep dive on what it takes to make social collaboration a reality for your company. We’ll talk about business benefits, constructing use cases and key metrics for your network’s maturity. Then we’ll focus on the key roles, tools and resources to be most effective. </p>
</div>
</a>
<a class="courseLink red" href="http://www.sharepoint-videos.com/implementing-sharepoint-2013-hybrid-for-search-business-connectivity-services-onedrive-for-business-and-yammer/"><div class="courseContainer wide FabianWilliams Advanced ITProfessional">
<div class="courseHeader CHred">
<div class="courseAuthor">
<img src="http://sharepoint-videos.com/wp-content/uploads/2014/07/fabian_williams.png" />
</div>
</div>
<p class="courseTitle red">SP13-318: Hybrid Environment in SharePoint </p>
<p><strong>Author: Fabian Williams</strong></p>
<p>This course will focus on SharePoint hybrid and on-premise environments. Attendees will learn how to make the hybrid environment work together with SharePoint services.</p>
</div>
</a>
<a class="courseLink" href="http://sharepoint-videos.com/video-categories/sharepoint-2013-training-courses/sp13-319-essential-content-management-in-sharepoint-2013-and-office-365/"><div class="courseContainer wide JamieMcAllister Overview InformationWorker office365">
<div class="courseHeader CHgreen">
<div class="courseAuthor">
<img src="http://sharepoint-videos.com/wp-content/uploads/2015/05/jamiemcallister.jpg" />
</div>
</div>
<p class="courseTitle green">SP13-319: Essential Content Management</p>
<p><strong>Author: Jamie McAllister</strong></p>
<p>Learn about SharePoint content management essentials in SharePoint 2013 and Office 365. Our focus will be to learn how to take best advantage of content management capabilities in both products. We will address SharePoint Lists, Libraries and Document Management with special emphasis on Quality Control of Content and Organizing your documents. </p>
</div>
</a>
<a class="courseLink green" href="http://sharepoint-videos.com/module-1/exploring-new-search-in-sharepoint-2013/"><div class="courseContainer wide BenjaminNiaulin Overview ITProfessional">
<div class="courseHeader CHblue">
<div class="courseAuthor">
<img src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/p/2/005/06e/386/2da6baf.jpg" />
</div>
</div>
<p class="courseTitle blue">SP13-320: SharePoint Search 2013</p>
<p><strong>Author: Benjamin Niaulin</strong></p>
<p>Major changes brought to SharePoint 2013 lie around Search. With the new Continuous Crawl, the new architecture and the many changes to the existing and new Web Parts, your architecture will need to be re-worked. This session is for those with experience in SharePoint 2010 that want to see how we can exploit the new features and Web Parts.</p>
</div>
</a>
<a class="courseLink" href="http://sharepoint-videos.com/module-1/supporting-office-365/"><div class="courseContainer wide AdamLevithan Intermediate ITProfessional office365">
<div class="courseHeader CHyellow">
<div class="courseAuthor">
<img src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAKHAAAAJDk5NWY4MjZlLWI2ZDUtNDlhNi1hMTg5LWU3MmE2ZjA2YjdjOA.jpg" />
</div>
</div>
<p class="courseTitle yellow">SP13-321: Office 365 Administration </p>
<p><strong>Author: Adam Levithan</strong></p>
<p>Are you a SharePoint or Exchange Administrator in a large organization, or maybe a do-it-all Network to Software Microsoft stack expert in a small to medium size business? Have you been reading about the transition from Development or Administration to DevOps? </p>
</div>
</a>
<a class="courseLink red" href="http://www.sharepoint-videos.com/module-1/sharepoint-designer-2013-workflows-an-introduction/"><div class="courseContainer wide ScottShearer Overview PowerUser">
<div class="courseHeader CHred">
<div class="courseAuthor">
<img src="https://pbs.twimg.com/profile_images/2447078638/b9wdekijb6uftiwsb71d_400x400.jpeg" />
</div>
</div>
<p class="courseTitle red">SP13-322: SharePoint Designer 2013 Workflows – An Introduction </p>
<p><strong>Author: Scott Shearer</strong></p>
<p>Learn how to create SharePoint Designer workflows from the ground up. This session is full of live demos designed to provide a solid foundation for creating workflows. List workflows, reusable workflows and site workflows will all be discussed and created live. Learn how easy it is to automate processes by using SharePoint Designer workflows.</p>
</div>
</a>
<a class="courseLink" href="http://sharepoint-videos.com/module-1/content-types-love-them-or-lose-it/"><div class="courseContainer wide MarcAnderson Overview PowerUser">
<div class="courseHeader CHgreen">
<div class="courseAuthor">
<img src="http://sharepoint-videos.com/wp-content/uploads/2009/08/marc-anderson-headshot.png" />
</div>
</div>
<p class="courseTitle green">SP13-323: Content Types: Love Them or Lose it!</p>
<p><strong>Author: Marc Anderson</strong></p>
<p>One of the most fundamentally powerful capabilities in SharePoint has been Content Types. Content Types should underlie all good information architectures, along with customized metadata (Site Columns) and managed metadata which embodies the taxonomy for *your* organization to make magic happen.</p>
</div>
</a>
<a class="courseLink blue" href="http://sharepoint-videos.com/module-1/escaping-the-land-of-confusion-how-to-create-effective-business-process-solutions-in-sharepoint/"><div class="courseContainer wide SarahHaase Overview PowerUser">
<div class="courseHeader CHblue">
<div class="courseAuthor">
<img src="http://api.ning.com/files/ugK2q4WSACaJdElxo2Gl25Pmer0PPBk1T2LRdI9dyBmraE6RP4vZK1FU*k83f3-q2YLvF5moCOGjYozMoSWSArLLhX5cx0Zx/1027667601.jpeg?xgip=4%3A454%3A1819%3A1819%3B%3B&width=184&height=184&crop=1%3A1" />
</div>
</div>
<p class="courseTitle blue">SP13-324: Creating Effective Business Process Solutions</p>
<p><strong>Author: Sarah Haase</strong></p>
<p>Are you caught in an infinite loop of overgrown, outdated processes? We’ll explore common process engineering methodologies, outline the “universal truths” that will help you relate to your business users and expose the “forgotten layer of content management” that exists at most organizations.</p>
</div>
</a>
<a class="courseLink" href="http://sharepoint-videos.com/module-1/bricks-and-paint-key-concepts-and-foundational-features-to-quickly-build-great-sharepoint-sites/"><div class="courseContainer wide GerryBrimacombe Overview InformationWorker">
<div class="courseHeader CHyellow">
<div class="courseAuthor">
<img src="http://lightlever.ca/wp-content/uploads/2015/06/Gerry2-280x420.jpg" />
</div>
</div>
<p class="courseTitle yellow">SP13-325: Key Concepts to Quickly Build Great SharePoint Sites </p>
<p><strong>Author: Gerry Brimacombe</strong></p>
<p>If SharePoint is the foundation to great collaboration sites, then lists and libraries are the bricks and mortar. Join Gerry Brimacombe as he builds your knowledge from the ground up. Key SharePoint lists and libraries will be discussed and real world applications demonstrated in this high powered session.</p>
</div>
</a>
</div>

I went with Chris' suggestion and deferred the hide based on non-matching elements.
function ApplyFilters() {
var effect = 'magictime swap';
var reseteffect = 'magictime twisterInUp';
var courses = jQuery(".courseContainer");
jQuery("p.zeroResults").text("").css("margin-top", "0px");
courses.removeClass(effect);
courses.removeClass(reseteffect);
var speakerFilter = jQuery("#author_filter").val();
var levelFilter = jQuery("#level_filter").val();
var audienceFilter = jQuery("#audience_filter").val();
var Office365Filter = GetOffice365Value();
var classFilter = speakerFilter + levelFilter + audienceFilter + Office365Filter;
courses.not(classFilter).hide();
if (classFilter == "") {
courses.hide().addClass(effect).show();
} else {
var count = jQuery(classFilter);
if (count.length > 0) {
jQuery(classFilter).show();
} else {
jQuery("p.zeroResults").text("No Results Match Your Select. Please 'Reset' your filters").css("margin-top", "-50px");
}
}

Javascript and jquery working fine on jsfiddle but not locally

I have my html, css and jquery working totally fine on jsfiddle http://jsfiddle.net/mwjqpqra/4/
<!DOCTYPE HTML>
<html>
<head>
<title>World Wide Web</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="java.js"></script>
<div id="header">
<div>
<div class="logo">
Profect WWW
</div>
<ul id="navigation">
<li class="active">
What
</li>
<li>
Who
</li>
<li>
How
</li>
<li>
When
</li>
<li>
Awesome!
</li>
</ul>
</div>
</div>
<div id="adbox">
<div class="clearfix">
<img src="images/box.png" alt="Img" height="342" width="368">
<div>
<h1>WW What?</h1>
<h2>Project World Wide Web.</h2>
<p>
The World Wide Web (abbreviated as WWW or W3, commonly known as the Web) is a system of interlinked hypertext documents that are accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them via hyperlinks. <span>Explore!<b>Don’t worry it’s for free</b></span>
</p>
</div>
</div>
</div>
<div id="contents">
<div id="tagline" class="clearfix">
<h1 id="whomade">Who made it ? O.o</h1>
<section id="who">
<div>
<p>
Tim Berners-Lee, a British computer scientist and former CERN employee,and Belgian computer scientist Robert Cailliau are considered the inventors of the Web.
</p>
<p>
On March 12, 1989, Berners-Lee wrote a proposal for what would eventually become the World Wide Web.</p>
<p>
The 1989 proposal was meant for a more effective CERN communication system but Berners-Lee eventually realised the concept could be implemented throughout the world.
</p>
</div>
<div>
<p>
Berners-Lee and Belgian computer scientist Robert Cailliau proposed in 1990 to use hypertext "to link and access information of various kinds as a web of nodes in which the user can browse at will",and Berners-Lee finished the first website in December of that year.
</p>
<p>
The first test was completed around 20 December 1990 and Berners-Lee reported about the project on the newsgroup alt.hypertext on 7 August 1991.
</p>
<p>
Wix is an online website builder with a simple drag & drop interface, meaning you do the work online and instantly publish to the web.
</p>
</div>
</section>
</div>
<div id="slider-wrapper">
<div class="inner-wrapper">
<input checked type="radio" name="slide" class="control" id="Slide1"/>
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2"/>
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3"/>
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4"/>
<label for="Slide4" id="s4"></label>
<div class="overflow-wrapper">
<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="clearfix">
<div id="connect">
</div>
<p>
© 2025 Dark Virtuality.
</p>
</div>
</div>
</body>
</html>
Java.js
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
But the webpage doesn't even seem to pick up the .js code and jquery and java.js don't work locally on my PC. I have already tried on different browsers such as chrome, firefox developer edition, and even IE but no luck

The issue is clearly with
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Because you are running it locally, // does not link to where you want it to link. you need to manually either use http: or https:
So... use
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If it works on JSFiddle but not on your local host, then this is the problem.
I did not ready any of your code because I spotted this.
read more about it here if you would like

Issues with toggle and jQuery

Example:
http://jsfiddle.net/qKMH8/141/
If I remove the .next(), it works of course, but it toggles every answer. I just want the one for that specific section to toggle. Any ideas?
JavaScript:
$(document).ready(function () {
$('.question').click(function () {
$(this).next('.answer').toggle();
});
});
HTML
<section class="question active">
<header>
<h2>What can I create a fundraising campaign for?</h2>
<i class="fa fa-minus-circle"></i>
</header>
<p class="answer">We allow campaigns of almost any nature, however, the following are excluded: Child beauty pageants, pornography, racist content, some religious themes, and illegal activity. If you have a question about what you can fundraise for, please contact us here.</p>
</section>
<section class="question">
<header>
<h2>What can I create a fundraising campaign for?</h2>
</header>
<p class="answer">We allow campaigns of almost any nature, however, the following are excluded: Child beauty pageants, pornography, racist content, some religious themes, and illegal activity. If you have a question about what you can fundraise for, please contact us here.</p>
</section>
<section class="question">
<header>
<h2>What can I create a fundraising campaign for?</h2>
</header>
<p class="answer">We allow campaigns of almost any nature, however, the following are excluded: Child beauty pageants, pornography, racist content, some religious themes, and illegal activity. If you have a question about what you can fundraise for, please contact us here.</p>
</section>
<section class="question">
<header>
<h2>What can I create a fundraising campaign for?</h2>
</header>
<p class="answer">We allow campaigns of almost any nature, however, the following are excluded: Child beauty pageants, pornography, racist content, some religious themes, and illegal activity. If you have a question about what you can fundraise for, please contact us here.</p>
</section>
<section class="question">
<header>
<h2>What can I create a fundraising campaign for?</h2>
</header>
<p class="answer">We allow campaigns of almost any nature, however, the following are excluded: Child beauty pageants, pornography, racist content, some religious themes, and illegal activity. If you have a question about what you can fundraise for, please contact us here.</p>
</section>

$(this).find('.answer').toggle();

Categories