BigVideo: How to Hide Control Options Under Video - javascript

I'm currently using BigVideo.js to show my vid as a background; however, there are multiple select forms showing under my video.
They're coming from the vjs-tracksettings class, such as 'window-color vjs-tracksetting'. Not all of vjs-tracksettings needs to be turned off though, as it includes the video as well.
I have a hunch that to turn it off, I need to turn off certain Component Options (https://github.com/videojs/video.js/blob/master/docs/guides/options.md), but I'm not sure how to do it through BigVideo. Also, my hunch is that it is within Control Bar (https://github.com/videojs/video.js/blob/master/docs/guides/components.md).
Or it has something to do with textTrackDisplay.
Any light would help!! I've been stuck on this for awhile.
(Also, I put all the js files in the header. I know you're supposed to put it at the end of the body tag, but for some reason, it doesn't work there.)
EDIT: I've attached a picture of what it looks like in the comments
I've attached my html here. If any css/js files are needed, let me know!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Include src files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/imagesloaded/imagesloaded.pkgd.min.js"></script>
<!-- BigVideo -->
<script src="bower_components/video.js/dist/video-js/video.js"></script>
<script src="bower_components/BigVideo.js/css/bigvideo.css"></script>
<script src="bower_components/BigVideo.js/lib/bigvideo.js"></script>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Page Title</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div id="hello" >
<script type="text/javascript">
$(function() {
var options = {
controls: false,
doLoop: true,
useFlashForFirefox: false,
poster: "initialVid.png",
}
var BV = new $.BigVideo(options);
BV.init();
BV.show([
{ type: "video/webm", src: "forest_ski.webm"},
{ type: "video/mp4", src: "forest_ski.mp4"}
]);
});
</script>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

Nevermind, i've solved the issue. its because i wasnt referring to bigvideo.css as a css file. if anyone ever runs across this, that's your problem!

Related

Why is is this click event handler not executing my code?

Hi while learning html and css I got the idea of adding an scroll to top arrow to my page, I found an solution and adapted it to my project, but the javascript part is not working as I thought and I really don't know how to fix this.
I have following html-code for the arrow:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta information -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Page</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="./css/styles.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght#200;300;400&display=swap" rel="stylesheet">
<!-- Scripts for Webfonts and Icons -->
<script src="https://kit.fontawesome.com/9dfc4870d4.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- custom js-->
<script type="text/javascript" src="./js/script.js"></script>
</head>
<body>
<i class="fas fa-chevron-up"></i>
//more elements...
</body>
</html>
and this is the javascript code which is located in the script.js file
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body,html').animate({
scrollTop : 0
}, 500);
});
The fadeIn/fadeOut functions are executed correctly on my page but when I click the link nothing is happening or at least it's not jumping to the top of the page.
But if I use the internal script-element to place the code at the end of the body section of my html file it does all work correctly, but why isn't the click working as intended if I place this code in a external file is it because of loading order in the html file?
You can use the defer attribute on your script to defer execution until the body loads:
<script type="text/javascript" src="./js/script.js" defer></script>

jQuery Mobile Custom Theme

I'm a beginner creating an app through jQuery Mobile, i am trying to incorporate a custom theme through theme roller and it prompted me to use these lines of code:
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
I have already put the themes folder in the apps folder however I am trying to figure out how to include these lines within this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).on('mobileinit', function(){
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
All while not changing the layout and current look. The end goal is to figure out how to change the background and button colors on my app. Thank you!

Why the JQuery script is not applied is Asp.net MVC blazor?

I am trying to build a new application using Blazor and I am facing a weird issue. The "onload" jquery scripts are not applied even though the breakpoint is fired.
Let's take an example, here is my setup:
_Host.cshtml:
#page "/"
#namespace DentalOffice.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Dento - Dentist & Medical HTML Template">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DentalOffice</title>
<!-- Favicon -->
<link rel="icon" href="./img/core-img/favicon.ico">
<!-- Core Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<!-- jQuery js -->
<script src="/js/jquery.min.js"></script>
<!-- Popper js -->
<script src="/js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="/js/bootstrap.min.js"></script>
<!-- All js -->
<script src="/js/dento.bundle.js"></script>
<!-- Active js -->
<script src="/js/default-assets/active.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Index.razor:
#page "/"
<!-- Preloader -->
<div id="preloader">
<div class="preload-content">
<div id="dento-load"></div>
</div>
</div>
active.js:
(function($) {
var dento_window = $(window);
// *******************************
// :: 1.0 Preloader Active Code
// *******************************
dento_window.on('load', function() {
$('#preloader').fadeOut('1000', function() {
$(this).remove();
});
});
})(jQuery);
If I run this page as plain HTML it works as expected and the loader disappears. Inside Blazor component is behaving very strange. If I set a breakpoint in active.js on line: $(this).remove();, the breakpoint is hit but the change is not updated on the UI (the preloader is not removed).
However, if I manually trigger remove from the console like this ($('#preloader').remove()), it works.
What could be wrong here?

Summernote works on local, but not on production

What is the possible reason of Summernote.js library working on local, but not on production? I use CDN for it, check my code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>{{ env('APP_NAME') }} | #yield('title')</title>
<!-- Favicon -->
<link rel="favicon icon" href="{{ asset('public/favicon.ico') }}">
<!-- Styles -->
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<!-- End Styles -->
and right above closing the body tag
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
dialogsInBody: true
});
});
</script>
<!-- End Scripts -->
You can also remove the protocol and can keep it like this so it will work for any case.
<script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
I've managed to figure out the problem.
I'm using SSL Certificate for my web app, so I had to change the URLs from http to https
I hope this answer will be helpful for another devs!

jQuery not running with the html file

I know there are enough and more questions on this topic, but none of them seem to fix up my problem. I am new to jquery and was trying it out for my code. It just doesn't seem to get up and running. I have tried changing the order in which the script occurs with other scripts, I have checked for the directory in which my jquery file resides, I have tried to use both the CDN version and the downloadable one. Nothing seems to work.
this is the head of my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Draft1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style1.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
<link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
i have put jquery at the end of the body of my html
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.11.3"></script>
<script>
$(document).ready((function) {
$("div").css("border", "3px solid red");
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
In this code I have put the jquery code with the html code itself. I have tried another version by putting the code in a separate file and running it, that doesnt work either.
Any help is much appreciated
I think there's a typo where you add the jquery tag. the file name should end in the extension .js so probably something like this:
<script src="./js/jquery-1.11.3.js"></script>
Try
Change <script src="./js/jquery-1.11.3"></script> to <script src="//code.jquery.com/jquery-1.11.3.js"></script>
Change $(document).ready((function) { to $(function(){ or $(document).ready(function(){
Your jquery script src is missing the .js extension
Try this:
<script>
$(document).ready(function($) {
$("div").css("border", "3px solid red");
});
</script>
Put jQuery in the head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Draft1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style1.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
<link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(document).ready((function) {
$("div").css("border", "3px solid red");
});
</script>
</head>

Categories

Resources