[How to] Use JOB HUD

samgaze · May 7, 2017, 8:49pm

If you want use an image for each job, use this:

window.onload = function(e){
            window.addEventListener('message', function(event){
                if(event.data.updateJob == true) {
                    if(event.data.job == 'Aucun') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier1.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier2.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier3.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier4.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier5.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier6.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier7.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier8.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                }
            })
        }
    </script>

Flico · May 7, 2017, 9:11pm

I create a hud file and I put it in?

Flico · May 7, 2017, 9:55pm

Can you give me the script to download because I understand nothing. Thanks guy I really need his. Thank you very much

samgaze · May 7, 2017, 10:52pm

Put in the ui.html of this script

Neurowend · May 7, 2017, 11:11pm

The job appear in the middle of my screen…
Can you send the ui.html for us pls ?

samgaze · May 7, 2017, 11:12pm

Change the top value of container in 170 or 180

Neurowend · May 7, 2017, 11:15pm

Nope

samgaze · May 7, 2017, 11:19pm

Dou you have change the .container top value?

Neurowend · May 7, 2017, 11:28pm

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

Flico · May 8, 2017, 5:43am

Ok and i create a folder with client.lua with its:

RegisterNetEvent(‘jobssystem:updateJob’)
AddEventHandler(‘jobssystem:updateJob’, function(nameJob)
local id = PlayerId()
local playerName = GetPlayerName(id)
SendNUIMessage({
updateJob = true,
job = nameJob,
player = playerName
})
end)

and another server.lua with its:

RegisterServerEvent(‘jobssystem:jobs’)
AddEventHandler(‘jobssystem:jobs’, function(id)
TriggerEvent(‘es:getPlayerFromId’, source, function(user)
local player = user.identifier
local nameJob = nameJob(id)
updatejob(player, id)
TriggerClientEvent(“es_freeroam:notify”, source, “CHAR_MP_STRIPCLUB_PR”, 1, “Mairie”, false, "Votre métier est maintenant : "… nameJob)
end)
end)

This is good?

samgaze · May 8, 2017, 5:49am

No. Put in the jobsystem

Flico · May 8, 2017, 5:51am

Ok tanks dude I will test

Flico · May 8, 2017, 6:12am

I have little problem xd : http://www.hostingpics.net/viewer.php?id=652676probleme.png

Havoc · May 8, 2017, 6:20am

You need to put the “window.onload” stuff in script tags.

E.g.

<script>
window.onload = function(e){

}
</script>

Flico · May 8, 2017, 6:24am

On my code there is already this

Havoc · May 8, 2017, 6:26am

Well, your screenshot shows that you’re missing the script tags…

Flico · May 8, 2017, 6:28am

I will test thanks you

Flico · May 8, 2017, 6:45am

This is my code And it still does me :

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 == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier2.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier3.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier4.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier5.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier6.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier7.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                    if(event.data.job == 'Votre Métier Ici') {
                        $('.job').html('<p id="job"><img id="icon" src="http://monsite.net/job-icon-metier8.png" alt=""/>' +addCommas(event.data.job)+'</p>')
                    }
                }
            })
        }
    </script>

Havoc · May 8, 2017, 6:56am

First of all,

Should be (note the extra quote).

if(event.data.job == 'Joaillier')

If this inside the ui.html file? If so, that’s not everything. You need to add this with the current code inside it. Something like (You still need to have the <body> tags)

<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>

Flico · May 8, 2017, 7:38am

This code is put in job / client.lua?

RegisterNetEvent('jobssystem:updateJob')
AddEventHandler('jobssystem:updateJob', function(nameJob)
local id = PlayerId()
local playerName = GetPlayerName(id)
SendNUIMessage({
updateJob = true,
job = nameJob,
player = playerName
})
end)