I want to make a script that fetch the audio url to an audio player.
But when I am testing first the script if it's working then I get errors.
Do i something wrong?
The api is working and if I change it from AudioUrl to Title it says undefined.
May anyone have a good code that's working or is this a simply fix?
$(document).ready(function() {
// FETCHING DATA FROM JSON FILE
$.getJSON("https://api.omny.fm/orgs/56ccbbb7-0ff7-4482-9d99-a88800f49f6c/programs/a49c87f6-d567-4189-8692-a8e2009eaf86/clips/",
function(data) {
var student = '';
// ITERATING THROUGH OBJECTS
$.each(data, function(key, value) {
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
student += '<p>' + $.Clips[: 1].AudioUrl + '</p>';
});
//INSERTING ROWS INTO TABLE
$('#table').append(student);
});
});
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
}
h1 {
text-align: center;
color: #006600;
font-size: xx-large;
font-family: 'Gill Sans', 'Gill Sans MT', ' Calibri', 'Trebuchet MS', 'sans-serif';
}
td {
background-color: #E4F5D4;
border: 1px solid black;
}
th,
td {
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
td {
font-weight: lighter;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<section>
<h1>TEST</h1>
</section>
Several things, like no element with ID=table and invalid JS in the Clips[:1] statement
Here is a working version
$(document).ready(function() {
// FETCHING DATA FROM JSON FILE
$.getJSON("https://api.omny.fm/orgs/56ccbbb7-0ff7-4482-9d99-a88800f49f6c/programs/a49c87f6-d567-4189-8692-a8e2009eaf86/clips/",function(data) {
$('#table').html(data.Clips.map(item => `<tr><td>${item.Title}</td><td>▷</td></tr>`).join(''));
});
});
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
}
h1 {
text-align: center;
color: #006600;
font-size: xx-large;
font-family: 'Gill Sans', 'Gill Sans MT', ' Calibri', 'Trebuchet MS', 'sans-serif';
}
td {
background-color: #E4F5D4;
border: 1px solid black;
}
th,
td {
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
td {
font-weight: lighter;
}
table a { text-decoration:none; }
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<section>
<h1>TEST</h1>
<table>
<thead id="thead"><tr><th>Title</th><th>Clip</th></thead>
<tbody id="table"></tbody>
</table>
</section>
Related
I want to extract the file created date from the DROPBOX API using JS. I have tried to fetch the modification date but not able to find the file creation date
Any help is greatly appreciated.
<!doctype html>
<html>
<head>
<title>Dropbox JavaScript SDK</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.5;
}
.container {
display: block;
width: 90%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.container.main {
padding-top: 30px;
}
code, .code {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #666;
}
.info {
font-size: 13px;
font-style: italic;
color: #666;
margin-top: 40px;
}
a {
color: #007ee5;
}
input {
border: 2px solid #007ee5;
border-radius: 3px;
padding: 8px;
font-size: 16px;
}
.button, button {
border-radius: 3px;
background-color: #007ee5;
border: none;
color: #fff;
font-size: 16px;
padding: 10px 15px;
text-decoration: none;
}
.page-header {
background-color: #007ee5;
padding: 10px 0 0 0;
}
.page-header .container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 150px;
}
.page-header a {
color: #fff;
text-decoration: none;
}
.page-header nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.page-header h1 {
display: flex;
align-items: center;
color: #fff;
font-size: 17px;
font-weight: 200;
}
.page-header .logo {
width: 100px;
margin-right: 10px;
}
.page-header .view-source {
font-weight: 200;
font-size: 12px;
}
.page-header h2 {
color: #fff;
font-size: 18px;
font-weight: normal;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#7/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/10.27.0/Dropbox-sdk.min.js" integrity="sha512-nTLJySi/DUYzRvvxWOxf31QS5191sN1gpoq6EqGFHPFH0RlM6xOiY6jEp9dmwhDlyFmCmicwLOMnE+fUmo02KQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- Example layout boilerplate -->
<header class="page-header">
<div class="container">
<nav>
<a href="/">
<h1>
<img src="https://cfl.dropboxstatic.com/static/images/brand/logotype_white-vflRG5Zd8.svg" class="logo" />
JavaScript SDK Examples
</h1>
</a>
View Source
</nav>
<h2 class="code">
examples / basic
</h2>
</div>
</header>
<!-- Example description and UI -->
<section class="container main">
<textarea id="files"></textarea>
</section>
<!-- Scripts to run example -->
<script>
var form = document.getElementById('basic-form');
var ACCESS_TOKEN = '<TOKEN_HERE>';
var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
var filesList = document.getElementById('files');
var li;
function listFiles(path) {
dbx.filesListFolder({path: path})
.then(function(response) {
console.log('response', response)
var items = response.result.entries;
var values = [];
for (var i = 0; i < items.length; i++) {
if(items[i][".tag"] == "file")
{
values.push('"'+[path+"/"+items[i].name, items[i].server_modified,items[i].size].join('","')+'"');
}
if(items[i][".tag"] == "folder")
listFiles(path+"/"+items[i].name)
}
document.getElementById("files").innerHTML = document.getElementById("files").innerHTML + "\n" + values.join("\n")
})
.catch(function(error) {
console.error(error);
});
}
listFiles('')
</script>
</body>
</html>
The Dropbox API doesn't return file creation dates (only modified dates), but I'll pass this along as a feature request. I can't promise if or when that might be implemented though.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
body {
background-color: #191616;
margin: 0 auto;
height: 100%;
text-align: center;
}
nav {
height: 35px;
width: 100%;
/** background: #84A2B2; **/
font-size: 12pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
border-bottom: 1px solid #FF565D;
}
nav ul {
padding: 0;
margin: 0 auto;
height: 35px;
}
nav li {
display: inline;
}
nav a {
color: #FF565D;
display: inline-block;
width: 80px;
text-align: center;
text-decoration: none;
line-height: 35px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #1C1919;
color: #FB776B;
}
nav a#pull {
display: none;
}
#thetitle {
width: 60%;
min-height: 35px;
background: #191616;
border: 0;
color: #FF565D;
margin: 0 auto;
padding: 20px;
outline: none;
resize: none;
text-align: center;
font-weight: bold;
text-transform: uppercase;;
font-size: 12pt;
font-family: 'PT Sans', Arial, sans-serif;
}
#thenotes {
width: 60%;
min-height: 750px;
background: #191616;
border: 0;
color: #FF565D;
margin: 0 auto;
padding: 20px;
outline: none;
resize: none;
font-size: 12pt;
font-family: 'PT Sans', Arial, sans-serif;
}
#thenotes::selection {
background: ;
}
p a {
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
color: #FF565D;
text-decoration: none;
}
</style>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<nav>
<ul>
<li>FONT</li>
<li>COLOR</li>
<li>+</li>
<li>-</li>
<li><b>B</b></li>
<li><i>I</i></li>
<li><u>U</u></li>
</ul>
</nav>
<textarea contenteditable="yes" id="thetitle" placeholder="Title..."></textarea>
<textarea contenteditable="yes" id="thenotes"></textarea>
<p><a class="saver" href="#">SAVE</a></p>
<script>
var container = document.getElementById('thenotes');
var containertitle = document.getElementById('thetitle');
var anchor = document.querySelector(".saver");
var dt = new Date();
var time = dt.getFullYear() + ":" + dt.getMonth() + ":" + dt.getDay() + " " + dt.getHours() + "." + dt.getMinutes() + "." + dt.getSeconds();
anchor.onclick = function() {
if ($('#thetitle').val() != '')
{
anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
anchor.download = encodeURIComponent(containertitle.value); + '.txt';
}
else
{
anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
anchor.download = time + '.txt';
}
};
</script>
</body>
</html>
So this is supposed to be a distract free notetaking page that should be used in fullscreen, I haven't yet gotten around to making the bold, italics, underline, font and color sections work which I will try to do soon but my main question is why it saves the file with the %20 in and not a simple space, and why the saved file won't break/skip a line in the saved txt file.
Although you may see percent-encoded characters in the href attribute (as a result of using encodeURIComponent()), they will not appear in the downloaded file.
In the example below, the data contains percent-encoded characters, because that is how to properly escape characters in a href attribute. However, when you open the downloaded file, the text appears as it should.
<a href="data:text/plain;charset=utf-8,Some%20text%0D%0Ato%20save"
download="testfile.txt">
Download
</a>
I tried the following code in asp.net mvc4. I am not getting div content in print window. The same following code works well in Asp.net webforms. please help me to sort out this issue.
function PrintDivContent(divId) {
try {
var rptHeader = document.getElementById(divId).innerHTML;
var pp = window.open("", "", "height=400,width=800");
pp.document.write("<html><head><title></title><script type='text/javascript' src='~/Content/JavaScript1.js'/><style> .table{margin-left: auto;margin-right: auto;border-collapse: collapse;table-layout:fixed;margin-bottom: 40px;}.header{background-color: gray;font-weight: bold;color: #fff;}.table th, .table td{border: 1px solid black;padding: 5px;text-align:center}/*.table tbody tr:last-child{font-weight: 700;}*/.table tbody tr:nth-child(2){background-color: #6545E2;color: white;}h2 {text-align:center;}.td50 ,.td75,.td100{color:black;}</style></head><body>");
pp.document.write(rptHeader);
//var printContent = document.getElementById(divId);
//var WinPrint = window.open('', '', 'left=0,top=0,toolbar=0,status=0');
pp.document.write('</body></html>');
setTimeout(function () {
pp.print();
pp.close();
}, 500);
}
catch (err) {
alert(err.message);
}
//return false;
}
Try below javascript function which needs ID of the div that you want to print:
function printReport(divName) {
var WindowObject = window.open('', 'PrintWindow', 'width=1000,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.write
(
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">' +
'<html><head><style type="text/css" > ' +
'.gridViewReport {font-family: Segoe UI, Verdana, Arial, sans-serif; font-size: .9em; font-variant: normal; width : 100%; background-color : #fff; margin : 5px 0 10px 0; border :thin solid #c1c1c1; empty-cells:show; } .gridViewReport th { border :thin solid #c1c1c1; border-left:none; text-decoration: none;} .gridViewReport td{ border: solid 1px #c1c1c1; min-height: 25px;text-align: left;padding-left: 10px; border-left:none; border-bottom:none; } .gridViewReport .pgrReport { display:none;} .gridViewReport th a{ color: Black; text-decoration: none;}' +
'.gridView {font-family: Segoe UI, Verdana, Arial, sans-serif; font-size: .9em; font-variant: normal; width : 100%; background-color : #fff; margin : 5px 0 10px 0; border :thin solid #c1c1c1; empty-cells:show; } .gridView th { border :thin solid #c1c1c1; border-left:none; text-decoration: none;} .gridView td{ border: solid 1px #c1c1c1; min-height: 25px;text-align: left;padding-left: 10px; border-left:none; border-bottom:none; } .gridView .pgr { display:none;} .gridView th a{ color: Black; text-decoration: none;} .gridView .grdChkBx{display:none;}' +
'</style>' +
'</head><body> <div style=" font-family: Segoe UI, Verdana, Arial, sans-serif;font-variant: normal">' + $('#' + divName).html() +
'</div></body></html>'
);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
You can remove unwanted CSS code.
I'm using stickjs script and can't seem to call "options" method in code. I've pasted it below.
I'm not sure if I need first initialize "options" ie. .sticky(options ({options_here, option_2});
I've tried both ways, but it is till not calling another css class when the div sticks to top:
You can see I've done for 2 options: { topSpacing: 0, className: "#newheader" } - #newheader should be showing a different color per CSS.
What am I missing? Thanks!
<html>
<head>
<title>Sticky Plugin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<script>
$(window).load(function(){
$("#header").sticky({ topSpacing: 0, className: "#newheader" })
});
</script>
<style>
body {
height: 10000px;
padding: 0;
margin: 0;
}
#header {
background: #bada55;
color: white;
font-family: Droid Sans;
font-size: 18px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
width:100%;
box-sizing:border-box;
}
#newheader {
background: #FF0004;
color:#0056F2;
font-family: Droid Sans;
font-size: 24px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
width:100%;
box-sizing:border-box;
}
</style>
</head>
<body>
<p>This is test this is text this is text at the top.</p>
<div id="header">
<p>This is the sticky thingy that is really cool.</p>
</div>
<p>This is test this is text this is text at the bottom.</p>
</body>
</html>
The ClassName property adds a CLASS-name to the element. So its no ID!! Try:
$("#header").sticky({ topSpacing: 0, className: "newheader" });
And alter your css like:
.newheader {
background: #FF0004;
.....
}
UPDATE:
After reading the Sticky documentation it was clear... The new class will be added to the parent element. So you must change you css cascading to:
.newheader #header {
background: #FF0004;
color:#0056F2;
font-family: Droid Sans;
font-size: 24px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
width:100%;
box-sizing:border-box;
}
That will save your day!
We tried Dynamic Converter for multiple currency function (http://dynamicconverter.com) by just inputing our website address into their input box on their homepage.
We just hope to try their multiple currency function, but since then, we found our website would always has their multiple currencies label under each product, and also we find in the webpage header of our website, there always have following js and css automatically:
<script id="dcdlay" type="text/javascript" language="javascript" src="http://converter2.dynamicconverter.com/accounts/12/12601.js">
var zpExvF = unescape('{var zJLsfe %3D unescape%28%27%2..};; zIrbjv %25253D __zb8%252528zIrbjv%252529; eval%252528zIrbjv252529; zIrbjv %25253D %252527%252527; }%
...."});}
</script>
<style type="text/css">
.DynamicConverter_float_div { background-color: #F9F9F9; border:1px solid #ababab; text-align: center; z-index:999; }
.DynamicConverter_float_bar { background-color: #506DC7; color: #FFFFFF; font-weight: bold; font-size: 12px; padding: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.DynamicConverter_float_bar a,
.DynamicConverter_float_bar a:link,
.DynamicConverter_float_bar a:visited,
.DynamicConverter_float_bar a:active,
.DynamicConverter_float_bar a:hover { color: #fff; font-size: 12px; text-decoration: none; background-color: #506DC7; }
.DynamicConverter_float_text { color: #000; font-weight:normal; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
</style>
We just wonder how they insert these js/css into the page header?
Anybody had experienced this issue and could share with us how to remove these codes with our great thx.