[jQuery] Tabbed Slide probleem - Softwareontwikkeling

vrijdag 6 juni 2008 15:14

Acties:

Topicstarter

Omdat ik niet zeker weet of het in het Javascript topic thuis hoort maak ik er maar een eigen topic voor.

Ik ben nieuw met jQuery, JS e.d. Ik probeer nu voor een klant een slider in te bouwen zodat een tekst in 4 talen kan worden weergegeven.

Het script dat ik gebruik komt van http://boedesign.com/2008/03/05/wiggleslide-for-jquery/.

Mijn locatie:
http://tinyurl.com/67te48 (IE6 debuggen komt later)

Mijn css betreffende dit stuk:

Cascading Stylesheet:

.cont {
    width:520px;
    overflow:hidden;
    height:170px; /* you need to set a height */
    border:1px solid #666;
    z-index:1000;
    position:relative;
    }
    
.invis {
    position:absolute;
    left:0;
    /* width is set through java */
    }
    
.slider-item {
    float:left;
    display:block;
    width:500px;
    padding:10px;
    height:150px;
    background:#eee;
    overflow:hidden;
    }

de <HEAD>

HTML:

   <script type="text/javascript" src="klanten/wordpress/wp-content/themes/cm/js/jquery.js"></script>
<script type="text/javascript" src="klanten/wordpress/wp-content/themes/cm/js/wiggleslide.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $.wiggleSlide({
            sliderNav: '#slider-nav',
            sliderClickLink: 'a',
            hiddenContainer: '#invis-cont',
            sliderItemClassName: 'slider-item',
            swingSpeed: "medium",
            permalinking: true,
            wiggle: true
        });
});
</script>

</head>

en waar het om gaat:

HTML:

                <div id="slider-nav">
                <ul>
                    <li class="engels"><a href="#" id="engels">Engels</a></li>
                    <li class="nederlands"><a href="#" id="nederlands">Nederlands</a></li>
                    <li class="frans"><a href="#" id="frans">Frans</a></li>
                    <li class="spaans"><a href="#" id="spaans">Spaans</a></li>
                </ul>

                </div><!-- // slidernav -->
            </div><!-- // articleheader -->

            <img src="klanten/wordpress/wp-content/themes/cm/images/martengroot.png" alt="" width="254" height="199" class="imgfloatright" />
            <div class="cont">
                <div id="invis-cont" class="invis">
                    
                    <div id="slide-engels" class="slider-item">engels</div>
                    <div id="slide-nederlands" class="slider-item">nederlands</div>
                    <div id="slide-frans" class="slider-item">frans</div>
                    <div id="slide-spaans" class="slider-item">spaans</div>

                    <div style="clear:both;"></div>

                </div> <!-- // invis-cont -->
            
            </div><!-- // cont -->

        </div><!-- // content -->

vrijdag 6 juni 2008 15:18

Acties:

Bozozo

Your ad here?

Wat is precies het probleem? Wat heb je zelf al geprobeerd om het op te lossen?

TabCinema : NiftySplit

vrijdag 6 juni 2008 15:21

Acties:

Ewald !

Topicstarter

Het is al opgelost, ik kon waarschijnlijk geen a in een li zetten.
Wat niet werkte: de container waar alle berichten in moesten komen had totaal geen effecten gekregen, en dus werkte het simpelweg niet.