tags:

views:

36

answers:

1

Hi,

Does anyone ever use this slider: http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html.

I need someone's advice on how to remove the navigation and only show while on hover.. thanks

+2  A: 

Im not sure how you want to remove the navigation but then show (the images?) on hover?

Do you mean you want the images to slide when you hover over the links? And you want the Title and Description bar removed?

Remove the background img from the css :

div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
//remove this>>
<strike>background:url(images/slide-bg.png) 0 0;<strike>
}

Remove these two elements in the html:

<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>

In script.js look for this line:

 $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" **onclick**="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');

Change the onclick to mouseOver


In response to your clarification: Put this on the top inside the body or head(not sure which is faster)

    <script type="text/javascript>
    $(document).ready(function{
//hide the nav when page loads
     $("#slide-nav").hide();
//show and hide on hover
     $("#slide-holder").hover(
      function () {
        $(this).show();
      },
      function () {
        $(this).hide();
      }
    );
    })
    </script>

Haven't tested this..Really hope that helps you

giddy
this is what I want: the first time the page loaded, the slider will not show the navigation button and the transparent banner (just a plain slider) but when the user hovers on it, then the slider shows the navigation button and the transparent banner
I changed the answer.
giddy
whoopsy I made a few mistakes there... edited the answer again..
giddy
you are a legend mate.. it was giving me the base idea.. i changed ur solution to this: $(document).ready(function(){ //hide the nav when page loads $("#slide-controls").hide();//show and hide on hover $("#slide-holder").hover( function () { $("#slide-controls").show(); }, function () { $("#slide-controls").hide(); }
ah thanks! =D Yea I wasn't sure about which element to hide.Glad you found it!(Tip: Being Win Programmer JS and CSS were like Chinese to me until some time ago, I did find some salvation using Google Chromes Dev Tools and Firefox with Firebug to play around and learn)
giddy