Adding a text box below Anything Slider

I am using the Anything Slider on a website I am building. The Slider is being used to show videos but I am wanting to add a description text box below the slider that changes it's content depending on which tab is selected. This is my HTML file:

    <html>
<head>
    <title>Games</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../css/gamesPageStyle.css" />
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../CSS-Tricks-AnythingSlider/js/jquery.min.js"><\/script>')</script>
    <script src="../CSS-Tricks-AnythingSlider/js/swfobject.js"></script>
    <link rel="stylesheet" href="../CSS-Tricks-AnythingSlider/css/anythingslider.css">
    <script src="../CSS-Tricks-AnythingSlider/js/jquery.anythingslider.js"></script>
    <script src="../CSS-Tricks-AnythingSlider/js/jquery.anythingslider.video.js"></script>

</head>
<body>
        <div id="logoBlock" class= "grid_4">
            <h1>Logo</h1>
        </div>

            <div id="navigation" class="grid_8 omega">
                <ul>
                    <li>
                        <div id="egg">
                            <a  class= "home" href="../html/MichaelHomePage.html">Home</a>
                        </div>
                    </li>
                    <li>
                        <div id="egg2">
                            <a  class= "games" href="../html/gamesPage.html">Games</a>
                        </div>
                    </li>
                    <li>
                        <div id="egg3">
                            <a  class= "resume" href="../html/resumePage.html">Resume</a>
                        </div>
                    </li>
                    <li>
                        <div id="egg4">
                            <a  class= "contact" href="../html/contactPage.html">Contact</a>
                        </div>
                    </li>                   
                </ul>
            </div>  


    <script>
    // DOM Ready
    $(function(){
        $('#slider')
            .anythingSlider({
                resizeContents      : true,
                addWmodeToObject    : 'opaque',
                navigationFormatter : function(index, panel){ // Format navigation labels with text
                    return ['Welcome', 'Sky Catcher', 'Neon Night Ballz', 'Penguin Pushers', 'The Fishman Cometh', 'No More Bombs', 'Psychokinetic', 'Diamond Thief', 'Ranger Danger'] [index - 1];
                }
            })
            // Initialize video extension
            // see   https://developers.google.com/youtube/player_parameters?hl=en#Parameters for a list of   parameters
            .anythingSliderVideo({
                // video id prefix; suffix from    $.fn.anythingSliderVideo.videoIndex
                videoId : 'asvideo',
                // auto load YouTube api script
                youtubeAutoLoad : true,
                // see:     https://developers.google.com/youtube/player_parameters#Parameters
                youtubeParams: {
                    modestbranding : 1,
                    iv_load_policy : 3,
                    fs : 1
                }
            });
    });
</script>

    </head>

    <body>
    <br>

    <div id="section1" class="grid_9">
<!-- START AnythingSlider -->
<ul id="slider">

    <!-- Vimeo: iframe -->
    <li class="panel1"><iframe src="http://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>   </li>     
    <!-- Vimeo: Embeded -->
    <li class="panel2"><object width="940" height="529"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12280336&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12280336&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="940" height="529"></embed></object></li>

    <!-- YouTube: iframe -->
    <li class="panel3"><iframe title="YouTube video player" width="480" height="385" src="http://www.youtube.com/embed/1gOyrAVZHi4" frameborder="0" allowfullscreen></iframe></li>

    <!-- YouTube: Embedded -->
    <li class="panel4"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <!-- HTML5 Video -->
    <li class="panel5">
        <video width="320" height="240" controls="controls">
            <source src="demos/video/movie.ogg" type="video/ogg">
            <source src="demos/video/movie.mp4" type="video/mp4">
            <source src="demos/video/movie.webm" type="video/webm">
            Your browser does not support the video tag. But you could include an iframe/embeded video here.
        </video>
    </li>

    <li class="panel6"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <li class="panel7"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <li class="panel8"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <li class="panel9"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
</ul> <!-- END AnythingSlider -->
        </div>          
        <div id="contact" class="grid_5 omega">
            <p><span>Contact Information</span></p>
        </div>      
    <script src="../jquery.fitvids.js"></script>        
<script>
      // Target your .container, .wrapper, .post, etc.
      $("#game1").fitVids();
 </script>  
</body>

And this is the anythingslider.css file:

    /*
AnythingSlider v1.8+ Default theme
By Chris Coyier: http://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
   */
   /*****************************
   SET DEFAULT DIMENSIONS HERE
   *****************************/
   /* change the ID & dimensions to match your slider */
   #slider {
width: 700px;
height: 390px;
list-style: none;
/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled    */
overflow-y: auto;
overflow-x: hidden;
    }
    /******************
    SET STYLING HERE
    ******************
    =================================
    Default state (no keyboard focus)
    ==================================*/
    /* Overall Wrapper */
    .anythingSlider-default {
margin: 0 auto;
/* 45px right & left padding for the arrows, 28px @ bottom for navigation */
padding: 0 45px 28px 45px;
    }
    /* slider window - top & bottom borders, default state */
    .anythingSlider-default .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
    }
    /* Navigation buttons + start/stop button, default state */
    .anythingSlider-default .anythingControls a {
/* top shadow */
background: #777 url(../images/default.png) center -288px repeat-x;
color: #000;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
    }
    /* Make sure navigation text is visible */
    .anythingSlider-default .anythingControls a span {
visibility: visible;
    }
    /* Navigation current button, default state */
    .anythingSlider-default .anythingControls a.cur {
background: #888;
color: #000;
    }

    /* start-stop button, stopped, default state */
    .anythingSlider-default .anythingControls a.start-stop {
background-color: #040;
color: #ddd;
    }
    /* start-stop button, playing, default state */
    .anythingSlider-default .anythingControls a.start-stop.playing {
background-color: #800;
    }
    /* start-stop button, default hovered text color (when visible) */
    /* hide nav/start-stop background image shadow on hover - makes the button appear  to come forward */
   .anythingSlider-default .anythingControls a.start-stop:hover,
   .anythingSlider-default .anythingControls a.start-stop.hover,
   .anythingSlider-default .anythingControls a.start-stop .anythingControls ul a:hover   {
background-image: none;
color: #ddd;
    }
   /*
   =================================
   Active State (has keyboard focus)
   =================================
   */
   /* slider window - top & bottom borders, active state */
   .anythingSlider-default.activeSlider .anythingWindow {
border-color: #7C9127;
   }
  /* Navigation buttons, active state */
  .anythingSlider-default.activeSlider .anythingControls a {
/* background image = top shadow */
background-color: #7C9127;
  }
  /* Navigation current & hovered button, active state */
  .anythingSlider-default.activeSlider .anythingControls a.cur,
  .anythingSlider-default.activeSlider .anythingControls a:hover {
/* background image removed */
background: #7C9127;
   }

   /* start-stop button, stopped, active state */
   .anythingSlider-default.activeSlider .anythingControls a.start-stop {
background-color: #080;
color: #fff;
   }
   /* start-stop button, playing, active state */
   .anythingSlider-default.activeSlider .anythingControls a.start-stop.playing {
background-color: #d00;
color: #fff;
   }
   /* start-stop button, active slider hovered text color (when visible) */
   .anythingSlider-default.activeSlider .start-stop:hover,
   .anythingSlider-default.activeSlider .start-stop.hover {
color: #fff;
   }

   /************************
   NAVIGATION POSITIONING
   ************************/
   /* Navigation Arrows */
   .anythingSlider-default .arrow {
top: 50%;
position: absolute;
display: block;
   }

    .anythingSlider-default .arrow a {
display: block;
width: 45px;
height: 140px;
margin: -70px 0 0 0; /* half height of image */
text-align: center;
outline: 0;
background: url(../images/default.png) no-repeat;
   }

    /* back arrow */
    .anythingSlider-default .back { left: 0; }
    .anythingSlider-default .back a { background-position: left top; }
    .anythingSlider-default .back a:hover,
    .anythingSlider-default .back a.hover { background-position: left -140px; }
    /* forward arrow */
    .anythingSlider-default .forward { right: 0; }
    .anythingSlider-default .forward a { background-position: right top; }
    .anythingSlider-default .forward a:hover,
    .anythingSlider-default .forward a.hover { background-position: right -140px; }

    /* Navigation Links */
    .anythingSlider-default .anythingControls { outline: 0; display: none; }
    .anythingSlider-default .anythingControls ul { margin: 0; padding: 0; float: left;    }
    .anythingSlider-default .anythingControls ul li { display: inline; }
    .anythingSlider-default .anythingControls ul a {
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
text-align: center;
outline: 0;
    }

    /* navigationSize window */
    .anythingSlider-default .anythingControls .anythingNavWindow {
overflow: hidden;
float: left;
    }

    /* Autoplay Start/Stop button */
    .anythingSlider-default .anythingControls .start-stop {
padding: 2px 5px;
width: 40px;
text-align: center;
text-decoration: none;
float: right;
z-index: 100;
outline: 0;
    }

    /***********************
    IE8 AND OLDER STYLING
    ***********************/

    /* Navigation Arrows */
    .as-oldie .anythingSlider-default .arrow {
top: 30%;
    }
    .as-oldie .anythingSlider-default .arrow a {
margin: 0;
    }

    /* margin between nav buttons just looks better */
    .as-oldie .anythingSlider-default .anythingControls li {
margin-left: 3px;
    }

    /* When using the navigationSize option, the side margins need to be zero
None of the navigation panels look good in IE7 now =( */
    .as-oldie .anythingSlider-default .anythingControls a {
margin: 0;
    }
    .as-oldie .anythingSlider-default .anythingNavWindow {
margin: 0 2px;
    }
    .as-oldie .anythingSlider-default .anythingNavWindow li {
padding: 3px 0 0 0;
    }

    /***********************
    COMMON SLIDER STYLING
    ***********************/
    /* Overall Wrapper */
    .anythingSlider {
display: block;
overflow: visible !important;
position: relative;
    }
    /* anythingSlider viewport window */
    .anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
    }
    /* anythingSlider base (original element) */
    .anythingSlider .anythingBase {
background: transparent;
list-style: none;
position: absolute;
overflow: visible !important;
top: 0;
left: 0;
margin: 0;
padding: 0;
    }

    /* Navigation arrow text; indent moved to span inside "a", for IE7;
    apparently, a negative text-indent on an "a" link moves the link as well as the t   text */
    .anythingSlider .arrow span {
display: block;
visibility: hidden;
    }
    /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50);  */
    .anythingSlider .arrow.disabled {
display: none;
    }
    /* all panels inside the slider; horizontal mode */
    .anythingSlider .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
padding: 0;
margin: 0;
    }
    /* vertical mode */
    .anythingSlider .vertical .panel {
float: none;
    }
    /* fade mode */
    .anythingSlider .fade .panel {
float: none;
position: absolute;
top: 0;
left: 0;
z-index: 0;
    }
    /* fade mode active page - visible & on top */
    .anythingSlider .fade .activePage {
z-index: 1;
    }

    /***********************
    RTL STYLING
    ***********************/
    /* slider autoplay right-to-left, reverse order of nav links to look better */
    .anythingSlider.rtl .anythingWindow {
direction: ltr;
unicode-bidi: bidi-override;
    }
    .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to   left */
    .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of   nav links */
    .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button -  in case you want to switch sides */

    /* probably not necessary, but added just in case */
    .anythingSlider,
    .anythingSlider .anythingWindow,
    .anythingSlider .anythingControls ul a,
    .anythingSlider .arrow a,
    .anythingSlider .start-stop {
transition-duration: 0s;
-o-transition-duration: 0s;
-moz-transition-duration: 0s;
-webkit-transition-duration: 0s;
    }

If anyone has any advice on how to add a description text box below the slider that corresponds with whichever tab is selected, I would really appreciate it.

Thanks!

Answers:

Answer

So, I don't think you can just add something - "below" the slider because it would be outside of it's scope, but rather --- inside the slider at the bottom.

This is less about the slider and more just a CSS question. Whatever you put in the list item with slide. Have you tried putting a <p>test test test... </p> in there?

Although I love Chris Coyier... even he would admit that the anything slider is too robust for most projects. You may want to list your needs... and there is probably another slider that is lighter and easier to work with.

<li class="panel1">
    <iframe src="http://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
    <div class="your-thing">Hello.... can you see me... </div>
</li>

Put something in like this and see what happens. Then you just style .your-thing ---

Answer

Check out this demo. It can be found with many other demos on the home wiki page under "Demos":

HTML

<ul id="slider">

    <li>
        <img src="http://placekitten.com/300/200" alt="" />
        <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet scelerisque nisi a feugiat. Praesent mollis, mauris adipiscing tempus ultrices, justo libero pellentesque nibh, ut rutrum ipsum arcu eu mauris.</div>
    </li>

    <li>
        <img src="http://placehold.it/300x200" alt="" />
        <div class="caption">Phasellus arcu libero, posuere vitae iaculis id, lobortis ut dui. Morbi pulvinar vestibulum quam, ac blandit orci ultricies suscipit. Pellentesque eu metus ut ligula molestie accumsan non vel neque.</div>
    </li>

    <li>
        <img src="http://ipsumimage.appspot.com/300x200.png" alt="" />
        <div class="caption">Integer neque leo, imperdiet quis mollis ac, dictum et massa. Nam viverra blandit rhoncus. Phasellus ultricies ornare sapien id condimentum. Nulla vestibulum dolor nec sapien feugiat dapibus.</div>
    </li>

    <li>
        <img src="http://lorempixel.com/300/200" alt="" />
        <div class="caption">Curabitur sapien urna, scelerisque at vehicula et, rutrum sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</div>
    </li>

</ul>

<div id="current-caption"></div>

Script

var updateCaption = function(slider){
    var cap = slider.$currentPage.find('.caption').html();
    $('#current-caption')
        .html(cap)
        .fadeIn(200);
};

$('#slider').anythingSlider({

    // *********** Callbacks ***********
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) { updateCaption(slider); },

    // Callback before slide animates
    onSlideBegin: function(e, slider) {
        $('#current-caption').fadeOut(200);
    },

    // Callback when slide completes - no event variable!
    onSlideComplete: function(slider) { updateCaption(slider); }

});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.