HTML
<div id="top" class="shadow">
<ul class="gprc">
<li>Home</li>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
</ul>
Javascript
window.onload = setActive;
function setActive() {
aObj = document.getElementById('top').getElementsByTagName('a');
var found = false;
for (i = 0; i < aObj.length; i++) {
if (document.location.href.indexOf(aObj[i].href) >= 0) {
aObj[i].className = 'active';
found = true;
}
}
if (!found) {
aObj[0].className = 'active';
}
}
The problem is that the menu home link remains selected or active all the time even if i click on other links and I would like to make it not selected on loading of the page and also to remain non-selected while other link that i clicked and i am on the specific landing page remains selected. Please only Javascript no JQUERY.
Try this:
window.onload = setActive;
function setActive() {
var aObj = document.getElementById('top').getElementsByTagName('a');
var found = false;
for(var i=aObj.length-1; i>=1 && !found; i--) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
found = true;
}
}
//if you never want home selected remove the next
if(!found && document.location.href.replace(/\/$/, "") == aObj[0].href.replace(/\/$/, ""))
aObj[0].className = 'active';
}
With this way you start at the end of the list, and when you find a coincidence it stop the search of an active link.
I hope it helps you
function setActive() {
var top = document.getElementById('top'),
aObj = top.getElementsByTagName('a'),
href = document.location.href,
found = false;
for (var i = 0; i < aObj.length || !found; i++) {
if (href.indexOf(aObj[i].href) >= 0) {
aObj[i].className = 'active';
found = true;
}
}
if (!found) {
aObj[0].className = 'active';
}
//Listen for link clicks
function listener(e) {
if(e.target.tagName === "A") {
for (var i = 0; i<aObj.length; i++) {//remove previous class
aObj[i].className = "";
}
e.target.className = "active";
}
}
if(top.addEventListener) {
top.addEventListener(listener);
} else if(top.attachEvent) {
top.attachEvent(listener);
}
}
You're going to need to listen to the click event so you can determine if one of your links is pressed. I'm going to do this using some simple delegation
Related
How to toggle display with Javascript Vanilla when I click a checkbox.
I tried with only one element and it works but when there is more than one...I put this in my code-->
function OnlyOK(){
var ul = document.getElementsByClassName('RQ');
for (i = 0; i < ul.length; i++) {
ul[i].style.display = 'none';
}
//else ul[i].style.display = 'block';???
}
And the case of toggle display(none,block) only one element (1 first element)...This Works!!
function OnlyOK(){
var ul = document.getElementsByClassName('RQ');
ul.style.display = ul.style.display === 'none' ? '' : 'none';
}
I tried getElementsById too! but I prefer to work with class.
So basically you want to hide some elements when you click and check a checkbox and show them again after you uncheck the checkbox, right?
You can achieve such a thing like this:
function OnlyOK(flag){
var ul = document.getElementsByClassName('RQ');
for (i = 0; i < ul.length; i++) {
if (flag) {
ul[i].style.display = 'none';
} else {
ul[i].style.display = 'block';
}
}
}
document.querySelector('#ck')
.addEventListener('change', function(event) {
console.log(event);
OnlyOK(event.target.checked);
});
With this HTML:
<ul>
<li class="RQ">Some item to hide</li>
<li class="RQ">Hide me</li>
<li class="RQ">I will be gone</li>
<li>I do not have class :(</li>
</ul>
<input type="checkbox" id="ck"/>
Here is a working example.
<input type="checkbox" class="eq" onchange="onlyOk(this)"></input>
function onlyOk(obj){
var rq = document.getElementsByClassName("RQ");
var i;
var display = obj.checked ? "none" : "";
for (i = 0; i > rq.length; i++){
rq[i].style.display = display;
}
}
I want to hide left panel when clicking the "TEXT", and also when an item is searched from autocomplete search box. So my aim is to not overlap the autocomplete items and panel.
Here is my fiddle: http://jsfiddle.net/zzzzz/get0d9ro/7/
temp = 1;
$("#label").on('click', function(){
if(temp == 1){
$('#panellist').toggle();
temp = 0;
}
else{
temp = 1;
$('#panellist').toggle();
}
});
You need to wrap your binding in a $(document).ready() handler if you want to place it above the element itself:
$(document).ready(function () {
var temp = 1;
$("#label").on('click', function(){
if(temp == 1){
$('#panellist').toggle();
temp = 0;
}
else{
temp = 1;
$('#panellist').toggle();
}
});
});
this is my first pure JavaScript script as you can probably tell, by the length of it! I'm at a loss to workout how i can get the child links which are in a div with a class called 'menu' to close when i leave that div.
I've tried to write an If argument to set it to close when i leave the 'A' and also a 'DIV' and that doesn't seem to work?
Any help would be much appreciated and sorry for the overly long code!
Please no Jquery for now, thanks!
<script>
// Variables
var getFirstMenu = document.getElementsByTagName('div');
// Use selectors
var getMenuClasses = document.getElementsByClassName('menu');
// Hide drop down menus
for(var i=0; i < getFirstMenu.length; i++){
getFirstMenu[i].style.visibility = 'hidden';
}
// =============================
// Show Menu on mouseover
function showDropdown(e){
var el = e.target;
if(el.nodeName == 'A'){
for(var i = 0; i < getMenuClasses.length; i++) {
if(el == getMenuClasses[0]){
getFirstMenu[0].style.visibility = 'visible';
}else if(el == getMenuClasses[1]) {
getFirstMenu[1].style.visibility = 'visible';
}else if(el == getMenuClasses[2]){
getFirstMenu[2].style.visibility = 'visible';
}
}
}
}
var getMainMenu = document.getElementById('menu');
getMainMenu.addEventListener('mouseover', function(e){
showDropdown(e);
},false);
// =============================
// Hide Menu on mouseout
function mouseOutMenu(e){
var el = e.target;
if(el.nodeName == 'DIV')
for(var i = 0; i < getFirstMenu.length; i++){
getFirstMenu[i].style.visibility = 'hidden';
}
}
getMainMenu.addEventListener('mouseout', function(e){
mouseOutMenu(e);
}, false);
Add a Handler to the document-object
document.addEventHandler('mouseover', function(){
// close it
}, false);
Or when this is about to hide a submenu: Add the handler to the menu which then hides the menu on mouseover
Look Demo
Code :
// Variables
var getFirstMenu = document.getElementsByTagName('div');
// Use selectors
var getMenuClasses = document.getElementsByClassName('menu');
// Hide drop down menus
for(var i=0; i < getFirstMenu.length; i++){
getFirstMenu[i].style.visibility = 'hidden';
}
// =============================
// Show Menu on mouseover
function showDropdown(e){
var el = e.target;
if(el.nodeName == 'A'){
for(var i = 0; i < getMenuClasses.length; i++) {
if(el == getMenuClasses[0]){
getFirstMenu[0].style.visibility = 'visible';
}else if(el == getMenuClasses[1]) {
getFirstMenu[1].style.visibility = 'visible';
}else if(el == getMenuClasses[2]){
getFirstMenu[2].style.visibility = 'visible';
}
}
}
}
var getMainMenu = document.getElementById('menu');
getMainMenu.addEventListener('mouseover', function(e){
showDropdown(e);
},false);
// =============================
// Hide Menu on mouseout
function mouseOutMenu(e){
var el = e.target;
//if(el.nodeName == 'A')
for(var i = 0; i < getFirstMenu.length; i++){
getFirstMenu[i].style.visibility = 'hidden';
}
}
for(var i = 0; i < document.getElementsByTagName('div').length; i++){
document.getElementsByTagName('div')[i].addEventListener('mouseout', function(e){
mouseOutMenu(e);
}, false);
}
I am looking to create a very simple functionality of clicking on a menu tab and it changes color to let you know what page you are on. I am a novice so please take it easy on me...lol
/Menu in php header file/
<ul class="tabs" id="tabs">
<li class="selected">Home</li>
<li class="inactive">Bio</li>
<li class="inactive">Photo</li>
<li class="inactive">Thank</li>
<li class="inactive">Contact</li>
</ul>
/*This is the JavaScript file*/
window.onload = initPage;
function initPage() {
var tabs = document.getElementById("tabs").getElementsByTagName("li");
for (var i=0; i<tabs.length; i++){
var links = tabs[i];
links.onclick = tabClicked;
}
}
function tabClicked(){
var tabId = this.id;
document.getElementById(tabId).classList.toggle("selected");
var tabs = document.getElementById("tabs").getElementsByTagName("li");
for (var i=0; i < tabs.length; i++){
var currentTab = tabs[i];
if (currentTab.id !== tabId){
currentTab.class = "selected";
} else {
currentTab.class = "inactive";
}
}
}
element.setAttribute("class", "className");
You are using ids in your code but you don't have provided it in your markup. so give ids to li elements and try this.
function tabClicked(){
var tabId = this.id;
document.getElementById(tabId).classList.toggle("selected");
var tabs = document.getElementById("tabs").getElementsByTagName("li");
for (var i=0; i < tabs.length; i++){
var currentTab = tabs[i];
if (currentTab.id !== tabId){
currentTab.className = "inactive";
} else {
currentTab.className= "selected";
}
}
}
JS Fiddle Demo
Store a reference to each of the list items.
Create a variable to keep track of the current tab.
In an onclick function for each element (or you could use one onclick and just use some conditions), change the class attribute of the element by using the setAttribute() method.
Like this:
function onFirstTabClick() {
clearSelected();
tabVariable1.setAttribute("class","some-new-class");
}
function() clearSelected() {
switch(currentSelectedTrackerVariable) {
case 1: tabVariable1.setAttribute("class","some-new-class");
break;
// Do this for the amount of tabs that you have.
}
}
Working FIDDLE Demo
There is no need to define functions globally. Write all them in one package. The code below, works correctly with your HTML markup.
<script>
window.onload = function () {
var tab = document.getElementById('tabs');
var lis = tab.getElementsByTagName('li');
for (var i = 0, l = lis.length; i < l; i++) {
lis[i].onclick = function () {
for (var j = 0; j < l; j++) {
lis[j]["className"] = "inactive";
}
this["className"] = "selected";
};
}
};
</script>
If you use jQuery, then tabClicked can run:
jQuery('.selected').removeClass('selected').addClass('inactive');
jQuery(this).removeClass('inactive').addClass('selected');
I want this code to check if the user has clicked inside the open box and if so then it will keep it open, also if the user clicks outside the box it will close.
http://jsfiddle.net/MTJa5/26/
var boxes = function(){
var divClicks = document.getElementsByClassName("clickToShow");
for(i=0; i < divClicks.length; i++){
var click = divClicks[i];
var clickEvent = function(){
click.addEventListener("click", function(e){
var currentClass= this.getElementsByTagName('div')[0].className;
var divs = document.getElementsByClassName('openedBox');
for(var i = 0; i < divs.length; i++){
divs[i].setAttribute("class", "closedBox");
}
if(currentClass === "openedBox"){
this.childNodes[3].setAttribute("class", "closedBox");
} else {
this.childNodes[3].setAttribute("class", "openedBox");
}
},false);
}();
}
}();
Instead of binding several event listeners, you can also bind just one click event, and use the event.target property to check where you've clicked.
The updated code is less comples, and easier to maintain.
Demo: http://jsfiddle.net/MTJa5/28/
var hellos = function() {
function closeAllButThisBox(targ) {
var allBoxes = document.getElementsByClassName('openedBox');
for (var i=allBoxes.length-1; i>=0; i--) {
if (allBoxes[i] !== targ) {
allBoxes[i].className = 'closedBox';
}
}
}
window.addEventListener('click', function(ev) {
var targ = ev.target;
// Traverse the tree, until you hit the desired / root element
while (targ && targ !== document.documentElement) {
if (targ.className.indexOf('openedBox') !== -1) {
closeAllButThisBox(targ);
// Do nothing when clicking inside an opened box
return;
}
// This will open boxes, if closed, when clicking at the <p>
if (targ.tagName.toLowerCase() === 'p' && targ.parentNode.className.indexOf('clickToShow') !== -1) {
closeAllButThisBox(targ.parentNode);
targ.parentNode.getElementsByTagName('div')[0].className = 'openedBox';
return;
}
targ = targ.parentNode;
}
// At this point, the click is not at the right place.
// Close all boxes by removing the closedBox class names
var boxes = document.getElementsByClassName('openedBox');
for (var i=boxes.length-1; i>=0; i--) {
boxes[i].className = 'closedBox';
}
}, false);
}();