Cursor on loading screen

FiveM Resource Development Discussion
1

Hi, how i can put mouse cursor on loading screen?

2 Likes
2

Some javascript:

window.onload = function() 
{
  document.body.addEventListener("mousemove", function(event)
  {
        var cursor = document.getElementById("cursor");

        //TODO: More consistent way of aligning the cursor without awkward offsets?
        var x = event.pageX - cursor.width + 7;
        var y = event.pageY - 7;

        cursor.style.left = x;
        cursor.style.top = y;
  });
}

Cursor is just an image (that gets assigned dynamically):

 <img id="cursor"/>
2 Likes
3

do you place the <img id=“cursor”/> inside the index.html? I am just confused as to where that goes?

4

where do you put all the stuff and how big does the cursor have to be? @Syntasu I found out that the script had to go in config.js but I don’t where the should go inside the index.html

5

With these kind of questions, I suggest you follow an html/css/js course to get familiar with it.

6

hey i put everything on right place and my mouse image stay stucked on left corner

7

here is working mouse cursor javascript and html that should work universally for any loading screen.
Live demo: https://pensionable-surveil.000webhostapp.com

follow my instructions and everything should work.

  1. Download this javascript file: https://pensionable-surveil.000webhostapp.com/cursor.js
  2. Download the cursor image I used: https://pensionable-surveil.000webhostapp.com/cursor.png
  3. Place those files inside your loading screen’s resource folder.
  4. Open the __resource.lua file and add 'cursor.png' and 'cursor.js' to the files {}
  5. Open your loading screen’s index.html file and scroll to the very bottom.
  6. Find the </body> tag then paste this code on the line above the tag.
<img id="cursor" src="cursor.png"/>
<style>
  #cursor {
  width: 35px;
  height: 35px;
  position: fixed;
  z-index: 10000;
          }
  </style>
  <script src="cursor.js"></script>
  1. Save and open the index.html in your web browser or test the loading screen on your server.
  2. Profit?

Here is a download of the whole thing if you just want easy mode, it uses ElusionPDX edited copy of this loading screen which plays youtube videos from a list you can configure.
https://pensionable-surveil.000webhostapp.com/t-loadscreen-fixed-working-mouse.zip

Update:
I enabled the player controls and now playing information.

3 Likes
8

Thanks man!

9

it does not work

10

I can’t click, please help

11

yes the link is dead

12

yo your links dont work

3 Likes
13

Put loadscreen_cursor 'yes' in your __resource.lua file.

2 Likes
14

perfect

15

Then now my esx_identity dont show her cursor xD

16

Thank you man, you have help me doll, thanksss <3