Ad

What Should The "rel" Be For This JavaScript?

- 1 answer

It all works fine in the preview here, but when I have it running in any other software, the JavaScript doesn't link - I know this because of two things:

  1. Its exactly the same with or without the JavaScript being linked
  2. It just doesn't do what it is meant to do - the JavaScript is meant to make it that all the items come down when you click on the menu button, but none of that is happening here.

I have tried making rel="script", but that doesn't do anything.

var open = false;

function Drop(n) {
	var i;
	if (open == false) {
		for (i = n; i < 5; i++) {
			Drp(i)
		}
		open = true
	} else if (open == true) {
		for (i = n; i < 5; i++) {
			Cls(i)
		}
		open = false
	}
}

function Drp(n) {
	var elem = document.getElementsByClassName("menu-con")[n];
	var pos = -1 * window.innerHeight - n * 100;
	var id = setInterval(frame, 5);

	function frame() {
		if (pos >= -10) {
			clearInterval(id);
			elem.style.top = 0 + 'px';
		} else {
			pos += 10;
			elem.style.top = pos + 'px';
		}
	}
}

function Cls(n) {
	var elems = document.getElementsByClassName("menu-con")[n];
	var poss = 0;
	var ids = setInterval(frames, 5);

	function frames() {
		if (poss <= -1 * window.innerHeight) {
			clearInterval(ids);
			elems.style.top = -1 * window.innerHeight + 'px';
		} else {
			poss += -7 - n * 2;
			elems.style.top = poss + 'px';
		}
	}
}
* {box-sizing: border-box;max-width: 100%;font-family: 'Gruppo', cursive;}
html,body {height: 100%;margin: 0;padding: 0;background:rgb(240,240,240)}

.menu-icon {width: 50px;height: 50px;position: fixed;top: 0;right: 0;margin: 10px 15px;transform:scale(0.8);padding: 0;cursor: pointer;z-index:20}
.menu-bar {width: 50px;height: 5px;background: rgb(190,190,190);position: absolute;transition: all 0.3s;}
.menu-bar1 {margin-top: 9px}
.menu-bar2 {margin-top: 23px}
.menu-bar3 {margin-top: 37px}
.menu-icon.hover .menu-bar1 {-webkit-transform: rotate(45deg) scaleX(0.7);margin-top: 22px;}
.menu-icon.hover .menu-bar2 {opacity: 0}
.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}

.menu {width: 100%;height: 100%;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.menu-con {-webkit-flex-grow: 1;flex-basis: 0;flex-grow: 1;display: -webkit-flex;display: flex;-webkit-justify-content:space-around;position:relative;top:-100%;transition:all 0.5s}
.menu-con p:before {content: ""; display: block;position:absolute;top:0;left:0;z-index:1;width:100%;height: 100%;opacity: 1;background: rgba(0,0,0,0);-webkit-transition: all 0.5s;transition: all 0.5s;}
.menu-con:hover p:before {background: rgba(0,0,0,0.2)}
.menu-con p {height:20px;-webkit-align-self:center;color:white;font-size:25px;z-index:2;cursor:pointer}
@media screen and (max-width: 600px) {.menu-con {min-width:50%}}
@media screen and (max-width: 350px) {.menu-con {min-width:100%}}
<link href=style.css rel="stylesheet">
<link target="_blank" rel="nofollow noreferrer" href="main.js">
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)">
	<div class="menu-bar menu-bar1"></div>
	<div class="menu-bar menu-bar2"></div>
	<div class="menu-bar menu-bar3"></div>
</div>
<div class="menu">
	<div class="menu-con" style="background:IndianRed;"><p>HOME</p></div>
  <div class="menu-con" style="background:rgb(160,160,170);"><p>GALLERY</p></div>  
  <div class="menu-con" style="background:mediumseagreen;"><p>PRODUCTS</p></div> 
  <div class="menu-con" style="background:teal;"><p>ABOUT</p></div> 
  <div class="menu-con" style="background:rgb(70,70,70);"><p>CONTACT</p></div>
</div>

Ad

Answer

You can include your JavaScript file in the following ways - These examples show how to import script using the <script> element in both HTML4 and HTML5 (Script element - Basic usage):

<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="main.js"></script>

My suggestion would be to go with the following HTML5 one:

<script src="main.js"></script>

The HTML script element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code.

Source: The Script element

Link is used for style sheets, you can read further here: HTML link Tag

Ad
source: stackoverflow.com
Ad