I'm trying to upgrade Uvumidropdown menu for use with MooTools 1.3.2 or 1.4.1 so that I can use a MooTool slider as well. The first thing I did was to replace the mootools call to a "mootools-dropdown.js" with a call to "mootools-1.2.5.js" given that the contents of "mootools-dropdown.js" begins with
var MooTools={version:"1.2.0",build:""};var Native=function(J)...
so obviously this is a MooTool core file. I did this to troubleshoot the menu, and make sure that the core file was not a custom file.
<script type="text/javascript" src="js/mootools-1.2.5-core-yc.js"> </script>
<script type="text/javascript" src="xjs/mootools-dropdown.js"> </script>
<script type="text/javascript" src="js/UvumiDropdown-compressed.js"> </script>
<script type="text/javascript">
window.addEvent('domready', function () {
var menu = new UvumiDropdown('dropdown-demo');
});
As it happens, the dropdown menu does not work with 1.2.5.
Is my presumption that the menu should work with 1.2.5 incorrect?
My findings lead me to believe that the mootools core file has been customized, but I have no way to compare it with an original 1.2.0 file.
Related
I'm making a site with Preact & Tailwind. In the code here (I know it doesn't have head, body, e.t,c but that isn't relevant to the code):
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.11.2/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.js"></script>
<script>
htm.bind(h)
let component = htm`<p>Hello World</p>`
</script>
htm and h are parts of the Preact and HTM cdn. How do I get htm and h from the preact/htm cdns?
I don't want to use a node_modules, as i want it to be a copypastable template html to use anywhere, like WordPress, replit, codepen, e.t.c. I also don't want to use as the way my code is setup it would look weird and bad to read.
Adding a dependency (or dependencies) via <script> adds those to the global scope. h, in the example above, is undefined as you have not specified where it comes from.
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.11.2/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.js"></script>
<script>
let html = htm.bind(preact.h)
let component = html`<p>Hello World</p>`
</script>
(Adjusted code, as htm.bind alone will not work. Need to assign & use the result).
This, however, is less than ideal in the modern age of ESM. Messing with globals is just rather unnecessary. Instead, use the following:
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script type="module">
import { h } from 'https://cdn.skypack.dev/preact';
import htm from 'https://cdn.skypack.dev/htm';
let html = htm.bind(h);
let component = html`<p>Hello World</p>`;
</script>
Or, even better yet, use htm/preact export to skip manually binding altogether:
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script type="module">
import { html } from 'https://cdn.skypack.dev/htm/preact';
let component = html`<p>Hello World</p>`;
</script>
Unpkg has a number of issues (very difficult to fix, if not impossible. Not a criticism, unpkg was built in a different time) regarding ESM usage, specifically for Preact, resolving package.json "exports" and sometimes duping the Preact instance. This is an issue for hooks, as they require a singleton by design. This is why I'd recommend Skypack or esm.sh. They're built for ESM and work brilliantly.
Here’s what I do in an ordinary html file.
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/test.js"></script>
Now, I’d like to see this reflected in WordPress. So in my functions.php I do this:
function theme_files(){
wp_enqueue_script('jquery',get_theme_file_uri('js/jquery-3.3.1.slim.min.js'),NULL,'1.0',true);
wp_enqueue_script('popper',get_theme_file_uri('js/popper.min.js'),NULL,'1.0',true);
wp_enqueue_script('bootstrap',get_theme_file_uri('js/bootstrap.min.js'),NULL,'1.0',true);
wp_enqueue_script('ui',get_theme_file_uri('js/jquery-ui.min.js'),NULL,'1.0',true);
wp_enqueue_script('ownJS',get_theme_file_uri('js/scripts.js'), array('jquery'), '1.0',true);
}
add_action('wp_enqueue_scripts','theme_files');
Unfortunately it doesn’t work. I already found out that its not the dependency in my own js (scripts.js). It doen’t matter whether I do NULL or array(‚jquery‘). Also, I tried to only enqueue my own js without the others. Doen’t seem to change a thing.
Suprisingly, when I do alert(’test’); in my scripts.js it does pop up. But when I do
$(„#idOne“).click(function(){
alert(‚hello‘);
});
Nothing happens when I click on the element with the id=„idOne“
Even when I do pure js
function sayHi(){
alert(‚Hi‘);
}
var one = document.getElementByID(‚idOne‘);
one.addEventListener(‚click‘,sayHi, false);
it doesn’t do a thing ether. What do I do wrong?
Thanks!
I need to insert a piece of code in my website. The code is to connect my website to MailChimp:
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/0dc30c560570fa73fdd90b4ec/2cfddd4d9fb2316dbdb3b3c48.js");</script>
The problem is that my website platform just let me add code that starts with <script> and ends with </script>:
https://i.stack.imgur.com/Lyl7A.png
Is there a way to change the code structure to start with <script> , and then add the id="mcjs"?
You can write a <script> that uses document.write and adds the MailChimp script.
<script>
document.write('<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/0dc30c560570fa73fdd90b4ec/2cfddd4d9fb2316dbdb3b3c48.js");<\/script>')
</script>
The following has occurred:
ReferenceError: anputAccept is not defined]
<script type="text/javascript" src="tshirt1.js"></script> <--this is failing to load.
I have created a .js file that has a method in it named anputAccept. This is located within Script tags in HTML at the bottom of the body tags.
document.getElementById("pushme").addEventListener("click",inputAccept);
The actual method is set like this in .js
function anputAccept() { //Statements here };
Can anyone explain exactly what is going on, and why the script fails to run? Why is there a Reference Error? This is caused because the script fails to load?
Put <script type="text/javascript" src="tshirt1.js"></script> to the bottom of the HTML page or you can you can try this:
window.onload = function() {
document.getElementById("pushme").addEventListener("click",inputAccept);
};
$(document).ready(function(){
$("a[rel='box']").colorbox();
});
and
jQuery('a[href*=#]').live('click',function() { ...etc...
total NOOB question:
I have these two functions in JQuery...
How do I combine them ?
a[href*=#] is a slideshow presentation and a[rel='box'] is for a colorbox to open...
one or the other works but not both together.
That is what I get for trying to "cut and paste" code...
the Jquery is loaded
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script type='text/javascript' src='scripts/jquery.colorbox-min.js'></script>
in the HEAD section
I even tried to add:
jQuery(function(){
if(jQuery.isFunction(jQuery.fn.colorbox)) {
jQuery("a").live('click',function(){
jQuery(this).colorbox();
});
}
});
but this didn't work either...
This is where I got the slideshow... www.pixedelic.com/plugins/camera/ colorbox is loaded, but doesn't work on individual pictures...
Any help would be GREATLY appreciated and thanks!
The problem was defining $ in jQuery NOT an A conflict with READY and LIVE...
I think your copy of jquery.min.js is corrupted, it doesn't define $.
Your jQuery script ends with jQuery.noConflict();, that prevents defining $.
So you have to write jQuery(document).ready() instead of $(document).ready()
You can't write $.noConflict() after you already have jQuery.noConflict() in jquery.min.js.
SOLUTION:
jQuery(document).ready(function($){
$("a[rel='box']").colorbox();
});
NOT:
// cannot below use if have jQuery.noConflict(); ! use above notice large Q //
$(document).ready(function(){
$("a[rel='box']").colorbox();
});
THANKS! Barmar!