Solved

On Hover text appears under an image. How do I set default to visible?

Posted on 2011-10-01
8
216 Views
Last Modified: 2012-05-12
Hi all. I have this scroller and when the user rolls over the image a caption appears below it. I'd like to have a default caption for the middle image visible on page load. Not sure how to go about this. test.zip
0
Comment
Question by:tekgrl
  • 4
  • 4
8 Comments
 
LVL 6

Accepted Solution

by:
billfusion earned 500 total points
ID: 36897224
Use z-index which specifies how items are stacked on the page.  An element with greater stack order is always in front of an element with a lower stack order.
0
 

Author Comment

by:tekgrl
ID: 36897488
I couldn't get z-index to work in this instance.
0
 
LVL 6

Expert Comment

by:billfusion
ID: 36897843
Can you include a sample of the code that you're trying to get working?
0
 

Author Comment

by:tekgrl
ID: 36899277
It's attached to my original post.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:tekgrl
ID: 36899291
I'll post the code too.
/* ELEMENTS COMMUNS
----------------------------------------------------------------------------------------------------*/
body {
	overflow-x: hidden;
	font-size:12px; /* gives us a base of 12px */
}
#slider ul, #slider li {
	background:none;
	list-style: none;
	margin: 0;
	padding: 0;
}

#overflow-fix {
	overflow: hidden;

}

/* Home page scroller
----------------------------------------------------------------------------------------------------*/
	
#caroussel-container-home {
	left:-10px;
	margin: 0 auto;
	width: 250px;
	position: relative;
	text-align:left;
	
	
}

#caroussel-home {
	height:520px;
	
	
	
}
#caroussel-home #slider { 

}

#caroussel-home #slider li { 
	height: 52px;
	width: 250px;
}
#caroussel-home #previous a, #caroussel-home  #next a {  
	display: block;
	position: relative;
	width: 15px;
	height: 52px;
	background: url(../images/video-scroll-lft.gif) no-repeat center left;	
}	
#caroussel-home #next a {
	background: url(../images/video-scroll-rt.gif) no-repeat center right;	
	padding-left: 4px;
	outline:none;
}
#caroussel-home #previous, #caroussel-home #next { 
	display: block;
	height: 52px;
	left: -15px;
	position: absolute;
	text-indent: -9999px;
	top: 0;
	width: 15px;
	z-index: 1000;
}#caroussel-home #next { left: 245px;}

	
ul#home li div.video1 a {
	display: block;
	float: left;
	border: none;
	margin: 1px 4px 0 0;
	background: url(../images/video-thumb1-home.jpg) no-repeat top left;	
	width: 70px;
	height: 52px;
	text-decoration:none;
	outline:none;
	}
	
ul#home li div.video2 a {
	display: block;
	float: left;
	border: none;
	margin: 1px 4px 0 0;
	background: url(../images/video-thumb2-home.jpg) no-repeat top left;	
	width: 70px;
	height: 52px;
	text-decoration:none;
	outline:none;
	}
	
ul#home li div.video3 a {
	display: block;
	float: left;
	border: none;
	margin: 1px 4px 0 0;
	background: url(../images/video-thumb3-home.jpg) no-repeat top left;	
	width: 70px;
	height: 52px;
	text-decoration:none;
	outline:none;
	}
	
ul#home li div.video4 a {
	display: block;
	float: left;
	border: none;
	margin: 1px 4px 0 0;
	background: url(../images/video-thumb1-home.jpg) no-repeat top left;	
	width: 70px;
	height: 52px;
	text-decoration:none;
	outline:none;
	}

ul#home li div.video5 a {
	display: block;
	float: left;
	border: none;
	margin: 1px 4px 0 0;
	background: url(../images/video-thumb2-home.jpg) no-repeat top left;	
	width: 70px;
	height: 52px;
	text-decoration:none;
	outline:none;
	}
	
ul#home li div.video6 a {
	display: block;
	float: left;
	border: none;
	margin: 1px 4px 0 0;
	background: url(../images/video-thumb3-home.jpg) no-repeat top left;	
	width: 70px;
	height: 52px;
	text-decoration:none;
	outline:none;
	}
	



	
/* Disjointed Text Rollover
----------------------------------------------------------------------------------------------------*/
	
	#home li div a {
text-decoration:none;
text-align: center;}

#home li div a span {
	visibility:hidden;
	display:block;
	position:absolute;
	/**adjust disjointed text position in % or px**/ 
	left:0;
	top:60px;
	margin-left: auto;
	margin-right: auto;
	width: 250px;
	text-align: left;
	color: #4f433a;
}



#home li div a:hover span, #home li div a:active span, #home li div a:focus span {
	visibility:visible;
}

#home li div a:hover, #home li div a:focus{
	text-decoration: none;
	color:#FF6600;
	visibility:visible;
}

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>United Capital - Press</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link type="text/css" rel="stylesheet" href="css/slider.css" />
		<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<!-- video scroller scripts -->
		<script type="text/javascript" src="js/easySlider1.7.js"></script>
		
	
		<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){	
	$("#slider").easySlider({
		prevId: 		'previous',
		prevText: 		'previous',
		nextId: 		'next',
		nextText: 		'next',
		speed: 		1200,
		pause:		6000,
		auto: false,
		continuous: true 
	});
	
	if($("#slider"))
	{
		$(document).keydown(function(event){
			if(event.keyCode == 37) $("#previous a").click();
			if(event.keyCode == 39) $("#next a").click();
		});
	}
});

		</script>
	</head>
	<body id="two_column">
							
						<!-- ****************************     CAROUSSEL   ******************************   -->
				
						
						<div id="overflow-fix">
						<div id="caroussel-home" class="mb_2 mt_1 accueilcar">	
							<div id="caroussel-container-home" class="container_12">
									<div id="slider">		
									
									<!-- NOTE: to update video screenshots, go to css/slider.css and update the video1, video2, etc. background images -->
									<ul id="home" class="gallery clearfix">
										<li><div class="video1"><a href=""><span class="on">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse [2:34]</a></div><div class="video2"><a href=""><span>video two text</span></a></div><div class="video3"><a href=""><span>video three text</span></a></div></li>
										<li><div class="video4"><a href=""><span>video four text</span></a></div><div class="video5"><a href=""><span>video five text</span></a></div><div class="video6"><a href=""><span>video six text</span></a></div></li>
									</ul>			
									</div>		
								</div>
							</div>		
						</div>
						</div>
						
						
					
	</body>
</html>

Open in new window

/*
 * 	Easy Slider 1.7 - jQuery plugin
 *	written by Alen Grakalic	
 *	http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
 *
 *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */

(function($) {

	$.fn.easySlider = function(options){
	  
		// default configuration properties
		var defaults = {			
			prevId: 		'prevBtn',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			controlsShow:	true,
			controlsBefore:	'',
			controlsAfter:	'',	
			controlsFade:	true,
			firstId: 		'firstBtn',
			firstText: 		'First',
			firstShow:		false,
			lastId: 		'lastBtn',	
			lastText: 		'Last',
			lastShow:		false,				
			vertical:		false,
			speed: 			800,
			auto:			false,
			pause:			2000,
			continuous:		false, 
			numeric: 		false,
			numericId: 		'controls'
		}; 
		
		var options = $.extend(defaults, options);  
				
		this.each(function() {  
			var obj = $(this); 				
			var s = $("li", obj).length;
			var w = $("li", obj).width(); 
			var h = $("li", obj).height(); 
			var clickable = true;
			obj.width(w); 
			obj.height(h); 
			obj.css("overflow","hidden");
			var ts = s-1;
			var t = 0;
			$("ul", obj).css('width',s*w);			
			
			if(options.continuous){
				$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
				$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
				$("ul", obj).css('width',(s+1)*w);
			};				
			
			if(!options.vertical) $("li", obj).css('float','left');
								
			if(options.controlsShow){
				var html = options.controlsBefore;				
				if(options.numeric){
					html += '<ol id="'+ options.numericId +'"></ol>';
				} else {
					if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
					html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
					html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
					if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';				
				};
				
				html += options.controlsAfter;						
				$(obj).after(html);										
			};
			
			if(options.numeric){									
				for(var i=0;i<s;i++){						
					$(document.createElement("li"))
						.attr('id',options.numericId + (i+1))
						.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
						.appendTo($("#"+ options.numericId))
						.click(function(){							
							animate($("a",$(this)).attr('rel'),true);
						}); 												
				};							
			} else {
				$("a","#"+options.nextId).click(function(){		
					animate("next",true);
				});
				$("a","#"+options.prevId).click(function(){		
					animate("prev",true);				
				});	
				$("a","#"+options.firstId).click(function(){		
					animate("first",true);
				});				
				$("a","#"+options.lastId).click(function(){		
					animate("last",true);				
				});				
			};
			
			function setCurrent(i){
				i = parseInt(i)+1;
				$("li", "#" + options.numericId).removeClass("current");
				$("li#" + options.numericId + i).addClass("current");
			};
			
			function adjust(){
				if(t>ts) t=0;		
				if(t<0) t=ts;	
				if(!options.vertical) {
					$("ul",obj).css("margin-left",(t*w*-1));
				} else {
					$("ul",obj).css("margin-left",(t*h*-1));
				}
				clickable = true;
				if(options.numeric) setCurrent(t);
			};
			
			function animate(dir,clicked){
				if (clickable){
					clickable = false;
					var ot = t;				
					switch(dir){
						case "next":
							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
							break; 
						case "prev":
							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
							break; 
						case "first":
							t = 0;
							break; 
						case "last":
							t = ts;
							break; 
						default:
							t = dir;
							break;  
					};	
					var diff = Math.abs(ot-t);
					var speed = diff*options.speed;						
					if(!options.vertical) {
						p = (t*w*-1);
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);				
					} else {
						p = (t*h*-1);
						$("ul",obj).animate(
							{ marginTop: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);					
					};
					
					if(!options.continuous && options.controlsFade){					
						if(t==ts){
							$("a","#"+options.nextId).hide();
							$("a","#"+options.lastId).hide();
						} else {
							$("a","#"+options.nextId).show();
							$("a","#"+options.lastId).show();					
						};
						if(t==0){
							$("a","#"+options.prevId).hide();
							$("a","#"+options.firstId).hide();
						} else {
							$("a","#"+options.prevId).show();
							$("a","#"+options.firstId).show();
						};					
					};				
					
					if(clicked) clearTimeout(timeout);
					if(options.auto && dir=="next" && !clicked){;
						timeout = setTimeout(function(){
							animate("next",false);
						},diff*options.speed+options.pause);
					};
			
				};
				
			};
			// init
			var timeout;
			if(options.auto){;
				timeout = setTimeout(function(){
					animate("next",false);
				},options.pause);
			};		
			
			if(options.numeric) setCurrent(0);
		
			if(!options.continuous && options.controlsFade){					
				$("a","#"+options.prevId).hide();
				$("a","#"+options.firstId).hide();				
			};				
			
		});
	  
	};

})(jQuery);

Open in new window

0
 
LVL 6

Expert Comment

by:billfusion
ID: 36900047
Thanks.

I downloaded  test.zip that you initially sent.  It initially didn't show the images.  But I moved the images folder from inside the CSS folder to be at the same level add the CSS folder.  Then everything else worked without a problem on both IE9 & Google Chrome.  

What browser are you using?
0
 

Author Comment

by:tekgrl
ID: 36900320
Yes, everything works. However, my original  question is how do I get a default caption to appear on page load.
0
 
LVL 6

Expert Comment

by:billfusion
ID: 36963782
Sorry for the delay in responding and for not reading your post properly.  What is causing the text now to show is : visibility:hidden; in the #home li div a span  style element.  I am looking for a way to change that to visible when the slide is loaded.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now