Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member caigriffith's Avatar
    Join Date
    Sep 2010
    Posts
    3
    Member #
    23390
    Hi,
    I'm trying to get the basics sorted on a part of a new website..
    I have an image slider which is working perfect but i want to put it inside a toggle menu so it can be hidden and shown when the toggle button is clicked, but when i put the slider div inside the toggle menu the slider disappears..
    Any thoughts? Any help would be greatly appreciated..

    Cai.


    Heres my code:



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

    <script src="jquery1.4.2.js" type="text/javascript"></script>
    <script src="jquery_easing1.3.js" type="text/javascript"></script>
    <script src="slide_viewer1.2.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(window).bind("load", function() {
    $("div#gallery").slideView()
    });



    $(document).ready(function(){

    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide();

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $("h2.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle(" slow");
    });

    });

    </script>

    <style type="text/css">

    /*preload classes*/
    .svw {
    width: 50px;
    height: 20px;
    background: #fff;
    }
    .svw ul {position: relative; left: -999em;}
    /*
    /*core classes*/
    .stripViewer {
    position: relative;
    overflow: hidden;
    border: none;
    margin: 0 0 1px 0;
    }
    .stripViewer ul { /* this is your UL of images */
    margin: 0;
    padding: 0;
    position: relative;
    left: 0;
    top: 0;
    width: 1%;
    list-style-type: none;
    }

    .stripViewer ul li {
    float:left;
    }

    .stripTransmitter {
    overflow: auto;
    width: 1%;
    }
    .stripTransmitter ul {
    margin: 0;
    padding: 0;
    position: relative;
    list-style-type: none;
    }
    .stripTransmitter ul li{
    width: 20px;
    float:left;
    margin: 0 1px 1px 0;
    }
    .stripTransmitter a{
    display: none;
    }

    .stripTransmitter a:hover, a.current{
    background: #fff;
    color: #ff0000;
    }
    */

    /*toggle stuff*/


    h2.active {background-position: none;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
    .toggle_container {
    margin: none;
    padding: 0;
    border-top: none;
    background: none;
    overflow: hidden;
    font-size: none;
    clear: none;
    }


    </style>






    </head>

    <body>



    <h2 class="trigger"><a href="#"><img src="imgs/btn.jpg" width="300" height="100" /></a></h2>
    <div class="toggle_container">




    /* THIS IS THE DIV I WANT TO SHOW WHEN THE TOGGLE EXPANDS: */
    <div id="gallery" class="svw">

    <ul>
    <li><img alt="abc defrg thysu ooip jkifbtg fff" src="imgs/01.jpg" /></li>
    <li><img alt="abc defrg thysu ooip jkifbtg fff" src="imgs/02.jpg" /></li>
    <li><img alt="abc defrg thysu ooip jkifbtg fff" src="imgs/03.jpg" /></li>
    <li><img alt="abc defrg thysu ooip jkifbtg fff" src="imgs/04.jpg" /></li>

    </ul>
    </div>

    <*stuff here*>

    </div>


    </div>





    </body>
    </html>

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

open close toggle for text content

,

web toggle slider button

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:16 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com