Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2019
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Hyperlink only if Ctrl and Shift are held down when clicked?

    Hi,

    So I'm building a website and looking to have a hidden section which is accessed via the same way used in the film "The Net".. I know not the best of films but oh well!

    So if you're unfamiliar there is a Pi symbol in the bottom corner and when you hold down Ctrl & Shift and click on the symbol it takes you to another page..

    so my question is how can I make this possible? I need a hyperlink to only work when Ctrl and Shift are held down.. any ideas??

    Thanks

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,124
    Thanks
    37
    Thanked 1,089 Times in 1,085 Posts
    This should work for you:
    Code:
    <!DOCTYPE html>
    <html>
    <head><title></title></head>
    
    <body>
    <img id='test' src='01.jpg'>
    
    <script>
    document.getElementById('test').addEventListener("click", function(event) {
    	if(event.shiftKey && event.ctrlKey) // The shift key and the ctrl key
    	alert('BOth'); // Put the page redirection here
    });
    </script>
    </body>
    </html>
    Back in the day we use smaller things to click on like a single pixel, just to make things less obvious.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. Users who have thanked sunfighter for this post:

    jmrker (Jul 11th, 2019)

  4. #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,962
    Thanks
    71
    Thanked 606 Times in 599 Posts

    Lightbulb

    Quote Originally Posted by sunfighter View Post
    This should work for you:
    Code:
    <!DOCTYPE html>
    <html>
    <head><title></title></head>
    
    <body>
    <img id='test' src='01.jpg'>
    
    <script>
    document.getElementById('test').addEventListener("click", function(event) {
    	if(event.shiftKey && event.ctrlKey) // The shift key and the ctrl key
    	alert('BOth'); // Put the page redirection here
    });
    </script>
    </body>
    </html>
    Back in the day we use smaller things to click on like a single pixel, just to make things less obvious.
    I thought that bit of code was interesting and expanded it
    to allow individual shift and ctrl keys as well as both with click.
    I increased the size of the PI symbol ( &#x3c0; ) only for visibility.
    Code:
    <!DOCTYPE html>
    <html>
    <head><title></title>
    <style>
     #test { font-size: 3em; }
    </style>
    </head>
    <body>
    <div id="test">&#x3c0;</div>
    <pre>Click on &#x3c0; symbol 
    with SHIFT or CTRL or BOTH</pre>
    <div id="demo"></div>
    
    <script>
      const doc = (IDS) => document.getElementById(IDS);
    
      document.getElementById('test').addEventListener("click", function(event) {
        var flag = -1;
        if (event.shiftKey) flag = 1;
        if (event.ctrlKey) flag = 2;
        if (event.shiftKey && event.ctrlKey) flag = 3;
        switch (flag) {
          case 1 : doc('demo').innerHTML = 'SHIFT keys'; break;
          case 2 : doc('demo').innerHTML = 'CTRL keys'; break;
          case 3 : doc('demo').innerHTML = 'BOTH keys'; break;
          default: doc('demo').innerHTML = 'click only'; break;
        }
      });
    </script>
    </body>
    </html>
    Note that individual keys can also be detected but care must be taken that your selection is not be over-rode by system designations, ie: Ctrl-C and Ctrl-P or Alt-Tab etc.
    Last edited by jmrker; Jul 11th, 2019 at 03:14 PM.

  5. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,124
    Thanks
    37
    Thanked 1,089 Times in 1,085 Posts
    Thank you for your expansion of code jmrker.
    Last night a thought came to me. Yes, the only one I had last night cause I was playing the mind numbing Call of Duty.
    Anyway - the problem with our code is -> it lets someone press a whole lot more keys then the shift and ctrl as long as those two are among them. So I was going to add a counter to see how many keys were pressed down when the mouse was clicked.
    Haven't had time to do this yet.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  6. #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,962
    Thanks
    71
    Thanked 606 Times in 599 Posts
    Quote Originally Posted by sunfighter View Post
    Thank you for your expansion of code jmrker.
    Last night a thought came to me. Yes, the only one I had last night cause I was playing the mind numbing Call of Duty.
    Anyway - the problem with our code is -> it lets someone press a whole lot more keys then the shift and ctrl as long as those two are among them. So I was going to add a counter to see how many keys were pressed down when the mouse was clicked.
    Haven't had time to do this yet.
    That's a good idea and goes along with the caution note of my post.

  7. #6
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,124
    Thanks
    37
    Thanked 1,089 Times in 1,085 Posts
    OK, I think I got it. I use an array to store what keys are being held down and remove keys that are released. I check to see if the key is down before adding a key, because holding a key down sends keyCode forever and not just once., understand.
    anyway I can see the array of keys and only allow passage if 2 keys are down and that they are ctrl and shift.

    Code:
    <!DOCTYPE html>
    <html>
    <head><title></title></head>
    
    <body>
    <img id='test' src='01.jpg'><br><br>
    
    <script>
    var arr = []; 
    document.addEventListener("keydown", function(event) {
    	var x = event.which;
    	if(!arr.includes(x)) arr.push(x);
    	return;
    });
    
    document.addEventListener("keyup", function() {
    	var x = event.which;
    	var index = arr.indexOf(x);
    	if (index > -1) arr.splice(index, 1);
    	return;
    });
    
    document.getElementById('test').addEventListener("click", function(event) {
    	if((arr.length === 2) && (arr.includes(16)) && (arr.includes(17))) // The shift key and the ctrl key
    	alert('BOth'); // Put the page redirection here
    });
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •