JavaScript Menu GetId

Question

JavaScript Menu GetId

Navigation

#1 by (1 votes)

0

I have a menu that has a hoverline effect ("a line that runs down the clicked element!") with JavaScript, however it is created using getId by pulling the ID of the elements.

The challenge is to duplicate the menu keeping the 'hoverline' effect on the two, I'm breaking my head how can I keep the effect on two menus, I do not know if the best way is to get a way without using getId or if there is duplicate it while retaining element IDs.

Code:

var SETTINGS = {
    navBarTravelling: false,
    navBarTravelDirection: "",
	 navBarTravelDistance: 150
}

var colours = {
    0: "#867100",
    1: "#7F4200",
    2: "#99813D",
    3: "#40FEFF",
    4: "#14CC99",
    5: "#00BAFF",
    6: "#0082B2",
    7: "#B25D7A",
    8: "#00FF17",
    9: "#006B49",
    10: "#00B27A",
    11: "#996B3D",
    12: "#CC7014",
    13: "#40FF8C",
    14: "#FF3400",
    15: "#ECBB5E",
    16: "#ECBB0C",
    17: "#B9D912",
    18: "#253A93",
    19: "#125FB9",
}


document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");

// the indicator
var indicador = document.getElementById("indicador");

var trilho = document.getElementById("trilho");

// Set the indicator
moveIndicator(trilho.querySelector("[aria-selected=\"true\"]"), colours[0]);


// Handle setting the currently active link
trilhoContents.addEventListener("click", function(e) {
	var links = [].slice.call(document.querySelectorAll(".trilho_classe_Link"));
	links.forEach(function(item) {
		item.setAttribute("aria-selected", "false");
	})
	e.target.setAttribute("aria-selected", "true");
	// Pass the clicked item and it's colour to the move indicator function
	moveIndicator(e.target, colours[links.indexOf(e.target)]);
});


// var count = 0;
function moveIndicator(item, color) {
    var textPosition = item.getBoundingClientRect();
    var container = trilhoContents.getBoundingClientRect().left;
    var distance = textPosition.left - container;
	 var scroll = trilhoContents.scrollLeft;
    indicador.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
	// count = count += 100;
	// indicador.style.transform = "translateX(" + count + "px)";
	
    if (color) {
        indicador.style.backgroundColor = color;
    }
}

function determineOverflow(content, container) {
    var containerMetrics = container.getBoundingClientRect();
    var containerMetricsRight = Math.floor(containerMetrics.right);
    var containerMetricsLeft = Math.floor(containerMetrics.left);
    var contentMetrics = content.getBoundingClientRect();
    var contentMetricsRight = Math.floor(contentMetrics.right);
    var contentMetricsLeft = Math.floor(contentMetrics.left);
	 if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
        return "both";
    } else if (contentMetricsLeft < containerMetricsLeft) {
        return "left";
    } else if (contentMetricsRight > containerMetricsRight) {
        return "right";
    } else {
        return "none";
    }
}

* {
	box-sizing: inherit;
}

.menu_horizontal {
	position: relative;
	padding: 0 11px;
	box-sizing: border-box;
}

.trilho_classe {
    /* Make this scrollable when needed */
    overflow-x: auto;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* If JS present, let's hide the default scrollbar */
    .js & {
        /* Make an auto-hiding scroller for the 3 people using a IE */
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /* Remove the default scrollbar for WebKit implementations */
        &::-webkit-scrollbar {
            display: none;
        }
    }
	/* positioning context for advancers */
	position: relative;
	/*Crush the whitespace here*/
	font-size: 0;
}

.trilho_classe_Contents {
	float: left;
	transition: transform .2s ease-in-out;
	position: relative;
}

.trilho_classe_Contents-no-transition {
	transition: none;
}

.trilho_classe_Link {
	text-decoration: none;
	color: #888;
	/*Reset the font size*/
	font-size: 1.2rem;
	font-family: -apple-system, sans-serif;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid transparent;
	padding: 0 11px;
	& + & {
		border-left-color: #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}

.trilho_classe_Indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	width: 100px;
	background-color: transparent;
	transform-origin: 0 0;
	transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="menu_horizontal">
<nav id="trilho" class="trilho_classe">
    <div id="trilhoContents" class="trilho_classe_Contents">
        <a href="#" class="trilho_classe_Link" aria-selected="true">Chairs</a>
        <a href="#" class="trilho_classe_Link">Tables</a>
        <a href="#" class="trilho_classe_Link">Cookware</a>
        <a href="#" class="trilho_classe_Link">Beds</a>
        <a href="#" class="trilho_classe_Link">Desks</a>
        <a href="#" class="trilho_classe_Link">Flooring</a>
	<span id="indicador" class="trilho_classe_Indicator"></span>
    </div>
</nav>
</div>

javascript css javascript-eventos

asked by anonymous 02.09.2018 / 07:06

1 answer

PHP - Receive the ID of a value via select option $ _POST Calculating a date within the Model Django timedelta

score 1 · Accepted Answer

If you want to create another menu for other features, I think the best way is to use getId, however you will have to put unique ids to render. Even to create functions with parameters, but there comes a question of time x result .

var SETTINGS = {
    navBarTravelling: false,
    navBarTravelDirection: "",
	 navBarTravelDistance: 150
}

var colours = {
    0: "#867100",
    1: "#7F4200",
    2: "#99813D",
    3: "#40FEFF",
    4: "#14CC99",
    5: "#00BAFF",
    6: "#0082B2",
    7: "#B25D7A",
    8: "#00FF17",
    9: "#006B49",
    10: "#00B27A",
    11: "#996B3D",
    12: "#CC7014",
    13: "#40FF8C",
    14: "#FF3400",
    15: "#ECBB5E",
    16: "#ECBB0C",
    17: "#B9D912",
    18: "#253A93",
    19: "#125FB9",
}


document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");

// the indicator
var indicador = document.getElementById("indicador");

var trilho = document.getElementById("trilho");

// Set the indicator
moveIndicator(trilho.querySelector("[aria-selected=\"true\"]"), colours[0]);


// Handle setting the currently active link
trilhoContents.addEventListener("click", function(e) {
	var links = [].slice.call(document.querySelectorAll(".trilho_classe_Link"));
	links.forEach(function(item) {
		item.setAttribute("aria-selected", "false");
	})
	e.target.setAttribute("aria-selected", "true");
	// Pass the clicked item and it's colour to the move indicator function
	moveIndicator(e.target, colours[links.indexOf(e.target)]);
});


// var count = 0;
function moveIndicator(item, color) {
    var textPosition = item.getBoundingClientRect();
    var container = trilhoContents.getBoundingClientRect().left;
    var distance = textPosition.left - container;
	 var scroll = trilhoContents.scrollLeft;
    indicador.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
	// count = count += 100;
	// indicador.style.transform = "translateX(" + count + "px)";
	
    if (color) {
        indicador.style.backgroundColor = color;
    }
}

function determineOverflow(content, container) {
    var containerMetrics = container.getBoundingClientRect();
    var containerMetricsRight = Math.floor(containerMetrics.right);
    var containerMetricsLeft = Math.floor(containerMetrics.left);
    var contentMetrics = content.getBoundingClientRect();
    var contentMetricsRight = Math.floor(contentMetrics.right);
    var contentMetricsLeft = Math.floor(contentMetrics.left);
	 if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
        return "both";
    } else if (contentMetricsLeft < containerMetricsLeft) {
        return "left";
    } else if (contentMetricsRight > containerMetricsRight) {
        return "right";
    } else {
        return "none";
    }
}

var indicador2 = document.getElementById("indicador2");
var trilho2 = document.getElementById("trilho2");

var colours2 = {
    0: "#867100",
    1: "#7F4200",
    2: "#99813D",
    3: "#40FEFF",
    4: "#14CC99",
    5: "#00BAFF",
    6: "#0082B2",
    7: "#B25D7A",
    8: "#00FF17",
    9: "#006B49",
    10: "#00B27A",
    11: "#996B3D",
    12: "#CC7014",
    13: "#40FF8C",
    14: "#FF3400",
    15: "#ECBB5E",
    16: "#ECBB0C",
    17: "#B9D912",
    18: "#253A93",
    19: "#125FB9",
}

// var count = 0;
function moveIndicator2(item, color) {
    var textPosition = item.getBoundingClientRect();
    var container = trilhoContents2.getBoundingClientRect().left;
    var distance = textPosition.left - container;
	 var scroll = trilhoContents2.scrollLeft;
    indicador2.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
	// count = count += 100;
	// indicador.style.transform = "translateX(" + count + "px)";
	
    if (color) {
        indicador2.style.backgroundColor = color;
    }
}

// Set the indicator
moveIndicator2(trilho2.querySelector("[aria-selected=\"true\"]"), colours2[0]);


// Handle setting the currently active link
trilhoContents2.addEventListener("click", function(f) {
	var links = [].slice.call(document.querySelectorAll(".trilho_classe_Link2"));
	links.forEach(function(item) {
		item.setAttribute("aria-selected", "false");
	})
	f.target.setAttribute("aria-selected", "true");
	// Pass the clicked item and it's colour to the move indicator function
	moveIndicator2(f.target, colours2[links.indexOf(f.target)]);
});

* {
	box-sizing: inherit;
}

.menu_horizontal {
	position: relative;
	padding: 0 11px;
	box-sizing: border-box;
}

.trilho_classe {
    /* Make this scrollable when needed */
    overflow-x: auto;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* If JS present, let's hide the default scrollbar */
    .js & {
        /* Make an auto-hiding scroller for the 3 people using a IE */
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /* Remove the default scrollbar for WebKit implementations */
        &::-webkit-scrollbar {
            display: none;
        }
    }
	/* positioning context for advancers */
	position: relative;
	/*Crush the whitespace here*/
	font-size: 0;
}

.trilho_classe_Contents {
	float: left;
	transition: transform .2s ease-in-out;
	position: relative;
}

.trilho_classe_Contents-no-transition {
	transition: none;
}

.trilho_classe_Link {
	text-decoration: none;
	color: #888;
	/*Reset the font size*/
	font-size: 1.2rem;
	font-family: -apple-system, sans-serif;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid transparent;
	padding: 0 11px;
	& + & {
		border-left-color: #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}

.trilho_classe_Indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	width: 100px;
	background-color: transparent;
	transform-origin: 0 0;
	transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}

.trilho_classe_Link2 {
	text-decoration: none;
	color: #888;
	/*Reset the font size*/
	font-size: 1.2rem;
	font-family: -apple-system, sans-serif;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid transparent;
	padding: 0 11px;
	& + & {
		border-left-color: #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="menu_horizontal">
<nav id="trilho" class="trilho_classe">
    <div id="trilhoContents" class="trilho_classe_Contents">
        <a href="#" class="trilho_classe_Link" aria-selected="true">Chairs</a>
        <a href="#" class="trilho_classe_Link">Tables</a>
        <a href="#" class="trilho_classe_Link">Cookware</a>
        <a href="#" class="trilho_classe_Link">Beds</a>
        <a href="#" class="trilho_classe_Link">Desks</a>
        <a href="#" class="trilho_classe_Link">Flooring</a>
	<span id="indicador" class="trilho_classe_Indicator"></span>
    </div>
</nav>
</div>

<br />
<br />

<div class="menu_horizontal">
<nav id="trilho2" class="trilho_classe">
    <div id="trilhoContents2" class="trilho_classe_Contents">
        <a href="#" class="trilho_classe_Link2" aria-selected="true">Chairs</a>
        <a href="#" class="trilho_classe_Link2">Tables</a>
        <a href="#" class="trilho_classe_Link2">Cookware</a>
        <a href="#" class="trilho_classe_Link2">Beds</a>
        <a href="#" class="trilho_classe_Link2">Desks</a>
        <a href="#" class="trilho_classe_Link2">Flooring</a>
	<span id="indicador2" class="trilho_classe_Indicator"></span>
    </div>
</nav>
</div>