ProjectSeven/assignment3.html at master · SherkinOne/ProjectSeven · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<!--WORKING ADDRESS : https://cs1.ucc.ie/~km34/assignment3.html -->
<html lang="en-UK">
    <head>
        <link rel="stylesheet" href="cmsstyle.css" />
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title ></title>
        <script
			  src="https://code.jquery.com/jquery-3.3.1.min.js"
			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			  crossorigin="anonymous"></script>
     </head>
    <body >
    	<script>

   	$(document).ready(function () {

    		cssSheet=true;
    		cSS=false;

    		// This is when the page is loaded
		$.getJSON("home.json", function(result){
				fullText=result.full;
				abstractText=result.abstract;
                $("#content").append(result.full);
                $(document).attr("title", result.title);
                toggle=true;});


		  // This is the buttons in the nav bar
		$(".a").click (function(e){
		$.getJSON(e.target.id, function(result){
				fullText=result.full;
				abstractText=result.abstract;
                $("#content").text(result.full);
               $(document).attr("title", result.title);
                toggle=false;
          	      });
			});


			// This is the different text views
		$("#toggleSwitch").click (function(e){
				if (toggle==false) {
				 $("#content").text(fullText);
				}
				else {
				 $("#content").text(abstractText);
				}
				 toggle=!toggle;
			});

			// This changes the stylesheets
			$("#changeCSS").click (function(){
			 cSS=!cSS;
			if (cSS==true) {
				$("link[rel=stylesheet]").attr({href : "cmsstyle2.css"});	 }
			else {
				$("link[rel=stylesheet]").attr({href : "cmsstyle.css"}); }

				});


			// This changes the size of the font in the text box
  		$("#cmsstyleOne").click (function(e){
  		if (cssSheet==true) {
			$("#content").css({"font-size": "200%"});
			}
			else {
			$("#content").css({"font-size": "100%"});
			}
			cssSheet=!cssSheet;
			});


		// The ajax functions
		$( document ).ajaxSuccess(function(  ) {
  			$("#messages" ).text( "Successful Request!" );
  			$("#messages").css({"color": "black"})
					});

    	$( document ).ajaxError(function(event, xhr, opt ) {
  			$( "#messages" ).text("Error : " + xhr.status + " " + xhr.statusText );
  			$("#messages").css({"color": "red"})
					});

		$( document ).ajaxStart(function( ) {
  			$( "#messages" ).text( "Loading....." );
  			$("#messages").css({"color": "green"})
					});

    	 });


    	</script>
        <header>

        </header>

		<nav>
			<img src="uccLogo.png" />
			<button type="button" class="a" id="home.json"> Home </button>
			<button type="button" class="a" id="studies.json">Studies </button>
			<button type="button" class="a" id="about.json"> About Me </button>
			<button type="button" class="a" id="links.jsont">Links </button>

		</nav>
		<section id="content">

		</section>
		<section id="toggles">
			<button type="button" id="cmsstyleOne" >
				Change font
			</button>
			<button type="button" id="toggleSwitch">
				Toggle information
			</button>

			<button type="button" id="changeCSS">
				Change CSS
			</button>
		</section>
		<section id="messages">
		</section>

		<footer>

		</footer>
    </body>
</html>