Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Failing to display alt text on :Hover

  1. #1
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Unhappy Failing to display alt text on :Hover

    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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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).
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by Beverleyh View Post
    ...

    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
    Attached Files Attached Files

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	click-to-open.jpg 
Views:	67 
Size:	52.5 KB 
ID:	5334  

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Mark Ellis (02-04-2014)

  9. #8
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by Mark Ellis; 02-02-2014 at 10:22 PM.

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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 );
                                }
                                
                            });
                        }
                    }
                },
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Mark Ellis (02-04-2014)

  12. #10
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Smile Issue resolved

    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

Similar Threads

  1. Replies: 0
    Last Post: 03-07-2011, 09:21 AM
  2. Single display line rotating/scroll text display.
    By acctman in forum Looking for such a script or service
    Replies: 1
    Last Post: 08-04-2008, 03:25 AM
  3. HELP to display 2nd image on mouse hover
    By puffnstuff in forum CSS
    Replies: 1
    Last Post: 04-07-2007, 11:45 PM
  4. IE 6 Hover Display
    By Titan85 in forum CSS
    Replies: 6
    Last Post: 01-18-2007, 05:18 AM
  5. On HOVER display text from somewhere else.
    By madkidd in forum JavaScript
    Replies: 0
    Last Post: 01-24-2006, 08:56 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •