Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Florida
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple mouseover question.

    I think. This is the code that organizes and displays a sidebar for my videos by name and links them to the corresponding number. What I would like to know is if or how I can simply add a mouseover effect to each video with it's own styleable text box? Let me know if I need to provide more info for help here.

    Code:
    var videosList = {
    	defaultVideo: "examplevideo",
    		videos: {
    			"examplevideolistname": {
    			"examplevideoname": "examplevideonumber",
    			"examplevideoname": "examplevideonumber",
    			"examplevideoname": "examplevideonumber",
    			"examplevideoname": "examplevideonumber",
    			"examplevideoname": "examplevideonumber",
    			"examplevideoname": "examplevideonumber",
    		}
    	}
    };

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    It would depend a little on the html that is used to create the sidebar and the way that the sidebar is created. In broad terms, one way would be to create a hidden div, then when the mouse is over one of the target elements it would show the div and fill it in with the text, images or whatever you want to display. Then you would hide it again on mouseout.

    None of which is at all complicated. There is a design issue of where you want the box to appear - at some predetermined place, or statically at the point where the mouse enters the element or if you want the box to move with the mouse while it is over the element, but that's all reasonably simple, too.

    Of course, html has the in-built title attribute which will give you a plain text label on mouseover and is loads easier to implement, but that can't be styled so it may not be what you're looking for.

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Florida
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    It would depend a little on the html that is used to create the sidebar and the way that the sidebar is created. In broad terms, one way would be to create a hidden div, then ....
    Thanks for the reply, xelawho. The only HTML in the sidebar is here:

    Code:
    <div id="videos">
    		<iframe id="video-frame"></iframe>
    		<div id="video-list"></div>
    		<div style="clear:both;"></div>
    </div>
    The sidebar is generated by the attached JS in the attached .txt file. This seems like something someone proficient in JS would be able to do in seconds. What I was really hoping for is a way to assign each "examplevideoname" it's own CSS class or ID and I think from there I should be fine.

    edit:typo
    Attached Files Attached Files
    Last edited by atotalpirate; 09-06-2012 at 04:41 PM.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I don't open attachments - you can post the contents here, or if your page is live, give a link to it. Or maybe somebody else would like to take a look.

    Again, speaking broadly, your sidebar is probably created within a loop. That would be the place to add IDs or a classname

  • #5
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Florida
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, here's the js.

    your sidebar is probably created within a loop. That would be the place to add IDs or a classname
    Would you (or anyone) be willing to help me through that process if it applies here?


    Code:
    //Function to grab the query string parameters
    function getUrlVars(){
    	var vars = [], hash;
    	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    	for(var i = 0; i < hashes.length; i++)
    	{
    		hash = hashes[i].split('=');
    		vars.push(hash[0]);
    		vars[hash[0]] = hash[1];
    	}
    	return vars;
    }
    
    var $Support = {
    	VideoIdDataSelector:"videoid",
    	Init: function () {
    
    		//Override the default video if it comes through on the query string
    		var defaultOverride = getUrlVars()["videoid"];
    		if(defaultOverride) videosList.defaultVideo = defaultOverride;
    
    		//After the videos object above has been built, send it off to be turned into HTML
    		$Support.List.Create(videosList);
    	},
    	List: {
    		Create: function (data) {
    			//Add a class if we are using multiple areas
    			var listHtml = "<ul>";
    
    			//Recursively loop over nested JSON objects and build up an HTML bulleted list
    			$.each(data.videos, recurse);
    
    			function recurse(key, val) {
    				listHtml += "<li>";
    				if (val instanceof Object) {
    					listHtml += "<span class='title'>" + key + "</span><ul>";
    					$.each(val, recurse);
    					listHtml += "</ul>";
    				} else {
    					listHtml += "<a href='#' data-"+$Support.VideoIdDataSelector+"='" + val + "'>" + key + "</a>";
    				}
    				listHtml += "</li>";
    			}
    			listHtml += "</ul>";
    			
    			//Put the HTML into the container
    			var $listContainer = $("#video-list");
    			$listContainer.html(listHtml);
    
    			//Set up click events
    			$Support.List.SetupClicks($listContainer, data.defaultVideo);
    		},
    		SetupClicks: function ($listContainer, defaultVideoId) {
    			var currentSelector = "current";
    			var $videoLinks = $listContainer.find("a");
    
    			$videoLinks
    				.click(function () {
    					var $thisLink = $(this);
    
    					//Make the current one look selected
    					$listContainer
    						.find("." + currentSelector)
    						.removeClass(currentSelector);
    					
    					$thisLink
    						.addClass(currentSelector);
    					
    					//Pass in the video link, and set it to auto-play
    					//Be sure this is called AFTER the setting of the classes above so the correct player color can be set
    					$Support.SetIframeUrl($thisLink, true);
    					
    					return false;
    				});
    			
    			//Find the first one and auto-load that, but don't set it to auto play!
    			var $defaultVideoLink = $videoLinks.filter("[data-" + $Support.VideoIdDataSelector + "='" + defaultVideoId + "']");
    			
    			//In case the default video can't be selected, just choose the first video instead.
    			if ($defaultVideoLink.length !== 1) $defaultVideoLink = $videoLinks.first();
    
    			$defaultVideoLink
    				.addClass(currentSelector);
    			
    			//Determine if the default video should autoplay or not depending on the query string parameter
    			var defaultAutoPlay = getUrlVars()["autoplay"] || false;
    			
    			//Pass in the video link, and set it NOT to auto-play
    			//Be sure this is called AFTER the setting of the classes above so the correct player color can be set
    			$Support.SetIframeUrl($defaultVideoLink, defaultAutoPlay);
    		}
    	},
    	SetIframeUrl: function ($videoLink, shouldAutoPlay) {
    		var $iframe = $("#video-frame");
    		var videoId = $videoLink.data($Support.VideoIdDataSelector);
    
    		//Wistia Video Options
    		var options = {
    			//Video Dimensions
    			videoWidth: $iframe.width(),
    			videoHeight: $iframe.height(),
    			
    			//Player customization
    			autoPlay: shouldAutoPlay,		//When true, the video will play immediately after being loaded
    			autoLoad: true,					//When true, this will download the video data in the background regarless if they have begun to play the video or not
    			controlsVisibleOnLoad: true,	//When true, all the player controls at the bottom are visiable before the video starts playing
    			fullscreenButton: true,			//When true, a button is added to allow full screen viewing of the video
    			playbar: true,					//When true, the playbar is shown to allow the user to scrub through the video timeline
    			playButton: true,				//When true, a large centered play button is added on top of the video. When autoPlay is enabled you will not see this
    			playerColor: "0066CC",		//The color of the playback controls overlay
    			smallPlayButton: true,			//When true, a play button is added in the bottom left by the playbar
    			volumeControl: true				//When true, the user can control the volume					
    			
    			//Unused options
    			//doNotTrack: false,				//Not sure, but when set to true this probably disables any tracking information to Wistia
    			//branding: false,				//When true, the Wistia logo display at the top of the video
    			//chromeless: false,				//When true, no playback controls are shown
    			//Flash Specifics
    			//endVideoCallback: "",
    			//endVideoBehavior: "default",	//can be:"default" "reset" or "loop" 
    			//wmode: "opaque"
    		};
    
    		//Put it all together to make a valid Wistia iframe embed URL
    		var finalUrl = "http://fast.wistia.com/embed/iframe/" + videoId + "?" + $.param(options);
    
    		//Set the actual URL
    		$iframe.prop("src", finalUrl);
    	}
    };
    
    //Page Load
    $($Support.Init);

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    it looks to me like your sidebar items already have a class. from what I can tell it's applied here:
    Code:
    listHtml += "<span class='title'>" + key + "</span><ul>";
    Although I'm not sure that having a class in itself will actually help you much here. But anyway. That could also be the place in the loop to apply a mouseover listener. Or you could set up a separate listener that is applied to all the links in one hit, like you have for the click listener on $videoLinks

  • #7
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Florida
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    it looks to me like your sidebar items already have a class. from what I can tell it's applied here:
    Code:
    listHtml += "<span class='title'>" + key + "</span><ul>";
    Although I'm not sure that having a class in itself will actually help you much here. But anyway. That could also be the place in the loop to apply a mouseover listener. Or you could set up a separate listener that is applied to all the links in one hit, like you have for the click listener on $videoLinks
    Hmmm... What about using #video-list > ul li:nth-child(5) to select (for example the 5th <li>) and having some hidden <p> tags containing different texts in the body and using :hover to unhide those hidden <p> tags? Does that seem like a crazy way to do something like this?

    EDIT: no parent selectors would make this impossible, so nevermind this post.
    Last edited by atotalpirate; 09-06-2012 at 09:17 PM.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I guess to get specific, it would be helpful to know what framework you are using.

    It looks like jQuery, in which case you might be better off using something like .each() and .child(), although that would seems to be doubling up as you are already looping through all the videos as you create your sidebar.

    I guess it all also depends on where the content for your pop up boxes is going to come from

  • #9
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Florida
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's JQuery (should have already told you that, sorry). Do you have a suggestion as to where the pop boxes should come from? It looks like the included part is where the list is built (like the title of this thread suggests, I am a JS noob. Hopefully by now you realize just how accurate that statement is! Haha) Is there an easy way to assign a different one lined question in a styleable comment box to each video link in the sidebar separately?

    Code:
    //Recursively loop over nested JSON objects and build up an HTML bulleted list
    			$.each(data.videos, recurse);
    
    			function recurse(key, val) {
    				listHtml += "<li>";
    				if (val instanceof Object) {
    					listHtml += "<span class='title'>" + key + "</span><ul>";
    					$.each(val, recurse);
    					listHtml += "</ul>";
    				} else {
    					listHtml += "<a href='#' data-"+$Support.VideoIdDataSelector+"='" + val + "'>" + key + "</a>";
    				}
    				listHtml += "</li>";
    			}
    			listHtml += "</ul>";


  •  

    Posting Permissions

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