[How to] Use JOB HUD

FiveM Resource Development & Modding Modding Tutorials
43

Here is what its done to me https://img4.hostingpics.net/pics/594158fouuuuuuu.png and Here is my code

ui folder :

window.onload = function(e){
            window.addEventListener('message', function(event){
                if(event.data.updateJob == true) {
                    if(event.data.job == 'Joaillier') {
                        $('.job').html('<p id="12"><img id="Icon_Job_1" src="https://img4.hostingpics.net/pics/553823IconJob1.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Fermier') {
                        $('.job').html('<p id="10"><img id="Icon_3" src="https://img4.hostingpics.net/pics/486354Icon3.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Brasseur') {
                        $('.job').html('<p id="5"><img id="Icon_2" src="https://img4.hostingpics.net/pics/500044Icon2.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Mineur') {
                        $('.job').html('<p id="3"><img id="Icon_7" src="https://img4.hostingpics.net/pics/701951Icon7.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Dépanneur') {
                        $('.job').html('<p id="8"><img id="Icon_5" src="https://img4.hostingpics.net/pics/343255icon5.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Bucheron') {
                        $('.job').html('<p id="7"><img id="Icon_8" src="https://img4.hostingpics.net/pics/452836Icon8.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Pecheur') {
                        $('.job').html('<p id="6"><img id="Icon_6" src="https://img4.hostingpics.net/pics/832958Icon6.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Vigneron') {
                        $('.job').html('<p id="9"><img id="Icon_4" src="https://img4.hostingpics.net/pics/807985Icon4.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                }
            })
        }
    </script>
	<style>
		@font-face {
			font-family: 'pricedown';
			src: url(pricedown.ttf);
		}
		* {
			font-family: pricedown;
		}
		.container {
			margin: 0;
			padding: 0;
			position: absolute;
			top: 50;
			right: 40;
			width: 800px;
			height: 200px;
		}
		
		#job {
			float:right;
			font-family: pricedown;
			font-weight: 700;
			font-size: 30px;
			color: white;
			padding: 4px;
			text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
			margin: 0;
			margin-right: 6px;
		}
		#icon {
			height: 21px;
			width: auto;
			margin-right: 10px;
		}
		#pre {
			font-size: 0.8rem;
			margin-right: 5px;
		}
		.job {
			display: inline-block;
			height: 30px;
			width: 100%;
		}
	</style>
<head>
<script>
		function addCommas(nStr) {
			nStr += '';
			var x = nStr.split('.');
			var x1 = x[0];
			var x2 = x.length > 1 ? '.' + x[1] : '';
			var rgx = /(\d+)(\d{3})/;
			while (rgx.test(x1)) {
				x1 = x1.replace(rgx, '$1' + '<span style="margin-left: 3px; margin-right: 3px;"/>' + '$2');
			}
			return x1 + x2;
		}

		window.onload = function(e){
			// Code here
		}
</script>
<!-- style tags go here -->
</head>
<body>
	<div class="container">
		<div class="job">
		</div>
	</div>
</body>
44

Sigh, you don’t listen do you?

Just copy-paste this since, it seems to be all you can do

Code 
<head>
	<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
	<script>
		function addCommas(nStr) {
			nStr += '';
			var x = nStr.split('.');
			var x1 = x[0];
			var x2 = x.length > 1 ? '.' + x[1] : '';
			var rgx = /(\d+)(\d{3})/;
			while (rgx.test(x1)) {
				x1 = x1.replace(rgx, '$1' + '<span style="margin-left: 3px; margin-right: 3px;"/>' + '$2');
			}
			return x1 + x2;
		}

		window.onload = function(e){
              window.addEventListener('message', function(event){
                if(event.data.updateJob == true) {
                    if(event.data.job == 'Joaillier') {
                        $('.job').html('<p id="12"><img id="Icon_Job_1" src="https://img4.hostingpics.net/pics/553823IconJob1.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Fermier') {
                        $('.job').html('<p id="10"><img id="Icon_3" src="https://img4.hostingpics.net/pics/486354Icon3.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Brasseur') {
                        $('.job').html('<p id="5"><img id="Icon_2" src="https://img4.hostingpics.net/pics/500044Icon2.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Mineur') {
                        $('.job').html('<p id="3"><img id="Icon_7" src="https://img4.hostingpics.net/pics/701951Icon7.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Dépanneur') {
                        $('.job').html('<p id="8"><img id="Icon_5" src="https://img4.hostingpics.net/pics/343255icon5.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Bucheron') {
                        $('.job').html('<p id="7"><img id="Icon_8" src="https://img4.hostingpics.net/pics/452836Icon8.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Pecheur') {
                        $('.job').html('<p id="6"><img id="Icon_6" src="https://img4.hostingpics.net/pics/832958Icon6.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Vigneron') {
                        $('.job').html('<p id="9"><img id="Icon_4" src="https://img4.hostingpics.net/pics/807985Icon4.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                }
            })
		}
	</script>
	<style>
		@font-face {
			font-family: 'pricedown';
			src: url(pricedown.ttf);
		}
		* {
			font-family: pricedown;
		}
		.container {
			margin: 0;
			padding: 0;
			position: absolute;
			top: 50;
			right: 40;
			width: 800px;
			height: 200px;
		}
		
		#job {
			float:right;
			font-family: pricedown;
			font-weight: 700;
			font-size: 30px;
			color: white;
			padding: 4px;
			text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
			margin: 0;
			margin-right: 6px;
		}
		#icon {
			height: 21px;
			width: auto;
			margin-right: 10px;
		}
		#pre {
			font-size: 0.8rem;
			margin-right: 5px;
		}
		.job {
			display: inline-block;
			height: 30px;
			width: 100%;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="job">
		</div>
	</div>
</body>
45

There is nothing more the HUD does not appear

46

NICE , https://img4.hostingpics.net/pics/986709NICE.png
It’s good its walking except it is not in the right place I want to put it under the blue card and put it in white and a bigger one. You know how to do it?

Thank you very much, Thank you

47

Hello guys, someone knows how to fix the fact that when we reconnect or disconnect on my server the job of the player is randomly, how to save the last job ?

1 Like
48

The HUD doesn’t refresh when we disconnect and reconnect , we need to go back to the job spot to refresh it.

49

@UltraGAMING @DealTime That problem was addressed in the first post and the fix is in the second post. :smiley:

1 Like
50

Yes i have fixed it yesterday ^^ but I have another problem. On my server when a player take a job, some blps appears for the trreatment / recolt etc but when they reconnect they have the job but the blips are not on the map they are forced to retake the job to see the blips on the map…

51

Top value moving always left and right like @UltraGAMING can be at bottom :frowning:

52

??? what I didnt understood

53

.container {
margin: 0;
padding: 0;
position: absolute;
top: 170;
right: 40;
width: 800px;
height: 200px;
}

Move at right from the screen and became invisible or move at the left like your screen.

54

Re-read my problem please I think you didnt understand ^^’

55

Really good eplanations for different icon by job but do you know if we can make the white background in transparencyfor each icons?

56

I tryed it , but not working. I have police job ID 10 in my sql. But when I reconnect , always return to Job Citizen with id 1 , and when someone else is connected I receive the job id 2 in the HUD.

1 Like
57

You need to edit the image, and remove the background to get transparency and save them in .png and reupload them.

59

But they’re heberged online what im gonna supposed to do this?

60

Save them on your local computer , edit them , remove the background, save them, reupload them on a image uploader website and edit your .lua with the new url for your image.

EDIT : You can save them in your script folder and change the url to local on your computer too.

62

Hello,

Sorry for my English I am French.
Thanks to you for getting great tutos, but my layout is hurting.

Can you help to put the job as money and bank?

erreur affichage.jpg700×463 41.4 KB

thank you in advance

Attached my ui.html file that I need to edit?

<style>
		@font-face {
			font-family: 'pricedown';
			src: url(pricedown.ttf);
		}
		* {
			font-family: pricedown;
		}
		.container {
			margin: 0;
			padding: 0;
			position: absolute;
			top: 80;
			right: 40;
			width: 100px;
			height: 200px;
		}
		
		#job {
			float:right;
			font-family: pricedown;
			font-weight: 700;
			font-size: 35px;
			color: white;
			padding: 4px;
			text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
			margin: 0;
			margin-right: 6px;
		}
		#icon {
			height: 21px;
			width: auto;
			margin-right: 10px;
		}
		#pre {
			font-size: 0.8rem;
			margin-right: 5px;
		}
		.job {
			display: inline-block;
			height: 60px;
			width: 100%;
		}
	</style>
63

Why is the image huge?

bugjob.PNG515×501 335 KB

64

u need to have a 250x250 picture