SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing graphics on this AJAX Accordion?

    Hi,

    I have the following Accordion that I found online:

    http://www.farawaytrains.co.uk/js/index.html

    I was wondering if there was an easy way of using different graphics in place of each 'blade' graphic that is currently used. I looked through the JS, but am worried/unsure that I may have to create different 'handle' instances for the different colours.

    Basically, want to have something like the attached:




    Many thanks for any help.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    From what I see it should be easy to use a sliding doors technique from css to achieve what you're after. You shouldn't even need to touch the javascript.

    The people in the css forum should be able to easily help you there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul! Thanks for the reply.

    The only issue is changing the graphics from the blade, to my own (coloured) ones.

    Centauri @CSS forum helped a million with his advice and code, but unfortunately because I'm using different graphics, I may need a little help with my accordion.

    The original is here:
    http://www.portalzine.de/index?/Hori...cordion--print and I see they have an example with different graphics(the 'globe' one).
    I'm just not sure how to implement it, into my solution.

    Any takers?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    I suspect that you css or javascript changes are required at all. That it's all driven by the html content.

    Check this out. This code will provide a fully working example:

    Code javascript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <head> 
    <base href="http://www.farawaytrains.co.uk/js/index.html">
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
    <script type="text/javascript" src="lib/jquery.js"></script> 
    <script type="text/javascript" src="lib/ifx.js"></script> 
    <script type="text/javascript" src="lib/easing.js"></script> 
    <script type="text/javascript" src="lib/jquery.hrzAccordion.js"></script> 
    <script type="text/javascript" src="lib/main.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 
     
    <title>Jquery - Horizontal Accordion</title> 
    </head> 
    <body> 
     
    <h4># This accordion uses custom handle content images and handles are aligned to the right.</h4> 
    <ul class="test3"> 
      <li><div class="handle3"><img src='http://www.portalzine.de/fx/fxassets/wizard_assets/fxStatic/images/Projects/Horizontal_Accordion/images/com_01.gif'></div> 
        <h3>Content 1</h3> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br> 
          <br> 
          Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p> 
      </li> 
      <li><div class="handle3"><img src='http://www.portalzine.de/fx/fxassets/wizard_assets/fxStatic/images/Projects/Horizontal_Accordion/images/com_02.gif'></div> 
        <h3>Content 2</h3> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br> 
          <br> 
          Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p> 
      </li> 
      <li><div class="handle3"><img src='http://www.portalzine.de/fx/fxassets/wizard_assets/fxStatic/images/Projects/Horizontal_Accordion/images/com_03.gif'></div> 
        <h3>Content 3</h3> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br> 
          <br> 
          Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p> 
      </li> 
      <li><div class="handle3"><img src='http://www.portalzine.de/fx/fxassets/wizard_assets/fxStatic/images/Projects/Horizontal_Accordion/images/com_04.gif'></div> 
        <h3>Content 4</h3> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br> 
          <br> 
          Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p> 
      </li> 
      <li><div class="handle3"><img src='http://www.portalzine.de/fx/fxassets/wizard_assets/fxStatic/images/Projects/Horizontal_Accordion/images/com_05.gif'></div> 
        <h3>Content 5</h3> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br> 
          <br> 
          Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p> 
      </li> 
    </ul>
     
    </body> 
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!
    Thanks for the reply and your help.

    I've added it to: http://www.farawaytrains.co.uk/js/test.html but it doesn't work *exactly* right.

    I need it so all graphics are aligned to the left(like the attached image), but when the blue graphic is selected, it gets shunted to the right, and so on.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Look at the javascript that is used with the example.

    Code javascript:
    $(document).ready(function() {
    	$(".test").hrzAccordion();
    	$(".test2").hrzAccordion({
    		handlePosition     : "right",
    		openOnLoad         : 5
    	});
    	$(".test3").hrzAccordion({
    		containerClass     : "hrzContainer3",
    		listItemClass      : "listItem3",					
    		contentStartClass  : "contentStart3",
    		contentEndClass    : "contentEnd3",
    		contentWrapper     : "contentWrapper3",
    		contentInnerWrapper: "contentInnerWrapper3",
    		handleClass        : "handle3",
    		handleClassOver    : "handleOver3",
    		handleClassSelected: "handleSelected3",
    		customHandleClass  : "custom"
    	});
    });

    Set the handlePosition property in test3

    Code:
    $(".test3").hrzAccordion({
    	containerClass     : "hrzContainer3",
    	listItemClass      : "listItem3",					
    	contentStartClass  : "contentStart3",
    	contentEndClass    : "contentEnd3",
    	contentWrapper     : "contentWrapper3",
    	contentInnerWrapper: "contentInnerWrapper3",
    	handleClass        : "handle3",
    	handleClassOver    : "handleOver3",
    	handleClassSelected: "handleSelected3",
    	customHandleClass  : "custom",
    	handlePosition     : "left"
    });
    See if you can set the openOnLoad parameter for test3
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    > http://www.farawaytrains.co.uk/js/test.html

    Many thanks for your help.

    Only slight issue I guess is that 'Content 5' has a graphic to the right. I may have to speak to the designer to see if he is OK with making that the blue one.


    Thanks again.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Look at your script code. Change the word "right" to "left"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    It works great. Seem to be having odd issues in FireFox, but I think I just need to reboot it
    Only thing was having the graphic to the right on 'Content 5'. But there's not much I can do about this. I can't put it left.


    Many thanks once more.


Bookmarks

Posting Permissions

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