tekgrl
asked on
On Hover text appears under an image. How do I set default to visible?
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Can you include a sample of the code that you're trying to get working?
ASKER
It's attached to my original post.
ASKER
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;
}<!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>/*
* 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);
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?
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?
ASKER
Yes, everything works. However, my original question is how do I get a default caption to appear on page load.
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.
ASKER