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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Cool Running a jQuery image slider within a jQuery accordion

    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:

    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!

  • #2
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • Users who have thanked venegal for this post:

    mkay (02-02-2011)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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:

    Code:
    	<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">
    	 	$(document).ready(function(){	
    			$("#slider").easySlider();
    		});	
    	</script> 
    	<script type="text/javascript" src="js/accordian.js"></script>
    This should ensure the slider is set up before it's hidden.

  • Users who have thanked SB65 for this post:

    mkay (02-02-2011)

  • #4
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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
    $(document).ready(function(){
    $("#slider").easySlider();
    });
    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.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I can't see any changes in your page. Have a look through the errors generated by the validator here.

    You also have

    Code:
    function mouseOutPortfolio()\
    in your javascript, which is throwing an error.

  • Users who have thanked SB65 for this post:

    mkay (02-03-2011)

  • #6
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    .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.

  • Users who have thanked venegal for this post:

    mkay (02-03-2011)

  • #8
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ohh, I'm sorry. Thanks!!!


  •  

    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
    •