I went into the wordpress 3.3.1 folders to see if and what had changed specifically re the jQuery-ui-dialog for enqueueing it.(I am using admin_init, after all it is in the admin area)
Reason for doing so was I could not use the class name to set the options on the dialog.
i found the js files were differently named from what is used in the enqueue docm / help I have found.
eg they are (in the wordpress\wp-includes\js\jquery\ui" directory) now, all postfixed with .min eg jquery.ui.core.min, jquery.ui.dialog.min etc.
Question then,...Does this mean the names used in enqueueing should be the same.?
eg wp_enqueue_script('jquery-ui-dialog-min');
where before it was
wp_enqueue_script('jquery-ui-dialog');
One folder back (in \js\jquery) the "jquery.js" is still named the same.
I suspect that the enqueueing results in the following function using .dialog to fail (else the class name has changed?)
jQuery(document).ready(function(){
jQuery("#dialog-form").dialog(
{
dialogClass : 'wp-dialog',
autoOpen: false,
width: 400,
resizable: false,
modal: true,
title: "One Popup"
});
The .dialog class does not respond / do anything.
Even tried the
$Mydialog = ....approach for setting it after init, but no luck there either
Any help would be greatly appreciated,..many days of frustration and trying everything has had no success.
Thx
Neal
Codex still lists it as jquery-ui-dialog, so I guess thats correct.
Are you also enqueueing jquery and jquery-ui-core before you enqueue jquery-ui-dialog?
Related
I just jump to laravel 9 recently (from few months ago), kinda wondering about,
Is it possible to generate all css classes (including custom classes), BUT, only when APP_ENV on .env is not production?
I tried to overcome No.1 (see below explanation), by using const APP_ENV = import.meta.env.VITE_APP_ENV; on tailwind.config.js - so I can do if - else thing, to load things, but it produce an error - offset is longer than source length! offset 81 > length 59. Is it possible to get .env variables on tailwind.config.js?
As I tried to find another way for No.2. I'm narrowing my objective on No.1 and No.2, so, I tried to load all possibilities of my "custom classes" only on dev. By using safelist - to generate all my-own custom class, but it seems not working well, since, the custom class that I want to add doesn't added. I'm using this - pattern: /./ - since I saw this article says so (please, correct me if I'm wrong), but, it's indeed "hitting" all other classes, not just my custom classes. I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *? (I already check around on tailwind docs, but couldn't found something like that)
I tried a proper way, to just load all my custom classes like pattern: /ctm/, but as stated on tailwind documentation
Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern includes a variant modifier like /hover:bg-red-.+/.
How can I do so, without me typing & guessing all of the possibility of variants?
Explanation how I try to overcome For question No.1 -
I tried using these code on app.js
const APP_ENV = import.meta.env.VITE_APP_ENV;
if (APP_ENV == 'production') {
//need to use ()
import ('../css/app.css');
}
and with below code on app.blade.php
#if (config('app.env') != 'production')
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
#endif
But, when it comes to a custom classes on tailwind.config.js - for example
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
'ctm-dark-purple': '#2a234f', //<--- custom class here
'ctm-light-dark-purple': '#2a234f', //<--- custom class here
},
},
},
It doesn't generate that custom classes, since I "block" the generated class and swap it into cdn mode on dev.
So, in-summary, how can I "generate all css classes" only on "development" mode? Along with my "custom css class"? If that's not possible, then, is it possible to overcome No.3? I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *?
My main reason is simply, I want to apply classes directly on web-browser console and see the changes more faster, rather than back-and-forth modifying-then-save the code on text-editor.
Thanks a lot!
Log -
Updating Problem No.3 - since forgot to mention precisely what I want
On my website (which is under construction) I'm using "Before-After MultiX Slider". It's working fine, but I'm trying to have all the separators "collapsed" on the right (or left).
For example here
I've tried to use css to change width of some classes as follows:
.wmg-image.wmg-image-3.first.ui-resizable {
width: 91.6379%!important;
}
.wmg-image.wmg-image-2.ui-resizable {
width: 95%!important;
}
.wmg-image.wmg-image-1.ui-resizable {
width: 98.3621%!important;
}
If I don't use !important nothing happens. If I use it, I get what I want
but the slider stops working and the images don't resize by scrolling separators.
Any idea on how to achieve this?
I can't find any failure there and digged a little deeper into the problem... Therefore I post a second answer, because the nature of the problem is somehow different after all, the code is working but not as expected for the following reason:
If you load scripts async the page will continue to render while the scripts are still loading, so it is possible that other none async scripts comming afterwards will start to load earlier than some async ones still in query...
Here we don't have async ones, BUT it seems to be like even if the async keyword is not present though the scripts will come in the query one after an other depending on their order nevertheless the server will load round about 3 or 4 scripts parallel!
-> So it happens that shorter scripts may be finished to load before longer ones allthough they've started to load later...
On my research I could not find a definite solution for that problem, because it simply seems to be quite hard to control that loading process in detail! (You i.e. can find some topics about that phenomena here on the board...)
I will present some different approaches, you will have to test them yourself, because I don't have that slider PlugIn so I could try:
Solution 1:
Try to use the "defer" keyword, this should be so to say the opposite of "async" and cause scripts to be not loaded before the page is parsed completly, but sadly I'm not sure if that works, never used it before and it sounds like it is the same as using "document.ready" which is not working in this case...
Important thing is that you must insert the script externally otherwise the keyword won't do anything, i.e:
<script src="demo_defer.js" defer></script>
Solution 2:
A surely working solution would be to add our script as a callback to the call of the slider script, but I guess that this is no suitable solution here because you'll have to change the PlugIn code which is not update safe!
Solution 3:
Maybe you can play with a timeout to make sure that the execution will start later, but the problem is that you cannot really know how long this timeout must be! (i.e. have a look here: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
WORKAROUND:
I thought up a way to get around that problem, but as said before the code is untested, maybe try that and give me a notice when you have included this script, so I can have a look how it works...
In this way it is supposed that a class which does the positioning with the !important-statement is added and then removed on the first click, just then the elements are positioned again without !important and of course after that on every further click the positioning won't be manipulated again!
function sr_custom_width_for_slides()
{ ?>
<style type="text/css">
.notClicked .wmg-image.wmg-image-3.first.ui-resizable {
width: 91.6379% !important;
}
.notClicked .wmg-image.wmg-image-2 {
width: 95% !important;
}
.notClicked .wmg-image.wmg-image-3 {
width: 98.3621% !important;
}
</style>
<script type="text/javascript">
jQuery( document ).ready(function() {
var firstClicked = false;
jQuery(".wmg-before-after").addClass("notClicked");
jQuery(".wmg-before-after").click(function() {
if ( !firstClicked ) {
jQuery(".wmg-image.wmg-image-3.first.ui-resizable").css("width","91.6379%");
jQuery(".wmg-image.wmg-image-2.ui-resizable").css("width","95%");
jQuery(".wmg-image.wmg-image-1.ui-resizable").css("width","98.3621%");
jQuery(".wmg-before-after").removeClass("notClicked");
firstClicked = true;
}
});
});
</script>
<?php }
add_action( 'wp_footer', 'sr_custom_width_for_slides', 1000 );
EDIT REGARDING YOUR LAST COMMENT:
I checked the site again and in my case it sadly does not work at all, because the click event is never fired! I guess that the JS code of the PlugIn binds some events which maybe stop our script from working... (See the function "stopPropagation()" for more infos.) So my final clue is to simply bind another event which hopefully is not manipulated by the PlugIN in that way! As far as I can see this could be "mouseenter" or "mouseover"...
So just change
jQuery(".wmg-before-after").click(function() {
...
});
to
jQuery(".wmg-before-after").mouseover(function() {
...
});
the problem is quite simple... The width is set inline via js, so this will override any changes you made in your css file!
If you set the styles with an !important-statement it will work, but the sliders script cannot set the new width anymore...
So after all the most easy way to achieve what you want is to insert a small script which sets the styles AFTER the slider scripts have been loaded, so maybe at the very bottom of the footer of the page after the "wp_footer" call, because most plug ins enter their js over this hook, somehow like this:
<script>
jQuery(function() {
jQuery(".wmg-image.wmg-image-3.first.ui-resizable").css("width","91.6379%");
jQuery(".wmg-image.wmg-image-2.ui-resizable").css("width","95%");
jQuery(".wmg-image.wmg-image-1.ui-resizable").css("width","98.3621%");
});
</script>
I can't test it, but I'm quite sure that this will work, if the script is inserted at the correct position! :)
EDIT: I made a quick test via the console of the FF inspector and it works as expected, but as mentioned above, if the slider script will load later than this script it won't work at all!
I am building an app for the first time using Meteor. Due to an accessibility issue, we would like to offer two different Bootswatch themes to the users. I found a very useful explanation of how to switch Bootswatch themes here:
How to dynamically change themes after clicking a drop down menu of themes
(which references a handy fiddle in the accepted answer: http://jsfiddle.net/82AsF/)
I have tried placing the provided javascript inside myapp.html in the <head> tag. I also tried placing it inside the myapp.js file. (Then I tried placing in many assorted places just to see what would happen ;-) )
Nothing I have tried is working and it seems that it is the Meteor framework that is, understandably, "getting in the way". Is there an approach that will work for switching Bootswatch themes in a Meteor app?
Dynamically switching bootswatch themes is easily done as demonstrated in the originally referenced question: How to dynamically change themes after clicking a drop down menu of themes
Meteor (plus iron-router in my case) complicates this a little through the event maps and the simple fact that the dynamic change is occurring in the <head>.
Another answered question explains how to handle an event in jQuery directly (bypassing Meteor event maps): How to handle custom jQuery events in Meteor?
The code snippet below shows how I put the two ideas together. It's all working as expected.
var themes = {
"default": "bootstrap311/css/bootstrap.default.min.css",
"readable" : "bootstrap311/css/bootstrap.readable.min.css",
"slate" : "bootstrap311/css/bootstrap.slate.min.css"
}
$(function(){
var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
themesheet.appendTo('head');
$('body').on('click', '.theme-link', function (e) {
var themeurl = themes[$(this).attr('data-theme')];
themesheet.attr('href',themeurl);
});
});
Before 3.2, I can set the menu item type to "external link" and then set the link as
"javascript:myFunction()"
When clicked, the menu item will call the JavaScript function. But after I upgraded to 3.2, when I did the same thing and tried to save the menu item, it said "Save not permitted".
Did 3.2 block this usage? If yes, how do I get my JS function executed by a menu item?
I've came up this problem a while ago, in Joomla version 3.2.1 concerning a 'Skype' link, e.g.
skype:myloginname
This has to do with the protocol types that are allowed and are defined in this file:
/administrator/components/com_menus/controllers/item.php, line ~180.
There is an array that defines the acceptable schemes:
$scheme = array('http', 'https', 'ftp', 'ftps', 'gopher', 'mailto', 'news', 'prospero', 'telnet', 'rlogin', 'tn3270', 'wais', 'url', 'mid', 'cid', 'nntp', 'tel', 'urn', 'ldap', 'file', 'fax', 'modem', 'git');
When adding skype at the end of the list Joomla! allowed saving the external link. The same applies for javascript. In any case you should consider any security risk that comeswith this solution.
In addition, you should take into mind that this override may be discarded in any future update of joomla.
Technically speaking Joomla thinks that javascript is a protocol, like HTTP & Co., it looks it up inside a list of known protocols, it does not find it and it throws an error.
Start reading at around line inside [MenusControllerItem::save()][1]. So basically it has nothing to do with the fact you are trying to use some JavaScript, this is just a side-effect.
While using JavaScript in the External Link is not really an advertised feature but rather said a loophole, it does break b/c if you have used before.
You can:
Open an issue in the Joomla Issue Tracker and report this issue, get some community feedback. The fix is really easy, it just needs to get accepted.
Use the suggestion below:
Instead of link put #
Set the field "Link CSS Style" to something that does not colide with other classes, eg. my-function
Save
You can use jQuery to intercept the click event on the link and to make it run your function. See code below:
jQuery(document).ready(function($){
// Select element based on the class set in Joomla backend
$( ".my-function" ).on( "click", function(e) {
// Do not follow the link
e.preventDefault();
// Call function
myFunction(1);
});
});
function myFunction(x)
{
alert("I was called" + x);
}
Update: after a short discussion with the commiter of the change, I understood that it may be related to a security issue. So it may be on purpose after all not to allow js.
I am building a module that lets the administrator choose a number of optional CSS and JS files that should be included when every page is rendered.
The function hook_init seems to be the right place, but on the hook_init page it says that this is actually not the right way to do it:
To add CSS or JS that should be present on all pages, modules should not implement this hook, but declare these files in their .info file.
Does this not apply to my case, or is there a better way to do it?
That doesn't apply in your case. It only applies if the include of the CSS and JS are not conditional on anything.
My problem was aggregation if the css was added conditionally(in my case conditioned on language).
The result was the css not being loaded when aggregation was enabled.
Simply reading the documentation of drupal_add_css helped me a lot.
I had 2 options preventing this from working:
'every_page' set to TRUE because I misinterpreted it ( I actually wanted it on all pages, but only for certain languages )
'preprocess' has a default value of TRUE and it causes a css to be included in aggreation, problem being that if it is not loaded at the time the aggregated files get created, it will not be loaded at all afterwards.
Solution was: drupal_add_css(path_to_theme() . '/css/language-override.css', array('weight' => 101, 'preprocess' => FALSE));