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

And the video lists view

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

youtube-gallery.css youtube-gallery.js youtube-style.css

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

HTML Code:

<!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

Originally Posted by Beverleyh

...

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

Code:

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

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):

Code:

                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):

Code:

                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

Thread: Failing to display alt text on :Hover

Thread Tools

Search Thread

Failing to display alt text on :Hover

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Issue resolved

Similar Threads

Display error when I hover to dropdown menu in IE 7,8

Single display line rotating/scroll text display.

HELP to display 2nd image on mouse hover

IE 6 Hover Display

On HOVER display text from somewhere else.

Bookmarks

Bookmarks

Posting Permissions