Icon won't appear in CKEditor plug-in - javascript

I have a plug-in that I made for CKEditor. It works perfectly. I needed another one very similar to it, so I copied/pasted/renamed everything. Then I changed the icon out to something else... same dimensions (16x16), etc. I've gone through it several times to be sure everything is named properly... casing, etc.
But after clearing my cache and reloading the page, the new icon never appears. I've tried several icons, including just re-using the other plug-in's exactly. It never appears. Not even a "blank" appears (which happened during development of the last one).
The docs are pretty worthless in that respect, so I don't know what to do. It seems like this should be a simple fix. I hope it is. Here's the plugin.js:
CKEDITOR.plugins.add('attachfile',{
icons:'attachfile',
init:function(editor){
editor.addCommand('attachfile',new CKEDITOR.dialogCommand('attachfileDialog'));
editor.ui.addButton('attachfile',{
label:'Attach File',
command:'attachFile',
toolbar:'insert'
});
CKEDITOR.dialog.add('attachfileDialog',this.path + 'dialogs/attachfile.js');
}
});
Any ideas? Thanks!!

Yep, it was something simple. I had failed to enter the plug-in name into the "extraPlugins" line in the config.js.

You should use:
CKEDITOR.timestamp='SOMEVALUE';
This is what CKEDITOR uses to control caching of files, so every time you change something you need to give this a new timestamp. If you dont, it will continue to make your browser use cached files.
The problem you might have is that CKEDITOR still loads its old files before it reads your timestamp value. So you must set this before CKEDITOR loads its files. You can try to sett it as the first thing to happen after the ckeditor.js is included. Setting it in the config file, can in some cases be to late, because at that time, many files are already loaded.
<script type="text/javascript" src="/g_adminlib/ckeditor/ckeditor.js"></script>
<script type="text/javascript" >
CKEDITOR.timestamp = 'something_random';
</script>

Related

Loading image is shown too late for users with slow connection

The issues is with existing ASP.NET MVC 4 project. The View itself is not that big but there are also several service calls and what happens is that people with slow internet connection reports that for some period of time when they request the page it stay unresponsive, so they don't know if the content is loading or something went wrong.
So in general, what I need is a way to show a loading image as the very first thing from this page (or at least fast enough) so even if it takes some time for the browser to download the full content, at least the user will know that something is going on.
However it seems that this is not as trivial as it sounds. I came up with two ideas, one was already proven to not work in all cases and the second is also something that many people doesn't recommend.
What I've tried was to use pure JavaScript in the <head> tag like so:
<html>
<head>
<script>
document.write("<div style='margin-left: 50px; margin-top : 50px;'>LOADING...</div>");
</script>
</head>
Of course the styling is just to get the idea. This seemed like it was working until recently when on a minor build of IE 11 the page broke which after some investigation was proven to be due to the usage of document.write() inside the <head> tag. Even though this seems to work on most browsers and versions the fact that it's a potential danger requires a change in the approach.
The second idea is pretty similar to this, again - writing directly in the <head> tag but this time instead of using document.write() just putting the html markup directly there. From what I've read this is also a recipe for disaster so I don't even want to try it, but those are the two ideas that I could came up with. Everything else just doesn't work for slow internet connections since the mainstream solutions relays on the fact that some part of the DOM is already loaded so you can use it to apply behaviour/style.
I hope I'm not the first one that got this problem so I would appreciate any suggestion on how to solve this issue. Since I am using ASP.NET MVC 4 there was an idea to use a dedicated controller with view which to get called first just for the sake of showing the loading image and then moving to the requested view. Even though this idea seems interesting I didn't have the time to think it over, it also sounds a pretty complicated, but anyways, all help will be appreciated.
When faced with the same issue, we did as you mentioned: Load a super-light-weight page first with a tiny loading icon & "Loading..." text, then called back to the server to pull down the heavy content in chunks using ajax.
If you content is really heavy, it's also worth mentioning that you need make sure you have gzip compression turned on at your web server layer also.
Don't block the rendering of the DOM. Load the page and call your scripts right before the closing body tag and attach to an event like DOMContentLoaded or window.load (if you're using jQuery, that would be $(document).ready). In other words, you should allow the page to load completely, even if it's empty, before running any of your JavaScript.
Then, don't worry about writing the "Loading" div dynamically. Just include it in the rendered HTML and hide it initially. The first thing your JavaScript will do, before issuing any AJAX calls, is to show this "Loading" div.

Is there an easy way to know what line of jQuery script called an event?

I'm working on a drupal module (irrelevant) and I'd like to recreate a javascript/jQuery event. If I use chrome and go to event listeners I see the jQuery script is called on line 57, however this doesn't really help as:
The script is minified and unreadable
I'd like to know what line of
the jQuery using scripts called the event (what selector and what
body of it's function), not the jQuery script itself
It's not easy to find the file by just
searching for fit selectors as there are 100's of loaded javascripts
files thanks to drupal and it's installed modules.
The reason is that I'd like to recreate this (ajax probably) call:
So does anyone know of a trick like a chrome plugin or something? It could shave a lot of time for me.
If you are setting a correct breakpoint then you should be getting a Call Stack on the Source Tab, on the right hand side. There you should be able to track down the file which initiated the call.
And as they say, a picture speaks a thousand words..
And to further elaborate on your question,
It is always advisable to use an uncompressed jQuery.js (Or for that matter any .js) during the development, as you might have already figured out.
Steps for someone new.
Inside the compressed file just get the version no.
Download the respective uncompressed version of the jquery from the official website.
If you don't want to change the code just rename the uncompressed file to jQuery.min.js or whatever is currently being loaded, so It will work as a drop in replacement.
Try chrome devtools, for example:
Sources -> Event Listener Breakpoints (to the right) -> Mouse -> click

Typo3 - t3jquery integration is not working

so first i have to say that i'm realy new to Typo3, so i dont rly know much about the cms.
Actually i have a Problem with my Page.
I want to integrade a Image Slider in my Page with the Nivo Slider Plugin.
The Problem is, that the Slider is not shown.
The page gives the error
TypeError: jQuery(...).nivoSlider is not a function
so i think, there is some problem with the jQuery.
For that i installed t3jquery but its still not working.
i nearly tried every configuration for t3jquery and also analysed the other extensions on my Page with the plugin, but nothing works.
Some of you have advice what i can do?
The page is hxxp://www.eventbringer.de/skireisen/opening-slider/ (so you can see the error in the JS Console)
TYPO3 has a very versatile way of getting content of code to the front-end.
One way is to use typoscript.
read : https://docs.typo3.org/typo3cms/TyposcriptReference/
You can see typoscript as a huge configuration 'array' that can declare all sorts of settings.
One of the settings is about how the 'page' itself needs to have.
If you need, for example, some javascript in your page, you could use
page.includeJs
https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#setup-page-includejs-array
if you need yous JS at the footer, and its an external lib, you could use
includeJSLibs.twitter = http://twitter.com/javascripts/blogger.js
includeJSLibs.twitter.external = 1

How do you get the navbar toggle to work before 768px?

I have been trying to figure this out all day. I am using a theme that a client wanted to use. I have replaced every mentioning of 767px and 768px with 1359px and 1360px (those are when I want the menu to collapse). I have added custom CSS. I can get the button to show up at 1359px, but it will not toggle the navigation.
Basically, the navbar toggle button does not work until I hit 767px. I do not want to know specific code I can use to fix this problem. All I want to know is where this is being set as 767px. How does the website know to change it at 767px when I have changed every mentioning of this number to 1359px. I have gone through every php file, js file, and css file on the server. I am foaming at the mouth. I think I am going to explode. I have checked EVERY solution here and elsewhere on the internet.
Is this something I need to change in javascript, in css, or in php, or in all of them?
I am using WordPress. I am looking for a general solution NOT CODE. As in, where is this being defined. What file do I need to edit in this godforsaken theme to get the menu to toggle at 1359.
Please help before my brains start oozing out of my ears.
Okay well I feel like an idiot..
To anyone else having a similar issue,
CLEAR YOUR BROWSER CACHE.
Upon inspecting in developer tools I realized the site was loading an older version of my bootstrap.min.css file rather than the file I updated with the new breakpoints.
Cleared the cache and everything worked as expected.

Broken link - "/a" in JQuery 1.9 Js file

When we had done security audit of our project, we got broken Link "/a" vulnerability.
After searching for link throughout project we found link in JQuery-1.9.js java-script file that we are using in our project.
small part of code in that JQuery-1.9.js -
// Make sure that URLs aren't manipulated
// (IE normalizes it by default)
hrefNormalized: a.getAttribute("href") === "/a",
As per my understanding this code part helps for making it(JQuery) compatible with IE 6/7/8.
hrefNormalized is used to check that anchor tag is giving href value as full URL or exact href , which is issue in IE version.
The better explanation of this part is given in
https://www.inkling.com/read/jquery-cookbook-cody-lindley-1st/chapter-4/recipe-4-1
I want to remove this vulnerability but i don't want to remove or change code in JQuery js file.
So, My question is why did not JQuery designers used "/#" instead of "/a" .What is the problem of using "/#" in that code.
Earlier same question is asked by someone to JQuery Team,but they told that it not the problem from Jquery.
For reference of that ticket
http://bugs.jquery.com/ticket/10149
Help me to solve Or Is there another solution?
Thank you
This is not a vulnerability but a false positive. The security scanner interprets the "/a" string as a link, which it is not.
Even if jQuery creates the link in the DOM, it's not clickable or visible to the user. Your website does not actually have a real link to /a anywhere.
I would ignore the problem without changing anything.
Maybe, if you want this hrefNormalized: a.getAttribute("href") === "/a", to be transformed into this hrefNormalized: a.getAttribute("href") === "/#", but you don't want to touch the jQuery file.
Put that second one in a script in a an order so that the browser reads your script after reading the jQuery file, so it mashes.
Anyway, I never had issues with jQuery before, check your code first.
If you don't want to have your views with scripts, put it in a js file and link this file to your view after the jQuery file.
Hope it helped you, or at least gave you some ideas to solve your problem. Good luck, let us know how it goes! ;)
EDIT:
<script src="~/JQuery/jquery-2.0.3.js"></script>
<script src="~/Scripts/Fix.js"></script>
If you do something like this, the browser reads first the jQuery, then it reads the Fix.js. Inside the Fix.js, you put the function or paramater you want to change from the jQuery.
So the Browser will get the latest one it reads if they are equal.
For example:
function whatever (){ //This in jQuery file
//things #1
}
function whatever (){ //This in Fix file
//Different things #2
}
This way the browser chooses the Fix.js one, because was the last he read.

Categories