Using UIkit in Wordpress

This topic has 17 replies, 2 voices, and was last updated 1 year, 1 month ago by Aubrey.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
2022-08-05 at 9:34 am #54647
Aubrey
Customer
I use UIkit for my ui framework in wordpress. I’m trying to send out a parameter to open up a offcanvas component and all working ok except using the UIkit js. Its not seeing the library which is linked on the site its embeded.
So I have added to my projects js file:
```
function runCode(app) {
    // add your code here, e.g. console.log('Hello, World!');
    app.ExternalInterface.openModal = function(textArg) {
        console.log('ID:'  + textArg);
        UIkit.offcanvas(textArg).toggle();
    }
}

});
```
but get “Uncaught TypeError: UIkit.offcanvas(…) is undefined”

Any ideas?
2022-08-05 at 2:03 pm #54655

kdv
Participant

Aubrey wrote:

except using the UIkit.js

is this script embedded into .html like this?
<script src=”path/UIkit.js”></script>

Try offcanvas(textArg).toggle(); instead of UIkit.offcanvas(textArg).toggle();

Solving any problems with Puzzles or JS code. Fast and expensive.

2022-08-05 at 11:48 pm #54657

Aubrey
Customer

unfortunately no, I get
Uncaught ReferenceError: offcanvas is not defined

To call the component you need UIkit as seen in their docs here.
I’m not familiar enough with javascript but how would you import or include the library in the V3d projects js file?

2022-08-06 at 12:27 am #54658

kdv
Participant

just copy and paste this into your_app.html

from here https://getuikit.com/docs/installation

Solving any problems with Puzzles or JS code. Fast and expensive.

2022-08-06 at 1:04 am #54660

Aubrey
Customer

I have tried already tried this as well as with the local versions I’m using on the site and still getting the same error.

2022-08-06 at 1:14 am #54661

kdv
Participant

Well, as for me, it works. It hides the fullscreen_button ))) I’ve just added three, shown above, strings into .html…

I have no idea what is supposed to happen using this script…

Solving any problems with Puzzles or JS code. Fast and expensive.

2022-08-06 at 1:25 am #54664

Aubrey
Customer

Ah, think that is what I was looking for, I have put the
document.getElementById in there and now not getting error but still not pulling up the window its supposed to.

One step closer, thanks!

2022-08-06 at 3:15 am #54665

Aubrey
Customer

Ok, I’m seeing what the issue is now. I added the modal html and css into the project html and it seems to be working there but this is not going to work for me.

Looks to be that you cannot trigger the javascript to the parent outside the iframe? Is there way to do this?

2022-08-06 at 7:13 am #54666

kdv
Participant

What is supposed to happen? I just see a white screen when trying to show some html element )))

Solving any problems with Puzzles or JS code. Fast and expensive.

2022-08-06 at 8:49 am #54667

Aubrey
Customer

Offcanvas essentialy brings up a modal as a sidebar.
https://getuikit.com/docs/offcanvas

I would like to be able to open a modal outside of the iframe.

2022-08-06 at 9:32 am #54668

kdv
Participant

really? just a sliding side-bar?

Solving any problems with Puzzles or JS code. Fast and expensive.

2022-08-06 at 9:36 am #54669

Aubrey
Customer

Yes, this is a project i’m working, I have elements in my site that I would like my 3d poject to interact with. So yes, JUST a side bar for now with more later.
So my question doesnt matter what it is but that if you can interact with elements outside the iframe

2022-08-06 at 11:22 am #54670

kdv
Participant

Aubrey wrote:

if you can interact with elements outside the iframe

yes, you can. just move uikit.js, uikit.css and the offcanvas bar from your_app.html to index.html
https://v3d.net/9vt

Solving any problems with Puzzles or JS code. Fast and expensive.

2022-08-06 at 12:10 pm #54672

Aubrey
Customer

Thank you for your help but I fail to see what this example is supposed to show? I need an interaction with the 3d scene to open the offcanvas element.

2022-08-06 at 12:29 pm #54673

kdv
Participant

pressing on the Show side-bar button shows the side-bar. What else? ))) well, you can click the cube to toggle the side-bar. Is that an interaction?

Solving any problems with Puzzles or JS code. Fast and expensive.
Author

Posts