<a> tag with OnClick()...
I want to add an OnClick event to the following line:
It is supposed to show a message also navigate to href="./Videos.html#Upload
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" ><abbr title="watch demo video.">Data Upload</abbr></a>
It is supposed to show a message also navigate to href="./Videos.html#Upload
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>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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.
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
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
But because there is no session variablesWhy 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;
}
<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>
$(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')))
)
);
});
});
Thank you. I will have a followup question at:
http://www.experts-exchange.com/questions/28737060/Video-overlay-fine-tuning.html
http://www.experts-exchange.com/questions/28737060/Video-overlay-fine-tuning.html
Premium Content
You need an Expert Office subscription to comment.Start Free Trial