jQuery Slideshow and Accordian menu

Posted on 2011-04-23
Last Modified: 2012-05-11
Hello.  I have this slideshow created and running off of my local desktop.  Having some bug issues and code questions though and was wondering if someone can help me out.

For reference, I'm working with this slide show called "JSiderNews Plugin" found here: can click on the DEMO button to try it out.  See the Features/Specs about the slide show.

I have a jquery accordian menu to the right of it and I'm not sure if the two are not meshing well together,

Here are the issues I'm having:

(1.)  When you advance to the next slide, the test video I have in place (on the first slide) should STOP PLAYING.  It seems to stop playing in Google Chrome and Safari, but not in Firefox or IE.  Plus, I have the slideshow on "auto play" as it should advance to the next slide automatically, yet I don't want it to advance if there's a video on slide one "until it finishes playing."
Secondly, after the very last slide plays, it should land back on slide 1 and STOP.  Where the user has to click whether or not they want the video to start playing.

Note: In the js folder I've attached I have a folder within called "original."  This is the original script.js file that came with the demo.  The modified one which has the video functions to stop, etc is the one I'm currently linking to.

(2) There seems to be somewhat of a layout issue as it looks ok in IE and FF, but in Chrome and Safari the slide show is off center and space surrounds it.

(3) The "navigator" at the top: In IE when I go to click on the second thumbnail it doesn't do anything, yet if I choose the third thumbnail and go back to the second it then kicks in and reacts to go to the next slide.  Not sure why it hangs like that. Plus the left and right navigation buttons don't do anything in this browser, yet it works in the other browsers. **It does work in IE in the demo that I downloaded and online at that site link I gave, yet not in my working example here...  so it must be something I'm doing wrong.  

(4) When I click on "TAB 4" at the right on the accordian menu, the "container" expands taller and I'm not sure why.  very noticable in FF, Safari and Chrome.  

(5.) When you open the page for the very first time, seems like the accordian menu expands all the way really fast until the slideshow loads and then it contracts itself correctly.  Do you know why and how I can prevent this?

Let me know if anyone is willing to help me with this issues.  I'd really appreciate it.
Question by:webgirl29
    LVL 42

    Expert Comment

    by:Rob Jurd, EE MVE
    to answer some of your questions

    (2) Add the float:right property for the accordian:
    <div class="container-a" style="float: right;">

    (4) see (2)

    (5) see (2)
    LVL 42

    Accepted Solution

    You're also using HTML5 only tags such as <video> and <source> when you've specified the doctype as xhtml

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    Join & Write a Comment

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    731 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now