use <a> tag as button for dockbuttons and webmenu buttons instead of mouseup event

css/dock-buttons.css

@@ -48,4 +48,21 @@
 
 .dockButtonImage {
 	background-size: 'cover';
-}
+}
+
+/*The a href container/main dock button container*/
+.dockLink {
+	/*Act as div*/
+	display: block;
+
+	/*Remove outlines*/
+	text-decoration: none;
+	outline: 0;
+	border: none;
+	-moz-outline-style: none;
+
+	/*Disable dragging*/
+	user-select: none;
+	user-drag: none;
+	-webkit-user-drag: none;
+}

css/web-menu.css

@@ -242,4 +242,21 @@
 		-webkit-transform: scale(1);
 		transform: scale(1); 
 	}
+}
+
+/*The a href container/main web menu button container*/
+.webMenuLink {
+	/*Act as div*/
+	display: block;
+
+	/*Remove outlines*/
+	text-decoration: none;
+	outline: 0;
+	border: none;
+	-moz-outline-style: none;
+
+	/*Disable dragging*/
+	user-select: none;
+	user-drag: none;
+	-webkit-user-drag: none;
 }

js/centered-box.js

@@ -22,6 +22,4 @@ const toggleCenteredBox = () => {
     	// Show Web menu
     	showCenteredBox();
     }
-   
-	console.log('toggle web menu');
 }

js/dock-buttons.js

@@ -1,12 +1,5 @@
 var dock = document.getElementById('dock');
 
-// Create mouse event for passed div
-const addMouseUpEvent = (li, url) => {
-    li.onmouseup = () => {
-        window.location.href = encodeURI(url);
-    }
-}
-
 // Generate button from user
 const generateFromManual = (id, icon, callback) => {
 
@@ -28,10 +21,6 @@ const generateFromManual = (id, icon, callback) => {
     dock.appendChild(dockButton);
 }
 
-// Create callback event for onmouse up
-const addCallbackEvent = (element, callback) => {
-    element.onmouseup = callback;
-}
 
 // Generate buttons from array
 const generateFromList = () => {
@@ -42,10 +31,13 @@ const generateFromList = () => {
         var icon = dockSites[i].icon;
         var url = dockSites[i].url;
 
+        var aDock = document.createElement('a');
+        aDock.className = 'dockLink';
+        aDock.href = url;
+
         var dockButton = document.createElement('div');
         dockButton.id = 'button' + i;
         dockButton.className = 'dockButton';
-        addMouseUpEvent(dockButton, url);
 
         var buttonImage = document.createElement('div');
         buttonImage.id = 'buttonImage' + i;
@@ -55,7 +47,8 @@ const generateFromList = () => {
 
         // Append divs
         dockButton.appendChild(buttonImage);
-        dock.appendChild(dockButton);
+        aDock.appendChild(dockButton);
+        dock.appendChild(aDock);
     };
 }
 

js/web-menu.js

@@ -9,16 +9,11 @@ let webItemFocus;
 let webListIndex = 0;
 
 // Create mouse event for passed li
-const createMouseUpEvent = (li, url) => {
+const createCallback = (li, url) => {
 	// Create a callback property for the passed li
 	li.callback = () => {
 		window.location.href = encodeURI(url);
 	}
-
-	// Create onmouseup event for the li
-	li.onmouseup = () => {
-		li.callback();
-	}
 }
 
 // Sort list alphabetically
@@ -41,7 +36,11 @@ const populateWebMenu = () => {
 		var li = document.createElement('li');
 
 		// Add mouseup event
-		createMouseUpEvent(li, url);
+		createCallback(li, url);
+
+		var aWebLink = document.createElement('a');
+		aWebLink.className = 'webMenuLink';
+		aWebLink.href = url;
 
 		// Create an outer div, child of li
 		let webItemDiv = document.createElement('div')
@@ -79,7 +78,9 @@ const populateWebMenu = () => {
 		webItemBody.appendChild(webItemIconContainer);
 		webItemBody.appendChild(webItemName);
 
-		li.appendChild(webItemDiv);
+		aWebLink.appendChild(webItemDiv);
+
+		li.appendChild(aWebLink);
 		webMenuList.appendChild(li);
 	}