Exactly as this question, I want to embed this particular example on my blog.
I tried using <iframe> but bl.ocks.org isn't supporting it anymore. I tried with <iframe> using rawgit but this too didn't work. I tried using the method given here and it works! but for my example it doesn't.
I have inspected both of these sites (this one) and (this too), and found out that in my case the d3 script isn't appending any svg element in my custom div. ( Please look at this answer for the method I used )
Please suggest me how to proceed with this.
I solved this by:
creating another folder in _includes in the main Jekyll
directory and placing my custom .js files in it.
Then change d3.select("body").selectAll("svg") to
d3.select("div#example").append("svg").
Finally it renders the custom .js files alright.
Related
I created a plugin for some web software that doesn't natively support plugins. I found that I could inject code into the head of the plugin webpage through their GUI. Currently, users have to paste a huge block of code into the head which contains the plugin HTML, CSS, and JS all minified into one block. I'd like to instead serve this over a CDN so users could simply subscribe and receive all updates without having to repaste. It also would keep them from having to paste a large chunk of code into the tool and instead it would be a nice link.
I tried:
<link rel="import" href="~my_CDN_link~">
but it seemed to only partially work. I didn't really understand the issue, but I saw that import is deprecated so this seems like it would only be a temporary patch.
At the end of the CDN link is a text file which contains:
HTML
<script>~my_scripts~</script>
<style>~my_styles~</style>
I was hoping there is some way to just resolve this link into the text which it contains and "paste" it into the head of the document. Maybe this isn't even the approach I should be taking? Should I instead provide two links? One for the stylesheet and one from the JavaScript? The JavaScript could then make a call to get the required markup and append it to the document. I'd love to keep it as one link if at all possible.
I have an html 5, css, and javascript audio player that I'm trying to add to one page on my wordpress site.
I tried to paste the html into my page's text editor, while installing the JS and CSS folders for the player in my child theme's folder, which didn't work.
I tried placing the CSS for the player styling in my child themes CSS file, and that didn't work. I also tried linking to the style sheets and js scripts from the header.php file, which wasn't working for me.
My first thoughts are that because the html is showing up as it should, the css and JS files aren't being called. So I just need to figure out the path structure of how wordpress creates pages? Yet I know wordpress does something with a database to display the pages?
I saw some documentation about using I think it was either php or JS functions to call scripts or something and I don't understand enough of those languages to be able to make sense of it yet.
I'm still working with my developer, but he's 7 hours ahead of me and asleep. I just want to put the hardcoded version of the player and a few songs on my site for now so I can do some testing/see how it looks.
I hope that this question meets the SO req's. I tried to search on my own and I know the answer is out there, I just don't know enough to understand it yet. Trying to get a head start
The path to your Child theme's folder should be '/wp-content/themes/name-of-theme/'. You can use that in your header to call the files from wherever you might have placed them in your Child theme's folder.
To hard code the HTML, pasting it in the WordPress page editor should work fine unless there is another JS call or some weird iFraming going on.. if that's the case, you can simply create a Page Template (https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/#creating-custom-page-templates-for-global-use) and paste the code there. You'll likely want to just copy an existing page template from your Theme, take out the inner loop, and replace it with your video code.
Adding the links to your 'header.php' file would be considered bad practice. You would want to create a 'functions.php' file inside your Child theme and call the JS/CSS from there. You can also find this within the WordPress codex (they literally give examples you can copy/paste and change your file names).
I'm having a (simple) issue, but I have no idea how to fix it. Essentially, every tutorial I have come across for Babylon puts all of the Javascript code inside < script > tags in the main HTML page.
However, I would like to have all of my Javascript code inside a separate file. I have tried every way of loading it as I could think of, though I am a novice at Javascript (I am decent at C++, and I can see the similarities); yet I was unable to make it load. (It works fine when called from the HTML page itself).
Does anyone know what (if anything) I can do in order to be able to load my scripts from external files, and still get everything to work? Thanks in advance!
2 options:
register to the DOMContentLoaded event in your external JS file
reference your JS file with the tag at the end of the HTML page
You can find a sample in one of my tutorials here: http://blogs.msdn.com/b/davrous/archive/2014/11/18/understanding-collisions-amp-physics-by-building-a-cool-webgl-babylon-js-demo-with-oimo-js.aspx
Enjoy and thanks for using Babylon.js! :)
David
I'm totally new at coding and i have some trouble using the dragNodes plugin. I can make the plugin work by itself with the generated random graph example, but I am struggling to make it work with my own graph.
I don't understand what to put in the html. I tried to put only that:
`<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>sigma.plugins.dragNodes(s, s.renderers[0]);`
and it doesn't make my nodes move. I think I have to change the content of "s" and "s.renderers[0]" but I cannot find where., and I don't know how to do it...
Basically, I would love if anyone could give me some explanations about how to plug a plugin in my page?
If you could help me, I'm lost and that would be awesome! Thank you a lot!
I think you are mixing up two things:
How to use script into html
How to include external js files in a web page.
In order to insert javascript directly into an html page you have to use the script tag as follow (called inline js):
<body>
<script>
// some inline js
var a = 1;
</script>
</body>
In order to include js from an external file you have to reference the file with the src attribute just like you did.
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
The only thing that you missed is that sigma.plugins.dragNodes(s, s.renderers[0]); is also some js code, you thus have to put it into script tags to that it can be interpreted as such by the browser.
Here is what you probably are trying to write:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
<script>
sigma.plugins.dragNodes(s, s.renderers[0]);
</script>
Having all this into <body>tags.
I should also mention that to render your graph using sigma you should have an instance of sigma in your page, and in your case it should be called s.
To learn more about js/web programming I would advise this: http://www.codecademy.com/
As far as documentation for sigma is concerned check out their tutorial: http://sigmajs.org/
In addition to Nicolas Joseph's answer (put javascript in script tag), you should also download the js library that is required and save the html file in the appropriate path.
For example if your file.html is in a directory dir (dir/file/.html)
Then the command:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
will search for a file named sigma.plugins.dragNodes.js in the following path:
dir/sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js
To check out which librarires you are missing you should open debug mode in your browser (right click->inspect element) and check the console tab.
Cheers
I went ahead and downloaded http://platform.twitter.com/widgets.js
And the http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
Two files the embedded timeline widget uses.
All I'm trying to do is customize the css of the widget, and since twitter only gives you a few design options like link color and a dark/light theme, I thought it would be easier to download the files and modify them myself.
Only problem is, I'm having some difficulty trying to point the css file location inside the widgets.js to the copy on my webapp
A line inside widget.js, locating the css file on twitters servers, its tied up with some variables that combine a prefixed platform.twitter.com/ value or something
provide("tfw/assets",...{"default":"embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css",
I don't how much editing has to be done to widget.js but my guess its only a couple lines?
If anybody proficient in javascript wouldn't mind taking a look and telling me "Not worth the effort", or "It's simple, just change __ to __", let me know.
widgets.js is the first hyperlink above
(See my edit below for a better solution) This seemed to work for me and doesn't take much time to implement:
In widgets.js, find
function Z(a,b,c)
Change this in function Z:
d.href=twttr.widgets.config.assetUrl()+"/"+b
to something like this:
d.href=b
The assetUrl just gets the base URL of the file (eg. a CSS file), which is at a domain Twitter owns. b will be the paths you specify throughout the JS (such as embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css ). Upload all the CSS (like timeline.xyz.default.css) to where you want it, then you can customize those files and keep them on your own server. You can't modify the CSS by simply adding rules to a CSS file on your server, since the Twitter feed is in an iframe from a different domain. Modifying CSS in iframes with this type of source (ie. not from your own domain) is not allowed, to prevent hijacking-type problems, but if the iframe refers to a CSS on your own server then you can modify things.
There may be some other things you might want to check out to make sure you have all the required files. You should also get sprite.png which is referred to in the Twitter CSS file. I was able to customize the CSS this way and it worked fine.
Edit:
I had problems with the above solution in IE7/6 and Chrome in Jelly Bean so found a better solution that lets you inject your own custom CSS file into the iframe while sticking with all of Twitter's CSS at their own domain. From a fresh widgets.js I went and added the following:
;d=c.createElement("link"),
d.id="custom-css-1",
d.rel="stylesheet",
d.type="text/css",
d.href="http://mydomain.com/css/timeline.custom.css";
c.getElementsByTagName("head")[0].appendChild(d);
immediately after
c.getElementsByTagName("head")[0].appendChild(d)
on the line in widgets.js starting with
provide("tfw/widget/timeline"
(again in function Z) This seems to work much better, and all you need is a copy of widgets.js at http://platform.twitter.com/widgets.js.
It looks like if I download wigdet.js and custom.css then widget does not pick up
data-chrome="transparent"
I downloaded
http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
renamed it timeline.custom.css
Changed in wigdet.js link to my css
function b(e,t,n){
var r;
n=n||document;
if(n.getElementById(e))return;
r=n.createElement("link"),
r.id=e,r.rel="stylesheet",
r.type="text/css",
r.href= "../css/timeline.custom.css",
n.getElementsByTagName("head")[0].appendChild(r)
}
Is link to css correct? Or twitter uses the newest version of css?
http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
How to make widget to pickup the data-chrome="transparent"
I used widget script
<a class="twitter-timeline"
data-dnt="true"
href="https://twitter.com/search?q=%23My_hush"
data-tweet-limit="1"
data-theme="dark"
data-screen-name="some_name"
data-chrome="noscrollbar noheader transparent noborders nofooter"
data-widget-id="My_id">
Tweets about "#My_hush"</a>