Hey everyone i have tried to make three different navigationbars according to the users role. I only want one of the nav bars to be displayed according to if its a guest, user or admin. For now i just want to show the different navigationbar accoring to x=1 or not (se js code).
Can someone help me? I have tired everything by now. But it just wont work. Iam not that good at programming, so please dont make it to complicated.
Javascript file
x = 1
if (x==0) {
(#alle).show;
} else {
("#all").hide;
}
if (x==0){
("#user").show;
} else {
("#user").hide;
}
if (x==101){
("#admin").show;
} else {
("#admin").hide;
}
Use
document.querySelector('#all').style.display = 'none';
There is no built-in methods .hide() or .show() like jQuery has.
If I understand you correct then this is what you have to do:
x = 0;
//Check role, could also do this in switch statement.
//But for now like this since it might be easyer to understand.
//Probably if you copy paste this it wont work but I think this part is needed.
if (user == guest) {
x = 0;
} else if (user == user) {
x = 1;
} else if (user == admin) {
x = 2;
}
//Guest
if (x==0) {
(#alle).show;
} else {
("#alle").hide;
}
//user
if (x==1){
("#user").show;
} else {
("#user").hide;
}
//Admin
if (x==2){
("#admin").show;
} else {
("#admin").hide;
}
Related
I've written scripts before that target HTML elements and add or remove classes based on conditions before, but this current script always adds mobile-class no matter what the display width of my window is. The console.log correctly outputs desktop at window widths above 992px, but the class doesn't correctly change. If I manually set the top statement to equal to desktop, then the classes update accordingly, so it seems that my displaySizeReader isn't correctly assigning a value to my displaySize variable. Where is the break in my logic here?
let displaySize = '';
function changeToMobile() {
document.querySelector('.custom-menu-class').classList.remove('desktop-class');
document.querySelector('.custom-menu-class').classList.add('mobile-class');
}
function changeToDesktop() {
document.querySelector('.custom-menu-class').classList.remove('mobile-class');
document.querySelector('.custom-menu-class').classList.add('desktop-class');
}
function displaySizeReader() {
if (screen.width < 992) {
let displaySize = 'mobile';
console.log(displaySize);
}
else {
let displaySize = 'desktop';
console.log(displaySize);
}
function displayChanger() {
if(displaySize == "mobile") {
changeToMobile();
} else if(displaySize == "desktop") {
changeToDesktop();
} else {
changeToMobile();
}
}
displayChanger();
}
displaySizeReader();
The screen object is not going to change unless you are using different displays. If you are trying to change these classes for a responsive type of scenario, the following should help you.
Make this change:
function displaySizeReader() {
if (window.innerWidth < 992) {
displaySize = 'mobile';
console.log(displaySize);
}
else {
displaySize = 'desktop';
console.log(displaySize);
}
function displayChanger() {
if(displaySize == "mobile") {
changeToMobile();
} else if(displaySize == "desktop") {
changeToDesktop();
} else {
changeToMobile();
}
}
displayChanger();
}
You have let in front of displaySize in your if/else statement, hence defining a new variables instead of using the one you declared in the first line.
I have JavaScript code that must move a div up and down. When I click it I want it to go up, then when I click the second time I want it to go down. My code is this:
function why()
{
if (document.getElementById("newton").style.bottom == 23) {
alert("I entered the IF");
document.getElementById("newton").style.bottom = 0;
}
else {
alert("I entered the ELSE");
document.getElementById("newton").style.bottom = 23;
}
}
The strange thing is that the first time I click the div it goes up and tells me the ELSE part was executed, but after this, clicking it won't produce any effect, it wont go back down. Why is this?
You need to specify a unit, like % or px or whatever.
function why() {
if (document.getElementById("newton").style.bottom == '23px') {
alert("I entered the IF");
document.getElementById("newton").style.bottom = 0;
} else {
alert("I entered the ELSE");
document.getElementById("newton").style.bottom = '23px';
};
}
<button id="newton" onclick="why()">click</button>
But I would toggle a class instead and put this change in CSS.
function why(el) {
el.classList.toggle('up');
}
#newton {
bottom: 0;
}
#newton.up {
bottom: 23px;
}
<button id="newton" onclick="why(this)">click</button>
I found out that if other js functions are wrong, it can affect my whole code,even other functions. The code was right, but since another function was wrong that made my code not work...Thanks for the toogle the class advice, I will implement it ;)
i am trying to use the javascript for checkbox selection,
my pages are jsp pages, we have pagination but the checkbox selection is not persist when i move from one to another
can you some one help on this
var selectedUnits = [];
function selectCheckbox(data) {
if (selectedUnits.length < 1) {
selectedUnits.push(data.value);
}
else {
if (data.checked == true) {
if ($.inArray(data.value, selectedUnits) < 0) {
selectedUnits.push(data.value);
}
else {
selectedUnits.pop(data.value);
}
}
else {
selectedUnits.pop(data.value);
}
}
console.log(selectedUnits);
}
Could you use localStorage
https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
becose you need to put the data array out of any navigation
and then "selectedUnits" put into
localStorage
Expect help you
I'm currently making a app, with a loginpanel. But somehow I'm having trouble with a bug. In my loginController I made a scope for logging in. Further I made checks for empty fields, or wrong username/password. All with CSS border effects like green for correct and red for wrong.
But when I login, both input fields turn red while the data is correct. Am I missing something here? Hereby my loginController made in AngularJS/Javascript :
$scope.login = function () {
$scope.errorMessg = "";
if ($scope.userinfo.username.length > 0 &&
$scope.userinfo.password.length > 0) {
API.all("user/login").post({
username: $scope.userinfo.username,
password: $scope.userinfo.password
}).then(function() {
if ($scope.userinfo.rememberMe) { //Save in cookie
$cookies.put("cmUsername", $scope.userinfo.username);
$cookies.put("cmPassword", $scope.userinfo.password);
}
$state.go('home.dashboard', {userid: $scope.userinfo.username});
}, function(error) {
switch (error.data.applicationCode) {
case 'U0002':
$scope.errorMessg = gettextCatalog.getString("We don't recognize this accountdata");
break;
default:
$scope.errorMessg = gettextCatalog.getString("Whoops, something went wrong!");
$scope.err = true;
}
if ($cookies.get("cmUsername") && $cookies.get("cmPassword")) {
$cookies.remove("cmUsername");
$cookies.remove("cmPassword");
}
});
} else
$scope.errorMessg = gettextCatalog.getString("Fields can't be empty!");
$scope.err = true;
}
Thanks in advance for any tips or advice.
Try wrapping the final else
else {
$scope.errorMessg = gettextCatalog.getString("Fields can't be empty!");
$scope.err = true;
}
the $scope.err = true; is always executed at the end of that code, so maybe that's why your input fields turn red.
I have a list of urls(div) underneath an input field(div). I need the ability to come down in the list and than by hitting enter this will trigger some function designated to the url. This is the fidle: the script
Over the last days I have tried to much things to explain, but in conclusion none of it worked. Help would be appreciated.
After this line of code :
// set timers to do automatic hash checking and suggestions checking
setInterval(checkHash,500);
setInterval(checkSuggest,500);
Insert this :
$('#searchbox').keyup(
function (e){
var curr = $('#suggest').find('.current');
if (e.keyCode == 40)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).next().attr('class', 'display_box current');
}
else{
$('#suggest li:first-child').attr('class', 'display_box current');
}
}
if(e.keyCode==38)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).prev().attr('class', 'display_box current');
}
else{
$('#suggest li:last-child').attr('class', 'display_box current');
}
}
if(e.keyCode==13)
{
var search_terms = $('.current a').text();
// perform a search with this text...
doSearch(search_terms,true,false);
//update the search textbox
$('#searchbox').val(search_terms);
}
})
And don't forget to delete the previous code at the bottom...