[How to] Use JOB HUD

FiveM Resource Development & Modding Modding Tutorials
65

You can set the max-width and max-height properties in the CSS (or style attribute) to force the image to be the size you want.

For example to force the image to be 250x250 pixels you would do something like

<img src="http://someurl/image.png" style="max-width: 250px; max-height: 250px" />
66

Sorry to all! I am not the creator of the script and do not understand English. I just shared it.
If you want help, I will have to contact me in MP and with a translation in French.

2 Likes
67

thanks for the help :slight_smile:

68

I have an image 250x250 is it always displayed in large

69

The picture need to be 25x25 :wink:

70

OK thanks for your answer

71

No problem and if you need other help just pm me :wink:

72

No problem thanks a lot

73

How to you get the food and thirst ?

74

Here the food

How to remove the white background?

75

You can use this

76

Or just remove the white background in photoshop and save it in png :wink:

77

Hey, How i can do my text like Him in Color White whith police pricedown ? because My Text is Black and Little …

My Script: https://pastebin.com/SycTMt0k

78

Paste this :slight_smile:

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' + '' + '$2'); } return x1 + x2; } 
    window.onload = function(e){
        window.addEventListener('message', function(event){
            if(event.data.updateJob == true) {
                if(event.data.job == 'Chomeur') {
                    $('.job').html('<p id="1"><img src="https://img4.hostingpics.net/pics/553823IconJob1.png" style="max-width: 250px; max-height: 250px" />' +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: 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 {
        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;
    }
</style>
79

Hy, Not working now the text its like these:

80

okay wait 2 sec i will give you my code

1 Like
81

Okay thks again Bro <3

83

So this is the ui.html : https://pastebin.com/CJLeNr6s

84

Yeah but whit these we can’t change the icon for many jobs ?

85

?? what do yo mean ?