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]
}]
}
});
If I add an alert in the page head the alert shows up normally and after clicking on OK the website loads, but when I move the alert into the end of the body element the webpage (according to YT videos) should load immediately but it doesn't. It still waiting on me on clicking "OK".
So where I did mistake?
<body>
<div id="contact-us">
<h2>Contact Us</h2>
<p>You can contact Mr Green in various ways ...</p>
<div class="contact-method">
<h3>By Phone</h3>
<p>222-222-FISH</p>
</div>
<div class="contact-method">
<h3>By Email</h3>
<p>iammrgreen#green.com</p>
</div>
<div class="contact-method">
<h3>By carrier pidgeon</h3>
<p>To do this, order your podgeon at www.mrgreenspidgeonemporium.com</p>
</div>
</div>
Go to top
<script>
alert("Yo Ninja, welcome to my website!");
</script>
</body>
You can do an experiment for example with setTimeout.
In this snippet if the timeout is too small the alert will appear before anything is painted on the screen, slightly bigger and the whole screen gets painted before the alert appears. It doesn't happen in bits.
<body>
<div id="contact-us">
<h2>Contact Us</h2>
<p>You can contact Mr Green in various ways ...</p>
<div class="contact-method">
<h3>By Phone</h3>
<p>222-222-FISH</p>
</div>
<div class="contact-method">
<h3>By Email</h3>
<p>iammrgreen#green.com</p>
</div>
<div class="contact-method">
<h3>By carrier pidgeon</h3>
<p>To do this, order your podgeon at www.mrgreenspidgeonemporium.com</p>
</div>
</div>
Go to top
<script>
function afterwait() {
alert("Yo Ninja, welcome to my website!");
}
setTimeout(afterwait, 10);
</script>
</body>
I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>
I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.
Trying to implement a section with Zurb Foundation 4.3.2. I've made sure to include the right couple of js and css files, and initialize foundation in the js script, but the section continues to collapse all the content and buttons together. The first section/tab doesn't show up either.
EDIT: Here's a JS Fiddle: http://jsfiddle.net/ethanova/R2SdH/ (my first, so if I performed some kind of worst practice, let me know)
After making the JSFiddle, I realized that it's working correctly on smaller dpi screens (it looks alright in the small area JSFiddle provides, even if clicking the tabs isn't working - I checked with my actual code and making the browser window smaller switches the section to Accordion and it works great). So it seems that it's only on the larger screen sizes when it reverts to Tabs is when the section collapses and doesn't work.
Any ideas on what's going wrong? Thanks guys.
<!-- foundation zurb -->
<link rel="stylesheet" href="./css/foundation.min.css">
<link rel="stylesheet" href="./css/normalize.css">
<!-- JAVASCRIPT -->
<script src='../../js/vendor/jquery.js'></script>
<!-- zurb foundation -->
<script src="../../js/foundation.min.js"></script>
<script src="../../js/vendor/custom.modernizr.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<div class='row'>
<div class='small-12 columns'>
123 Street Name <br /> City, ST Zip <br />
</div>
</div>
<div class='row'>
<div class='large-8 columns'>
<div class="section-container auto" data-section data-section-resized>
<section class="active">
<p class="title" data-section-title>Details</p>
<div class="content" data-section-content>
<p>Things like Comments, Area, Use Type, Current Use, Sqft, Taxes, Value, Status</p>
</div>
</section>
<section>
<p class="title" data-section-title>Improvements</p>
<div class="content" data-section-content>
<p>Any improvements data</p>
</div>
</section>
<section>
<p class="title" data-section-title>Mortgage</p>
<div class="content" data-section-content>
<p>Mortage data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lease</p>
<div class="content" data-section-content>
<p>Lease data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lien</p>
<div class="content" data-section-content>
<p>Lien data.</p>
</div>
</section>
</div>
</div>
<div class='large-4 columns'>
Map Goes Here
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
Related people
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
Related properties
</div>
</div>
After some more testing I figured it out. I downloaded the source code from their Section page and started inserting my code trying to get it to work. The reason I got here in the first place was because my section disappeared at one point and another stackoverflow answer said just add "data-section-resized" to the section container div. Well, don't. That got it back to being invisible. I had removed some js from my header to try to closer match theirs, and it was a mistake. This is what my section and header looks like now:
Header:
<!-- foundation zurb -->
<link rel="stylesheet" href="../../css/foundation.min.css">
<link rel="stylesheet" href="../../css/normalize.css">
<link rel="stylesheet" href="../../css/general_foundicons.css">
<!-- zurb foundation -->
<script src="../../js/foundation/foundation.js"></script>
<script src="../../js/foundation/foundation.section.js"></script>
<script src="../../js/vendor/custom.modernizr.js"></script>
Supposedly, foundation.min.js includes all the others like section. I can confirm if you try to replace foundation.js and foundation.section.js with foundation.min.js it will not work. If you keep section.js and change to foundation.js to foundation.min.js it will not work. You have to have foundation.js and foundation.section.js.
Section:
<div class='row'>
<div class='large-8 columns'>
<div class="section-container auto" data-section>
<section class="active">
<p class="title" data-section-title>Details</p>
<div class="content" data-section-content>
<p>Things like Comments, Area, Use Type, Current Use, Sqft, Taxes, Value, Status</p>
</div>
</section>
<section>
<p class="title" data-section-title>Improvements</p>
<div class="content" data-section-content>
<p>Any improvements data</p>
</div>
</section>
<section>
<p class="title" data-section-title>Mortgage</p>
<div class="content" data-section-content>
<p>Mortage data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lease</p>
<div class="content" data-section-content>
<p>Lease data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lien</p>
<div class="content" data-section-content>
<p>Lien data.</p>
</div>
</section>
</div>
</div>
<div class='large-4 columns'>
Map Goes Here
</div>
</div>
I am trying to use jQuery accordion widget. I want to use a common javascript code inside all the accordion section. For e.g I am trying to make a tab view inside every accordion section. The tab view is handled through an external javascript file created by me. Also I am using images slideshow inside every section of the accordion.It works for the a single section only. Whenever i try to paste the same html code in the next section of the accordion , javascript does not execute. The accordion still works. Waiting for your suggestions.
This is the html code
<div id="contentList"><h3 class="accHead" onclick="initAll('FoodCheck')">Food Check</h3>
<div class="accContent">
<ul class="menuHoriz">
<li>What ? </li>
<li>How ? </li>
<li>Who ? </li>
<li>Screenshots </li>
</ul>
<div id="what" class="content">
<p>
Details about the projects<br /> What. description
</p>
</div>
<div id="how" class="content">
<p>
Details about the projects<br /> How description
</p>
</div>
<div id="who" class="content">
<p>
Details about the projects<br /> Who description
</p>
</div>
<div id="screenshots" class="content">
<p>
<h2>FoodCheck Snapshots</h2>
<img height="468" width="250" src="images/FoodCheck/Screen_1.png" alt="First screen" id="slideshow" />
<div id="imgText"> </div>
<br clear="all" />
<form action="#">
<input type="button" id="prevLink" value="« Previous" />
<input type ="button" id="startAgain" value="Start Again">
<input type="button" id="nextLink" value="Next »" />
</form>
</p>
</div>
</div>
This is one of the section of accordion.
There are 3 more such sections. Each section has a Tabs (with id What, who, how, screenshots) in it which are controlled by an external javascript
In
<script type="text/javascript">
$(function() {
//set up the news accordion on the lower page
$("#contentList").accordion({ header: "h3", collapsible: true});
});
</script>
You will have to subscribe to element events and not use some global javascript functionality. Every acordion view can have various controls but they would need to be distinguished by either class or id attributes to attach to their events.
Some code would help of course. Can you provide some? but only relevant parts so ot won't be overwhelming.