0
Ich versuche eine mobile Version eines Spiels zu entwickeln, an dem ich gearbeitet habe. Entschuldigung für den unordentlichen Code, es ist nichts Ernstes. Ich habe mich entschieden, ein Hamburger-Menü für die mobile Version zu verwenden und es auf Desktop-Geräten zu verstecken. Dafür habe ich in der Bootstrap-Dokumentation "hidden-lg-up" gefunden, aber es scheint nicht zu funktionieren. Ich weiß zumindest, dass der Bootstrap js geladen ist, denn wenn ich den Namen ändere, erhalte ich einen Fehler in der Browserkonsole.Bootstrap 3.3.7 hidden-lg-up funktioniert nicht
Das Element, mit dem ich es versuche, ist das "Hamburger-Menü-Toggle" und das "Hamburger-Menü".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CEO Panel</title>
<link rel="shortcut icon" href="favicon.png?v=1"/>
<link rel="stylesheet" href="css/main.css">
<!-- JQUERY -->
<script src="js/libs/jquery-3.1.0.min.js"></script>
<script src="js/libs/jquery-ui-1.12.0/jquery-ui.min.js"></script>
<!-- LIBS AND PLUGINS -->
<script src="js/libs/jquery-mousewheel-3.1.13/jquery.mousewheel.min.js"></script>
<script src="js/libs/mapbox.js/jquery.mapbox.js"></script>
<script src="js/libs/countdown/jquery.countdown.min.js"></script>
<script src="js/libs/jquery.ui.touch-punch.min.js"></script>
<!-- GAME JS -->
<script src="js/game_logic/main.js"></script>
<script src="js/game_logic/buttons.js"></script>
<script src="js/libs/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<div id="map-wrapper">
<img id="map" src="res/los_santos_map.png" alt="Los Santos Map">
<div id="map-content">
<!--<div class="map-marker owned" id="warehouse1"></div>
<div class="map-marker for-sale" id="warehouse2"></div>-->
<?php
$pdo = pdo();
$username = $_SESSION['username'];
foreach($pdo->query("SELECT * FROM warehouses") as $row){
$warehouse_id = $row['id'];
$statement = $pdo->prepare("SELECT * FROM warehouse_contracts WHERE warehouse_id LIKE '$warehouse_id' AND username LIKE '$username'");
$statement->execute();
$rowCount = $statement->rowCount();
//find out the size of the warehouse
if($row['slots'] < 64){
$size = "small";
}
else if($row['slots'] >= 64 && $row['slots'] < 256){
$size = "medium";
}
else{
$size = "large";
}
//find out if it's owned by the user
if($rowCount>0){
echo '<div class="map-marker owned ' . $size . '" id="warehouse' . $row['id'] . '" style="top: ' . $row['y'] . 'px; left: ' . $row['x'] . 'px;"></div>';
}
else{
echo '<div class="map-marker for-sale ' . $size . '" id="warehouse' . $row['id'] . '" style="top: ' . $row['y'] . 'px; left: ' . $row['x'] . 'px;"></div>';
}
}
?>
</div>
</div>
<div style="background-image: url('res/radar-overlay.png'); width: 100%; height: 100%; position: fixed; background-size: cover; opacity: 0.2; pointer-events: none;"></div>
<div id="HUD">
<div id="hamburger-menu-toggle" class="hidden-lg-up">
<div></div>
<div></div>
<div></div>
</div>
<div id="hamburger-menu" class="hidden-lg-up">
</div>
<a href="index.php?page=logout"><div id="logout" class="button">LOGOUT</div></a>
<?php
if(isset($_SESSION['admin']) && $_SESSION['admin'] === "TRUE"){
echo '
<div id="admin-stats">
<h1>map.x: <span id="map_x"></span><br>map.y: <span id="map_y"></span></h1>
<h1>map.height: <span id="map_height"></span><br>map.width: <span id="map_width"></span><br>mouse.x: <span id="mouse_x"></span><br>mouse.y: <span id="mouse_y"></span></h1>
</div>
';
}
?>
<h1 id="cash">
<?php
$pdo = pdo();
$username = $_SESSION['username'];
$statement = $pdo->prepare("SELECT cash FROM users WHERE username LIKE '$username'");
$statement->execute();
$results = $statement->fetch();
echo '$' . number_format($results['cash']);
?>
</h1>
<div id="warehouse-toggle">
<div class="button toggle-selected">ALL</div>
<div class="button toggle">OWNED</div>
<div class="button toggle">SMALL</div>
<div class="button toggle">MEDIUM</div>
<div class="button toggle">LARGE</div>
</div>
<div id="stock-actions">
<?php
$pdo = pdo();
$username = $_SESSION['username'];
$statement = $pdo->prepare("SELECT * FROM shipments WHERE status LIKE 'active' AND username LIKE ?");
$statement->bindParam(1, $username);
$statement->execute();
$row_count = $statement->rowCount();
if($row_count == 0){
echo '
<div id="buy-stock-button" class="button">BUY</div>
';
$statement = $pdo->prepare("SELECT * FROM storage WHERE username LIKE ?");
$statement->bindParam(1, $username);
$statement->execute();
$row_count = $statement->rowCount();
if($row_count > 0){
echo '
<div id="sell-stock-button" class="button">SELL</div>
';
}
else{
echo '
<div id="sell-stock-button" class="button disabled">SELL</div>
';
}
}
else{
echo '
<div id="buy-stock-button" class="button disabled">BUY</div>
<div id="sell-stock-button" class="button disabled">SELL</div>
';
}
?>
<div id="upgrades-button" class="button">UPGRADES</div>
</div>
<div id="page-toggle">
<div class="button toggle">SUMMARY PAGE</div>
<div class="button toggle-selected">WAREHOUSE MAP</div>
</div>
<div class="dialog" id="owned-warehouse-dialog">
<div class="close-button">x</div>
</div>
<div class="dialog" id="buy-warehouse-dialog">
<div class="close-button">x</div>
<?php
/*
$pdo = pdo();
$warehouse_id = $_GET['warehouse_id'];
$statement = $pdo->prepare("SELECT * FROM warehouses WHERE id LIKE ?");
$statement->bindParam(1, $warehouse_id);
$statement->execute();
$warehouse = $statement->fetch();
echo '
<h1>WAREHOUSE ' . $warehouse_id . '</h1>
<p>STATUS:<span class="right-text">FOR SALE</span></p>
<p>WAREHOUSE SLOTS:<span class="right-text">' . $warehouse['slots'] . '</span></p>
<p>COST:<span class="right-text">' . $warehouse['price'] . '</span></p>
<div class="submit-button">BUY</div>
';
*/
?>
</div>
<div class="dialog" id="buy-warehouse-dialog"></div>
<div class="dialog" id="buy-stock-dialog">
<div class="close-button">x</div>
<form action="index.php?action=buy_crates" method="post">
<h1>BUY CARGO CRATES</h1>
<p>TYPE</p>
<div class="selection-list">
<?php
$pdo = pdo();
foreach($pdo->query("SELECT * FROM crate_types") as $row){
echo '<div class="button toggle">' . strtoupper($row['name']) . '</div>';
}
?>
<input class="hidden" name="type" type="text" required>
</div>
<p>QUANTITY</p>
<div class="selection-list">
<?php
$pdo = pdo();
$username = $_SESSION['username'];
$statement = $pdo->prepare("SELECT SUM(slots) FROM warehouses INNER JOIN warehouse_contracts ON warehouses.id=warehouse_contracts.warehouse_id WHERE username LIKE '$username'");
$statement->execute();
$slots = $statement->fetch();
$statement = $pdo->prepare("SELECT SUM(quantity) FROM storage WHERE username LIKE ?");
$statement->bindParam(1, $username);
$statement->execute();
$crates = $statement->fetch();
$statement = $pdo->prepare("SELECT * FROM transport_upgrades WHERE username LIKE ? AND type LIKE 'storage'");
$statement->bindParam(1, $username);
$statement->execute();
$storage_upgrades = $statement->rowCount() + 1;
$available_slots = $slots['SUM(slots)'] - $crates['SUM(quantity)'];
if($available_slots >= 1 * pow(2, $storage_upgrades)){
echo '<div class="button toggle">' . 1 * pow(2, $storage_upgrades) . '</div>';
}
else{
echo '<div class="disabled">' . 1 * pow(2, $storage_upgrades) . '</div>';
}
if($available_slots >= 2 * pow(2, $storage_upgrades)){
echo '<div class="button toggle">' . 2 * pow(2, $storage_upgrades) . '</div>';
}
else{
echo '<div class="disabled">' . 2 * pow(2, $storage_upgrades) . '</div>';
}
if($available_slots >= 4 * pow(2, $storage_upgrades)){
echo '<div class="button toggle">' . 4 * pow(2, $storage_upgrades) . '</div>';
}
else{
echo '<div class="disabled">' . 4 * pow(2, $storage_upgrades) . '</div>';
}
if($available_slots >= 8 * pow(2, $storage_upgrades)){
echo '<div class="button toggle">' . 8 * pow(2, $storage_upgrades) . '</div>';
}
else{
echo '<div class="disabled">' . 8 * pow(2, $storage_upgrades) . '</div>';
}
if($available_slots >= 16 * pow(2, $storage_upgrades)){
echo '<div class="button toggle">' . 16 * pow(2, $storage_upgrades) . '</div>';
}
else{
echo '<div class="disabled">' . 16 * pow(2, $storage_upgrades) . '</div>';
}
if($available_slots >= 32 * pow(2, $storage_upgrades)){
echo '<div class="button toggle">' . 32 * pow(2, $storage_upgrades) . '</div>';
}
else{
echo '<div class="disabled">' . 32 * pow(2, $storage_upgrades) . '</div>';
}
if($available_slots < 1 * pow(2, $storage_upgrades)){
echo '
<input class="hidden" name="quantity" type="text" required>
</div>
<p>RISK:<span class="right-text" id="delivery-risk">0%</span></p>
<p>PROFIT MARGIN:<span class="right-text" id="delivery-profit">0%</span></p>
<p>PRICE:<span class="right-text" id="delivery-price">$0</span></p>
<input class="submit-button disabled" type="submit" value="BUY">
';
}
else{
echo '
<input class="hidden" name="quantity" type="text" required>
</div>
<p>RISK:<span class="right-text" id="delivery-risk">0%</span></p>
<p>PROFIT MARGIN:<span class="right-text" id="delivery-profit">0%</span></p>
<p>PRICE:<span class="right-text" id="delivery-price">$0</span></p>
<input class="submit-button" type="submit" value="BUY">
';
}
?>
</form>
</div>
<div class="dialog" id="sell-stock-dialog">
<div class="close-button">x</div>
<?php
$pdo = pdo();
$statement = $pdo->prepare("SELECT SUM((price*((profit/100)+1))*quantity), SUM(price*quantity), SUM(quantity), AVG(profit) FROM storage INNER JOIN crate_types ON storage.crate_type_id=crate_types.id WHERE username LIKE ?");
$statement->bindParam(1, $username);
$statement->execute();
$rows = $statement->fetch();
$quantity = $rows['SUM(quantity)'];
$value = round($rows['SUM((price*((profit/100)+1))*quantity)'], 0);
$original_cost = round($rows['SUM(price*quantity)'], 0);
$profit_margin = round($rows['AVG(profit)'], 0);
echo '
<h1>SELL CARGO CRATES</h1>
<p>CRATES: <span class="right-text">' . $quantity . '</span></p>
<p>RISK: <span class="right-text"></span></p>
<p>PROFIT MARGIN: <span class="right-text">' . $profit_margin . '%</span></p>
<p>ORIGINAL COST: <span class="right-text">$' . number_format($original_cost) .'</span></p>
<p>PROFIT: <span class="right-text">$' . number_format($value - $original_cost) . '</span></p>
<p>TOTAL VALUE: <span class="right-text">$' . number_format($value) .'</span></p>
<a href="index.php?action=sell_crates"><div class="submit-button">SELL</div></a>
';
?>
</div>
<?php
$pdo = pdo();
$username = $_SESSION['username'];
$statement = $pdo->prepare("SELECT * FROM shipments WHERE username LIKE '$username' AND status LIKE 'active' LIMIT 1");
$statement->execute();
$row_count = $statement->rowCount();
$row1 = $statement->fetch();
$statement = $pdo->prepare("SELECT * FROM shipments INNER JOIN crate_types ON shipments.crate_type_id=crate_types.id WHERE username LIKE '$username' AND status LIKE 'active' LIMIT 1");
$statement->execute();
$row2 = $statement->fetch();
if($row_count > 0){
echo '<div id="active-shipment">';
if($row1['type'] === "purchase"){
echo '
<h1 id="countdown"></h1>
<p>Incoming shipment of ' . $row2['quantity'] . ' crates of ' . $row2['name'] . '</p>
';
}
else if($row1['type'] === "sale"){
echo '
<h1 id="countdown"></h1>
<p>Outgoing shipment of ' . $row1['quantity'] . ' crates with a value of $' . number_format($row1['value']) . '</p>
';
}
echo '
</div>
<script type="text/javascript">
$("#countdown").countdown("' . $row1['arrival'] . '", function(event) {
var arrival = {
days: event.strftime("%D"),
hours: event.strftime("%H"),
minutes: event.strftime("%M"),
seconds: event.strftime("%Ss")
};
if(arrival.days <= 0){
arrival.days = "";
}
else{
arrival.days += "d";
}
if(arrival.hours <= 0){
arrival.hours = "";
}
else{
arrival.hours += "h";
}
if(arrival.minutes <= 0){
arrival.minutes = "";
}
else{
arrival.minutes += "m";
}
$(this).text(arrival.days + " " + arrival.hours + " " + arrival.minutes + " " + arrival.seconds);
if(new Date("' . $row1['arrival'] . '") <= new Date()){
window.location.replace("index.php");
}
});
$("title").countdown("' . $row1['arrival'] . '", function(event){
var arrival = {
days: event.strftime("%D"),
hours: event.strftime("%H"),
minutes: event.strftime("%M"),
seconds: event.strftime("%Ss")
};
if(arrival.days <= 0){
arrival.days = "";
}
else{
arrival.days += "d";
}
if(arrival.hours <= 0){
arrival.hours = "";
}
else{
arrival.hours += "h";
}
if(arrival.minutes <= 0){
arrival.minutes = "";
}
else{
arrival.minutes += "m";
}
$(this).text(arrival.days + " " + arrival.hours + " " + arrival.minutes + " " + arrival.seconds + " - CEO Panel");
});
</script>
';
}
?>
<div class="dialog" id="upgrades-dialog">
<div class="close-button">x</div>
<h1>UPGRADES</h1>
<p>TRANSPORT TRUCKS</p>
<p style="font-size: 16px;">These trucks are used for <strong>purchases</strong>.</p>
<?php
$upgrade_cost = calculate_upgrade_cost("trucks", "speed");
$pdo = pdo();
$statement = $pdo->prepare("SELECT cash FROM users WHERE username LIKE ?");
$statement->bindParam(1, $_SESSION['username']);
$statement->execute();
$user = $statement->fetch();
$statement = $pdo->prepare("SELECT * FROM transport_upgrades WHERE vehicle LIKE 'trucks' AND username LIKE ? AND type LIKE 'speed'");
$statement->bindParam(1, $username);
$statement->execute();
$previous_upgrades = $statement->rowCount();
$crate_delivery_time = explode('.', 1 * (3 * (1 - ($previous_upgrades * 0.03))));
if(strpos((string)$crate_delivery_time[0], "-") !== false){
$crate_delivery_time[0] = 0;
$crate_delivery_time[1] = 0;
}
if(($crate_delivery_time[0] <= 0 && $crate_delivery_time[1] <= 0) || $crate_delivery_time[0] < 0){
echo '
<div class="upgrade">
<p>SPEED</p><div class="upgrade-button-disabled">UPGRADE</div>
<div class="upgrade-cost">Limit for upgrades reached.</div>
</div>
';
}
else if($user['cash'] < $upgrade_cost){
echo '
<div class="upgrade">
<p>SPEED</p><div class="upgrade-button-disabled">UPGRADE</div>
<div class="upgrade-cost">COST <span class="right-text red-text">$' . number_format($upgrade_cost) . '</span></div>
</div>
';
}
else if($user['cash'] >= $upgrade_cost){
echo '
<div class="upgrade">
<p>SPEED</p><a href="index.php?action=upgrade&vehicle=trucks&type=speed"><div class="upgrade-button">UPGRADE</div></a>
<div class="upgrade-cost">COST <span class="right-text">$' . number_format($upgrade_cost) . '</span></div>
</div>
';
}
$upgrade_cost = calculate_upgrade_cost("trucks", "storage");
$statement = $pdo->prepare("SELECT cash FROM users WHERE username LIKE ?");
$statement->bindParam(1, $_SESSION['username']);
$statement->execute();
$user = $statement->fetch();
if($user['cash'] >= $upgrade_cost){
echo '
<div class="upgrade">
<p>STORAGE</p><a href="index.php?action=upgrade&vehicle=trucks&type=storage"><div class="upgrade-button">UPGRADE</div></a>
<div class="upgrade-cost">COST <span class="right-text">$' . number_format($upgrade_cost) . '</span></div>
</div>
';
}
else{
echo '
<div class="upgrade">
<p>STORAGE</p><div class="upgrade-button-disabled">UPGRADE</div>
<div class="upgrade-cost">COST <span class="right-text red-text">$' . number_format($upgrade_cost) . '</span></div>
</div>
';
}
?>
<!--
<div class="upgrade">
<p>STORAGE</p><a href="index.php?action=upgrade&vehicle=trucks&type=storage"><div class="upgrade-button">UPGRADE</div></a>
</div>
-->
<br>
<p>TRANSPORT PLANES</p>
<p style="font-size: 16px;">These planes are used for <strong>sales</strong>.</p>
<?php
$upgrade_cost = calculate_upgrade_cost("planes", "speed");
$pdo = pdo();
$statement = $pdo->prepare("SELECT cash FROM users WHERE username LIKE ?");
$statement->bindParam(1, $_SESSION['username']);
$statement->execute();
$user = $statement->fetch();
$statement = $pdo->prepare("SELECT * FROM transport_upgrades WHERE vehicle LIKE 'planes' AND username LIKE ? AND type LIKE 'speed'");
$statement->bindParam(1, $username);
$statement->execute();
$previous_upgrades = $statement->rowCount();
$crate_delivery_time = explode('.', 1 * (3 * (1 - ($previous_upgrades * 0.03))));
if(strpos((string)$crate_delivery_time[0], "-") !== false){
$crate_delivery_time[0] = 0;
$crate_delivery_time[1] = 0;
}
if(($crate_delivery_time[0] <= 0 && $crate_delivery_time[1] <= 0) || $crate_delivery_time[0] < 0){
echo '
<div class="upgrade">
<p>SPEED</p><div class="upgrade-button-disabled">UPGRADE</div>
<div class="upgrade-cost">Limit for upgrades reached.</div>
</div>
';
}
else if($user['cash'] < $upgrade_cost){
echo '
<div class="upgrade">
<p>SPEED</p><div class="upgrade-button-disabled">UPGRADE</div>
<div class="upgrade-cost">COST <span class="right-text red-text">$' . number_format($upgrade_cost) . '</span></div>
</div>
';
}
else if($user['cash'] >= $upgrade_cost){
echo '
<div class="upgrade">
<p>SPEED</p><a href="index.php?action=upgrade&vehicle=planes&type=speed"><div class="upgrade-button">UPGRADE</div></a>
<div class="upgrade-cost">COST <span class="right-text">$' . number_format($upgrade_cost) . '</span></div>
</div>
';
}
?>
</div>
<div id="warehouse-space">
<div id="used-space"></div>
<p>Used warehouse space:
<?php
$pdo = pdo();
$username = $_SESSION['username'];
$statement = $pdo->prepare("SELECT SUM(slots) FROM warehouses INNER JOIN warehouse_contracts ON warehouses.id=warehouse_contracts.warehouse_id WHERE username LIKE '$username'");
$statement->execute();
$row = $statement->fetch();
$slots = $row['SUM(slots)'];
$statement = $pdo->prepare("SELECT SUM(quantity) FROM storage WHERE username LIKE '$username'");
$statement->execute();
$row = $statement->fetch();
$crates = $row['SUM(quantity)'];
if($crates === 0 || !isset($crates)){
$crates = 0;
}
$percentage_used = round(($crates/$slots)*100, 1);
echo $crates . '/' . $slots . ' (' . $percentage_used . '%)';
?>
</p>
<?php
echo '
<script>
$("#used-space").css("width", ' . $percentage_used . ' + "%");
</script>
';
?>
</div>
</div>
<div id="summary"></div>
<?php
if(isset($_SESSION['random_event']) && $_SESSION['random_event']['recent'] === true){
$robbers = array(
"Hell's Angels",
"The Lost",
"some asian streetpunks",
"a pair of irish virgins",
"the russian mob",
"some methheads",
"a korean crew"
);
if($_SESSION['random_event']['shipment_type'] === "purchase"){
echo '
<div class="alert-background"></div>
<div class="alert">
<img class="companion-speech" src="res/companion-speeches/random-event.png">
<h1>Oh no!</h1>
<p>Boss, I\'ve got some bad news. Your recent shipment of <strong>' . $_SESSION['random_event']['ordered_quantity'] . '</strong> crates was hijacked during transport by ' . $robbers[rand(0, count($robbers) - 1)] . '. They managed to get away with <strong>' . $_SESSION['random_event']['random_event_penalty'] . '</strong> crates. Though, your crew did kill <strong>' . rand(1, 20) . '</strong> of them before they took off with the product.</p>
<div class="ok-button">OK</div>
</div>
';
}
unset($_SESSION['random_event']);
}
?>
</main>
<div id="loading">
<p>Loading, please wait..</p>
</div>
</body>
</html>
Ich habe es gerade versucht, es funktioniert nicht! Ich bekomme keine Fehler. Es entspricht einfach nicht. –
Es sieht nicht so aus, als würden Sie das Bootstrap-CSS in Ihre Seite aufnehmen. Sie laden nur das JS. –
Ich habe dies versucht, bevor ich das OP gemacht habe, aber das hilft nicht. Es überarbeitet einfach einige meiner Knöpfe usw. Ich habe es gerade noch einmal versucht, um sicher zu sein, aber keine Änderungen außer dem Wechsel zum Design (was ich nicht will). –