WP Custom CSS & JS still works after uninstall - javascript

I used plugin simple CSS & JS on wp, it doubled script tag on page. Now if I make a change on editor it doesn't work because 2nd version(duplicate) form 1 day ago overrides it. How to get rid of this duplicate? Any way to clear all cache and data after this plugin?
Reinstall/uninstall plugin didn't work.

Related

for making boostrap cdn work, do I need also the javascript cdn or only css, or all 3?

which one do I need to use?
https://www.bootstrapcdn.com/
CSS or JS or BUNDLE or all 3?
I want to use buttons styling, grid, card (and maybe dropdown but in the future)
<!-- which one? -->
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js
TLDR:
if you want basic styling, use a CSS-only file.
if you need interactivity then use also javascript
CSS is mandatory
JS is optional
I suggest seeing the official docs https://getbootstrap.com/docs/4.4/getting-started/introduction/
"Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins."
they basically say if you want some extra functionality then go for javascript one (for example you want a tooltip, a dropdown that opens and close)
if you want instead of coloring, or changing size, then use only the CSS link. (buttons are one of this case)
however, if you use this only to learn, I suggest importing all the files there, for not have any import issues.
once you will learn it, then try to use one cdn link at the time.
if you want to use bootstrap in the production site, then maybe try using the npm package instead.
npm i bootstrap
(but first try to learn using CDN, the once you know the basics, then use npm)
also remember to use <link> tag to make HTML import the CSS file, by copy the first link appear you once you open the dropdown
If you are planning to use dropdowns, poppers and tooltips, use all. If you only need styles use bootstrap.min.css only.

Bootstrap don't have effect in angular 10.2.1

im trying to use some stuffs from bootstrap, but dont work at all, i realized that only buttons get effect , but the major things ins't work. for example i tried to add this dropdowlist bellow
but the result is that:
i add the cdn link direct in html page, and i already install boostrap via npm, but both cases the style boostrap and behavior isn't work properly.
try to add code below to your style.css
#import "~bootstrap/dist/css/bootstrap.min.css";
like the image below
enter image description here

Check for existance of loaded JavaScript libraries for my app's use otherwise load my own versions?

I am building a Project Management application as a SugarCRM Plugin.
In my app, which uses a lot of JavaScript, exscecially for a part that shows a Project Task record in a popup Modal Div.
So on the page there is HTML for 1 Modal Div. I then update the Task record fields inside of that 1 modal every time a new task record is clicked on. It brings the Task Modal into view and updates all the task fields and re-initiates all the JavaScript code that works on those fields.
For example almost all the data fields for a Task record that are shown in the modal div have Edit-in-place capability using the jQuery library called X-Editable. There is also a scrollbar plugin for custom scrolling inside of the Modal, Datepicker library, and some more little plugins here and there. As well as all my custom code, hundreds o lines for this section alone!
Now that I explained the app a little bit, I can move on to the questions...
SugarCRM v6.x.x uses jQueryUI DatePicker plugin for it's own Date Selectors.
SugarCRM v7.x.x changes and uses Bootstrap DatePicker library (this one http://www.eyecon.ro/bootstrap-datepicker/)
So in my plugin app I have considered both of these for my Date field needs since they are already loaded into the page anyways!
Once issue I have is the SugarCRM v6 vs v7 using different libraries.
But that isn't a real big issues as I am able to build 2 versions and target the code to the correct version for the user.
My question is, knowing that these libraries get loaded into the page, is there a reliable way for my app to check for there existence and use them if they exist? And then if they do not, load my own versions?
Or am I better off loading my own version, even though it could be loaded into the page already?
You can use duck typing to check what script is loaded. For the bootstrap version, you can check if the $.fn.datepicker.Constructor method exists; it's exclusive to that script. The jqueryui version has the same property but in lowercase.
Edit cause I didn't notice the last part of the question. If none of the scripts have loaded, you can load your own the same way the HTML5 Boilerplate does (assuming we are still working on the datepicker):
<script>window.MyLibrary || document.write('<script src="//routeToMyScript.js"><\/script>')</script>
<script>$().datepicker || document.write('<script src="//routeToMyScript.js"><\/script>')</script>

Add a code editor to a textarea via console/bookmarklet

I've run into an issue where I'm developing pages on a CMS which is out of my control, and I'm editing increasingly complex pages with nothing more than a textarea.
Initially I'm creating the pages in my code editor, then copying the HTML into the textarea. Keeping the local and CMS code in sync by hand.
This workflow sucks.
I'd like to have code highlighting, etc while I work within the CMS. Is there any way I can add a code editor like Ace or CodeMirror to the textarea via bookmarklet or console command? I've tried using the Ace Bookmarket Builder but I don't know if it's been designed to work on any page, or just github.
Edit:
I don't think I was clear enough above. I'm just an end user on this CMS, I have no ability to change how it functions on the backend. I literally just need a bookmarklet that finds the textarea and applies a code editor to it.
both tinymce and syntaxhighlighter are packages that are not tied to a CMS, so if yours is custom then you will want to try to use these together, I have heard of some success in this adventure in the Drupal (there is actually a project for it currently) arena but you may be looking at a bit of work to do so custom. there is chatter about this http://www.tinymce.com/forum/viewtopic.php?id=22901 <-here with even a plugin to tinymce :) hope this gets the ideas going!

Fancybox is not a function

Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?
$("Map").fancybox is not a function
I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.
This is my code
abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.
ex: abbr>>east
and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.
function showMapFancybox(abbr){
var abbr;
$('#'+abbr+'mapresults').hide();
$('Map').fancybox({
overlayShow: true,
onClosed: function() {
$('#'+abbr+'mapresults').show();
map_latdec = $('#decValLat').attr('value');
map_longdec = $('#decValLon').attr('value');
map_latdeg = $('#degValLat').attr('value');
map_longdeg = $('#degValLon').attr('value');
$('#'+abbr+'decValLatsub').val(map_latdec);
$('#'+abbr+'decValLonsub').val(map_longdec);
$('#'+abbr+'degValLatsub').val(map_latdeg+'N');
$('#'+abbr+'degValLonsub').val(map_longdeg+'W');
}
}).click();
};
I already had this type of errors because i was reloading jQuery after the plugin import, check you don't reimport jquery by mistake (sometimes included in a package like jQuery tools).
I just had this issue, it seem some versions of jQuery are not compatible with versions of FancyBox, for example Fancybox 1.3.4 is buggy with jQuery versions below 1.7 and doesn't work on version higher than 1.8.
Possible Solutions:
1) have you already loaded jQuery? If not, then load it before any $ commands start.
2) Check, probably you are loading jquery library (.js) several times during the page. Try to load only one.
3) In the end of file, you can execute this javascript command: $ = jQuery.noConflict(); and it might solve. If not, then anywhere use the word jQuery instead of $, and it will work too.
You need to load the extensions like easing.js and mousewheel.js BEFORE the main fancybox plugin. That solves the problem.
If "fancybox" as a function does not exist, it is likely that either the jQuery source or the plugin source are failing to load into your page. Make sure that the pathing, file names, and extension are all correct.
EDIT: Make sure that you link to jQuery Source before you link to any plugins. If a plugin is loaded into your HTML before jQuery is, the plugin fails.
In my case it was jQuery.noConflict(); row in another jQuery plugin ... when I removed everything started to work.
If you are using a plugin which includes JQuery into your header tag, this trouble can arise.
I recently added 'TheThe Slider' to my blog, all my FancyBoxes stopped working. There are easy fixes for this situation though. basically, go to the plugin directory, search for the call to jquery and make it's usage conditional. If you would like to see my implementation of this I did blog about it with screen-capture.
I got this issue in my WordPress web site and I found the issue was happening due to fancybox.js presenting twice in the code from two plugins which I installed. So check your code and make sure to load from one source.

Categories

Resources