Can someone let me know if this is possible?
Thank you in advance for all your help.
I am embedding HTML5 video in wordpress 5 page.
I would like end of video to trigger a button to appear so people can move onto next video.
Button would only appear when video has finished playing...I was told there is onend event at the end of html5 video but not sure how to implement it.
Thank you.
This should work if your video is in < video > tags and you aren't opposed to using jQuery.
$(document).ready(function(){
$('video').on('ended',function(){
console.log('Video has ended!');
// or make a button visible etc.
});
});
Related
What would be the correct way to lazy load youtube video but keep focus on play / pause button like on the regular load (so people with disabilities can use space key to pause the video)?
All solution are seem not to keep focus on video and space scrolls the page down.
Is that possible at all?
This might not be the best way to do it as JavaScript will need to be enabled in you client's browser, however you should be able to run a JavaScript function when the iFrame loads like this:
const iframe = document.querySelector('.my-iframe');
iframe.onload = function() {
onLoad();
}
or like this:
<iframe src="https://logrocket.com/" onload="onLoad()" onerror="onError()"></iframe>
If you would then write a function called onLoad() that calls the .focus() method on the play button with code similar to that in the next block, you should be able to have focus set to the play button. Note that the following code block assumes that the ID of the play button will be "play_button" which is unlikely to be the case.
funtion onLoad() {
iframe.contentWindow.document.getElementById("play_button").focus();
};
Hope this helps!
Does anybody here knows how to implement a Splash Screen in SAPUI5? I have tried creating a page so that it would be the default page once the application is loaded, but there was an issue as to how to make it the default page even if another page is bookmarked. So what we did was use an image as the Splash Screen. Now the problem is the size of the image based on the device used.
Do you have any idea how we can implement this? Any idea would be of great help. Thank you so much! :)
Maybe Dialog control will fit your need?
Here is an example:
var oButton = new sap.m.Button({
text: "Hit Me To See Splashscreen",
press: function(){
var oDialog = new sap.m.Dialog({
stretch: true,
content:[
new sap.m.Text({text:"This is Splashscreen! Click Anywhere To Close the Splashscreen."})
]
}).attachBrowserEvent("click", function(){oDialog.destroy();});
oDialog.open();
}
}).placeAt("content");
And here is a working JSBIN example: LINK
I guess what you are looking for is a loading Animation on startup while loading libraries or backend-data: checkout this one, perfect guide! http://openui5.blogspot.com/2014/04/splash-screen.html
Thank you for your responses. I highly appreciate it. :)
Anyways, i didn't use an image nor a separate page. I just added a separate div in index.html which contains the image and the text. I added a script that will hide the div once the DOM Content is loaded.
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("splashScreen").style.display = "none";
document.getElementById("content").style.display = "block";
});
On this page I am making I have a button at the bottom of the page, which has to get wider and then move up when clicked. After the button has reached its new place, new content should load.
I have found a lot about CSS transitions an animations on hover, but I want to use this as a page transition.
How do I get this transition to happen before loading the new page??
I would love to do this with as little JS as possible..
Thanx Y'all!
Based on what you asked:
This delays the page load until the transition is complete (the setTimeout just need to be set to whatever the duration of the CSS transition is).
$('.link').click(function () {
$(this).addClass('clicked');
setTimeout( function() {
window.location.href = "url for page goes here";
}, 500);//set 500 to whatever timeout you want
});
See pen example: (http://cdpn.io/vyuch)
BUT
This is not a good idea... If CSS transitions aren't available, it will just look like a terrible link and confuse users. If they are, it is still slow and frustrating.
If you want the content to load on the same page, you need to use AJAX. To help with this, some more information would be helpful...
net website, I would like to add button by which user can view the page in Full Screen mode and switch back to Normal mode. [This is same as happens with F11]
I have seen many javascript code but all of them is opening new window in full screen.
But i would like have same window in Full screen
If it happn then i will put that button in MASTER page.
Please help?
I don't think it is possible to do what you are asking.
The only possible way is using window.open:
<span onclick="window.open('http://www.yourdomain.com/page.html','', 'fullscreen=yes, scrollbars=auto');">Open Full Screen Window</span>
(I'm not sure it's a good idea to force a user to use full screen mode...)
ugly solution but it works
<head>
<script type="text/javascript">
function max()
{
var obj = new ActiveXObject("Wscript.shell");
obj.SendKeys("{f11}");
}
</script>
</head>
<body onload="javascript:max()">
</body>
User already has this button, it's called F11.
DO NOT try to be 'smart'. This kind of functionality is in browser's scope, not in web application scope. It should not be your concern at all.
Instead focus on features that are truly relevant to your application.
I'm building a photo gallery in ASP.NET. The user can browse thumbnails along the left and select one, which brings a preview-sized version into the right pane of the page.
I'd like to fade between the images, so that the current one fades out and the next one fades in. I'm using jQuery to fade the preview image in after it is loaded, which works great. Unfortunately, I can't get the fadeOut script to run before the click event posts the page back to the server. The thumbnails are ASP.NET ImageButtons, which means they're <input> tags.
Is there a way to get the postback to delay just long enough for the image to fade out? I've seen some tricks with the form onSubmit and setTimeout() but that would affect all the links and buttons on the page. I want to delay postback for the thumbnails only.
TIA
EDIT: Based on my research, and trying the suggestions below, it may be possible to delay the postback to accomplish this but it's not the best approach on several levels. To get a clean fade transition between images, in the future I would not do any posting back at all. I would use jQuery exclusively for the fadeout, load, fadein.
Try adding a return false to your function that handles the fadein/out... It should prevent the page postback from occurring...
$('#<%= this.aspbutton.ClientId%>').click(function(){
$('#myDiv').fadeout("slow");
return false;
});
I'm not sure what you are getting on the PostBack where you would want to fade out an image and then fade one in. Have you considered using AJAX for that? You could even have the thumbnail image contain the necessary information within the image tags for the larger image.
Take a look at the jQuery Lightbox plugin. I have implemented this plugin and modified the .JS a bit to allow for viewing a higher resolution photo in addition to the web view. Check it out here.
$('#<%= this.aspbutton.ClientId%>').click(function(){
var $btn = $(this);
$('#myDiv').fadeout("slow", function() {
$btn.unbind('click').click();
});
return false;
});
Here's the solution I used:
Since I AM using MS AJAX with an UpdatePanel, I can use the client-side AJAX event handler.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut);
function fadeOut() {
if ($('.mainImage').length > 0) {
$('.mainImage').fadeOut('normal');
}
}
This gives me the exact behavior I wanted- any time the user navigates between thumbnails, the image fades out, loads, then the new one fades in.
HOWEVER...
This is still not ideal, as there is a pause between fades while the page posts back. It will work for now but in the long run it would be better to use jQuery to set the preview image rather than the thumbnails posting back as ImageButtons.