[How-To] Use NUI (UI Creation with HTML)

FiveM Resource Development & Modding Modding Tutorials
22

This guide does not look to be working, at least from my side. I’ve been checked the github repo as well and by typing in the chat the command “/test” nothing moved on.
Can someone check if this is actually working from your side?

23

The tutorial is old but is still working on learning simple UI. The only thing you dont need to do that is in this tutorial is make your own mouse input because in the native SetNuiFocus(true, true) toggles focus and cursor and SetNuiFocus(false, false) removes it @Ecoltec

24

Still nothing…I’ve disable the chat from fivem, added the one from github mentioned above, typed “/test” and I get the player stucked but can’t see the UI.
If you know some tutorials or resources updated I’d be glad to take a look. This is the only thing I need help :frowning:

25

Wait. Why did you replace the chat?

26

Please, just please, fix that “importend” you wrote and even highlighted. It hurts my eyes. Other than that, nice guide!

1 Like
27

Not working, I copied everything.

I want to have my Server name on the center top just “ROLEPLAY SERVER VERSION 1.5.5” somebody here who has more knowledge with JS and Lua than me?

Edit: FIXED

1 Like
28

Is it possible to debug the NUI js file? If possible, how can I do it?
I tried to go to http://localhost:13172/ as FiveM wiki says, but it only show me Inspectable WebContents and CitizenFX root UI link. If I open html file in a browser, Failed to load script “nui://game/ui/jquery.js”.

Need help please :pray:

Solved! It’s not working on Firefox. Got working on Chrome.

29

is it possible to read PHP files with fivem?

30

Would be better with video or updated version

1 Like
31

did anyone figure out how to get this working? implemented everything asked and my html page does not appear.

edit: I removed the javascript link in the index.html file and it loaded so that portion might need to be updated.

32

hi I have a problem with this resource but in the html file line 0 does not exist as I can solve it thanks

Immagine
Immagine1790×331 201 KB

33

how can i set value var BEGIN_CREDITS = 0;

i try but not work!

app.js

var BEGIN_CREDITS = 0;
$(function(){
	$(".container").hide();
	
	window.onload = (e) => {
		window.addEventListener('message', (event) => {
            //document.querySelector("#logo").innerHTML = " "
			var item = event.data;
			if (item !== undefined && item.type === "slotmachine_lobby") {
				BEGIN_CREDITS  = event.data.sotienmat;
				$('#close_od_slotmachine').text(event.data.sotienmat);
				$(".container").show();
				$("#game").show();
				
			}
			 else if (item !== undefined && item.type === "close_od_slotmachine") {
				$(".container").hide();
				$("#game").hide();
			}
		});
	};
});
34

Is it possible to test all this in browser, before putting in server? All the time if I open html files it’s only white screen…

35

yes, i do it all the time

36

Is it by editing .css file?

37

I create my own stuff so i dont see the issue here.

38

All I asked was is it possible to test, so that means im curious how to. So it’s possible by changing display option in css files, thanks for answer.

39

Yes, mostly it is a div where the display is set to none.
You can simply edit that temporarily with the browser inspection console.

40

Hello, i’m new
And i have a problem with NUI. I can’t enter any text to the input.

Sorry for my bad english :smiley:

41

Did you use SetNUIFocus(true)?