jsViewHKL/ccp4web.html at master · choiboy92/jsViewHKL · 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
135
136
137
138
139
140
141
<html>
<head>
	<style>
        h1
		{
			font-family: Arial;
		}

		div {
            padding:10px;
            width:600px;
            background:#fff;
        }


        .tabs li {
            list-style:none;
            display:inline;
        }

        .tabs a {
            padding:10px 20px;
            display:inline-block;
            background:#66cccc;
            color:#fff;
            text-decoration:none;
			font-family: Arial;
        }

        .tabs a.active {
            background:#fff;
            color:#000;
        }
    </style>
    <h1>
        CCP4 online visualiser TEST VERSION
    </h1>
    <!--call upon the jquery CDN from Google-->
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<!--D3 link -->
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<!--source code for ajax + jquery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="d3.v4.min.js"></script>

	<p>
		Please select file to be put into table format
		<br>
    </p>

	<input type="file" id="mtz_file">
    <!-- after clicking, this where I should try and implement a dynamic table-->
	<button type="button">Press to begin uploading</button>

	<script language="javascript" type="text/javascript">
    $(document).ready(function()
	{
		$("button").click(function()
		{
			$("#tab1").load("mtzmock.txt", function(responseTxt, statusTxt, xhr)
			{
				if(statusTxt == "success")
					alert("File uploaded successfully!");
				if(statusTxt == "error")
					alert("Error retrieving file");
			});
		});
        $('ul.tabs').each(function ()
        {
            var $active, $content, $links = $(this).find('a');
			$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
            $active.addClass('active');

			$content = $($active[0].hash);
			// Hide others
			$links.not($active).each(function ()
			{
				$(this.hash).hide();
			});

			// Bind the click event handler
			$(this).on('click', 'a', function(e)
			{
				// Make the old tab inactive.
				$active.removeClass('active');
				$content.hide();

				// Update the variables with the new link and content
				$active = $(this);
				$content = $(this.hash);

				// Make  tab active.
				$active.addClass('active');
				$content.show();
				e.preventDefault();
			});
        });
    });
    </script>
</head>
<body>
	<p>
		<!--Horizontal line across page-->
		<hr>
	</P>
		<!--This is where i make my tabss-->
        <ul class ='tabs'>
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab 3</a></li>
        </ul>
        <div id="tab1">
            <!-- Things that go inside tab 1-->
            <h1>
                SECTION 1
            </h1>
            <p>
                This is the text for tab 1
            </p>
        </div>
        <div id="tab2">
            <h1>
                SECTION 2
            </h1>
            <!-- Things that go inside tab 2-->
            <p>
                This is the text for tab 2
            </p>
        </div>
        <div id="tab3">
            <h1>
                SECTION 3
            </h1>
            <!-- Things that go inside tab 3-->
            <p>
                This is the text for tab 3
            </p>
        </div>

</body>
</html>