Javascript和CSS导致文本框消失，我希望它保持不变
所以这要么是CSS问题，要么是Javascript问题，但我需要你的专业知识 我建了一个网站，上面有youtube API YouTube API要求您授权自己开始拉取 在授权之前看起来是这样的： 一旦您授权，该框将消失： 下面是相关的javascript：Javascript和CSS导致文本框消失，我希望它保持不变,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以这要么是CSS问题，要么是Javascript问题，但我需要你的专业知识 我建了一个网站，上面有youtube API YouTube API要求您授权自己开始拉取 在授权之前看起来是这样的： 一旦您授权，该框将消失： 下面是相关的javascript： // gapi.auth.authorize() call. function handleAuthResult(authResult) { if (authResult) { $('.pre-auth').hide();
// gapi.auth.authorize() call.
function handleAuthResult(authResult) {
if (authResult) {
$('.pre-auth').hide();
loadAPIClientInterfaces();
} else {
$('#login-link').click(function() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}
<!DOCTYPE HTML>
<html>
<head>
<title>My Sandbox</title>
<link rel="stylesheet" type="text/css" href="CSS/Style.CSS">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<script>
//This set of scripts asks a first time user for their name and then greets them by name on the page and on their next visit
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}
else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie(){
var username=getCookie("username");
if (username!=null && username!=""){
alert("Welcome back " + username);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
else{
username=prompt("Please enter your name:","");
if (username!=null && username!=""){
setCookie("username",username,365);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
}
}
//This is the script to change the video source
jQuery(function($){
$("#video-container").on('click', '.video_select', function(e){
console.log(e);
var buttonSource = $(this).data('video');
var embededVideo = $('#youTube_video');
embededVideo.attr('src', buttonSource);
return false;
});
});
//This is the Client ID from https://code.google.com/apis/console
var OAUTH2_CLIENT_ID = '367567738093.apps.googleusercontent.com';
var OAUTH2_SCOPES = [
'https://www.googleapis.com/auth/youtube'
];
// This callback is invoked by the Google APIs JS client automatically when it is loaded.
googleApiClientReady = function() {
gapi.auth.init(function() {
window.setTimeout(checkAuth, 1);
});
}
// I want to get rid of this... If the user hasn't aythorized Google to run the API, the user has to click a button to authoize google to run teh API. Why? It was in the original google example that I took from the Google Dev page. Everything here is dervied and partially rewritten from that.
function checkAuth() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: true
}, handleAuthResult);
}
// gapi.auth.authorize() call.
function handleAuthResult(authResult) {
if (authResult) {
$('.pre-auth').hide();
loadAPIClientInterfaces();
} else {
$('#login-link').click(function() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}
function loadAPIClientInterfaces() {
gapi.client.load('youtube', 'v3', function() {
handleAPILoaded();
});
}
var playlistId, nextPageToken, prevPageToken;
// Once the api loads call a function to get the uploads playlist id.
function handleAPILoaded() {
requestUserUploadsPlaylistId();
}
//Retrieve the uploads playlist id.
function requestUserUploadsPlaylistId() {
var request = gapi.client.youtube.channels.list({
id: 'UCziks4y-RixDhWljY_es-tA',
part: 'contentDetails'
});
request.execute(function(response) {
console.log(response);
playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
requestVideoPlaylist(playlistId);
});
}
// Retrieve a playist of videos.
function requestVideoPlaylist(playlistId, pageToken) {
$('#video-container').html('');
var requestOptions = {
playlistId: playlistId,
part: 'snippet',
maxResults: 15
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.playlistItems.list(requestOptions);
request.execute(function(response) {
// Only show the page buttons if there's a next or previous page.
console.log (response);
nextPageToken = response.result.nextPageToken;
var nextVis = nextPageToken ? 'visible' : 'hidden';
$('#next-button').css('visibility', nextVis);
prevPageToken = response.result.prevPageToken
var prevVis = prevPageToken ? 'visible' : 'hidden';
$('#prev-button').css('visibility', prevVis);
var playlistItems = response.result.items;
if (playlistItems) {
// For each result lets show a thumbnail.
jQuery.each(playlistItems, function(index, item) {
createDisplayThumbnail(item.snippet);
});
} else {
$('#video-container').html('Sorry you have no uploaded videos');
}
});
}
// Create a thumbnail for a video snippet.
function createDisplayThumbnail(videoSnippet) {
console.log(videoSnippet);
var titleEl = $('<h3>');
titleEl.addClass('video-title');
$(titleEl).html(videoSnippet.title);
var thumbnailUrl = videoSnippet.thumbnails.medium.url;
var videoLink=$('<a>');
videoLink.attr('data-video','http://www.youtube.com/embed/'+videoSnippet.resourceId.videoId+'?autoplay=1');
videoLink.append(div)
videoLink.addClass('video_select')
var div = $('<div>');
div.addClass('video-content');
div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
div.append(titleEl);
videoLink.append(div)
$('#video-container').append(videoLink);
}
// Retrieve the next page of videos.
function nextPage() {
requestVideoPlaylist(playlistId, nextPageToken);
}
// Retrieve the previous page of videos.
function previousPage() {
requestVideoPlaylist(playlistId, prevPageToken);
}
</script>
</head>
<body onload="checkCookie()" class="background_color">
<div class="wrap">
<div class="back_image">
<img src="Pictures/titlepic.jpg" width="1060" height="200">
<h1 class="text_over_image" id="title_script">Welcome to my Sandbox</h1>
</div>
<div>
<iframe id='youTube_video' width="1060" height="597" src="//www.youtube.com/embed/io78hmjAWHw?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="login-container" class="pre-auth back_image">Please click <a href="#" id="login-link">this link</a> to load the playlist. It will pull authorization for the API from your Google account
<img src="Pictures/AuthButtons.jpg" width="1060" height="20">
</div>
<div id="video-container">
</div>
<div class="button-container back_image">
<img src="Pictures/Footer.jpg" width="1060" height="75">
<button id="prev-button" class="paging-button text_over_image" onclick="previousPage();">Previous Page</button>
<button id="next-button" class="paging-button text_over_image" onclick="nextPage();">Next Page</button>
</div>
</div>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
</body>
</html>
我的沙箱
//这组脚本向第一次访问的用户询问他们的姓名，然后在页面上和下次访问时按姓名问候他们
函数getCookie（c_名称）
{
var c_value=document.cookie；
var c_start=c_value.indexOf（“+c_name+”=”）；
如果（c_开始==-1）{
c_start=c_value.indexOf（c_name+“=”）；
}
如果（c_开始==-1）{
c_值=null；
}
否则{
c_start=c_值。indexOf（“=”，c_start）+1；
var c_end=c_value.indexOf（“；”，c_start）；
如果（c_end==-1）{
c_端=c_值。长度；
}
c_值=unescape（c_值.子字符串（c_开始，c_结束））；
}
返回c_值；
}
函数setCookie（c_名称、值、exdays）{
var exdate=新日期（）；
exdate.setDate（exdate.getDate（）+exdays）；
var c_value=escape（value）+（exdays==null）？“”：“expires=“+exdate.toutString（））；
document.cookie=c_name+“=”+c_值；
}
函数checkCookie（）{
var username=getCookie（“用户名”）；
如果（用户名！=null&&username！=“”）{
警报（“欢迎回来”+用户名）；
document.getElementById（“title_script”）.innerHTML=“欢迎”+用户名+“到我的沙盒”；
}
否则{
用户名=提示（“请输入您的姓名：”，“”）；
如果（用户名！=null&&username！=“”）{
setCookie（“用户名”，用户名，365）；
document.getElementById（“title_script”）.innerHTML=“欢迎”+用户名+“到我的沙盒”；
}
}
}
//这是更改视频源的脚本
jQuery（函数（$）{
$（“#视频容器”）。在（'单击'，'上。视频选择'，函数（e）{
控制台日志（e）；
var buttonSource=$（this.data（'video'）；
var embeddedvideo=$（“#youTube_视频”）；
EmbeddedVideo.attr（'src'，buttonSource）；
返回false；
});
});
//这是来自的客户端IDhttps://code.google.com/apis/console
var OAUTH2_CLIENT_ID='367567738093.apps.googleusercontent.com'；
变量OAUTH2_作用域=[
'https://www.googleapis.com/auth/youtube'
];
//此回调在加载时由Google API JS客户端自动调用。
googleapiclientraday=函数（）{
gapi.auth.init（函数（）{
setTimeout（checkAuth，1）；
});
}
//我想摆脱这个。。。如果用户没有授权Google运行API，则用户必须单击按钮授权Google运行API。为什么？我从Googledev页面上获取的是最初的google示例。这里的一切都是经过修改和部分改写的。
函数checkAuth（）{
gapi.auth.authorize({
客户端id:OAUTH2\u客户端id，
作用域：OAUTH2_作用域，
立即：对
}，handleAuthResult）；
}
//gapi.auth.authorize（）调用。
函数handleAuthResult（authResult）{
如果（authResult）{
$（'.pre-auth'）.hide（）；
loadAPIClientInterfaces（）；
}否则{
$（“#登录链接”）。单击（函数（）{
gapi.auth.authorize({
客户端id:OAUTH2\u客户端id，
作用域：OAUTH2_作用域，
即时：假
}，handleAuthResult）；
});
}
}
函数loadAPIClientInterfaces（）{
load（'youtube'，'v3'，function（）{
handleAPILoaded（）；
});
}
变量playlid、nextPageToken、prevPageToken；
//加载api后，调用函数获取上传的播放列表id。
函数handleAPILoaded（）{
requestUserUploadsPlaylistId（）；
}
//检索上载的播放列表id。
函数requestUserUploadsPlaylistId（）{
var request=gapi.client.youtube.channels.list({
id:'UCziks4y-RixDhWljY_es-tA'，
部分：“内容详细信息”
});
请求.执行（函数（响应）{
控制台日志（响应）；
playlaid=response.result.items[0]。contentDetails.relatedPlaylists.uploads；
请求视频播放列表（播放ID）；
});
}
//检索视频的播放者。
功能请求视频播放列表（播放ID、pageToken）{
$（'#视频容器'）.html（''）；
var请求选项={
playlid:playlid，
部分：'代码片段'，
最大结果：15
};
如果（pageToken）{
requestOptions.pageToken=pageToken；
}
var request=gapi.client.youtube.playlitems.list（requestOptions）；
请求.执行（函数（响应）{
//仅当有下一页或上一页时才显示页面按钮。
console.log（响应）；
nextPageToken=response.result.nextPageToken；
var nextVis=nextPageToken？'visible'：'hidden'；
$（“#下一步按钮”）.css（'visibility'，nextVis）；
.wrap{
width: 1060px;
margin: auto;
}
.back_image{
width: 1060px;
height:auto;
margin: auto;
text-align:center;
position:relative;
}
.text_over_image{
position: absolute;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:40px;
background-color: rgba(0, 0, 0, .3);
width: 1060px;
color: white;
}
iframe{
margin: auto;
}
.background_color{
background-color: #F8F8F8;
}
h1{
}
.paging-button {
visibility: hidden;
}
.video-content {
width: 200px;
height: 200px;
background-position: center;
background-repeat: no-repeat;
float: left;
position: relative;
margin: 5px;
}
.video-title {
width: 100%;
text-align: center;
background-color: rgba(0, 0, 0, .3);
color: white;
top: 50%;
left: 50%;
position: absolute;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.video-content:nth-child(3n+1) {
clear: both;
}
.button-container {
clear: both;
}
#video-container a {
float: left;
}
#video-container{
width: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<title>My Sandbox</title>
<link rel="stylesheet" type="text/css" href="CSS/Style.CSS">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<script>
//This set of scripts asks a first time user for their name and then greets them by name on the page and on their next visit
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}
else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie(){
var username=getCookie("username");
if (username!=null && username!=""){
alert("Welcome back " + username);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
else{
username=prompt("Please enter your name:","");
if (username!=null && username!=""){
setCookie("username",username,365);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
}
}
//This is the script to change the video source
jQuery(function($){
$("#video-container").on('click', '.video_select', function(e){
console.log(e);
var buttonSource = $(this).data('video');
var embededVideo = $('#youTube_video');
embededVideo.attr('src', buttonSource);
return false;
});
});
//This is the Client ID from https://code.google.com/apis/console
var OAUTH2_CLIENT_ID = '367567738093.apps.googleusercontent.com';
var OAUTH2_SCOPES = [
'https://www.googleapis.com/auth/youtube'
];
// This callback is invoked by the Google APIs JS client automatically when it is loaded.
googleApiClientReady = function() {
gapi.auth.init(function() {
window.setTimeout(checkAuth, 1);
});
}
// I want to get rid of this... If the user hasn't aythorized Google to run the API, the user has to click a button to authoize google to run teh API. Why? It was in the original google example that I took from the Google Dev page. Everything here is dervied and partially rewritten from that.
function checkAuth() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: true
}, handleAuthResult);
}
// gapi.auth.authorize() call.
function handleAuthResult(authResult) {
if (authResult) {
$('.pre-auth').hide();
loadAPIClientInterfaces();
} else {
$('#login-link').click(function() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}
function loadAPIClientInterfaces() {
gapi.client.load('youtube', 'v3', function() {
handleAPILoaded();
});
}
var playlistId, nextPageToken, prevPageToken;
// Once the api loads call a function to get the uploads playlist id.
function handleAPILoaded() {
requestUserUploadsPlaylistId();
}
//Retrieve the uploads playlist id.
function requestUserUploadsPlaylistId() {
var request = gapi.client.youtube.channels.list({
id: 'UCziks4y-RixDhWljY_es-tA',
part: 'contentDetails'
});
request.execute(function(response) {
console.log(response);
playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
requestVideoPlaylist(playlistId);
});
}
// Retrieve a playist of videos.
function requestVideoPlaylist(playlistId, pageToken) {
$('#video-container').html('');
var requestOptions = {
playlistId: playlistId,
part: 'snippet',
maxResults: 15
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.playlistItems.list(requestOptions);
request.execute(function(response) {
// Only show the page buttons if there's a next or previous page.
console.log (response);
nextPageToken = response.result.nextPageToken;
var nextVis = nextPageToken ? 'visible' : 'hidden';
$('#next-button').css('visibility', nextVis);
prevPageToken = response.result.prevPageToken
var prevVis = prevPageToken ? 'visible' : 'hidden';
$('#prev-button').css('visibility', prevVis);
var playlistItems = response.result.items;
if (playlistItems) {
// For each result lets show a thumbnail.
jQuery.each(playlistItems, function(index, item) {
createDisplayThumbnail(item.snippet);
});
} else {
$('#video-container').html('Sorry you have no uploaded videos');
}
});
}
// Create a thumbnail for a video snippet.
function createDisplayThumbnail(videoSnippet) {
console.log(videoSnippet);
var titleEl = $('<h3>');
titleEl.addClass('video-title');
$(titleEl).html(videoSnippet.title);
var thumbnailUrl = videoSnippet.thumbnails.medium.url;
var videoLink=$('<a>');
videoLink.attr('data-video','http://www.youtube.com/embed/'+videoSnippet.resourceId.videoId+'?autoplay=1');
videoLink.append(div)
videoLink.addClass('video_select')
var div = $('<div>');
div.addClass('video-content');
div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
div.append(titleEl);
videoLink.append(div)
$('#video-container').append(videoLink);
}
// Retrieve the next page of videos.
function nextPage() {
requestVideoPlaylist(playlistId, nextPageToken);
}
// Retrieve the previous page of videos.
function previousPage() {
requestVideoPlaylist(playlistId, prevPageToken);
}
</script>
</head>
<body onload="checkCookie()" class="background_color">
<div class="wrap">
<div class="back_image">
<img src="Pictures/titlepic.jpg" width="1060" height="200">
<h1 class="text_over_image" id="title_script">Welcome to my Sandbox</h1>
</div>
<div>
<iframe id='youTube_video' width="1060" height="597" src="//www.youtube.com/embed/io78hmjAWHw?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="login-container" class="pre-auth back_image">Please click <a href="#" id="login-link">this link</a> to load the playlist. It will pull authorization for the API from your Google account
<img src="Pictures/AuthButtons.jpg" width="1060" height="20">
</div>
<div id="video-container">
</div>
<div class="button-container back_image">
<img src="Pictures/Footer.jpg" width="1060" height="75">
<button id="prev-button" class="paging-button text_over_image" onclick="previousPage();">Previous Page</button>
<button id="next-button" class="paging-button text_over_image" onclick="nextPage();">Next Page</button>
</div>
</div>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
</body>
</html>
function handleAuthResult(authResult) {
if (authResult) {
// $('.pre-auth').hide();
loadAPIClientInterfaces();
} else {
$('#login-link').click(function() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}
function handleAuthResult(authResult) {
if (authResult) {
$('.pre-auth').html('click to enjoy any of these videos');
loadAPIClientInterfaces();
} else {
$('#login-link').click(function () {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}