anythingFader: adding panels, more than 10??

[Mikhail]

Hi guys, I assume this is possible?! I went from 4 to 6 eventually up to 10 but I cannot go to 11, the 11th panel just does not appear and the whole thing becomes a mess!!

/** From my html page: **/

<script type="text/javascript" src="jquery.min.js"></script>
    <script src="jquery.anythingfader.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    function formatText(index, panel) {
      return index + "";
    }

    $(function () {

        $('.anythingFader').anythingFader({
            autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
            delay: 24000,                    // How long between slide transitions in AutoPlay mode
            startStopped: false,            // If autoPlay is on, this can force it to start stopped
            animationTime: 1700,             // How long the slide transition takes
            hashTags: true,                 // Should links change the hashtag in the URL?
            buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
            pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
            startText: "Go",                // Start text
            stopText: "Pause",               // Stop text
            navigationFormatter: formatText   // Details at the top of the file on this use (advanced use)
        });

        $("#slide-jump").click(function(){
            $('.anythingFader').anythingFader(11);
        });

    });
</script>

/** my ‘anythingFader’ styling: **/

.anythingFader { width: 800px; height: 760px; padding-bottom: 30px; position: relative; margin: 0 auto; }
.anythingFader .wrapper { width: 860px; overflow: none; height: 700px; margin: 0; position: absolute; top: 0; left: 0; }
.anythingFader .wrapper ul { width: 9999px; list-style: none; position: absolute; top: 0; left: 0; background-image:url(‘creampaper.png’); background-color: #ffffe9; margin: 0; }
.anythingFader ul li { display: block; float: left; padding: 0; height: 617px; width: 860px; margin: 0; }
.anythingFader .arrow { display: block; height: 200px; width: 67px; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingFader .forward { background-position: 0 0; right: -20px; }
.anythingFader .back { background-position: -67px 0; left: -20px; }
.anythingFader .forward:hover { background-position: 0 -200px; }
.anythingFader .back:hover { background-position: -67px -200px; }

thumbNav { position: absolute; top: 623px; right: 160px; text-align: center; }

thumbNav a { color: black; font: 14px Georgia; font-style: italic; font-weight: bold; text-decoration: none; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #66aaFF repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; }

thumbNav a:hover { background: #6f6; }

thumbNav a.cur { background: #7d8; }

start-stop { background: #FF8300; background-repeat: repeat-x; font: 14px Georgia; font-style: italic; font-weight: bold; color: black; text-decoration: none; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 90px; top: 623px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;

-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px;

}

start-stop .playing { background: red; }

start-stop:hover { background: #FF2000; }

/*
Prevents
*/
.anythingFader .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingFader .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }

Any advice would be greatly appreciated!!

[JewellDicy]

Are you getting some error message or it’s just that the panel is not visible?

[Mikhail]

Thanks JewellDicy for your reply, there was no error message, the extra panel/s simply were not showing – I solved this problem easily, I’m a little out of practise with coding: I simply had to extend the .anythingFader .wrapper ul max-width from 9999px and I guess it can go to… infinity, or close enough!!

[Mikhail]

*New issue with the anythingFader – I assume it is possible to put 2 different anythingFaders onto one page? I made an abortive attempt a couple of days ago…, do I need to duplicate the jquery.anythingfader.js and jquery.min.js files associated with the fader and customise them? I’m a little lost here (obviously I guess!)

[Mikhail]

Thanks for your input Mottie!

I’ll check your link out – these faders and sliders are brilliant on websites!

[Mikhail]

Okay, I just cannot work out how to get 2 anything sliders working on the same page?? Can someone please please help me?! I have the anythingSlider working a charm on a page, but I just don’t understand how to get 2 going – do I need to have 2 different ‘jquery.anythinslider.js’ files?

Any help would be hugely appreciated!!

Do I have to do something with this code from jquery.anythingslider.js:

// Figure out how many sliders are on the page for indexing base.runTimes = $('.anythingBase').length; // hash tag regex - fixes issue #432 base.regex = (o.hashTags) ? new RegExp('panel' + base.runTimes + '-(\d+)', 'i') : null; if (base.runTimes === 1) { base.makeActive(); } // make the first slider on the page active

**edit – I’ve seen that making the different sliders the same class will operate multiple sliders, but I want totally different css on the 2 sliders, the sliders are going to do different things, so I guess I need to give them different id’s such as: #slider & #slider2, but I’m missing something here, I can’t get them to work!

[Mikhail]

Hi again Mottie, thanks for your help – I am still just not getting it!! I feel like I am just totally missing something here altogether, I’m all at sea – I believe I have fairly ok skill with HTML and CSS, I learnt coding to make my site, but with Javascript I’m all at sea!!

I have this in the head of my Html page:

    <!-- Required -->
    <script>
$(function(){
 $('#slider1')
   .anythingSlider() // add any non-default options here
   .anythingSliderVideo(); // only add this if your slider includes supported videos (new v1.9)
});
</script>

<script>
$(function(){
 $('#slider2')
   .anythingSlider() // add any non-default options here
   .anythingSliderVideo(); // only add this if your slider includes supported videos (new v1.9)
});
</script>

**So obviously I have 2 sliders 1 & 2, I can get the top one to work – #slider1, but the bottom one no…

From my anythingslider.css:

/*****************************
  SET DEFAULT DIMENSIONS HERE
 *****************************/
/* change the ID & dimensions to match your slider */
#slider1{
    width: 891px;
    height: 620px;
    list-style: none;
    /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
    overflow-y: auto;
    overflow-x: hidden;
}

#slider2{
    width: 891px;
    height: 620px;
    list-style: none;
    /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
    overflow-y: auto;
    overflow-x: hidden;
}

*** I was able to get 2 identical sliders going no problem when I was calling them both by the same class, .slider, and that was great.

I don’t need a 2nd style sheet for the 2nd slider? And do I have to do something in the jquery.anythingslider.js file?

Thanks so much for your help!!

[Author]

Posts