NUI - Linking to different pages

FiveM Resource Development Discussion
, , ,
1

Hey, so I’m making a multipage tablet-like MDT/CAD, and, I’ve setup NUI, got all of that working fine.

I’m now trying to have another page, as in, you click something on the home page, the home page disappears, and a new page appears on the tablet.

I’ve tried some ways to do this but im really not familiar enough with JS/CSS/HTML to do this confidently, and i figured rather than firing at a wall blind folded here, I would just ask.

So if anyone knows how to do this, please let me know

Thanks

2

Once you’ve created your button, you just need to link it to another web page using .
For instance if you have done that using a list :

 <ul>
  <li><a href="app1.html">App 1</a></li>
  <li><a href="app2.html">App 2</a></li>
</ul>
3

I have tried that.

First Page with link 
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
      <link href="style.css" rel="stylesheet" type="text/css" />
     
   </head>
   <body>
      <div class="tablet">
         <div class="content">
            <div class = "index">
           <div class ="blackbar"><font size="-1">Welcome</font></div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <a href="next.html" id="login">
            <img src = "res/user.png" alt="Image failed to load, please contact the server developer." height="400" width="35" border="3" > 
            </a>
            </div>

            <div id ="create" display = "none">
               <h1> es </h1>
            </div>
  
         </div>
      </div>


      
    
      <script src="script.js" type="text/javascript"></script>
   </body>
</html>
Page which is being linked to "next.html" 
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
      <link href="style.css" rel="stylesheet" type="text/css" />
     
   </head>
   <body>
      <div class="tablet">
         <div class="content">
           <div class ="blackbar"><font size="-1">Welcome</font></div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <h1> NEXT </h1>
  
         </div>
      </div>
    
      <script src="script.js" type="text/javascript"></script>
   </body>
</html>
JS 

$(function() {
    window.addEventListener('message', function(event) {
        if (event.data.type == "enableui") {
            document.body.style.display = event.data.enable ? "block" : "none";
		} 
		
		
    });

    document.onkeyup = function (data) {
        if (data.which == 27) { // Escape key
            $.post('http://mdt0.5/NUIFocusOff', JSON.stringify({}));
            
        }
    };

    

		



});

When i click the link, i see the cursor, but no HTML page

4

Your second HTML page is in another file (as it should be ?) called next.html ?

5

Yes, yes it is another file

6

Uhh, bump. This is sorta fundamental to my project, would be a shame if i got stopped by the most basic HTML operation lol. Please and thank you

7

So if I understand you correctly, the first page that acts as an index page loads in. For the time being I’m going to call that file “index.html”.

Your next file called next.html is located on the same level where index.html? If yes, are you trying to call it like <a href="next.html">Link</a>?

Next thing I would check, if you would try to use next.html as the index page - instead of index.html - would that load the next.html's contents properly, or you get the same white bg?

Additionally, you might want to provide some code, to see what is going on, maybe you are missing a closing tag, etc.

8

Fairly certain with NUI you can’t just link to other HTML pages, so you either have to embed them using iframes, include it all into a single html page and just add wrapper divs to control visibility, figure out if you can get something like jQuery .load() to work, or learn a modern front-end framework or library like Vue, Angular, or React and make use of their routing.

9

wrong

@Matthew5 make sure your other pages are added as file as well, and you’re not making the pages hidden by default when navigated to

10

@Matthew5 Open your ‘__resource.lua’ and check if you have your files set up like this.

files({
‘html/index.html’,
‘html/index2.html’,
‘html/script.js’,
‘html/style.css’,
‘html/cursor.png’
})

Everyone has their methods for changing pages and displaying content, I personally use JS and a single HTML file.

11

Hey, so I finally got it working, turns out

body {
	overflow: hidden;
	display: none;
}

in my css file was messing it up, but, I use that piece of CSS to stop the tablet displaying on resource start. To get all href links working i need to remove that, but, then when the resource starts, the tablet is automatically displayed…

12

That is most likely the issue.

Put the overflow and display properties into a class, like

.hidden {
    overflow: hidden;
    display: none;
}

and use jQuery (or vanilla JS if you prefer that) to toggle this class on the body tag, so you can put the class="hidden" on the index’s body by default, so it doesn’t display automatically, then do the rest with JS.

13

See, that works right up until I need to relink to the home page, because then the homepage is automatically hidden, and it then wont appear

14

Put this in your script.js, you can use it as a function or as a NUI Message instance.

document.getElementById("IDofELEMENT").style.display = "CHANGEME";

NUI Message:

        } else if (event.data.type == "backHome") {
            document.getElementById("IDofELEMENT").style.display = "true";

Function:

function backHome() {
    document.getElementById("IDofELEMENT").style.display = "true";
};

To call the function you need to put oninput=backHome() inside your element.

This works with a single HTML file, you might need to use window.open() and a callback for multiple HTMLs.