login with tabs

rizwansyed · October 7, 2018

Hi

I have a option of login in my code with 4 users as dropdown and i have 8 tabs in my page.

user1 should access only 2 tabs and other tabs i need to block for user1.

user2 should access only 4 tabs and other tabs i need to block for user2.

user3 should access only 6 tabs and other tabs i need to block for user3.

user4 should have access to all blocks.

How to proceed with this

Thanks and Regards

Rizwan Syed

Edited October 7, 2018 by rizwansyed

JMRKER · October 8, 2018

See if this meet with your approval or use as template for further modifications.

Change hover and clicked colors a desired.

	<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> MARK tabs </title>
	<!--
  From: http://w3schools.invisionzone.com/topic/58299-login-with-tabs/
  Idea from: https://stackoverflow.com/questions/35564148/css-to-open-details-box-on-thumbnail-hover-or-click
-->
<style>
 #container { width: 400px; height: 400px; border: 1px solid blue; }
 main { width: 100%; height: 94%; border: 1px solid blue; }
	 mark { margin: 0 0.25em; cursor: pointer; }
 mark:hover { background-color: lime; }
	 .hide { display: none; }
 .orange { background-color: orange; }
</style>
	</head>
<body>
<div id="users" class="users">
  <input type="radio" id="user1" name="user" value="1"> <label for="user1"> User 1 </label>
  <input type="radio" id="user2" name="user" value="2"> <label for="user2"> User 2 </label>
  <input type="radio" id="user3" name="user" value="3"> <label for="user3"> User 3 </label>
  <input type="radio" id="user4" name="user" value="4"> <label for="user4"> User 4 </label>
</div>
	<div id="container">
  <main>
    <article> Article 1 </article>
    <article> Article 2 </article>
    <article> Article 3 </article>
    <article> Article 4 </article>
    <article> Article 5 </article>
    <article> Article 6 </article>
    <article> Article 7 </article>
    <article> Article 8 </article>
  </main>
	  <div id="selections">
    <mark> Tab 1 </mark>
    <mark> Tab 2 </mark>
    <mark> Tab 3 </mark>
    <mark> Tab 4 </mark>
    <mark> Tab 5 </mark>
    <mark> Tab 6 </mark>
    <mark> Tab 7 </mark>
    <mark> Tab 8 </mark>
  </div>
</div>
	<script>
function show(info) { info.classList.remove('hide'); }
// function showhide(info, act) { info.classList.toggle(act); }
	function hideAll() {
  var sel = document.querySelectorAll('#container article');
  for (var i=0; i<sel.length; i++) { sel[i].classList.add('hide'); }
  return sel;
}
	function unmarkAll() {
  var sel2 = document.querySelectorAll('#selections mark');
  for (let i=0; i<sel2.length; i++) { sel2[i].classList.remove('orange'); }
  return sel2;
}
	function checkRBtns() {
  var sel = document.querySelectorAll("#users input"),
      vlu = 0;
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked) { vlu = sel[i].value; }
  }
  var sel1 = hideAll(),
      sel2 = unmarkAll();
  for (let i=0; i<sel2.length; i++) {
// mouse click display effects
    if (i < (vlu*2)) {
      sel2[i].addEventListener('click',
        function() {
          hideAll();
          show(sel1[i]);
          unmarkAll();
          sel2[i].classList.add('orange');
        }
      );  // tab marker
    } else {
      sel2[i].addEventListener('click',
        function() {
          hideAll();
          unmarkAll();
        }
      );  // tab marker
    }
  }
}
	function init() {  // initialize events and actions
  var sel1 = hideAll();
  var sel2 = unmarkAll();
	//  for (let i=0; i<sel2.length; i++) {
  for (let i=0; i<0; i++) {
// mouse click display effects
    sel2[i].addEventListener('click',
      function() {
        hideAll();
        show(sel1[i]);
        unmarkAll();
        sel2[i].classList.add('orange');
      }
    );  // tab marker
  }
  document.getElementById('user1').addEventListener('click', checkRBtns );
  document.getElementById('user2').addEventListener('click', checkRBtns );
  document.getElementById('user3').addEventListener('click', checkRBtns );
  document.getElementById('user4').addEventListener('click', checkRBtns );
}
init();
	</script>
</body>
</html>

rizwansyed · October 8, 2018

Hi

It was some what similar for my requirement.

1.In the example posted above, how to get the tabs at top instead of down(as this is customer requirement )

2.How can i link with my below code so that it looks similar as below

i saw the horizontal tabs example from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

and created the below one.

 <!DOCTYPE html>
    <html>
    <title>FINAL TEST</title>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {font-family: Arial;}
    /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #fff;
        background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 55px;
        transition: 0.3s;
        font-size: 20px;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 0px solid #fff;
        border-top: none;
    }
    </style>
    </head>
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'home')">Home</button>
      <button class="tablinks" onclick="openCity(event, 'Settings')">Settings</button>
      <button class="tablinks" onclick="openCity(event, 'Changes')">Changes</button>
      <button class="tablinks" onclick="openCity(event, 'Total')">Total</button>
      <button class="tablinks" onclick="openCity(event, 'Input')">Input</button>
      <button class="tablinks" onclick="openCity(event, 'Output')">Output</button>
      <button class="tablinks" onclick="openCity(event, 'Calibration')">Calibration</button>
      <button class="tablinks" onclick="openCity(event, 'selftest')">Selftest</button>
    </div>

    <div id="home" class="tabcontent">
    Number 1
     </div>
    <div id="Settings" class="tabcontent"> 
    Number 2
    </div>
    <div id="Changes" class="tabcontent">
    Number 3
     </div>
    <div id="Total" class="tabcontent">
    Number 4
     </div>
    <div id="Input" class="tabcontent">
    Number 5
     </div>
    <div id="Output" class="tabcontent">
    Number 6
     </div>
    <div id="Calibration" class="tabcontent">
    Number 7
     </div>
    <div id="selftest" class="tabcontent">
    Number 8
     </div>
    
     <script>
    var tablinks = document.getElementsByClassName("tablinks");
    var tabcontent = document.getElementsByClassName("tabcontent");
                if (localStorage.activeLI) {
                    tablinks[localStorage.activeLI].className += " active";
                   tabcontent[localStorage.activeLI].style.display = "block"
                }

    function openCity(evt, cityName) {
        var i;
        
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
        
         for (i = 0; i < tablinks.length; i++) {
                               
              if (tablinks[i].className.indexOf("active") !== -1) {
                    localStorage.activeLI = i;
              }
        }   
        
        
    }
    </script>
         
    </body>
    </html>

Please suggest

Thanks and Regards

Rizwan Syed

rizwansyed · October 13, 2018

Hi

I tried the below code with my requirement.

https://www.w3schools.com/code/tryit.asp?filename=FW7UUNK298CD

Only the boxes are getting hidden but when i click user radio button nothing appears.

Please help what is wrong here.

Thanks and Regards

Rizwan Syed

JMRKER · October 14, 2018

If you are going to modify the code at least keep the parts that are working correctly.

Also, it always a good idea to let the user know what to do if it is different from normal conditions.

	<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> MARK tabs </title>
<!--
  From: http://w3schools.invisionzone.com/topic/58299-login-with-tabs/
  Idea from: https://stackoverflow.com/questions/35564148/css-to-open-details-box-on-thumbnail-hover-or-click
-->
<style>
 #container { width: 100%; height: 30em; border: 1px solid blue; }
 main { width: 100%; height: 94%; border: 1px solid blue; ; }
 mark { margin: 0 0.25em; cursor: pointer; font-size: 1.5em; }
 mark:hover { background-color: lime; }
 .hide { display: none; }
 .orange { background-color: orange; }
</style>
	</head>
<body>
<div id="users" class="users">
  <input type="radio" id="user1" name="user" value="1"> <label for="user1"> User 1 </label>
  <input type="radio" id="user2" name="user" value="2"> <label for="user2"> User 2 </label>
  <input type="radio" id="user3" name="user" value="3"> <label for="user3"> User 3 </label>
  <input type="radio" id="user4" name="user" value="4"> <label for="user4"> User 4 </label>
</div>
	<ul id="instructions">
  <li>Choose a 'User' above</li>
  <li> User #1 has access to first two tabs below </li>
  <li> User #2 has access to first four tabs below </li>
  <li> User #3 has access to first six tabs below </li>
  <li> User #4 has access to all eight tabs below </li>
</ul>
	<div id="container">
  <div id="selections">
    <mark> Home </mark>
    <mark> Settings </mark>
    <mark> Changes </mark>
    <mark> Total </mark>
    <mark> Input </mark>
    <mark> Output </mark>
    <mark> Calibration </mark>
    <mark> Selftest </mark>
  </div>
	  <main>
    <article> <h2> Home </h2> </article>
    <article> <h2> Settings </h2> </article>
    <article> <h2> Changes </h2> </article>
    <article> <h2> Total </h2> </article>
    <article> <h2> Input </h2> </article>
    <article> <h2> Output </h2> </article>
    <article> <h2> Calibration </h2> </article>
    <article> <h2> Selftest</h2>  </article>
  </main>
</div>
	<script>
function show(info) { info.classList.remove('hide'); }
// function showhide(info, act) { info.classList.toggle(act); }
function hideAll() {
  var sel = document.querySelectorAll('#container article');
  for (var i=0; i<sel.length; i++) { sel[i].classList.add('hide'); }
  return sel;
}
function unmarkAll() {
  var sel2 = document.querySelectorAll('#selections mark');
  for (let i=0; i<sel2.length; i++) { sel2[i].classList.remove('orange'); }
  return sel2;
}
	function checkRBtns() {
  document.getElementById('instructions').classList.add('hide');
  var sel = document.querySelectorAll("#users input"),
      vlu = 0;
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked) { vlu = sel[i].value; }
  }
  var sel1 = hideAll(),
      sel2 = unmarkAll();
  for (let i=0; i<sel2.length; i++) {
// mouse click display effects
    if (i < (vlu*2)) {
      sel2[i].addEventListener('click',
        function() {
          hideAll();
          show(sel1[i]);
          unmarkAll();
          sel2[i].classList.add('orange');
        }
      );  // tab marker
    } else {
      sel2[i].addEventListener('click',
        function() {
          hideAll();
          unmarkAll();
        }
      );  // tab marker
    }
  }
}
    function init() {  // initialize events and actions
  var sel1 = hideAll();
  var sel2 = unmarkAll();
    //  for (let i=0; i<sel2.length; i++) {
  for (let i=0; i<0; i++) {
// mouse click display effects
    sel2[i].addEventListener('click',
      function() {
        hideAll();
        show(sel1[i]);
        unmarkAll();
        sel2[i].classList.add('orange');
      }
    );  // tab marker
  }
  document.getElementById('user1').addEventListener('click', checkRBtns );
  document.getElementById('user2').addEventListener('click', checkRBtns );
  document.getElementById('user3').addEventListener('click', checkRBtns );
  document.getElementById('user4').addEventListener('click', checkRBtns );
}
init();
</script>
</body>
</html>

JMRKER · October 14, 2018

In code above, remove the user choices after the first time if you don't wish for others to be available. Similar to 'instructions' element.

You can add the logic to accept a valid password with the 'user's choice, but JS is not a very secure language for these duties.

Good Luck!

rizwansyed · October 14, 2018

Hi

Actually i need to use the tabs menu and dropdown option instead of radio button for my requirement.

So i was trying that way.

Can you suggest me, how to get tabs and dropdown for same requirement

Thanks and Regards

Rizwan syed

Edited October 14, 2018 by rizwansyed

JMRKER · October 14, 2018

Obviously I don't understand the requests.
What parts are supposed to be tabs and what parts are to be user/password selections?
Where do the drop down options come into play?
I need a better explanation or example for me to try to help.

Edited October 14, 2018 by JMRKER

rizwansyed · October 15, 2018

Hi

I need a login option as shown below from dropdown and entering password.

Capture6.PNG.ab683b2d45a965307f8134fe4982bc1a.PNG

Actually i require a tabs as shown below with user restrictions .Because under each tab , i have nested tabs and more data included already.

So i f get like above, it will be easy for me to proceed.please help on this

Thanks and Regards

Rizwan Syed

dsonesuk · October 15, 2018

That is a server side required login system, you need to first gather that information, I.E. All users name, id, for dropdown, All details related to a specific user, and ability to identify and authorize access to specific data when correct password is entered. You need to be able to do all this before even considering going any further.

rizwansyed · October 15, 2018

Hi

user names and their verification are authorized on server side.But tabs are purely in html.

We need to restrict the tabs on based on users.

The code suggested by JMRKER was helpful but it has radio button instead of dropdown and i need tabs exactly as shown in image above. so that i can add my data which is already implemented.

Thanks and Regards

Rizwan Syed

dsonesuk · October 15, 2018

wrong topic

Edited October 15, 2018 by dsonesuk

JMRKER · October 15, 2018

Removing radio button sections and adding drop-down was too easy. Why did you not try this yourself?
Remainder of code remains the same as last post.

You will still need to add the server-side submisison checks with password information
as you seem to know how to do this already.

	<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> MARK tabs </title>
<!--
  From: http://w3schools.invisionzone.com/topic/58299-login-with-tabs/
  Idea from: https://stackoverflow.com/questions/35564148/css-to-open-details-box-on-thumbnail-hover-or-click
-->
<style>
 #container { width: 100%; height: 30em; border: 1px solid blue; }
 main { width: 100%; height: 94%; border: 1px solid blue; ; }
 mark { margin: 0 0.25em; cursor: pointer; font-size: 1.5em; }
 mark:hover { background-color: lime; }
 .hide { display: none; }
 .orange { background-color: orange; }
</style>
    </head>
<body>
<select id="users">
 <option value=""> Select user </option>
 <option value="1"> User 1 </option>
 <option value="2"> User 2 </option>
 <option value="3"> User 3 </option>
 <option value="4"> User 4 </option>
</select>
<input type="password" id="password" value="">
	<!-- Add <form> information for PHP submission -->
<button onclick="checkUsers()"> Fake Submission </button>
	<ul id="instructions">
  <li>Choose a 'User' above</li>
  <li> User #1 has access to first two tabs below </li>
  <li> User #2 has access to first four tabs below </li>
  <li> User #3 has access to first six tabs below </li>
  <li> User #4 has access to all eight tabs below </li>
</ul>
	<div id="container">
  <div id="selections">
    <mark> Home </mark>
    <mark> Settings </mark>
    <mark> Changes </mark>
    <mark> Total </mark>
    <mark> Input </mark>
    <mark> Output </mark>
    <mark> Calibration </mark>
    <mark> Selftest </mark>
  </div>
	  <main>
    <article> <h2> Home </h2> </article>
    <article> <h2> Settings </h2> </article>
    <article> <h2> Changes </h2> </article>
    <article> <h2> Total </h2> </article>
    <article> <h2> Input </h2> </article>
    <article> <h2> Output </h2> </article>
    <article> <h2> Calibration </h2> </article>
    <article> <h2> Selftest</h2>  </article>
  </main>
</div>
	<script>
function show(info) { info.classList.remove('hide'); }
// function showhide(info, act) { info.classList.toggle(act); }
function hideAll() {
  var sel = document.querySelectorAll('#container article');
  for (var i=0; i<sel.length; i++) { sel[i].classList.add('hide'); }
  return sel;
}
function unmarkAll() {
  var sel2 = document.querySelectorAll('#selections mark');
  for (let i=0; i<sel2.length; i++) { sel2[i].classList.remove('orange'); }
  return sel2;
}
	function checkUsers() {
  document.getElementById('instructions').classList.add('hide');
  var vlu = Number(document.getElementById('users').value);
	  var sel1 = hideAll(),
      sel2 = unmarkAll();
  for (let i=0; i<sel2.length; i++) {
// mouse click display effects
    if (i < (vlu*2)) {
      sel2[i].addEventListener('click',
        function() {
          hideAll();
          show(sel1[i]);
          unmarkAll();
          sel2[i].classList.add('orange');
        }
      );  // tab marker
    } else {
      sel2[i].addEventListener('click',
        function() {
          hideAll();
          unmarkAll();
        }
      );  // tab marker
    }
  }
}
function init() {  // initialize events and actions
  var sel1 = hideAll();
  var sel2 = unmarkAll();
    //  for (let i=0; i<sel2.length; i++) {
  for (let i=0; i<0; i++) {
// mouse click display effects
    sel2[i].addEventListener('click',
      function() {
        hideAll();
        show(sel1[i]);
        unmarkAll();
        sel2[i].classList.add('orange');
      }
    );  // tab marker
  }
}
init();
</script>
</body>
</html>

login with tabs

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in