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
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>
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!
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?
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!
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>