I have a interesting idea(debatable). Basically I would like to make a beat pad similar to https://www.youtube.com/watch?v=3vC5TsSyNjU out of jQuery and a keyboard.
It wasn’t hard assigning sounds to keys on the keyboard.
<script type="text/javascript" src="js/jquery.playSound.js"></script>
<script type="text/javascript" src="js/jquery.hotkeys.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery(document).bind(
'keydown',
'q',
function(ect){
$.playSound('tracks/basses/bass01.ogg');
});
jQuery(document).bind(
'keydown',
'w',
function(ect){
$.playSound('tracks/drums/clap04.ogg');
});
jQuery(document).bind(
'keydown',
'e',
function(ect){
$.playSound('tracks/beats/rave_hihat02.ogg');
});
jQuery(document).bind(
'keydown',
'r',
function(ect){
$.playSound('tracks/4.wav');
});
}); // End
</script>
How can I drag/drop sounds to a key on the keyboard?
Ok, i understand your question. Here is the way i would proceed:
function drawImage(e) {
e = e || window.event;
if (e.keyCode == 13) {
if (counter < images.length) {
counter ++;
if(playable) {
audio.src = sounds[counter-1];
audio.controls = false;
audio.load();
audio.play();
}
var img = new Image();
img.src = images[counter-1];
img.onload = function() {
ctx.drawImage(img, 0, 0, WIDTH, HEIGHT);
}
}
}
}
First of all you need to assign for each key pressed an audio file stored into an array. You can create the audios from html markup, but this way is more elegant. So i will stick with this way. Then for each key press associate an audio from the corresponding audio array. In my example i used canvas for associating an image to an audio file. This is however only for visual appearance. Note that for simplicity i only used the Enter key. For each key press you will hear another beep.
Another thing which you have to take into account is to use test cases because not every browser can play audio. You can test if the browser support audio like so:
var audio = document.createElement('audio');
var canPlay = !!(audio.canPlayType && audio.canPlayType('audio/mpeg;').replace(/no/, ''));
var playable = canPlay ? true : false;
If not you can use fallback to flash:
Adding sound on clicking a image in HTML 5
Example: http://jsfiddle.net/N9Q6S/1/
This is what I used
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello</title>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="js/jquery.hotkeys.js"></script>
<link rel="stylesheet" href="" />
<style>
.key{
width: 50px;
height: 50px;
border: solid 1px #000;
}
.song{
width: 50px;
height: 50px;
border: solid 1px #f0f;
float: right;
}
</style>
<script src=""></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".song" ).draggable();
$( ".key" ).droppable({
drop: function( event, ui ) {
$( this )
var title = ui.draggable.attr('title');
$(this).attr({
//text: 'Beijing Brush Seller',
title: title,
});
//alert("Dropped!");
}
});
$(this).bind(
'keydown',
'q',
function(ect){
var track = $('.key').attr("title");
//alert(track);
var snd = new Audio(track); // buffers automatically when created
snd.play();
});
$(this).bind(
'keydown',
'w',
function(ect){
var track = $('.key').attr("title");
//alert(track);
var snd = new Audio(track); // buffers automatically when created
snd.play();
});
$(this).bind(
'keydown',
'a',
function(ect){
var track = $('.key').attr("title");
//alert(track);
var snd = new Audio(track); // buffers automatically when created
snd.play();
});
}); // End
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="key" title="">Key</div>
<div class="song" id="" title="tracks/basses/bass01.ogg">Song</div>
<div class="song" id="" title="tracks/bassloopes/rave_bass01.ogg">Song</div>
<div class="song" id="" title="tracks/basses/synth_acid02.ogg">Song</div>
</body>
</html>
Related
I would appreciate some help from others please.
I've made a development html page that loads another page into an iframe using jquery, depending on which button is pressed. This work successfully (after many hours of research on here!)
The problem comes about when the page is created using PHP (my aim is to implement the code on a more complex page, but I'm trying things out first). Although it looks fine, the jquery doesn't work when I press either button. I would appreciate some guidance from more experienced users please.
Thanks
Graham
Code--->
<?php
$rider1=1;
$rider2=2;
$file1="2015-07-22-19-11-52.fit";
$file2="2015-07-21-12-45-55.fit";
echo '<!doctype html>
<html>
<meta charset="utf-8">
<title>Loading a page into a dialog</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".dialog").dialog({
autoOpen: false,
});
$(".session").click(function () {
var src = $(this).data("href");
var title = $(this).data("id");
var $dialog = $("<div></div>")
.html("<iframe style="border: 1px; " src="';
echo '"+ src + "';
echo '" width="100%" height="100%"></iframe>")
.dialog({
autoOpen: false,
modal: true,
height: 625,
width: $(window).width() - 20,
height: $(window).height() - 20,
title: title
});
$dialog.dialog("open");
});
});
</script>
</head>
<body>
<h2>subjects</h2>
<button class="session" data-id="#dialog1" data-href="fitanalysis.php?rider='.$rider1.'&file='.$file1.'">Rider1</button>
<br>
<button class="session" data-id="#dialog2" data-href="fitanalysis.php?rider='.$rider2.'&file='.$file2.'">Rider2</button>
<br>
</body>
</html>';
?>
Don't echo all of your HTML like that, you can punch in and out of PHP with <?php ...code here... ?> anywhere.
No opening <HEAD> tag.
Odd string concatenation in your JavaScript.
Give this a try:
<?php
$rider1 = 1;
$rider2 = 2;
$file1 = "2015-07-22-19-11-52.fit";
$file2 = "2015-07-21-12-45-55.fit";
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Loading a page into a dialog</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".dialog").dialog({
autoOpen: false,
});
$(".session").click(function () {
var src = $(this).data("href");
var title = $(this).data("id");
var $dialog = $("<div></div>")
.html('<iframe style="border: 1px;" src="' + src + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 625,
width: $(window).width() - 20,
height: $(window).height() - 20,
title: title
});
$dialog.dialog("open");
});
});
</script>
</head>
<body>
<h2>subjects</h2>
<button class="session" data-id="#dialog1" data-href="fitanalysis.php?rider=<?php echo $rider1; ?>&file=<?php echo $file1; ?>">Rider1</button>
<br>
<button class="session" data-id="#dialog2" data-href="fitanalysis.php?rider=<?php echo $rider2; ?>&file=<?php echo $file2; ?>">Rider2</button>
<br>
</body>
</html>
Have been using the following on a form's Thankyou page to redirect back to the form in 5 seconds and neatly pre-fill the name fields with values:
<script> setTimeout(function() {location.href = '<?php echo $var3['returnurl'] ?>?fullName[first]=<?php echo $var1['first'] ?>&fullName[last]=<?php echo $var2['last'] ?>'}, 5000); </script>
Works great until the returnurl field is a https:// url.
Then it stays on the thankyou page in a loop trying to do the redirect.
There are no iframes involved .... have tried top.location.href ... no good ... even tried location.replace
Can anyone see any limitations with the code that may be impacting the redirect to an https:// url.
Code in the php file ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="width">
<title>Thankyou</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
background: #fff;
font-family: Arial;
}
#message
{
position: absolute;
left: 50%;
width: 320px;
margin-left: -160px;
}
</style>
<?php
$answers = $_POST;
$var1 = array("first" => $answers[fullname][0]);
$var2 = array("last" => $answers[fullname][1]);
$var3 = array("returnurl" => $answers[returnurl]);
?>
</head>
<body>
<script>
setTimeout(function() {location.href = '<?php echo $var3['returnurl'] ?>?fullName[first]=<?php echo $var1['first'] ?>&fullName[last]=<?php echo $var2['last'] ?>'}, 5000); // this duration is in millisecs
</script>
<div id="message">
<p> </p>
<div style="text-align: center;"><h1>Thank You!</h1></div>
<div style="text-align: center;">Your submission has been received.</div>
<div style="text-align: center;">We're most grateful</div>
<div style="text-align: center;"> </div>
<div style="text-align: center;"><img src="http://www.mazeguy.net/bigsmilies/thumbsup.gif"></img></div>
<div style="text-align: center;"> </div>
<div style="text-align: center;">You will return in 5 seconds</div><br />
</body>
</html>
Here's the result of a submission ... the Thankyou Page source shows ... yeah the secure page url is not being passed through ....
<script>
setTimeout(function() {location.href = '?fullName[first]=&fullName[last]='}, 5000); // this duration is in millisecs
</script>
Have you considered submitting the form via Ajax? The user would never leave the form submission page. You could simply display a modal with the confirmation message. That seems simpler than redirecting the user. It may be a nicer user experience as well.
Let's assume your form has a submit button with a class of 'submit'. You could so something like this in jQuery:
$(function() {
$('body').on('click', '.submit', function(event) {
event.preventDefault();
var target = event.currenTarget;
var form = $(target).closest('form');
var action = $(form).attr('action');
$.post(action, form.serialize())
.done(function() {
alert('Thanks for your submission!');
})
.fail(function() {
alert('Oops! Something went wrong... PLease try again.');
});
});
});
Check out Bootstrap. They have some nifty looking modals you can use.
I am actually trying to do exactly what has been done in this example "http://jsfiddle.net/BrLp7/" but unfortunately not able to perform this task when retrieving data from csv file. Below is my code which doesn't output anything and when we click on a point in a given example the resulting graph has to be stored in some text file in this form 5,10,13 if last point was clicked.
<html>
<head>
<title>A BASIC HTML FORM</title>
</head>
<body>
<FORM NAME ="form1" METHOD ="POST" ACTION = "BasicForm.php">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'Input'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Units'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var x=this.series.processedXData.indexOf(this.x);
var items = line.split(',');
seriesData =[];
$.each(items, function(itemNo, item) {
if (itemNo < x) {
seriesData.push(parseFloat(item));
} else if (itemNo == x){
seriesData.push(0);
}
});
}
this.series.setData(seriesData);
}
}
}
},
series: []
};
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var series = {
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item)); });
options.series.push(series);
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- 3. Add the container -->
<div id="container" style="width: 1400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
</FORM>
</body>
</html>
I have trawled the net and Stack Overflow and have not found an adequate answer to this question. Before I start the trial and error process of finding my own solution, I thought I would turn to the Stack Overflow braintrust and see if there was already a successful implementation.
I have an AJAX powered page that degrades properly for non-javascript browsers and SEO. Each click in the AJAX version can be represented by a unique URL.
What I want to do is to dynamically change the HREF of the button. I do understand that this tag is converted to standard HTML at runtime (namely into a nasty table / iframe layout).
I was just wondering if anyone had any insight as to how to implement this FB like button onto AJAX powered pages?
Cheers in advance :)
EDIT:
What do you think of this method I just hacked together? See any huge problems with it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery/jquery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script language="javascript" type="text/javascript">
$("document").ready
(
function ()
{
CreateNewLikeButton("http://www.yahoo.com")
$("a#ChangeToGoogle").click
(
function (e)
{
e.preventDefault();
CreateNewLikeButton("http://www.google.ca")
}
);
}
);
function CreateNewLikeButton(url)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", url);
$("div#Container").empty().append(elem);
FB.XFBML.parse($("div#Container").get(0));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
</div>
</form>
</body>
</html>
SIMPLE SOLUTION
Just parse trigger the parse function when load complete.
If you’re using jQuery, there’s a real easy and slick solution to this problem:
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){}
});
http://developers.facebook.com/docs/reference/plugins/like/
This is the solution I ended up going with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery/jquery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script language="javascript" type="text/javascript">
$("document").ready
(
function ()
{
CreateNewLikeButton("http://www.yahoo.com")
$("#ChangeToGoogle").click
(
function (e)
{
e.preventDefault();
CreateNewLikeButton("http://www.google.ca")
}
);
}
);
function CreateNewLikeButton(url)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", url);
$("#Container").empty().append(elem);
FB.XFBML.parse($("#Container").get(0));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
</div>
</form>
</body>
</html>
You're making this hard on yourself - just render a new iframe-based one.
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function()
{
$( '#ChangeToGoogle' ).click( function( event )
{
event.preventDefault();
$( '#Container' ).empty().append( $('<iframe />')
.attr( 'src', 'http://www.facebook.com/plugins/like.php?href=www.google.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80' )
.attr( 'scrolling', 'no' )
.attr( 'frameborder', 'no' )
.attr( 'style', 'border:none; overflow:hidden; width:450px; height:80px;' )
.attr( 'allowTransparency', 'true' )
);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<iframe src="http://www.facebook.com/plugins/like.php?href=www.yahoo.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:450px; height:80px;"
allowTransparency="true">
</iframe>
</div>
</form>
</body>
This is how I handled this situation when I ran into it - seems to work well.
// Set Facebook Like Button with jQuery
setFBLikeButtons = function (container,url,send,layout,width,show_faces,font) {
// Set Default Args
if(!send) { send = "false"; }
if(!layout) { layout = "button_count"; }
if(!width) { width = "100"; }
if(!show_faces) { show_faces = "false"; }
if(!font) { font = "arial"; }
$(container).empty(); // Remove current like button
$(container).html('<fb:like href="'+url+'" send="'+send+'"
layout="'+layout+'" width="'+width+'" show_faces="'+show_faces+'"
font="'+font+'"></fb:like>');
FB.XFBML.parse(); // This is the magical syrup
}
create like button
<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
window.onload = function(){
var divs = document.getElementsByTagName("span");
for(var i=0; i<divs.length i++){
if(divs[i].className == "likes"){
if(divs[i].title){ var Href = divs[i].title; }else{ var Href = window.location; }
var fb_like = document.createElement("fb:like");
fb_like.setAttribute("href", Href);
fb_like.setAttribute("layout", "box_count");
fb_like.setAttribute("show_faces", "false");
fb_like.setAttribute("width", "55");
document.getElementById("likes2").appendChild(fb_like);
}
}
}
</script>
</head>
<body>
<span class="likes" title="www.bzzs.me"></span>
</body>
Load it after the window loads, this is what works for me:
$(window).load(function(){
$.getScript('http://connect.facebook.net/en_US/all.js', function() {
try{
FB.XFBML.parse();
} catch(ex) {}
});
});
If you're using the jQuery Mobile framework you can run the same code as the accepted answer in the pagecontainershow event which jQuery Mobile uses when it displays a new page.
// initialize new pages
$(document).on("pagecontainershow", (e, ui) =>
{
try
{
FB.XFBML.parse();
} catch (ex) { }
});
Why does this work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="graph">
<? include('sites/test.php') ?>
</div>
</body>
But this does not:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="graph">
</div>
<script>
$(document).ready(function() {
$('#graph').load('sites/test.php');
});
</script>
</body>
Here is test.php if required:
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="./data.js"></script>
<div id="text" style="width:500px;height:500px;position:relative;border:1px solid red;">
<div id="map_canvas" style="border:1px solid green;"></div>
</div>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-36.42,145.704);
var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create polygon overlays from site data in file data.js included above
// Overlays are defined by a set of coordinates
// We will also be setting up an infowindow with the site name
// The infowindow will be designed to point to the 'center' of each site so we calculate the 'centroid' of each overlay in the code below as well
var overlay;
var number_of_overlays = 29;
for (var k = 0; k < number_of_overlays; k++) {
var pk = primaryKeys[k];
var verticesArray = new Array((eval("siteVertices_" + pk).length) / 2);
var m = 0;
var centroidLat = 0;
var centroidLng = 0;
for (var n = 0; n < eval("siteVertices_" + pk).length; n += 2)
{
verticesArray[m] = new google.maps.LatLng(eval("siteVertices_" + pk)[n], eval("siteVertices_" + pk)[n + 1]);
m = m + 1;
centroidLat += eval("siteVertices_" + pk)[n];
centroidLng += eval("siteVertices_" + pk)[n + 1];
}
var cent = new google.maps.LatLng(centroidLat/m, centroidLng/m);
var overlay = new google.maps.Polygon({
paths: verticesArray,
strokeColor: "#FF0000",
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: "#FF0000",
fillOpacity: 0.20,
position: cent,
map:map });
attachInfoWindow(overlay, k);
}
}
function attachInfoWindow(overlay, number) {
var infowindow = new google.maps.InfoWindow({ content: siteNames[number] });
google.maps.event.addListener(overlay, 'click', function() { infowindow.open(map, overlay); });
}
window.onload=initialize;
</script>
I really need to use jquery for a click event and can't understand why .load won't work.
MTIA!
EDIT - Apologies for the vagueness of "not working"! The initialize function does not seem to uhmmm... initialize. So the window.onload=initialize appears to work using include, but does not seem to work using .load.
I hope this is clearer.
window.onload=initialize;
that will execute on the browser triggering that event - as you load in via jquery that event has long passed. Simply change that line to:
initialize();
If you give your code another look, the .load is done after the documents loads.
Whereas the include is instantaneous.
This has many side-effects. I urge you to view the browser generated source for more details.
For one thing, you can't use <link/> tags in the body.
Another thing, if Google Maps API makes use of document.ready functionality, it won't work any more.
I'd say because the PHP script will look at its working path to include the path, whilst the JavaScript will look at the URL path.