View Full Version : jQuery Running a jQuery image slider within a jQuery accordion
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
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.
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:
This should ensure the slider is set up before it's hidden.
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 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
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.
Ohh, I'm sorry. Thanks!!!
Powered by vBulletin® Version 4.2.2 Copyright © 2015 vBulletin Solutions, Inc. All rights reserved.