Welcome to TalkGraphics.com
Results 1 to 8 of 8
  1. #1
    Join Date
    Oct 2010
    Location
    UK
    Posts
    348

    Default Accordian slider for site with a lot of content

    Hello,

    I am working on a site which has a largish catalogue of stuff to sell. There isn't going to be a cart, but they want to show brief details of their stuff. Is there any way I can adapt a Xara widget to make a simple slider that drops down a paragraph and folds it up again when another heading is clicked. Like the Siderion(?) widget except I don't want a big photo.

    Could it be faked with layers? I can't imagine how.

    All suggestions gratefully appreciated.

    Ali

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,827

    Default Re: Accordian slider for site with a lot of content

    Ali, this approach needs you to create a main site page with an embedded website widget at say 640 px wide by 480 px tall.
    Next you would create a sub-website, just another Xara .xar/.web file that holds the catalogue pages.

    In the catalogue site, I would create a navbar of categories that are there to mouse over.
    Each category appears as a layer of the same nameand this has further buttons, shapes or linked items that link to the required catalogue page.
    This structure is set to repeat on each catalogue page.

    You then add your content and against each item link you set the transition effect to be Slide in from top.

    When you have checked the sub-site is all correct locally, you publish it (or export to a sub-folder but, for this, you'd have to kludge the widget code) so I'll assume you have published.
    You set the width and height in the widget exactly as the sub-site pages.

    Done.

    Acorn

  3. #3
    Join Date
    Oct 2010
    Location
    UK
    Posts
    348

    Default Re: Accordian slider for site with a lot of content

    Quote Originally Posted by Acorn View Post
    Ali, this approach needs you to create a main site page with an embedded website widget at say 640 px wide by 480 px tall.
    Next you would create a sub-website, just another Xara .xar/.web file that holds the catalogue pages.

    In the catalogue site, I would create a navbar of categories that are there to mouse over.
    Each category appears as a layer of the same nameand this has further buttons, shapes or linked items that link to the required catalogue page.
    This structure is set to repeat on each catalogue page.

    You then add your content and against each item link you set the transition effect to be Slide in from top.

    When you have checked the sub-site is all correct locally, you publish it (or export to a sub-folder but, for this, you'd have to kludge the widget code) so I'll assume you have published.
    You set the width and height in the widget exactly as the sub-site pages.

    Done.

    Acorn
    Hiya,

    Sorry for the delay in coming back to you. Most of the peeps here know I have an autistic son, who lives nearby and visits every other weekend. It takes all my concentration. I haven't been at my desk today. BUT thanks so much for this. How interesting. I can't actually envisage it at the moment, but when I have time I will experiment and see if I can get something working. I'm at a bit of a loss as to how to present this information otherwise. It's tons (probably about fifty) training courses that each have a long paragraph of blurb. It would be so neat if people could click the title and the info dropped down (like the accordian thing in Netobject Fusion). Otherwise it's going to have to be divided up artificially, or will be a verrrrry long page.

    Am also experimenting with your other suggestions re text etc.

    Thanks again, Acorn.

    Ali

  4. #4
    Join Date
    Oct 2010
    Location
    UK
    Posts
    348

    Default Re: Accordian slider for site with a lot of content

    Quote Originally Posted by Artyboots View Post
    Hiya,

    Sorry for the delay in coming back to you. Most of the peeps here know I have an autistic son, who lives nearby and visits every other weekend. It takes all my concentration. I haven't been at my desk today. BUT thanks so much for this. How interesting. I can't actually envisage it at the moment, but when I have time I will experiment and see if I can get something working. I'm at a bit of a loss as to how to present this information otherwise. It's tons (probably about fifty) training courses that each have a long paragraph of blurb. It would be so neat if people could click the title and the info dropped down (like the accordian thing in Netobject Fusion). Otherwise it's going to have to be divided up artificially, or will be a verrrrry long page.

    Am also experimenting with your other suggestions re text etc.

    Thanks again, Acorn.

    Ali
    I naively thought the Push tool could do something! LOL! I can't get it to push anything, let alone a load of content!

    A

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,827

    Default Re: Accordian slider for site with a lot of content

    Ali, here is a sample .web that has co-erced the widget code to look locally: Catalogue.web

    The trick here is that I changed the Placeholder
    Code:
    <iframe src="cat1.htm" width="640px" height="480px" frameborder="0" scrolling="no" name="catalogue_iframe" ><p>Your browser does not support iframes.</p></iframe>
    I managed 18 links on one page. Just clone the holding page twice and change the iframe src to cat19.htm and cat37.htm to get 54 catalogue pages. You need to create two other navbars to hold the next batches of the catalogue.

    The holding pages would have their own simpler navbar.

    This way allows you to embed all the catalogue pages in the one .web file, saving on sub-sites and sub-folders needing to be created.
    i only did it this way to make the presentation easier and the fact that you were not going to overload the site with large pictures.

    Acorn

    P.S. I have left the transition on the navbar for you to experiment with.
    I found Fade and the slide in or out Right to be the most entertaining.

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,827

    Default Re: Accordian slider for site with a lot of content

    Here's a demonstration of another approach: http://www.talkgraphics.com/showthre...lot-of-content.

    Acorn

  7. #7
    Join Date
    Oct 2010
    Location
    UK
    Posts
    348

    Default Re: Accordian slider for site with a lot of content

    Well, Acorn. All I can say is your a lot cleverer than I am!

    Thank you so much. I am going to play with that tomorrow.

    Ali

  8. #8
    Join Date
    Oct 2010
    Location
    UK
    Posts
    348

    Default Re: Accordian slider for site with a lot of content

    Quote Originally Posted by Artyboots View Post
    Well, Acorn. All I can say is your a lot cleverer than I am!

    Thank you so much. I am going to play with that tomorrow.

    Ali
    Hi Acorn,

    I practised with this, and found a similar suggestion and illustrative .xar on another Xara site, which was also very useful. If I had only a few topics, I would use this quick and neat method. But there are too many. I will have to think of something else.

    I keep thinking it might be a small thing to adapt the navbar tool to make accordian panels. After all, what is an accordian header but a nav bar title, and what is the small text box but an extra deep subtitle? I think these mad thoughts because I am not a coder - things like "throw in a little text wrapping and we're good to go". LOL! Having said that I once discovered an existing Adobe program could easily be adapted to do something completely different, that they had been working on for a very long time the traditional way, and it was adopted for a release. It was a hilarious short cut. So sometimes it is a good thing that I express my mad thoughts.

    I thank you again for taking quite a long time and all the trouble to help me.

    Ali

 

 

Tags for this Thread

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
  •