Loading screen javascript functions arent being called`?
3 replies, posted
Hello!
I have recently spend some time making my own loading screen using bulma, jquery and the gmod javascript functions. It has a slideshow as a background, thats why I need jquery.
Anyways I am having some problems with the javascript functions. I am trying to get the mapname and available slots, but the values remain unchanged.
Here is the relevant script block
[CODE]<head>
<script type="text/javascript">
function GameDetails(servername, serverurl, mapname, maxplayers, steamid, gamemode){
document.getElementById("mappreview").src = 'http://image.www.gametracker.com/images/maps/160x120/garrysmod/' + mapName + '.jpg';
document.getElementById("mapname").innerHTML = mapname;
document.getElementById("playerslots").innerHTML = maxplayers + ' slots';
}
</script>
<script src="jquery-3.2.1.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LOADING</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/bulma.css">
<link rel="stylesheet" href="./styles/main.scss">
</head>[/CODE]
I have a 2nd script block at the end of the file, which is for the slideshow. Not sure if that is relevant.
I hope you can help me figure out what I am doing wrong!
___________________________________________________
___________________________________________________
Here is the full code:
[CODE]<style>
[data-slides] {
background-image: url(../../uploads/banner1.jpg); /* Default image. */
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
transition: background-image 1s linear;
}
</style>
<html>
<head>
<script type="text/javascript">
function GameDetails(servername, serverurl, mapname, maxplayers, steamid, gamemode){
document.getElementById("mappreview").src = 'http://image.www.gametracker.com/images/maps/160x120/garrysmod/' + mapName + '.jpg';
document.getElementById("mapname").innerHTML = mapname;
document.getElementById("playerslots").innerHTML = maxplayers + ' slots';
}
</script>
<script src="jquery-3.2.1.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LOADING</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/bulma.css">
<link rel="stylesheet" href="./styles/main.scss">
</head>
<body class="test"
data-slides='[
"./pictures/4000_screenshots_20171028192219_1.jpg",
"./pictures/download.jpg"
]'>
<section class="section">
<center>
<div class="container is-pulled-center">
<h1 class="title is-1" id="status" style="color:#3362af">LOADING...</h1>
</div>
<div class="container">
<progress class="progress" value="15" max="100">15%</progress>
</div>
</center>
</section>
<div class="container">
<div class="columns">
<div class="column">
<ul class="menu-list">
<li>
<a class="is-active subtitle is-2">Rule 1</a>
<a class="ruleItem subtitle is-3">NO SPAWNKILLING|NO MASS RDM</a>
</li>
<li>
<a class="is-active subtitle is-2" >Rule 2</a>
<a class="ruleItem subtitle is-3">RESPECT OTHERS STUFF</a>
</li>
<li>
<a class="is-active subtitle is-2">Rule 3</a>
<a class="ruleItem subtitle is-3" >LET OTHERS HAVE FUN</a>
</li>
</ul>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img id="mappreview" src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<p class ="title is-5">Playing on:</p>
</div>
<div class="media-content">
<p class="title is-4" id="mapname">~~~~~Map~~~~~~</p>
<p class="subtitle is-6" id="playerslots">~~~Players/MaxPlayers~~~~</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
/*! slides | https://gist.github.com/mhulse/66bcbb7099bb4beae530 */
(function($) {
'use strict';
var $slides = $('[data-slides]');
var images = $slides.data('slides');
var count = images.length;
var slideshow = function() {
$slides
.css('background-image', 'url("' + images[Math.floor(Math.random() * count)] + '")')
.show(0, function() {
setTimeout(slideshow, 5000);
});
};
slideshow();
}(jQuery));
</script>
[/CODE]
Most of this will not work due to gmod's outdated autism web rendering program.
[url]https://github.com/Marcuzz/MetroLoad/blob/master/inc/javascript.php[/url]
has slideshows so take example from that
[QUOTE=Lunaversity;52831903]Most of this will not work due to gmod's outdated autism web rendering program.
[url]https://github.com/Marcuzz/MetroLoad/blob/master/inc/javascript.php[/url]
has slideshows so take example from that[/QUOTE]
The slideshows work tho
[editline]30th October 2017[/editline]
[QUOTE=thejjokerr;52831371]first thing I'm noticing is you wrote mapName instead of mapname which is the parameter[/QUOTE]
Thank you!
That fixed my problem!!
Do you know by any chance if gametracker hosts different sizes other than 160x120?
Sorry, you need to Log In to post a reply to this thread.
