How to make an append with videojs? - javascript

I'm using this plugin here of videojs.
I can not make an append after selecting video.
The following code:
$('#chooseFile').click(function(event) {
event.preventDefault();
// prevents our button from submitting or doing anything else
$('#fileInput').trigger('click');
// passes on the click event to our hidden choose file input (or rather,
// it triggers a new click event, whatevs)
});
$("#fileInput").on("change", function() {
var files = this.files;
var anyWindow = window.URL || window.webkitURL;
var objectUrl = anyWindow.createObjectURL(files[0]);
var add = "<video id=\"my-video\" class=\"video-js vjs-default-skin vjs-big-play-centered vjs-16-9\" controls preload=\"auto\" data-setup=\"{}\">\
<source id=\"src_video\" type='video/mp4'>\
<p class=\"vjs-no-js\">\
To view this video please enable JavaScript, and consider upgrading to a web browser that\
supports HTML5 video\
</p>\
</video>";
$("#video").append(add);
$("#src_video").attr('src', objectUrl);
window.URL.revokeObjectURL(files[0]);
});
#fileInput {
display:none;
}
#fileName {
display: none;
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://vjs.zencdn.net/5.19.1/video-js.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/5.19.1/video.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">ButtStyle</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>File Selection Button Styling</h1>
<form>
<input type="file" id="fileInput">
<button id="chooseFile" class="btn"><i class="icon-file"></i> Choose File</button>
<button type="submit" class="btn btn-primary"><i class="icon-upload icon-white"></i> Upload It!</button>
</form>
</div> <!-- /container -->
<div id="video"></div>
If you prefer jsfiddle: Here
I can not make an append after selecting video. I do not want to show browser default. I want to show videojs here.
Any Solution ?

Related

My navbar won't collapse after loading page on div through js

I'm having troubles with my navbar because somehow when I get to see the collapse button and click one of the options that appear there when i try to collapse it, it gets stuck and won't get to normal unless I refresh the page.
This is the html that works with the page
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/Style.css">
</head>
<body>
<div class="">
<header>
<nav class="navbar navbar-inverse" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Ans Dashboard
</div>
<div class="collapse navbar-collapse text-center" id="navbar-1">
<ul class="nav navbar-nav">
<li class="" data-target="customer_main"><span class="glyphicon glyphicon-user"></span><?php echo " Customers";?></li>
<li class="" data-target="inventorypage"><span class="glyphicon glyphicon-th-list"></span><?php echo " Inventory";?></li>
<li class="" data-target=""><span class="glyphicon glyphicon-signal"></span><?php echo " Stats";?></li>
<li class="" data-target=""><span class="glyphicon glyphicon-asterisk"></span><?php echo " Settings";?></li>
</ul>
<div class="navbar-right text-center">
<ul class="nav navbar-nav">
<form method="post" class="nav navbar-nav">
<li><p class="navbar-text"><?php echo "Welcome"?><p></li>
<li><button type="submit" name="logout" id="logout" class="btn btn-danger btn-sm navbar-btn"><span class="glyphicon glyphicon-off"></span><?php echo " Log out";?>
<?php
include("logout.php");
?>
</button></li>
</form>
</ul>
</div>
</div>
</div>
</nav>
</header>
</div>
<!-- end of navbar-->
<div id="content">
<!-- Js page loads here -->
</div>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/mainpage.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
This is the javascript that loads the pages once the navbar area is clicked (mainpage.js)
$(document).ready(function()
{
var trigger = $('#navbar-1 ul li'), container = $('#content');
trigger.on('click', function(){
var $this = $(this), target = $this.data('target');
container.load(target + '.php');
trigger.removeClass("active");
$this.addClass("active");
return false;
});
});
EDIT: Already solved the problem, it had to with the pages being loaded had some problems with the way they were structured.
I have updated your code, please check the my fiddle link appended below,
$(document).ready(function() {
var trigger = $('#navbar-1 ul li'),
container = $('#content');
trigger.on('click', function() {
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
trigger.removeClass("active");
$this.addClass("active");
return false;
});
});
fiddle
Thanks.

Bootstrap dropdowns not working as asp include files

I am using server side includes for my navigation bar on my website. The bootstrap navigation bar works just fine in its own file: the dropdown opens and closes on mobile, but once I include it on the page I want it on ( ), the dropdown only will dropdown and won't go back up.
I'm not sure what I am doing wrong, or if anyone can figure out what is going wrong.
Here is the code to just the navigation bar that works correctly by itself.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="../_css/main.css" rel="stylesheet" type="text/css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/index.asp">O<span>NE</span> HEALTH <small>Nebraska One Health Resource Portal</small></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li>Health Resources</li>
<li class="active">Around the Globe</li>
<form class="navbar-form navbar-right search" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Then I here is where I try and include the file, where the dropdowns no longer work....
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="../_css/main.css" rel="stylesheet" type="text/css">
<!-- NAVIGATION -->
<!--#include virtual="/navigation/navigation.asp" -->
<div class="index-main">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<h1 style="text-align: center">One Health</h1>
<h4 style="text-align: center; line-height: 35px; font-weight: 300">One Health is a comprehensive approach to public health which recognizes that the health of the environment, animals (wild and domestic), and humans are interconnected. To have long-term success against diseases, we have to address all three areas because diseases in one group frequently spill over and affect the others. The Nebraska One Health Program is a grant-funded program to network, research, and educate producers, pest control operators, educators, public health officals, and other interested parties about addressing diseases in nature that affect humans and their animals.</h4>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
download the files and include them to your html page locally and check once.

Problems Loading Html into a div using Jquery

I'm having trouble loading an HTML file into a div using Jquery. From what I know, this should work, and the html file i'm loading has a simple tag in it saying "Hello World!" However, when I click the link that should trigger the event and load the HTML into the div, nothing happens, and "Hellow World!" doesn't display anywhere on the screen. Here's the code:
<html>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> <script src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<head>
</head>
<script src="js/funstuff.js"></script>
<body background="images/home_cooking.jpg" height="1000px">
<div class="navbar navbar-default navbar-fixed-top" role="Navigation" style="margin-bottom: 0">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Cookbook
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li> About us <li>
<li> Contact us</li>
</ul>
<form action="userlogin.html" class="navbar-form navbar-right" method="post">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Username" name="user">
<br> <input type="checkbox" name="check"> Remember me
</div>
<div class="form-group">
<input type="password" class="form-control col-lg-8" placeholder="Password" name="pass"> <br>
Forgot your password?
</div>
<button type="submit" class="btn btn-primary" style="margin-bottom: 20px">Login</button>
</form>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<script>
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("test.html");
});
});
</script>
</body>
</html>
I apologize if the indentation an everything is sloppy, i'm just trying to get something functional right now! Any help would be greatly appreciated!
EDIT: It's also worth noting that everything is based locally on my computer. test.html is located in the same folder as index.html.
You need to return false to cancel the default action of the anchor tag
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("test.html");
return false;
});
});
You can also write the script in this way:
$(document).ready( function() {
$("a").on("click", function() {
var id=$(this).attr('id');
if(id=="load_home"){
$("#content").load('test.html');
}
});
});

not able to drag and drop a button on canvas

I am trying to make a tool that will allow users to create their own html pages. For this i am allowing users to click on different items like button and drag and drop them on required locations. But for some reason the drag and drop is not working. The code attached is only for the button(the other attributes are still to be implemented). The css files are also attached.
`
<title>HTML5 Editor</title>
<link href="html editor/business-casual/css/bootstrap.css" rel="stylesheet">
<link href="html editor/business-casual/css/business-casual.css" rel="stylesheet">
<script type='text/javascript'>
var i = 1;
var bufferCanvas = new Array();
var ButtonArray = [];
ButtonArray.push({
type : "submit",
name: [],
value:[]
});
console.log(ButtonArray);
<!-- Create Button when user clicks on button-->
function createButton(ev)
{
var canvas=document.getElementById("myCanvas")
var button = document.createElement("input");
div=document.createElement('div');
button.type="submit";
button.style.position='absolute';
button.name="Button"+i;
button.value = "Button"+i;
div.appendChild(button);
div.draggable=true;
div.ondragstart="drag(event)";
div.id="draggable";
div.class="draggable ui-widget-content";
var l=i-1;
ButtonArray[l].name.push(div.id);
ButtonArray[l].value.push(button.value);
canvas.appendChild(div);
i++;
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
function allowDrop(ev)
{
ev.stopPropagation();
ev.preventDefault();
}
function drag(ev)
{
ev.stopPropagation();
ev.preventDefault();
}
function drop(ev)
{
ev.stopPropagation();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
ev.preventDefault();}
</script>
<style type="text/css">
<!--
.style1 {font-size: 18px}
-->
</style>
</head>
<body>
<div class="brand">HTML5 EDITOR</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../business-casual/index.html">Business Casual</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Create</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12" id="menu">
<ul>
<li>Add
<ul>
<li><a name ="textBox" onClick="createTextBox()">Text</a></li>
<li>Image</li>
<li>Audio</li>
<li>Video</li>
<li>Shapes </li>
<li>Lines</li>
<li><a name="button" onClick="createButton()">Buttons</a><li>
<li>Menus<li>
</li>
</ul>
</li>
</ul>
<ul><li><a name="SaveButton" onClick="saveTextAsFile()">Save</a></li></ul>
</div>
</div>
</div>
</div>
<div class="ui-widget-header" id ="myCanvas" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div><!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>`
you can use this greate example http://www.w3schools.com/html/html5_draganddrop.asp

Bootstrap Responsive Nav Bar

I am probably missing something quite small and it's frustrating me as I have been sitting here for a few hours now trying to work this out. The Navbar will not link with the Javascript. The button appears when the window is resized correctly however will not collapse the menu when clicked.
Quick look at my Links in my Header (Just in case they are in the wrong order)
<link rel="stylesheet" href="/assets/css/bootstrap.css">
<link rel="stylesheet" href="/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="/assets/css/style.css?v=2">
<script src="/assets/js/bootstrap.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-BootStrap--><script src="/assets/js/jquery-1.7.1.min.js"></script>
<script src="/assets/js/jquery.validate.min.js"></script>
<script src="/assets/js/script.js"></script>
<script src="/assets/js/bootstrap-fileupload.js"></script>
Quick look at my HTML -
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!--<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">-->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="span4">
<a href="{site_url}" title="People Team">
<img src="/assets/img/logo.png" alt="People Team Logo" />
</a>
</div>
<nav>
<div class="nav-collapse">
<ul class="nav">
<li{if segment_1 == ""} class="active"{/if}>
Home
</li>
<li{if segment_1 == "services"} {/if}>
Services
</li>
<li{if segment_1 == "about"} {/if}>
About the team
</li>
<li{if segment_1 == "contact"} {/if}>
Contact Us
</li>
</ul>
</div>
I assumed the Javascript is within the Bootstrap.min.js or Bootstrap.js files which are required for the navbar to work. I am just about stumped. Any help would be appreciated.
Cheers,
Change the order that your JS loads in. jQuery first, bootstrap plugins second.
<script src="/assets/js/jquery-1.7.1.min.js"></script>
<script src="/assets/js/bootstrap.js"></script> -- remove, as it is not really needed when including the minified version
<script src="/assets/js/bootstrap.min.js"></script>

Categories