i'm developing a online drum pad site, and i have few problems, one of them is :
I want repeat the kick when the user clicking on more then one time on the same time "like click click click and the kick repeating each time Faster"
like a real drumpad!
my Javascript code is :
<script>
var kick1 = new Audio("kick1.mp3");
var kick2 = new Audio("kick2.mp3");
document.onkeydown = function (e) {
var keyCode = e.keyCode;
if(keyCode == 81) {
kick1.play();
}
var keyCode = e.keyCode;
if(keyCode == 87) {
kick2.play();
}
};
</script>
My Html is this :
<!DOCTYPE html>
<html>
<head>
<title>Loops pad online</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsebar" aria-expanded="true">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="collapsebar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="clear">
<div class="container">
<div class="jumbotron fixed-jmb">
<div class="container" id="padpa">
<button type="button" onclick="kick1.play();"
class="btn btn-default cube-call">808Kick<br><kbd>Q</kbd></button>
<button type="button" onclick="kick2.play();" class="btn btn-default cube-call">Chromo Kick<br><kbd>W</kbd></button>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
My css : Bootstrap
Quick refactor, might fix you issue:
document.onkeydown = function (e) {
switch(e.keyCode) {
case 81:
var kick1 = new Audio("kick1.mp3");
kick1.play();
break;
case 87:
var kick2 = new Audio("play.mp3");
kick2.play();
break;
default:
console.log("Key not bound!");
}
};
Taken from this SO answer.
Related
I deployed website using Django. I used external js code for grid (I want site to be user-friendly for all screens). When running just html using same js code or running it on my computer through manage.py it works fine. But when I actually deployed website grid become unclickable from small screens and you cannot see menu.
I couldn't find anything in Google. I am not sure if I have to use load static because I use external script, but tell me if I am wrong
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- DOCUMENTATION NAVBAR -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<!-- Inside of a Container -->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- This is the actual code that create the "hamburger icon" -->
<!-- The data-target grabs ids to put into the icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!-- Code for the hamburger icon-->
<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" style="color:white;"
href="{% url 'wpb:index' %}">
Mycroft Conspiracy Project</a>
</div>
<!-- Anything inside of collapse navbar-collapse goes into the "hamburger" -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">О проекте <span class="sr-only">(current)</span></li>
<li class="active">Политика<span class="sr-only">(current)</span></li>
<li class="active">Психология<span class="sr-only">(current)</span></li>
</ul>
<!-- SEARCH BAR -->
<form action="{% url 'wpb:search' %}" method="get" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Поиск">
</div>
<button type="submit" class="btn btn-default" name="search">Поиск</button>
</form>
<!-- Stuff on the Right -->
<ul class="nav navbar-nav navbar-right">
<li>Обратная связь</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- OTHER STUFF ON THE PAGE -->
<!-- Need to have JQuery and Javascript for DropDown Actions to work -->
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<br />
<br />
<br />
<body style=" height: 800px;
position: relative;">
{% block body_block %}
{# Anything outside of this will be inherited if you use extend.#}
{% endblock %}
</body>
</div>
</br>
<div style="font-family:Palatino Linotype;position: sticky; position: -webkit-sticky;left:0;bottom:0;width:100%; top: 100%; height: 12rem;background-color:#2e2c27; border:1px dotted #003333; padding:.8em; ">
<h4 style="color:white;font-weight: bold;">Mycroft Conspiracy Project</h4>
<span style="font-size:12pt; font-family: 'Cambria','times new roman','garamond',serif; color:white;">Достоверность информации</span></br>
<p style="font-size:10pt; line-height:10pt; font-family: 'Cambria','times roman',serif; color: white;">Проект является любительским и не носит информационный характер. Хотя автор указывает в каждой статье степень своего личного отношения к
описываемым версиям или данным, здесь отсутствуют намерения представить статьи как источники, на которые стоит ссылаться. При копировании материалов с сайта ссылка
обязательна.</p>
<span style="padding-top:10px; font-weight:bold; color:#CC0000; font-size:10pt; font-family: 'Calibri',Arial,sans-serif; "></span></br></br>
</div>
</body>
</html>
Found it. Problem was that link to js code was starting with http. Browser was blocking it as mixed content. Needed just to change it to https.
Having issues with showing tab as active in php. The first tab will show active but nothing changes when I select the next. This is my first attempt at creating a php webpage so any help would be greatly appreciated.
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $page_title; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css?version=51">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$('.nav.navbar-nav > li').on('click', function (e) {
e.preventDefault();
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-text h3">
<span class="text-bottom">SSI-Portal</span>
</div>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">SOP</li>
<li>Time Accounting</li>
<li>Expenses</li>
<?php if ($_SESSION['perm'] == 2) { echo
'<li>Managers</li>';
}
?>
<?php if ($_SESSION['perm'] == 3) { echo
'<li>Accounting</li>';
}
?>
<?php if ($_SESSION['perm'] == 4) { echo
'<li>Managers</li>
<li>Accounting</li>
<li>Admin</li>';
}
?>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</div>
</div>
</nav>
</body>
</html
Its mostly working, I'm just trying to finish up the styling.
Place the script tag at the end of body tag as:
<script>
$('.nav.navbar-nav > li').on('click', function (e) {
e.preventDefault();
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
</script>
</body>
So I'm learning JS/Ajax and I wanted to try to load html content into my page with the click of a button. Everything works as long as I call the function outside of my Navbar and I cant figure out why?
I'm trying to load html content from "bestellung.html" into a div with the id of "main-well". Everything works fine except when I want to call the ladeBestellung() function from within my Navbar... the content gets loaded but is instantly overwritten and disappears... why??
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QR2BUY Bestellübersicht</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Eigene Styles -->
<link href="css/styles.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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"><!-- Haupt-Container -->
<!-- Haupt-Navigationsleiste -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><!-- Anfang Navigationsleiste-Header -->
<!-- Button für die mobile Ansicht -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation aufklappen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-qrcode"></span> QR2BUY
</a>
</div><!-- Ende Navigationsleiste-Header -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Hilfe</li>
<li class="dropdown">
Konto <span class="caret"></span>
<ul class="dropdown-menu">
<li>Einstellungen</li>
<li>Bestellhistorie</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right"><!-- Anfang Suchfeld -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Bestell-Nr. eingeben...">
<div class="input-group-btn">
<button class="btn btn-default" onClick="ladeBestellung()"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form><!-- Ende Suchfeld -->
</div>
</div>
</nav><!-- Ende Haupt-Navigationsleiste -->
<div class="row"><!-- Start Main-Row -->
<div class="col-xs-12"><!-- Start Main Col -->
<div class="well" id="main-well">
</div><!-- Ende Well -->
</div><!-- Ende Main-Col -->
</div><!-- Ende Main-Row -->
</div><!-- Ende Haupt-Container -->
<footer class="footer"><!-- Anfang Footer -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<p class="text-center">
<span>© 2016 QR2BUY</span> - Impressum - Kontakt
<p>
</div>
</div>
</div><!-- Ende Haupt-Container -->
</footer><!-- Ende Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
document.getElementById('main-well').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'bestellung.html');
function ladeBestellung() {
xhr.send();
}
</script>
</body>
</html>
Default type of <button> is "submit" which reloads the page and overrides the javascript-generated html - so the solution is to use <button type="button"></button>
my code is working properly, but after the output of my images i want them to overlap each other a bit, that might be using margins, padding or any other script, and is there a possiblity to add z-index beacuse these images should overlap, each other.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Petroleum Project</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<link href="css/home.css" rel="stylesheet">
</head>
<body>
<div id="main">
<nav id="nav01"></nav>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="home.html">Home</a>
<!--<a class="navbar-brand" href="index.html"><img src="images/main-icon.jpg" style="width:80px;"/></a>-->
<a class="navbar-brand" href="index.html">Layers_Lib</a>
<a class="navbar-brand" href="well_formation.html">Well Formation</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-4" >
<div class="thumbnail" style='padding-left:20px;' >
<div class="caption-full" >
<center><h2><strong>Well Formation Inputs</strong></h2></center>
</div>
<h4><b>Enter Height of the well:</b><input type="text" id="well_height"></h4>
<h4><b>Select Layers:</b>
<select multiple="true" id="layers_box">
<option value="conglomerate">Conglomerate</option>
<option value="gravel">Gravel</option>
<option value="sandstone">Sandstone</option>
<option value="siltstone">Siltstone</option>
<option value="shale">Shale</option>
<option value="clay">Clay</option>
<option value="limeStone">LimeStone</option>
<option value="dolomite">Dolomite</option>
</select>
</h4>
(press and hold CTRL to select multiple layers)
</br></br>
<button id="layer_submit"class="btn-info btn" ><b>Submit</b></button>
<button id="layer_clear"class="btn-info btn" onClick='$("#layers_box option:selected").removeAttr("selected");$("#well_height").val("");' ><b>Clear</b></button>
</div>
</div>
<div class="col-md-5" id="" style="display:block">
<h3> Layers </h3>
<div id="layer_structure" style="width:402px;border:1px solid #000;margin-left:200px;">
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
function img_create(src, alt, height) {
var img= document.createElement('img');
img.src= src;
if (alt!=null) img.alt= alt;
img.style.width = '400px';
img.style.height = height+'px';
$("#layer_structure").append(img);
}
jQuery(document).ready(function(){
$("#layer_submit").click(function() {
height_of_well = $("#well_height").val();
hw = parseInt(height_of_well);
if(height_of_well == ""){
alert("Please Enter Height of Well");
return false;
}
console.log(height_of_well);
layers = $("#layers_box").val();
layer_heights = [];
$("#layer_structure").html("");
$("#layer_structure").css("height",height_of_well+"px");
for(i = 0; i< layers.length; i++){
layer_heights[i] = prompt("Please Enter height of" +layers[i],"");
hw = hw - parseInt(layer_heights[i]);
if(hw < 0){
alert("Well height is less than layers height");
return false;
}
img_create("images/well_formation/"+layers[i]+".png",layers[i],layer_heights[i]);
}
});
});
</script>
<style>
.list-group{
background-color:#337ab7;
}
</style>
</div>
</body>
</html>
Overlapping in CSS can be done like this. The top image should have a z-index that is greater than the image below. And also, those elements must have a position set.
.frame{
position:relative;
}
.frame img{
width: 100%;
position:absolute;
}
.frame img#gabe{
z-index: 10;
top: 50px;
left: 50px;
opacity: 0.5;
}
.frame img#hl3{
z-index: 9;
}
<div class="frame">
<img id="gabe" src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg">
<img id="hl3" src="http://masterherald.com/wp-content/uploads/2014/12/Half-Life-3.jpg">
</div>
When viewing at mobile screen resolution and you select the mobile nav icon bar, nothing happens. The desired effect is to have the same main navigation be used in mobile. I have ensured my data-targets (mobile_nav) match, and that markup looks good, but am new to Bootstrap. Any help appreciated!
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Loading Fonts Awesome CDN from boostrapcdn.com -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- add padding from best practices for fixed topbar navs -->
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobile_nav" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div class="collapse navbar-collapse" id="mobile_nav">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<form action="" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</header>
</body>
</html>
Bootstrap requires jQuery to work, you should include it before the Bootstrap JS in your HTML:
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>