How To Hide url display in bottom left on mouseover?

后端未结

关注

 8  1664

I have a page for member\'s where log in is essential. On this page members get links for lectures conducted. Lectures links get added regularly. And Links to recording are fet

相关标签:

8条回答

感动是毒

2021-02-06 07:20

Check the below code it will work in all browsers

Hide url toaster in bottom left on mouseover

$(function(){
           $("a").each(function (index, element){
               var href = $(this).attr("href");
               $(this).attr("hiddenhref", href);
               $(this).removeAttr("href");
           });
           $("a").click(function(){
               url = $(this).attr("hiddenhref");
              // window.open(url);
                                         window.location.href = url;
           })
       });

ul > li > a{
  font-size: 18px;
  line-height: 30px;
}

ul > li > a:hover {
  color: #425CD2;
  text-decoration: underline !important;
  cursor: pointer;
}

<ul>
 <li><a href="http://www.google.com">Google</a></li>
 <li><a href="https://codepen.io">Codepen</a></li>
 <li><a href="https://codepen.io/awesomeSri/pen/WBKwpz?editors=1111" >Codepen hide url toaster snippet</a></li>

</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

0 讨论(0)

不知归路

2021-02-06 07:21
1. <a onclick="location.href='www.youtube.com'">click</a> you should this it will not show any URL or message on the bottom corner.
2. <a href="javascript:void(0)" onclick="location.href='https://www.youtube.com/></a> if you use javascript:void(0) then it wil shown javascript void(0) on right bottom corner in place of url.
0 讨论(0)
发布评论:

提交评论
- 加载中...
清歌不尽

2021-02-06 07:23

You can't override the browser. Just like you can't edit or remove what's shown in the address bar or bind a custom function to the back or forward buttons.

0 讨论(0)
发布评论:

提交评论
- 加载中...

旧时难觅i

2021-02-06 07:24

Here is a sort of hack to achieve this function
two efficient ways to go about this

1.

document.$('fancybox').addEventListener('click', function() { window.location.href = '<?$=data['recording_link']?>' } );

//non-jquery:

document.getElementsByClassName('fancybox')[0].addEventListener('click', function() { window.location.href = '<?=$data['recording_link']?>' } );

But as @Dr_J_Manish has already stated this doesn't work but will instead direct him to a nonsensical webpage address at '<?=$data['recording_link']?>' (Not a website address... DUH.)

2.

The second approach absolutely will work for @DR_J_Manish 's purpose: to activate a PHP function on a link click w/out the annoying overlay that appears when hovering a link.

To achieve this we will need to use a major workaround... This workaround could be considered a 'HACK':

1.

Make a new element and give it the ID 'Play-Recording':

<button id="Play-Recording" class="fancybox fancybox.iframe more_info_btn"> Play Recording </button>

2.

Make another new element which is exactly the same as @DR_J_Manish 's code above except for the class and other styling attributes.

<a id="GetClickedOn" href="<?=$data['recording_link']?>"> I'm Hidden! </a>

Make sure that this element is at the VERY BOTTOM of the Body tag or else there could be interference.

3.

Now make this element invisible and always off the screen...
Code so far should look like:

<body>
  <!--Put other stuff here or whatever-->

  <button id="Play-Recording" class="fancybox fancybox.iframe more_info_btn"> Play Recording </button>

  <!--Put some other stuff here...-->
  <!--End of other content other than hidden stuff...-->

  <a id="GetClickedOn" href="<?=$data['recording_link']?>" style="visibility: none; position: fixed; bottom: 3000%; width: 0; height: 0;"> I'm Hidden! </a>

  </body>

4.

Now for the fun part... Javascript... This part is pretty simple... add this code to the bottom of your page just after the <a href="">I'm hidden</a> tag we just made

<script>
  document.getElementById('Play-Recording').addEventListener('click', function() { document.getElementById('GetClickedOn').click() } );
</script>

5.

So your final code snippet should look like:

<body>


  <button id="Play-Recording" class="fancybox fancybox.iframe more_info_btn"> Play Recording </button>

  <a id="GetClickedOn" href="<?=$data['recording_link']?>" style="visibility: none; position: fixed; bottom: 3000%; width: 0; height: 0;"> I'm Hidden! </a>

  <script>
    document.getElementById('Play-Recording').addEventListener('click', function() { document.getElementById('GetClickedOn').click() } );
  </script>

</body>

Now if you really want to be efficient then you could research how to do PHP commands in javascript... but I know thats not the easiest...

You could also transfer the code inside the script tag to a .js file and then link it like so --> <script src="path-to-my-js-file.js"></script>.

Here is a snippet to demonstrate what type of thing i'm going for...

var button1 = document.getElementById('click1');
var button2 = document.getElementById('click2');
button1.addEventListener('click', function() { button2.click() } );

<button id="click1">Click Me</button>
<br/><br/>
<span>And get the same result as&nbsp;</span><a id="click2" style="text-decoration: none;" href="https://example.com"><button><strong>Clicking Me</strong></button></a>
<br/>
<p>
Re-Run the code-snippet to see the code in use again in case you missed it...
<br/>
Notice how with the first button there isn't any href attribute or anchor tag (the 'a' tag).
</p>

0 讨论(0)

野性不改

2021-02-06 07:28

This function convert all links to hiding hover links :

 $('a').each(function(){  
 $(this).attr('onclick','window.location.href="'+$(this).attr('href')+'"');
 $(this).attr('href','#');
 });

0 讨论(0)

执念已碎

2021-02-06 07:30
You just have to do the same as it was suggested with the button, but using the anchor you wanted. This is, use the onclick event instead of setting href attribute. And additionally you could add a noop js operation to href.

See this link: http://asp-arka.blogspot.com.uy/2014/08/hide-url-on-mouse-hover-of-hyper-link.html
```
<a class="fancybox etc etc etc" href="javascript:void(0)" onclick="window.location.href='<?php echo $data['recording_link'];?>'">Play Recording</a>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页