Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    jQuery Glitch, Second Slide Appears Momentarily

    I have a several page website, in Dreamweaver, with four user-activated slides running under jQuery.

    When page changes are made, the next slide in the sequence momentarily flashes below the first, and then quickly disappears. Seems to happen mostly on the first viewing of each page.

    Can anyone please explain why this is happening? Is this perhaps a Firefox issue?

    Here is the code, from my HTML site-wide template. Many thanks.

    </head>
    <body>
    <div id="header">
    <div id="logo">
    <h1><a href="#">Wireless in Mullum?</a></h1>

    </div>
    <div id="menu">
    <ul>
    <li><a href="../index.html" class="first">Discussion</a></li>
    <li><a href="../community.html">Community</a></li>
    <li><a href="../media.html">Media</a></li>
    <li><a href="../science.html">Science</a></li>
    </ul>
    </div>
    <!-- end #menu -->
    </div>
    <!-- end #header -->
    <div id="wrapper">
    <!-- end #logo -->
    <div id="slideshow">
    <!-- start -->
    <div id="foobar">
    <div id="slides">
    <div class="viewer">
    <div class="reel">
    <div class="slide"><span>Title</span><img src="../images/slide_mullumbimby_aerial.jpg" alt="" width="1000" height="300" /></div>
    <div class="slide"><img src="../images/slide_antennae.jpg" alt="" width="960" height="335" /><span>Title</span> </div>>
    <div class="slide"><span>Title</span><img src="../images/slide_wireless_mesh.jpg" alt="" width="960" height="335" /></div>
    <div class="slide"><img src="../images/slide_wifi_maps.jpg" alt="" width="960" height="335" /><span>Title</span> </div>
    </div>
    </div>
    <div class="nav"><span><a href="#" class="previous">Previous</a></span> <span><a href="#" class="next">Next</a></span></div>
    </div>
    </div>
    <script type="text/javascript">

    $('#foobar').slidertron({
    viewerSelector: '.viewer',
    reelSelector: '.viewer .reel',
    slidesSelector: '.viewer .reel .slide',
    navPreviousSelector: '.previous',
    navNextSelector: '.next',
    navFirstSelector: '.first',
    navLastSelector: '.last'
    });

    </script>
    <!-- end -->

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,486
    Thanks
    6
    Thanked 981 Times in 954 Posts
    It is probably a CSS issue where the slides are not positioned absolutely. While one slide is fading out and the other is fading in they need to be positioned on top of each other, otherwise the cross-fade doesn’t work as intended.

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This is not an automated slide show. It is button activated by the viewer. And the second slide appears briefly below the first, not on top of it. IOW there is no fade.

    Any other suggestions?


  •  

    Tags for this Thread

    Posting Permissions

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