<a> tag with OnClick()...

Mike Eghtebas
Mike Eghtebas used Ask the Experts™
on
I want to add an OnClick event to the following line:
<a id="A4c" href="./Videos.html#UploadVideo" ><abbr title="watch demo video.">Data Upload</abbr></a>

Open in new window


It is supposed to show a message also navigate to href="./Videos.html#UploadVideo".

But this cannot be like alert box because it may mess up navigation.

Question: How can I incorporate something like toast (Demo:http://codeseven.github.io/toastr/demo.html) with this tag?

BTW, when I try something like:
<a id="A4c" href="./Videos.html#UploadVideo" onclcik="showSomething()"><abbr title="watch demo video.">Data Upload</abbr></a>

Open in new window

Understandably, it doesn't work I guess because <a> doesn't function like button on a form. So, how one fire from <a> or basically perform what has been described above?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
But this cannot be like alert box because it may mess up navigation.
Can you elaborate?

How will the message be dismissed - must the user click a button or does it just show for a period and then navigate to url.
Mike EghtebasDatabase and Application Developer

Author

Commented:
I have 4 hyperlinks in index.html and 4 descriptions + vidoes on videos.html.

Problem: When user clicks on a hyperlink on index.html, it navigates to vidoes.html but it is not clear to the user which of the videos s/he must concentrate.

Desired solution: The caption of the target video could change color to red, or blink several times.

But because there is no session variables etc, a messaging like toast is also acceptable in the following manner:
1. User clicks on the hyperlink ("Search video").
2. A mesage appears on the upper right corner of the screen telling user "please see item 3. Search video" for example. This message ideally better to appear on vidoes.html and close after a second or two. But, it will be okay just to show this message on index.html just before navigating to vidoes.html. But this simple request may have its own complication causing delay in navigation.

Any other solution helping the user what video to watch is also acceptable.

Thanks,

Mike
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
But because there is no session variables
Why not use a cookie?

If I understand your request you want to have the index.html link "focus" on the corresponding video on the video page?

Why not have the link open in a modal when clicked
Example
CSS
.overlay {
  width: 100%;
  background: rgba(0,0,0,.75);
  position: absolute;
  left: 0;
  top: 0;
}
.videobox {
  width: 50%;
  position: absolute;
  left: 50%;
  margin-left: -25%;
  top: 10%;
  background: white;
  text-align: center;
  padding: 20px;
  border-radius: 5px;
  
}
.close {
  width: 36px;
  height: 36px;
  position: absolute;
  top: -18px;
  right: -18px;
  display: block;
  background: transparent url(images/close.png) no-repeat center center;
  opacity: .8;
}
.close:hover {
  opacity: 1;
}

Open in new window

HTML
    <ul>
      <li><a class="video-link" href="http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4" data-description="This is the description for sample video #1">Video 1</a></li>
      <li><a class="video-link" href="http://techslides.com/demos/sample-videos/small.mp4" data-description="This is the description for sample video #1">Video 2</a></li>
    </ul>

Open in new window

jQuery
$(function() {
  $(document).on('keyup',function(e) {
    if (e.keyCode == 27) {
      $('.overlay').remove();
    }
  });
  $('body').on('click','.overlay, .close', function() {
    $('.overlay').remove();
  });
  $('body').on('click','.videobox', function(e) {
    e.stopPropagation();
  });
  $('.video-link').click(function(e) {
    var el = $(this);
    e.preventDefault();
    $('body')
      .append(
        $('<div class="overlay"/>').height(Math.max($(document).height(), $(window).height()))
        .append(
          $('<div/>').addClass('videobox')
            .append($('<a/>').addClass('close'))
            .append($('<video/>').prop('autoplay', true).attr('src', el.attr('href')))
            .append($('<div/>').html(el.data('description')))
        )
    );
  });
});

Open in new window

Working sample here
Mike EghtebasDatabase and Application Developer

Author

Commented:
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial