Log in

View Full Version : Failing to display alt text on :Hover


Mark Ellis
12-15-2013, 10:13 AM
I've been trying various things to get alt text of "Click on a playlist to open it and see the relevant videos" to display when the cursor is hovered over the playlist components (the black sections) - but not to display when hovering over the video list titles (the grey sections). The areas that I want the mouse-over to work on is called ".ytv-playlists" in the CSS and JS files

This is the Playlists view https://lh5.googleusercontent.com/-nJjy-xZrpuk/Uq19K4hMGqI/AAAAAAAAGlE/uQxtVLuxWMo/s500/Playlist-view.jpg


And the video lists view https://lh3.googleusercontent.com/-CtVb_KPEeWA/Uq19Kyoi9HI/AAAAAAAAGlA/mORpMd2npi8/s500/videos-view.jpg

I've removed all my formatting attempts from the css and html file

5309 5310 5311

It wont let me upload html file, so the html code is



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<title>YouTube gallery</title>
<link href="youtube-gallery.css" type="text/css" rel="stylesheet" />
<link href="youtube-style.css" type="text/css" rel="stylesheet" />
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body class="playlists">

<div id="frame"></div>

<div class="description">
<p></p>

</div>

<script type="text/javascript" src="youtube-gallery.js"></script>
<script>
window.onload = function(){

window.controller = new YTV('frame', {
user: 'DorsetdogDotCom',
accent: '#008D54',
browsePlaylists: true,
controls: true,
autoplay: false
});

};
</script>
</body>
</html>


All help greatly appreciated

Mark
Beverleyh
12-17-2013, 11:09 PM
I think you're mixing up the alt attribute (which is an accessibility aid for images only) with the title attribute.

Alt wrongly generates a tooltip in older versions of IE and may have thrown you off a bit in years gone by, whereas the title attribute generates a tooltip in all browsers. The alt's tooltip generating behavior has since been corrected though and is probably the reason why you can't get it to work now (it isn't supposed to).

Title attributes can be used on other elements - most typically links and images - so have a go at editing the markup in the js file again but this time use title="Play Me" (or similar).
Mark Ellis
01-25-2014, 11:30 AM
...

Title attributes can be used on other elements - most typically links and images - so have a go at editing the markup in the js file again but this time use title="Play Me" (or similar).

Thanks for the response, Beverleyh.

So it's a JS issue and not a CSS. Where would I put the
title="Play Me" in the youtube-gallery.JS file then? The list of playlists is on the You Tube account, rather than in a JS file that I can edit
Beverleyh
01-25-2014, 11:44 AM
In the js file on the divs or span tags, or whichever element you want it to appear on. You'll need to play around with the placement to see I you can achieve the effect you want as I'm not sure what you're describing.
jscheuer1
01-26-2014, 04:48 AM
If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
Mark Ellis
01-26-2014, 05:03 PM
Sorry that I forgot the page, John. It's www.dorsetdog.com/you-tube-videos (http://www.dorsetdog.com/you-tube-videos)

I'm try to get the gallery to load showing the playlist (it currently loads showing all videos), and for visitors to see the instruction to click on a playlist to see the videos within that playlist - see attached.

Many thanks for any help

Mark
jscheuer1
01-26-2014, 07:56 PM
First back up the youtube-gallery.js file. Then, using a text only editor like NotePad, in the youtube-gallery.js, change the playlists function as shown (highlighted line, additions red):


playlists: function(res){
if(res && res.feed){
var list = '<div class="ytv-playlists"><ul>',
playlists = res.feed.entry,
i;
for(i=0; i<playlists.length; i++){
var data = {
title: playlists[i].title.$t,
plid: playlists[i].yt$playlistId.$t,
thumb: playlists[i].media$group.media$thumbnail[1].url
};
list += '<a href="#" data-ytv-playlist="'+(data.plid)+'" title="Click to Open '+(data.title)+'">';
list += '<div class="ytv-thumb"><div class="ytv-thumb-stroke"></div><img src="'+(data.thumb)+'"></div>';
list += '<span>'+(data.title)+'</span>';
list += '</a>';
}
list += '</ul></div>';

var lh = doc.getElementsByClassName('ytv-list-header')[0],
headerLink = lh.children[0];
headerLink.href="#";
headerLink.target="";
headerLink.setAttribute('data-ytv-playlist-toggle', 'true');
doc.getElementsByClassName('ytv-list-header')[0].innerHTML += list;
lh.className += ' ytv-has-playlists';
}
},

Save and use that version.

The browser cache may need to be cleared and/or the page refreshed to see changes.
Mark Ellis
02-02-2014, 11:11 PM
John, that is brilliant. Thank you ever so much for resolving that.

Sorry for the delay in getting back to you. I forgot to subscribe to the thread to get notifications

What change do I need to make, so that the gallery loads/displays the playlists list when the page first loads, instead of loading/displaying all videos?

Many thanks

Mark
jscheuer1
02-03-2014, 03:43 AM
OK again back up the youtube-gallery.js file. Then, using a text only editor like NotePad, in the youtube-gallery.js, this time change the compileList function as shown (highlighted line, addition red):


compileList: function(data){
if(data && data.feed){
utils.ajax.get( utils.endpoints.userInfo(), function(userInfo){
var list = '',
user = {
title: userInfo.entry.title.$t,
url: 'http://youtube.com/user/'+userInfo.entry.yt$username.display,
thumb: userInfo.entry.media$thumbnail.url,
summary: userInfo.entry.summary.$t,
subscribers: userInfo.entry.yt$statistics.subscriberCount,
views: userInfo.entry.yt$statistics.totalUploadViews
},
videos = data.feed.entry,
first = true,
i;
if(settings.playlist){
user.title += ' &middot; '+(data.feed.media$group.media$title.$t);
}
list += '<div class="ytv-list-header ytv-playlist-open">';
list += '<a href="'+(user.url)+'" target="_blank">';
list += '<img src="'+(user.thumb)+'">';
list += '<span>'+(user.title)+' <i class="ytv-arrow down"></i></span>';
list += '</a>';
list += '</div>';

list += '<div class="ytv-list-inner"><ul>';
for(i=0; i<videos.length; i++){
if(videos[i].media$group.yt$duration){
var video = {
title: videos[i].title.$t,
slug: videos[i].media$group.yt$videoid.$t,
link: videos[i].link[0].href,
published: videos[i].published.$t,
rating: videos[i].yt$rating,
stats: videos[i].yt$statistics,
duration: (videos[i].media$group.yt$duration.seconds),
thumb: videos[i].media$group.media$thumbnail[1].url
};

var date = new Date(null);
date.setSeconds(video.duration);
var timeSlots = (date.toTimeString().substr(0, 8)).split(':'),
time = timeSlots[1] + ':' + timeSlots[2];

var isFirst = '';
if(first===true){
isFirst = ' class="ytv-active"';
first = video.slug;
}

list += '<li'+isFirst+'><a href="#" data-ytv="'+(video.slug)+'" class="ytv-clear">';
list += '<div class="ytv-thumb"><div class="ytv-thumb-stroke"></div><span>'+(time)+'</span><img src="'+(video.thumb)+'"></div>';
list += '<div class="ytv-content"><b>'+(video.title)+'</b>';
if (video.stats)
{
list+'</b><span class="ytv-views">'+utils.addCommas(video.stats.viewCount)+' Views</span>';
}
list += '</div></a></li>';
}
}
list += '</ul></div>';
settings.element.innerHTML = '<div class="ytv-relative"><div class="ytv-video"><div id="ytv-video-player"></div></div><div class="ytv-list">'+list+'</div></div>';

action.logic.loadVideo(first, settings.autoplay);

if(settings.browsePlaylists){
utils.ajax.get( utils.endpoints.userPlaylists(), prepare.playlists );
}

});
}
}
},
Mark Ellis
02-03-2014, 08:38 AM
That is brilliant, John

Thank you ever so much for that. It really improves the navigation and look of the You Tube gallery :)

I'm trying to get Google You Tube to provide the option to "Display alphabetically", rather than just by upload date

Many thanks for resolving this

Mark
Mark Ellis
02-03-2014, 09:23 AM
Ah, slight problem, John

When first going to the www.dorsetdog.com/you-tube-videos (http://www.dorsetdog.com/you-tube-videos), the right hand panel displays the playlists, just as I want it to.

But when I click on a playlist to open it, the first video in that playlist displays in the player on the left, but the right hand panel goes back to the Playlist view - instead of showing the videos in that opened playlist.

I don't know if I've put the "ytv-playlist-open" in the wrong place.

Once I have clicked on the playlist, and the first video is displayed in the player - I have to click on the green button at the top to display the videos in that playlist - instead of the contents of that playlist being automatically displayed on the right.

5337
Mark Ellis
02-03-2014, 09:35 AM
I wonder if I need to display a "Playlist selected - (show title)" between the dorsetdog header and the playlist/video title list. And then change the text on the green button to "Display videos in selected playlist" instead of "Click to see a list of all Dorsetdog videos"
jscheuer1
02-03-2014, 04:02 PM
Maybe, I don't think so. I think that this code is reused each time the playlist changes. If so, it probably should only include the ytv-playlist-open the first time. I'll have code for that soon.
jscheuer1
02-03-2014, 04:23 PM
OK, here's the new compileList function (back up what you have again first, make the highlighted changes):


compileList: function(data){
if(data && data.feed){
utils.ajax.get( utils.endpoints.userInfo(), function(userInfo){
var list = '',
user = {
title: userInfo.entry.title.$t,
url: 'http://youtube.com/user/'+userInfo.entry.yt$username.display,
thumb: userInfo.entry.media$thumbnail.url,
summary: userInfo.entry.summary.$t,
subscribers: userInfo.entry.yt$statistics.subscriberCount,
views: userInfo.entry.yt$statistics.totalUploadViews
},
videos = data.feed.entry,
first = true,
i;
if(settings.playlist){
user.title += ' &middot; '+(data.feed.media$group.media$title.$t);
}
list += settings.listfirstline || '<div class="ytv-list-header ytv-playlist-open">';
settings.listfirstline = '<div class="ytv-list-header">';
list += '<a href="'+(user.url)+'" target="_blank">';
list += '<img src="'+(user.thumb)+'">';
list += '<span>'+(user.title)+' <i class="ytv-arrow down"></i></span>';
list += '</a>';
list += '</div>';

list += '<div class="ytv-list-inner"><ul>';
for(i=0; i<videos.length; i++){
if(videos[i].media$group.yt$duration){
var video = {
title: videos[i].title.$t,
slug: videos[i].media$group.yt$videoid.$t,
link: videos[i].link[0].href,
published: videos[i].published.$t,
rating: videos[i].yt$rating,
stats: videos[i].yt$statistics,
duration: (videos[i].media$group.yt$duration.seconds),
thumb: videos[i].media$group.media$thumbnail[1].url
};

var date = new Date(null);
date.setSeconds(video.duration);
var timeSlots = (date.toTimeString().substr(0, 8)).split(':'),
time = timeSlots[1] + ':' + timeSlots[2];

var isFirst = '';
if(first===true){
isFirst = ' class="ytv-active"';
first = video.slug;
}

list += '<li'+isFirst+'><a href="#" data-ytv="'+(video.slug)+'" class="ytv-clear">';
list += '<div class="ytv-thumb"><div class="ytv-thumb-stroke"></div><span>'+(time)+'</span><img src="'+(video.thumb)+'"></div>';
list += '<div class="ytv-content"><b>'+(video.title)+'</b>';
if (video.stats)
{
list+'</b><span class="ytv-views">'+utils.addCommas(video.stats.viewCount)+' Views</span>';
}
list += '</div></a></li>';
}
}
list += '</ul></div>';
settings.element.innerHTML = '<div class="ytv-relative"><div class="ytv-video"><div id="ytv-video-player"></div></div><div class="ytv-list">'+list+'</div></div>';

action.logic.loadVideo(first, settings.autoplay);

if(settings.browsePlaylists){
utils.ajax.get( utils.endpoints.userPlaylists(), prepare.playlists );
}

});
}
}
},
Mark Ellis
02-03-2014, 10:25 PM
Absolutely wonderful.

Thank you, John :) Really appreciated