View Full Version : jQuery Running a jQuery image slider within a jQuery accordion

02-02-2011, 06:59 PM
I am trying to run a jQuery image slider inside of an accordion slider. When I attempt to place the image slider inside of the accordion it does not work. I am running into several issues. I have a very basic understanding of Javascript but from what I am reading these issues are kind of common.

Here are my issues:
1. For some reason slider div is inheriting a element style of height 0, width 0 even though it is specified in two places to be height 500, width 700

2. On top of the images not appearing when I go into my Firebug extension and turn off the element style of 0,0 the images appear but the javascript doesn't work.

I read somewhere to try calling jQuery.noConflict(); but I could not get that to work either.

You can view the site here: http://michellekaybrannan.com/Working/accordian.html

To see where the image slider has been put you must click on portfolio then on Burt's Bees as shown here: http://michellekaybrannan.com/Working/site.png

The first two <script> tags are calling the accordion function while the next three are suppose to be calling the image slider.

I will appreciate any help, as I am trying to learn jQuery I will appreciate any extra explanations that you would like to include. Thanks!

02-02-2011, 07:36 PM
jQuery.noConflict has nothing to do with your situation. You only need it when you include another framework that also uses "$" for its global object.

The first step to get your code working would be getting rid of obvious errors. Make sure you have the script panel activated in your Firebug. There's at least one obvious syntax error in there, which will halt script execution. Getting rid of obvious errors also includes validating your HTML.

And, please don't use <font> tags. This doesn't have much to do with the problem at hand, I just noticed them while browsing your code. They have been deprecated for over 10 years, and are utterly obsolete by now.

As for the missing height and width of the slider: This isn't inherited, as your Firebug screenshot tells you (its source is element.style instead of a CSS rule), but set by Javascript. I could imagine that the plugin you use sets those dimensions, so the slider perfectly accomodates its content and since the images you put in there can't be found under their respective URLs (another thing you have to check with Firebug (in the network tab)), they don't have a size.

That's all just guesswork, though. Fix up your code so there are no validation, Javascript or HTTP errors, and we'll see what's really causing your problem.

02-02-2011, 08:20 PM
Agree with venegal about the validation errors.

Your problem, though, I think is coming from the accordion js, which is running before the slider js, and hiding the images you want to use in the slider. Thus, they have zero height.

Once you've fixed the other problems, try moving the accordion js to after the slider:

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
<script type="text/javascript" src="js/accordian.js"></script>

This should ensure the slider is set up before it's hidden.

02-02-2011, 08:50 PM
Thanks, I now see where it was getting the height, width 0 from and I have fixed that issue. I attempted to move the accordian.js below the other scripts but that did not work. I have tried placing the
into so many different places and every time I get a different result.

I really appreciate that you guys have pointed out that there are errors, but I am very new to using javascript and I a obviously overlooking these errors.

02-03-2011, 08:39 AM
I can't see any changes in your page. Have a look through the errors generated by the validator here (http://validator.w3.org/check?uri=http%3A%2F%2Fmichellekaybrannan.com%2FWorking%2Faccordian.html&charset=%28detect+automatically%29&doctype=Inline&group=0).

You also have

function mouseOutPortfolio()\

in your javascript, which is throwing an error.

02-03-2011, 05:41 PM
Sorry, I guess I did not upload my corrections. I now have the slider and the accordion running simultaneously!

Now my main issue is that the next button is not completing showing up. I do not know what it is getting cut off. I have it set up to read as 30px wide, but for some reason it is being cut off.

Do you know why?

02-03-2011, 06:18 PM
.port-content has overflow: hidden, and #nextbtn has left: 770px, which are both contributing to the button being cut off.

But this is no longer a frameworks question, so if you still have problems with your CSS, please ask in the appropriate forum.

02-03-2011, 07:04 PM
Ohh, I'm sorry. Thanks!!!