Trumbowyg lightweight rich editor svg icons not showing up - javascript

I was wondering if anyone has dealt with this plugin: http://alex-d.github.io/Trumbowyg/
I believe I'm doing everything right. The only thing is that svg icons are not showing up?
$('#trumbowyg-demo').trumbowyg({
svgPath: 'my-path-to-icons' //doesn't event work
});
Is the icons.svg file correct -- from the download?
This is what's showing up

I had the same issue. My problem was down to the fact I was using an ajaxPrefilter. Disabling this for the icons.svg request solved it. Try putting a breakpoint inside the following get method in the trumbowyg js file and see if the ajax request completes. That's how I found the solution to my issue
$.get(svgPath, function (data) {
div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
});

Related

How To Access and Click Button PhantomJS

I am trying to automatically download a plugin on my wordpress site by implementing phantomJs. For some reason, I cannot seem access the download button (shown below)
This is the HTML code to the image (with domain sensitive information blurred out for security purposes)
So far, I have tried accessing this element by using the following code:
function() {
page.evaluate(function() {
let mainLink = document.querySelector('a[data-slug="better-wp-security"]')
mainLink.click()
})
}
Some things to mention:
This function, as it is part of a larger file, will NOT execute until the page has finished loading.
PhantomJS is executing correctly, there are no problems with permissions
The script before-hand is properly accessing the install plugins page, which I verified by capturing screenshots before trying to click.
I have defined click earlier int he file, it works perfectly.
Any ideas how I can accomplish this? Thanks all!
ADDED INFORMATION:
It seems as if the path from the main div element is as follows:
#the-list .plugin-card plugin-card-better-wp-security .plugin-card-top .action-links .plugin-action-buttons .install-now button
I imagine the solution to this question has something to do with this sequence.
I was able to accomplish this by now going after the data-slug attribute, but rather going after the href element itself. Although I can't generate my own wponce value without the use of the Rest API, I was able to search the document to find an href that contained certain parts of the url. This is the final code below:
document.querySelector('a[href*="action=install-plugin&plugin=better-wp-security"]').click()
That's it! Simple and easy!

Loading external JS / JQuery script via MeteorJS

I'm trying to load an external script while using Meteor.
Currently using this code in my layout.js to some success.
Meteor.startup( function() {
$.getScript('js/scripts.js');
});
However, if I go to another url and come back to it, the script no longer works. (I see it not working because my background cover image disappears.)
Any external scripts should be placed in client/compatibility, and Meteor will load it for you; no need for $.getScript('js/scripts.js');
You can then instantiate that script on the template like:
Template.game.onRendered(function(){
$('.grid').isotope({});
});
For anyone needing help with this, replace Meteor.startup with Template.name.onRendered. This helped solve my issue.
Cheers!

Jquery & Canvas HTML5 in Conflict in Wordpress

I have a problem , I'm a HTML/CSS web designer trying to learn more to integrate jQuery effects to a site. I spent an hour trying to find a solution to this conflict, the code is not working. It's a "matrix effect" jQuery script that uses HTML5 Canvas. The Library is being called before the script, but something seems to be wrong. Cant find out what.
The script I'm trying to use is in the second div after the introduction 1st div
is called
Inside this div I placed the canvas call ...
The source files are this ones:
http://www.arungudelli.com/html5/matrix-effect-using-html5-and-javascript/
On my site, the effect is not appearing :(
wordpress was adding stuff
If we look at our console in Google Chrome we see there's an error on line 124, if we view our page source and scroll down to line 124 we see this bit of code:
var ctx=q.getContext('2d');</p>
<p>var draw = function () {
So for some reason or another there are some random paragraph tags being added to your javascript that are not encapsulated and it is throwing off your code. Remove that and continue debugging.

loading js dynamically with jquery

I'm conditionally loading a script if the browser is IE8. I'm using jquery's .getScript function because I need to run something after the script is loaded. The problem is in the format of the URL. I've got it working when downloading the script that's on my hard drive directory but I can't get it to work when loading the script from a site.
This is what I have, I'm sure it's a simple fix but I'm not getting it to work:
$.getScript("https://github.com/malsup/corner/blob/master/jquery.corner.js", function () {
//does something here
});
Thanks for your fix.
The problem is that you are requesting the actual formatted github page ... so you get back html..
use
$.getScript("https://raw.github.com/malsup/corner/master/jquery.corner.js", function () {
//does something here
});
(changed the url to the correct one..)
There is a link Raw on the heading bar above the formatted code. Click it to get to the raw file..
The safe url is http://malsup.github.com/jquery.corner.js

Loading Javascript through an AJAX load through jQuery?

I have an javascript that I place into a page using the code below. What the code does is place an object/embed code into a webpage. Simple javascript loader to a NicoVideo movie
<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395"></script>
This works great in a webpage. But what if I want to load this javascript into a page using AJAX? This no longer works for the obvious reasons, you would need to eval the script in order to get it to run. However, I have no idea how to do this. I am using jQuery on my page; so keep that in mind. I have tried the following code, but it doesn't seem to work through AJAX, or even in a normal page load environment.
<script>$.getScript("http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395");</script>
Any ideas on how I would get this to work?
I think it works but its attempting to inline the write which I don't know if that would work in this case.
You would need to see if there was a way to essentially execute the '.getHTML' method and take that result and update an existing element on the page.
The issue though is that the anonymous function that is generated and executed inline might not work properly.
After reading official getScript reference, it seems you have to do something with that JS file you got a hold of, using something like this:
$.getScript("http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395", function () {
// use functions from loaded file
});

Categories

Resources