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>
Related
Salutations! I would like to create an alert box which echo a button connected to a link. I would like to do the whole thing using php. I would like to put that piece of code in my codeigniter controller function.
Here is a piece of code that can echo a button connected to a link:
echo 'Add to Google Contacts';
Please help me to do my task. Thanks a lot.
Alert is a special kind of method which is only used for Showing some messages,with a button is attached.Only we can write text in it.If you want an alert box with your own components, design a new one yourself.But it will never become an alert box.By using jquery you can do this ..paste it.
Here is the Jquery code for dialog box,paste it.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style></style>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src='template/js/jquery.textarea-expander.js'></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
$(document).ready(function() {
var regex,v,l,c,b,i,contapara=3;
$( "#wnd_Addparam" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Link": function() {
location.href="http://www.google.com";
return false; },
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: {}
});
$( "#wnd_Addparam" ).dialog( "open" );
});
</script>
<body>
<div id="wnd_Addparam" title="Information" ></div>
</body>
</html>
Hope this will help you dr..
You can use it with JavaScript to like,
echo "<a href='onclick='javascript:function(id)''></a>";
and the javascript you can use it by,
function(id)
{
window.location.href("file_name.php")
}
echo "<a href='#'><button onclick='".'alert("your alert message")'."'>Try it</button>";
There is my code so far. The issue is that the popup seems to be working perfect in Chrome but in Firefox it sticks to the top of the window after entering and in IE the popup does not even appear.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="My Dialog Title" style="display:none">
<p>This is My Dialog box Description/Content</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function(){
$(function () {
$("#dialog").dialog({
show: {
effect: 'drop',
direction : 'up',
distance: 1000,
duration: 2000,
},
});
});
}, 2000)
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
</body>
</html>
I want the popup to behave in the same manner as it is in Chrome with all the browsers.
http://jsfiddle.net/fakhruddin/x39Rr/14/
Web Page Link
Please guide.
Try to add:
<body style="height:100%">
The solution is simple! Add to the begin of file:
<!DOCTYPE HTML>
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 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>
Recently I'm starting to use jquery, when trying to popup a modal form using jquery its won't working for me, the css file and javascript files are keeping locally. Please see the code snippet below
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
alert('test');
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
</script>
</head>
<body>
<?php
echo '<link rel="stylesheet" type="text/css" href="jquery-ui.css">';
?>
<button id="opener">Open the dialog</button>
</body>
Please correct me if I did any mistake. Thanks all.
You need to include:
modal: true,
in your dialog definition like this:
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
modal: true,
title: 'Basic Dialog'
});