I am trying to implement an add or remove class feature in JavaScript, but I'm facing some issues with it.
Below is the code snippet I have:
if (window.location.hash == "#/profile/"){
document.getElementById("tabMenu").removeClass("bottomTabs").addClass("hidden");
} else{
document.getElementById("tabMenu").className += "show";
};
For those working with AngularJS, utilize the angular.element("#elementID") method to enable its internal jqlite functionality. Your code will resemble the following example.
var sidebar = angular.element("#sidebar");
if (window.location.hash == "#/dashboard/") {
sidebar.addClass("hidden")
} else {
sidebar.removeClass("hidden")
};
For a convenient solution in vanilla JavaScript that offers basic functionalities for adding and removing classes without affecting any other classes on the element, you can implement the following simple functions:
function removeClass(element, className) {
var classString = " " + element.className + " ";
element.className = classString.replace(" " + className + " ", " ").replace(/^\s+|\s+$/g, "");
}
function addClass(element, className) {
element.className += (" " + className);
}
var tabMenuElement = document.getElementById("tabMenu");
if (window.location.hash === "#/profile/"){
removeClass(tabMenuElement, "bottomTabs");
addClass(tabMenuElement, "hidden");
} else {
addClass(tabMenuElement, "show");
}
To implement this functionality using vanilla JavaScript, the code would be as follows:
var tabMenuElement = document.getElementById("tabMenu");
if (window.location.hash == "#/profile/") {
tabMenuElement.className = tabMenuElement.className.replace("bottomTabs", "");
tabMenuElement.className = tabMenuElement.className + " hidden";
} else {
tabMenuElement.className = tabMenuElement.className + " show";
};
Check out the demonstration below:
Utilizing angular, why not leverage ng-class for the management of classes?
<div ng-class="{'bottomTabs': !onProfile(), 'hidden': onProfile(), 'show': !onProfile()}">
</div>
All that is required is to establish a function that returns true when the profile page is being viewed:
$scope.onProfile = function() {
return window.location.hash == "#/profile";
};
For reference, see this functioning demo: http://plnkr.co/xh3KkxaHKuLtqIPpfE5Z
<script type="text/javascript">
$(document).ready(function () {
if (window.location.hash == "#/profile/") {
$("#tabMenu").hide();
}
}
</script>
Give this code a shot. Make sure to include the jQuery library on your page beforehand.
One thing that I've noticed when using express validator is the difference between these two code snippets: check('isActive', 'isActive should be either 0 or 1').optional({ checkFalsy : false, nullable : false }).isInt().isIn([0, 1 ...
While watching a tutorial on object literals in JavaScript, I noticed something interesting. The instructor demonstrated creating an object like this: var Facebook = { name: 'Facebook', ceo: { firstName: "Mark", favColor: ...
I am looking to include the class of the parent DOM node in its child DOM element. For instance, let's consider the following structure: <ol class="test1"> <li> <li> <ol> I want the child ol elemen ...
My current setup includes one main image and multiple thumbnails that can be clicked to change the main image. The issue I encountered was when using jqzoom on the main image, the zoomed image would go blank after changing. After researching on stack overf ...
I need to create a karma-jasmine test case for a controller (-> class AddUserController @$inject = ['$scope', '$http', '$state', 'UserFactory'] constructor: (@$scope, @$http, @$state, UserFactory) -> ...
Whenever I try to utilize a model in this manner: console.log($scope.selectedMonth); I receive the following output: Object { no: "02", name: "Veljača", $$hashKey: "object:24" } However, when attempting to access one of its properties like so: con ...
When error messages occur in this code, they are displayed through an alert box. However, I would prefer to have the error message appear below the specific text box instead. This means that when I click on the submit button and a field is left empty, the ...
Trying to retrieve the app version from the Play Store using this code snippet: var url = 'https://play.google.com/store/apps/details?id=' + appID; $.ajax({ url: your_url, type: 'GET', ...
I am facing an issue with my Wordpress site where I want the header to hide when the user scrolls. Despite trying various codes, I have been unable to make it work. The reason for wanting to hide the header is that on mobile devices, it causes scroll prob ...
I'm having some difficulty with my border spacing in CSS. No matter what size I specify, it doesn't seem to have any effect. I just want to use a border for the top line. Here is my CSS: p { border-spacing: 5000px; text-align: right; ...
I am trying to determine the index of a clicked anchor element in my navigation using jQuery. However, when I use the following code snippet, I always get zero in the console: $('.navigation ul li a').click(function(e) { e.preventDefault(); ...
After doing some research online, I was unable to find a solution to my issue. Can anyone provide assistance with this problem? I currently have a javascript variable that contains the name of a PHP session address. I am trying to access this session valu ...
Check out this code snippet: return ( <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled> <View style={style.flex1}> <View style={style.imageContainer}> <Image style={style.image} ...
I have a situation where I need to trigger a JavaScript function when a link is clicked. <input type='hidden' id='name'> <a href='#' onclick='getUsers(1)'>Click here</a> function getUsers(id){ $( ...
Whenever I click the button to use the changeState method, the state changes and the MoreInfo component appears. However, the chart is being drawn again as shown in this GIF: Below is the code snippet: import React from 'react' import './Ho ...
I encountered a strange issue while using a CLI that reads the capacitor.config.ts file. Every time the CLI reads the file, it throws a "ReferenceError: await is not defined" error. Interestingly, I faced a similar error with Vite in the past but cannot ...
When I click a button, my basic form component appears without using the router. I would like the scroll position of the form to automatically move down slightly (for example, on the y-axis at 40) once it is displayed. However, I am unsure of how to achi ...
Looking to dynamically change the HTML5 video tag with each click of an li tag. Here is the current structure: <div class="flexslider"> <ul class="slides"> <li> <video> <source type="video/mp4" src="http://t ...
I am having difficulty adjusting the size of the iframe content (within a fixed-sized iframe). Essentially, I would like the content to scale smaller or larger as if the browser's zoom function was being used. Through my CSS experiments, it seems achi ...
I'm currently working on implementing a unique theme-switching feature in my web application, allowing users to toggle between light and dark modes. Utilizing the Material-UI framework combined with React, here's the code snippet: const theme = c ...