how to embed html5 into website via plugin? - javascript

I’m trying to embed an html/javascript application into my website.
I do this my first time and bought an with a bit of description how to do it.
I thought it’s easier but I don’t get it to work.
That’s the tutorial that comes with the app:
https://support.vebto.com/help-center/articles/10/13/50/getting-started
What I did to embed it was creating a new plugin folder in FDP-Manager. And put all the Plugin-Files in it, like described.
And made a .php file, in which I defined a shortcode, so I can place the app wherever I want on my webpage.
Underneath I put the code, which they provide for embedding the plugin.
My code firist:
<?php
/**
* Plugin Name: My_first_embed
* Plugin URI: http://www.my_first_embed.doesntmatter
* Description: My_first_embed
* Version: 1.0
* Author: Me
* Author URI:
**/
?>
add_shortcode( ‘shortcode_name’, function () {
$out = ‘<p>[editor]</p>’;
return $out;
} );
add_action( ‘wp_head’, function () { ?>
<script>
<html>
<head>
<link rel=”stylesheet” href=”pixie/styles.min.css”>
</head>
<body>
<pixie-editor></pixie-editor>
​
<script src=”pixie/scripts.min.js”></script>
​
<script>
var pixie = new Pixie({
onLoad: function() {
console.log(‘Pixie is ready’);
}
});
</script>
</body>
</html>
First, the plugin worked, but it was not loading, then I changed the code too because I thought that it should be enough... but it didn’t work either:
<pixie-editor></pixie-editor>
​
<script src=”pixie/scripts.min.js”></script>
​
<script>
var pixie = new Pixie({
onLoad: function() {
console.log(‘Pixie is ready’);
}
});
</script>​
So any suggestions? 🙂
I appreciate every contribution!
thank you!
cheers

Related

How to import a Widget designed for JQuery in my React projet?

I'm trying to import this Widget designed for JQuery in my React projet :
<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js">
</script>
This widget needs JQuery to work, so i also load JQuery using Google CDN:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
The documentation is written for JQuery, and shows this example to use the widget :
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Mondial Relay Parcelshop Picker with Map</title>
<!-- JQuery required (>1.6.4) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Leaflet dependency is not required since it is loaded by the plugin -->
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" />
<!-- JS plugin for the Parcelshop Picker Widget MR using JQuery -->
<script src="//widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>
</head>
<body>
<!-- HTML Element in which the Parcelshop Picker Widget is loaded -->
<div id="Zone_Widget"></div>
<!-- HTML element to display the parcelshop selected, for demo only. Should use hidden instead. -->
<input type="text" id="Target_Widget" />
</body>
</html>
JAVASCRIPT :
```
$(document).ready(function () {
$("#Zone_Widget").MR_ParcelShopPicker({
Target: "#Retour_Widget",
Brand: "BDTEST ",
Country: "FR",
EnableGmap: true
});
});
```
I really don't know how to do it. I've tried for 3 days but i'm still blocked.
Thank you a lot for your help and i'm very sorry for my bad english.
Thanks again.
(UPDATE)
My code is :
import React, { useEffect } from 'react';
const MondialRelay = () => {
useEffect(() => {
const jQuery = document.createElement('script');
jQuery.src = "//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
jQuery.async = "true";
document.body.appendChild(jQuery);
return () => {
document.body.removeChild(jQuery);
}
})
useEffect(() => {
const scriptMr = document.createElement('script');
scriptMr.src = "https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js";
scriptMr.async = "true";
document.body.appendChild(scriptMr);
return () => {
document.body.removeChild(scriptMr);
}
});
!function(){
// Parameterized the widget
$(document).ready(function () {
$("#Zone_Widget").MR_ParcelShopPicker({
Target: "#ParcelShopCode",
Brand: "BDTEST ",
Country: "FR"
});
});
}();
return(
<div>
<div id="Zone_Widget"></div>
</div>
)
};
export default MondialRelay;
And the error i encounter is "$ is not defined" but this is because i try to use JQuery syntax in React and $ is never defined in my code.
I dont know how to create this div with #Zone_Widget id.
There's a typo in your script tag, you missed https:
change the URL to https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js and it should work.
As a suggestion, since you're using nodejs/npm already, you can install jquery using npm as well.
npm install jquery

javascript module not being found

I have a bunch of web pages where I have an identical construct:
<html>
<head>
<script src="sorttable.js"></script>
<noscript>
<meta http-equiv="refresh" content="60">
</noscript>
<script type="text/javascript">
<!--
var sURL = unescape(window.location.pathname);
function doLoad()
{
setTimeout( "parent.frames['header_frame'].document.submitform.submit()", 60*1000 );
}
function refresh()
{
window.location.href = sURL;
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.replace( sURL );
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.reload( true );
}
//-->
</script>
</head>
<body>
.
.
.
<script type="text/javascript">
window.onload = function() { sorttable.innerSortFunction.apply(document.getElementById("OpenFace-2"), []); doLoad(); }
</script>
</body>
</html>
This works perfectly in every page except for one, where when the onload function runs it cannot find the sorttable code (which is loaded from sorttable.js up at the top). All these pages are part of the same application and are all in the same dir along with the js file. I do no get any errors in the apache log or the js console until that page loads, when I get:
sorttable.innerSortFunction is undefined
I can't see what makes this one page different. Can anyone see what is wrong here, or give me some pointers on how I can debug this further?
The code I pasted in is from the source of the page where it does not work, but it is identical as the pages where it does work.
Looks like on that page the table with id OpenPhace-2 by which you try to sort have no needed class: sortable
The function innerSortFunction of sorttable object will be present only if there is any table with sortable class exists.

"Cannot call method 'oEmbed' of null" when embedding Soundcloud player in dynamically generated Div

Using the Soundcloud JavaScript API, I want to dynamically generate a page of player widgets using track search results. My code is as follows:
<html>
<head>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
function makeDivsFromTracks(tracks,SC)
{
var track;
var permUrl;
var newDiv;
for(var ctr=0;ctr<tracks.length;ctr++)
{
newDiv=document.createElement("div");
newDiv.id="track"+ctr;
track=tracks[ctr];
SC.oEmbed(track.permalink_url,{color:"ff0066"},newDiv);
document.body.appendChild(newDiv);
}
}
</script>
</head>
<body>
<script>
SC.initialize({
client_id: 'MY_CLIENT_ID'
});
SC.get('/tracks',{duration:{to:900000},tags:'hitech',downloadable:true},
function(tracks,SC)
{
makeDivsFromTracks(tracks,SC);
});
</script>
</body>
</html>
When I load this, the SC.oEmbed() call throws an error:
Uncaught TypeError: Cannot call method 'oEmbed' of null
which would seem to indicate that either the divs aren't being generated or the search results aren't being returned, but if I remove the SC.oEmbed() call and replace it with:
newDiv.innerHTML=track.permalink_url;
then I get a nice list of the URLs for my search results.
And if I create a widget using a static div and static URL, e.g.
<body>
<div id="putTheWidgetHere"></div>
<script>
SC.initialize({
client_id: 'MY_CLIENT_ID'
});
SC.oEmbed("http://soundcloud.com/exampleTrack", {color: "ff0066"}, document.getElementById("putTheWidgetHere"));
</script>
</body>
then that works fine as well. So what's the problem with my oEmbed() call with these dynamically created elements?
Solved it. I took out the SC argument from the callback function and makeDivsFromTracks(), and now all the players show up. Not sure exactly why this works--maybe it has to do with the SC object being defined in the SDK script reference, so it's globally available and doesn't need to be passed into functions?
Anyways, working code is:
<html>
<head>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
function makeDivsFromTracks(tracks)
{
var track;
var permUrl;
var newDiv;
for(var ctr=0;ctr<tracks.length;ctr++)
{
newDiv=document.createElement("div");
newDiv.id="track"+ctr;
track=tracks[ctr];
//newDiv.innerHTML=track.permalink_url;
SC.oEmbed(track.permalink_url,{color:"ff0066"},newDiv);
document.body.appendChild(newDiv);
}
}
</script>
</head>
<body>
<script>
SC.initialize({
client_id: 'MY_CLIENT_ID'
});
SC.get('/tracks',{duration:{from:180000,to:900000},tags:'hitech',downloadable:true},function
(tracks){makeDivsFromTracks(tracks);});
</script>
</body>
</html>

Knockout JS: ko.applyBindings is not a function

I'm trying to use Knockout js in a simple web application.
Here's my dummy javascript code:
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
But when I run the index.html, the debug console says "ko.applyBindings is not a function"!
Help!
Thanks
You have not included the link to the knockout.js library in your source code or the link is wrong. Fix this and it will work.
<script src="/scripts/knockout-2.0.0.js" type="text/javascript"></script>
Where the /scripts directory is the location on the server where knockoutjs resides.
EDIT
Here is an example of your code that works.
<html>
<head>
<script src="knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
</script>
</body>
</html>

Using Fzip lib under Adobe Air App

I'm currently working on a project for Adobe Air (1.5.3) and I need to unzip a file, copy some of its contents to another file.
Then I saw people talking about the Fzip (http://codeazur.com.br/lab/fzip) lib. The problem is that I don't know how to "import" or use this library with Javascript and Adobe Air, since Javascript doesn't have the import directive.
How can I manage to do that ?
I posted a demo of how to use FZip with Adobe Air and Javascript. I hope it hopes clear things up for you.
In short you need to pull the SWF file out of the compiled SWC (when applicable) and access the class.
The demo is pretty simple and really just a proof of concept but you should be able to extend it easily.
http://www.drybydesign.com/2010/05/12/adobe-air-fzip-without-flex/
-Ari
Ari's example is pretty good, and it got me started but he left out some pretty crucial stuff--like writing the uncompressed files back to the disk. And the zip file does not have to be hosted remotely--the thing about AIR is that it runs like a local Application...here is an example that build on the good start Ari gave us. (I am using HTML5 just to be cool and hip and modern! :)-
<!DOCTYPE HTML>
<html>
<head>
<title>Test Fzip</title>
<script type="application/x-shockwave-flash" src="scripts/fzip.swf"></script>
<script type="text/javascript" src="scripts/AIRAliases.js"></script>
<script type="text/javascript" src="scripts/AIRIntrospector.js"></script>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
var fzip;
if (window.runtime) {
if (!fzip)
fzip = {};
fzip.FZip = window.runtime.deng.fzip.FZip;
fzip.FZipFile = window.runtime.deng.fzip.FZipFile;
}
var file = air.File.documentsDirectory.resolvePath("test.zip");
//file.url
var zip = new fzip.FZip;
zip.addEventListener(air.Event.OPEN, onopen);
zip.addEventListener(air.Event.COMPLETE, oncomplete);
zip.load(new air.URLRequest(file.url.toString()));
function oncomplete(event) {
var count = zip.getFileCount();
alert(count);
for ( var idx = 0; idx < count; idx++)
{
var zfile = zip.getFileAt(idx);
// alert(zfile.filename);
var uzfile = air.File.applicationStorageDirectory.resolvePath(zfile.filename);
var stream = new air.FileStream();
stream.open( uzfile, air.FileMode.WRITE );
stream.writeBytes( zfile.content,0, zfile.content.length );
stream.close();
}
}
function onopen(event) {
alert("file is opened");
}
</script>
</head>
<body>
</body>
</html>

Categories

Resources