Can't seem to catch any HTML5 video events - html

I'm trying to change the 'display' CSS property of a div when the video I have on my page finishes playing. I've tried different methods: adding an eventhandler, and listening for the end event in a separate <script> tag (under the window.onload block). I'm trying a third option but can't get it to work either:
in the body:
<div id="feels_feel_container">
<div id="AnswersWrapper" style="display: none">
Some stuff here.
</div>
<div id="VideoWrapper">
<video id="VideoWindow" src="../html/media/homepage.mp4" autoplay onended="VideoEnded()"/>
</div>
</div>
in the head:
<script>
function VideoEnded() {
AnswersWrapper.css("display", "block");
}
</script>
What am I doing wrong?

Found out that I was calling an invalid argument in my VideoEnded() function.
I should've put $("#AnswersWrapper) instead of AnswersWrapper.
Please ignore :)

Related

I would like to display the text of this file on my page. can I do this without printing out all the text in my code. this makes it hard to read?

I'm trying to put text on my page. can I input a text file?
<div class="container">
<input type="file" src="pone.txt">
</div>
like this well not like this as this don't work, please help, thanks a newbie.
you can use an iframe inside of a paragraph to do it, like i am showing below
<p><iframe src="name_of_your_text_file.txt"></iframe></p>
</body>
You can use the embed HTML element.
<embed src="phone.txt">
MORE INFORMATION ON EMBED TAG
If you have access to a server side scripting language, it would be a little neater to do:
<div>
<?php include('phone.txt'); ?>
</div>
If you want to use jQuery you can do it via:
$(function () {
$.get('/phone.txt', function (data) {
consile.log(data);
});
});
You cannot easily do that with HTML alone. You have to employ some JavaScript.
<!DOCTYPE html>
<html>
<body>
<input type='file' name='pone' id='pone'>
<pre id='sameOutput'> </pre> //this will render the text file as it is in the file directly on the webpage.
<script type='text/javascript'>
document.getElementById('pone').addEventListener('change', function (){
var myfile= new FileReader();
myfile.onload = function (){
document.getElementById('sameOutput'). textContent = myfile.result;
}
myfile.readAsText(this.files[0]);
})
</script>
</body>
</html>

Permanently delete DIV from code content by ID on the frontend

I have on my site, a page with several DIV's with some content (let's say that each one is a TO DO task).
I need to view that page URL and choose which DIV I want to delete permanently (in a way that even if I refresh the page, it won't be there anymore).
Is this possible?
I have this code, but the "deleted" DIV re-apear as soon I refresh the page...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#removeDIVid1").click(function () {
$("#id1").remove();
});
$("#removeDIVid2").click(function () {
$("#id2").remove();
});
$("#removeDIVid3").click(function () {
$("#id3").remove();
});
});
</script>
</head>
<body>
<div id="id1"><p>paragraph 1 <button id="removeDIVid1">Remove DIVid1</button></p></div>
<div id="id2"><p>paragraph 2 <button id="removeDIVid2">Remove DIVid2</button></p></div>
<div id="id3"><p>paragraph 3 <button id="removeDIVid3">Remove DIVid3</button></p></div>
</body>
</html>
The remove method just takes the object out of the DOM, and when you refresh the page, since the DOM tree is generated again, with your div elements. I think generating these tasks dynamically using jQuery will solve your problem. Let me know if you need help with the code.

HTML internal redirect after loading page

Im new to HTML and i have this loader code i got from : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
I adjust it to have a button and when i click on this button it sends an internal GET request to my code /clients.
I want the same code to work but without the button.
I want the loader to finish load and then redirect to the /clients page because now it is depended on the button click.
my code:
</head>
<body onload="myFunction()" style="margin:0;">
</body>
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
simply removing the button line is not doing anything, just showing blank page and in my code i see
its not redirecting to /clients
how can i do this ?
EDIT:
SOLVED by changing myFunction like #Bert Maurau
suggested
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ window.location.href = '/clients' }, 1000);
}
So you basicly want to redirect the user if your "loading" is done?
I see you're calling the myFunction() on page load.
You could add a basic
setTimeout(function(){ window.location.href = '/clients' }, 1000);
at the end of the function to redirect the user to /clients after one second.
(or when your loading function has done processing the data.
myFunction() {
// do stuff here
// ...
// wait for a second
const timeout = setTimeout(() => {
// redirect to clients
window.location.href = '/clients';
}, 1000);
}
You could submit your form from myFunction().
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
This function would be called when the page is finished loading and would submit the form without anybody pushing the button. You could even remove the button entirely.
Solution:
</head>
<body onload="myFunction()" style="margin:0;">
Remove the extra closing tag for BODY
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
You can use the below Jquery Script
<script>
$(document).ready(function(){
if($('#loader').hasClass('d-none') || $('#loader').css('display') == 'none'){
// or any other check to ensure that the loader is finished.
$('form').submit();
}
})
</script>
Please feel free to ask if you need more clarification.

Video will not display in bootstrap theme

I have a bootstrap theme that I am trying to get working. It displays a video in the background but also defaults to an image if that does not work. I can get the images to show but cannot get it to link up to the video. I have googled this and cruised are SO for a while and have not been able to solve the problem.
In the original code it had this linking to the images and same for the video
<img alt="" src="assets/img/icon1.png">
which I had to change to the following in order to get it to work
<%= image_tag "icon1.png" %>
the video tag is in the javascript and looks like this
<!-- Initialize background video in hero section, (above the fold) -->
<script>
$(document).ready(function() {
$("#videohero").wallpaper({
source: {
mp4: "video/hero.mp4",
ogg: "video/hero.ogv",
webm: "video/hero.webm"
}
});
});
</script>
so it is linking to "hero.mp4"
so I get the same error on this video as I do when I had the "img src= " code in there where it says routing error no route matches GET (asset path here). so what I am looking for specifically is how do I change the code above so that it will link to the video I tried this but it did not work.
<script>
$(document).ready(function() {
$("#videohero").wallpaper({
source: {('<%= video_tag 'hero.mp4' %>')
}
});
});
</script>
I also tried this
<script>
$(document).ready(function() {
$("#videohero").wallpaper({
source: {
mp4: ('<%= video_tag "video/hero.mp4" %>'),
ogg: "video/hero.ogv",
webm: "video/hero.webm"
}
});
});
</script>
I just am not sure how to write this in javascript and cannot find it online anywhere.
I'm not a Ruby developer, but I'll try to help you. I'd write a comment, but it's too much content to a comment.
The video_tag function that you're trying to use as <%= video_tag 'hero.mp4' %> returns the output <video src="/videos/hero.mp4" />, according to the documentation.
http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html
What I think you are trying to do is get the source for the image, not the entire tag. For it you can use the video_path function, according to the documentation.
http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html

same iframe load with other page from iframe jquery event

<iframe id="iframe" style=" width:100%; height:500px" src="other.jsp" frameborder="0" name="myone">
<html>
<head>
<script>
$(function() {
$("#adduser1").click(function() {
alert("hiiii");
$('#iframe').attr('src', 'adduser.jsp');
});
});
</script>
</head>
<body>
<input type="button" name="AddUser" id="adduser1" value="AddUser"/>
</body>
</html>
</iframe>
here i want to load same iframe (its already loaded with other.jsp ) with other jsp adduser.jsp on triggering of inside event of same iframe
its alerting with 'hiiii' but not loading with jsp page
You should not use
$('#iframe').attr('src', 'adduser.jsp');
inside the self iframe. Use
window.location = 'adduser.jsp'
Looking at your code, it should work and it works for me.
The constraint may be the path of the file.. If that is not the case.
Please try to reload the your iframe.
//Reload iframe
$('#iframe').attr('src', $('#iframe').attr('src'));
Just try this... this may help you!!
DEMO...
You are trying to load the iframe from a button which itself is inside the iframe, it will never work that way. You should use window.location for this
$(function() {
$("#adduser1").click(function() {
window.location = 'adduser.jsp'
});
});
Hope this helps :)