Javascript and CSS cause a text box to go away, I want it to stay
So this is either a CSS issue or Javascript but I need your expertise.
I have a site built that has the youtube API on it.
The YouTube API requires that you authorize yourself to start the pull.
Looks like this before authorization: http://d.pr/i/96sB
Once you authorize, the box goes away: http://d.pr/i/4SVx
Here's the associated javascript:
// 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);
});
}
}
HTML
<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>
CSS
.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%;
}
At the bottom will be the entire page's HTML/Java to paint a complete
picture.
I'd like that box to stay so the authorize message stays but once
authorize, have it say something to the effect of "click to enjoy any of
htese vidoes" or something
Any ideas?
Here's the whole page:
<!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>
No comments:
Post a Comment