0
https://codepen.io/bayleymauger/pen/BwWZjR twitch channel divsを読み込んだときにコンテンツが画面外に出ないようにする方法を教えてください。それは私の人生にとっては、これを修正する方法を理解することができません。誰かがアイデアを持っていれば、さらに良い解決策があれば、それはあなたに話す喜びであり、非常に感謝しています。jqueryを使ってdivにhtmlを追加するときにコンテンツが表示されないようにするには
// GLOBAL VARIABLES
var usernames = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var api = 'https://wind-bow.gomix.me/twitch-api/';
// USERNAME LOOP
$.map(usernames, function(channel) {
function makeURL(type, name) {
return api + type + '/' + name;
}
// AJAX 1 START
$.ajax({
url: makeURL("streams", channel),
dataType: "jsonp",
success: function(data) {
let game,
status;
if (data.stream === null) {
game = "Offline";
status = "offline";
} else if (data.stream === undefined) {
game = "Account closed";
status = "offline";
} else {
game = data.stream.game;
status = "online";
};
// AJAX 2 START
$.ajax({
url: makeURL("channels", channel),
dataType: "jsonp",
success: function(data) {
// LOGO
var logo = data.logo != null ? data.logo : "images/twitch-favicon.png",
// NAME
name = data.display_name != null ? data.display_name : channel,
// DESCRIPTION
description = status === "online" ? ": " + data.status : "";
console.log(game + description);
// HTML
var html = '<div class="col s12 z-depth-1 hoverable channel ' + status + '"><img src="' + logo + '" alt="channel logo" class="responsive-img channel-pic left circle"><a href="' + data.url + '" target="_blank"><p class="blue-text"><strong>' + name + '</strong></p></a><p>' + game + description + '</p></div>';
status === "online" ? $("#channels").prepend(html) : $("#channels").append(html);
return false;
} // 2 SUCCESS END
}); // AJAX 2 END
} // 1 SUCCESS END
}); // AJAX 1 END
}); // MAP ENDbody,
html {
height: 100%;
max-height: 100%;
}
body {
display: flex;
align-items: center;
background-color: #9c27b0;
text-align: center:
}
#twitch-logo {
padding: 1rem;
width: 20rem;
display: block;
margin: 0 auto;
}
.btn {
width: 7.5rem;
margin: 1rem;
}
#channels {
margin: 1rem 0;
}
.channel-pic {
width: 4rem;
margin: .4rem 0;
}
p {
font-size: .7rem;
margin: .4rem;
}
#channel_name {
color: #42a5f5;
}
.row {
text-align: center;
}
#app {
float: none;
display: inline-block;
}
.channel {
margin-top: .8rem
}
.online {
background-color: #a5d6a7;
}
.offline {
background-color: #ef9a9a;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col s10 m10 l6 center-align white z-depth-3" id="app">
<a href="https://www.twitch.tv/" target="_blank"><img src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c53d.png" alt="Twitch logo" class="responsive-img" id="twitch-logo"></a>
<a class="waves-effect waves-light btn">all</a>
<a class="waves-effect waves-light btn purple">online</a>
<a class="waves-effect waves-light btn purple">offline</a>
<!-- CHANNELS START -->
<div class="col s12" id="channels">
</div>
<!-- CHANNELS END -->
</div>
<!-- COL S6 -->
</div>
<!-- ROW -->
</div>
<!-- CONTAINER -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>