treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Problem with Chris' Anything Slider

  • Looks good in FF on my mac

    Looks fine in IE7 except slider buttons don't show up (bottom left hand side of slider - round gray buttons in FF)

    Can't figure out how to get them to show up like in FF

    Any thoughts?

    UPDATE - adding link now so you can help me without being psychic <http://s70539.gridserver.com/index.php&gt;

    Thanks
  • Link?? We're not psychic around here :lol:
  • in #thumbNav A the text-indent of -9999px is pushing the buttons off the page in IE7. I tested in IE8 and FF (Mac) and you can remove it and the buttons will show up, but they now have numbers 1 and 2 on them, so you you will need to tweak the padding for the numbers to show in the middle of the button to 0 6px.
  • Great! Thanks Virtual.

    Now I don't know how to get rid of the numbers. I was using the text indent to accomplish it because I could not make it happen any other way.

    Anyone have an idea how to do this?
  • Remove the text numbers 1 and 2 from the a tags and realign the padding.
  • I am not sure how to remove the numbers. They do not appear to be in the HTML tags.

    I think they are being generated by jquery. Unfortunately, I have not learned jquery yet.

    I am including the code.

    <div class=\"anythingSlider\">

    <div class=\"wrapper\">
    <ul>
    <li>
    <div id=\"who-is-Jesus\">
    <ul id=\"who-nav\">
    <li class=\"who\"><a class=\"who\" href=\"who-is-Jesus.php\">Who Is Jesus?</a></li>
    </ul>
    </div>
    <div id=\"play-button\">
    <ul id=\"play-nav\" class=\"gallery clearfix\">
    <li class=\"play\"><a class=\"play\" rel=\"prettyPhoto\" title=\"Vimeo video\" href=\"http://vimeo.com/11275888&width=700\">Play Video</a></li>
    </ul>
    </div>

    <ul class=\"gallery clearfix\">
    <li><a href=\"http://vimeo.com/11275888&width=700\" rel=\"prettyPhoto\" title=\"Vimeo video\"><img src=\"/images/home-main-photo.jpg\" alt=\"This Hope Header\" />3</a>
    </li>
    </ul>
    </li>

    <li>
    <img src=\"images/second-photo.jpg\" width=\"908\" height=\"523\" alt=\"This Hope Photo\" /> </li>
    </li>
    </ul>
    </div>

    </div> <!-- END AnythingSlider -->


    	// Creates the numbered navigation links
    base.buildNavigation = function(){
    base.$nav = $(\"<div id='thumbNav'></div>\").appendTo(base.$el);
    base.$items.each(function(i,el){
    var index = i + 1;
    var $a = $(\"<a href='#'></a>\");

    // If a formatter function is present, use it
    if( typeof(base.options.navigationFormatter) == \"function\"){
    $a.html(base.options.navigationFormatter(index, $(this)));
    } else {
    $a.text(index);
    }
    $a.click(function(e){
    base.gotoPage(index);

    if (base.options.hashTags)
    base.setHash('panel-' + index);

    e.preventDefault();
    });
    base.$nav.append($a);
    });
    base.$navLinks = base.$nav.find('> a');
    };
  • It is definitely being generated by the js code, but unfortunately I don't know how to remove it. I suggest you take the "Generates numbered links" portion of the code to the Javascript forum, and tell them you want to remove the numbers not the links, they'll be able to help you out.
  • Thanks so much virtual.
  • The lines your looking for, I think not too great at jquery, Are these: starting at line 160

    // Creates the numbered navigation links
    base.buildNavigation = function(){
    base.$nav = $(\"<div id='thumbNav'></div>\").appendTo(base.$el);
    base.$items.each(function(i,el){
    var index = i + 1;
    var $a = $(\"<a href='#'></a>\");



    not sure but i would try changing something in the fifth line, might try removing the +1, again im not strong in jquery so remember what it was like before to put it back^^