Skip to content
Snippets Groups Projects
Commit 525d114f authored by Connor Brock's avatar Connor Brock
Browse files

Added JS function to toggle the drop down menu

parent d4d5088b
No related branches found
No related tags found
1 merge request!41Resolve "As a convenience enthusiast, I want a drop down menu to be able to quickly scan QR codes I find along my dragon trail so that I may continue on my adventure without disruption."
Hide whitespace changes
Inline Side-by-side
src/main/resources/static/css/dragonstaless.css
+ 2
− 1
View file @ 525d114f
......@@ -17,7 +17,7 @@ body{
cursor: pointer;
}
.dropdown a{
.dropdown option{
display: block;
color: #393433;
text-decoration: none;
......@@ -25,6 +25,7 @@ body{
}
.dropdown .content{
display: none;
position: absolute;
background-color: #D3B69C;
min-width:100px;
......
src/main/resources/static/scripts/DTscript.js
+ 5
− 0
View file @ 525d114f
var getQR = function (){
// document.getElementById("qrCodeScanner").style.cursor = "pointer";
window.location.href = "/QRScan";
}
function toggleDropDown(){
var dropdownList = document.getElementById("dropdownList")
dropdownList.style.display = (dropdownList.style.display === "block") ? "none" : "block"
}
\ No newline at end of file
src/main/resources/templates/dragonstale/index.html
+ 37
− 40
View file @ 525d114f
......@@ -11,46 +11,43 @@
</head>
<body>
<header th:insert="fragments/Templating.html :: header"></header>
<!-- As this predefined trail will be accessible from multiple different towns, this thymeleaf element will display the town the user is currently trying to access and display it accordingly. <span th:text="${townName}"> -->
<div>
<h1> Welcome, to a dragon's tale! </h1>
<img th:src="@{/images/trails/dragonstalehome.png}" alt="Image of a dragon" class="images">
<h2> Discover the mystery of the dragon, track its location and follow it throughout the town of to discover a prize! </h2>
</div>
<div>
<p>
Adventurers... embark through mystical historical landmarks to ultimately discover the lair of the dragon.
Legend has it that within this ominous lair, mighty dragons, guardians of ancient wisdom and treasures untold lay....
</p>
</div>
<div class="dropdown">
<button class="dropdownButton">There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </button>
<ul th:each="item : ${landmarksList}" id="tabBox">
<li class="content">
<a id="#" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a>
<button id="qrCodeScanner" onclick="getQR()">Click here to scan a QR code for: <span th:text="${item.landmarkName}">Landmark Name Here</span></button>
</li>
</ul>
</div>
<!-- Need to mark each element to an ID then loop through them. -->
<!-- <div id="listOfLandmarks">-->
<!-- <p th:each="item : ${landmarksList}">-->
<!-- <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>-->
<!-- </p>-->
<!-- </div>-->
<div>
<h3> Begin or Continue your hunt!</h3>
<button type="button" id="begin">Click here!</button>
</div>
<!-- As this predefined trail will be accessible from multiple different towns, this thymeleaf element will display the town the user is currently trying to access and display it accordingly. <span th:text="${townName}"> -->
<div>
<h1> Welcome, to a dragon's tale! </h1>
<img th:src="@{/images/trails/dragonstalehome.png}" alt="Image of a dragon" class="images">
<h2> Discover the mystery of the dragon, track its location and follow it throughout the town of to discover a prize! </h2>
</div>
<div>
<p>
Adventurers... embark through mystical historical landmarks to ultimately discover the lair of the dragon.
Legend has it that within this ominous lair, mighty dragons, guardians of ancient wisdom and treasures untold lay....
</p>
</div>
<div class="dropdown">
<button class="dropdownButton" onclick="toggleDropDown()" >There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </button>
<ul id="dropdownList">
<li class="content" th:each="item : ${landmarksList}">
<a class="option" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a>
<button class="option" id="qrCodeScanner" onclick="getQR()">Click here to scan a QR code for: <span th:text="${item.landmarkName}">Landmark Name Here</span></button>
</li>
</ul>
</div>
<!-- Need to mark each element to an ID then loop through them. -->
<!-- <div id="listOfLandmarks">-->
<!-- <p th:each="item : ${landmarksList}">-->
<!-- <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>-->
<!-- </p>-->
<!-- </div>-->
<div>
<h3> Begin or Continue your hunt!</h3>
<button type="button" id="begin">Click here!</button>
</div>
<div th:insert="fragments/Templating.html :: footer"></div>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment