https://github.com/heenasurve/alternative-experience-for-department-website

Built as a Single Page Application, this website re-imagines and presents all the information on the Information Sciences website at RIT. The information was obtained from the Department API Reference - a REST service that returns JSON. Written entirely in JavaScript/JQuery, HTML and CSS it was built this way, to showcase how less is more.
https://github.com/heenasurve/alternative-experience-for-department-website

ajax javascript jquery-plugin rest-client

Last synced: 22 days ago
JSON representation

Built as a Single Page Application, this website re-imagines and presents all the information on the Information Sciences website at RIT. The information was obtained from the Department API Reference - a REST service that returns JSON. Written entirely in JavaScript/JQuery, HTML and CSS it was built this way, to showcase how less is more.

• Host: GitHub
• URL: https://github.com/heenasurve/alternative-experience-for-department-website
• Owner: heenasurve
• Created: 2018-02-23T03:55:01.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-23T04:09:09.000Z (almost 7 years ago)
• Last Synced: 2024-11-13T11:19:41.048Z (3 months ago)
• Topics: ajax, javascript, jquery-plugin, rest-client
• Language: JavaScript
• Size: 4.22 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Alternative-Experience-for-Department-Website

Built as a Single Page Application, this website re-imagines and presents all the information on the Information Sciences website at RIT.

The information was obtained from the Department API Reference - a REST service that returns JSON.

Written entirely in JavaScript/JQuery, HTML and CSS it was built this way, to showcase how less is more.

Site URL (hosted on RIT servers) : https://people.rit.edu/hfs7520/ISTE754/Jquery%20Website/index.html

JQuery Plugins used: 

	1. Mmenu - creates a hierarchical menu that links to the various sections on the page

		Where: Top left - on the page header, opens on clicking the hamburger icon up there

		What it does: - allows you to navigate (slide up and down) to the selected section/subsection, subsections on the menu are accessible on clicking the > icon on the right of the section name.

	

	2. Backstretch - Stretches an image to fit a page or a block level element, resized when the window/element size changes

		Where: The image is on the top of the page, behind the About Section, resized when the window is resized

	

	3. Featherlight - JQuery Lightbox

		Where: across sections on the page - Degrees, Courses under Undergraduate Minors, Research and Student Resources

		What it does: opens up a lightbox with information when you click on 

			a.Links to courses offered under every Minor in the Undergraduate Minors Section

			b.Any option under the Research Section

			c.Any option under the Resources Section

	

	4. Gridster - Multi-column grid that allows you to play around with draggable elements

		Where: in the People section 

		What it does: - allows you to move around the people "grid cells" and place them in a self adjusting grid. Clicking opens up a dialog(modal) that displays some information regarding the person, however you should be able to drag them around.

	

	5. jsGrid - JQuery data grid control with support for insertion, editing, paging and sorting.

		Where: in the Employment Section

		What it does:  displays the co-op and employment information in a grid that is sortable on any column. Pagination at the bottom of the table allows you to go over all of the data.

    

Other JQuery effects/widgets:

	  JQuery slidedown - Clicking on the elements under the Degrees section (Graduate, Undergraduate, Graduate Advanced Certificates), reveals concentrations that slide down and are hidden on selecting a different element.

    

	  Jquery Dialog - Cliking on the people cells under the People section displays a dialog with the available details.