how to use tiny scroller with accordion

Hi

i loved your accordion and working great  

now i have downloaded the tiny scroller, actually i want

to remove the browser scroller and use this tiny scroller

but when i added this tiny scroller, the accordion does not work,

and its sliding effect disable and show all the content.

please can you help me how can i use this script soo that

the accordion and tiny scroller works.

I have given the image sample so you can know how my webpage

looks.

Thanks
asked Apr 3, 2011 by anonymous

8 Answers

0 votes
That's odd are you getting an error message? A link would really help out.
answered Apr 3, 2011 by anonymous
0 votes
Do you have var TINY={} at the top of both? If you do that may be the issue. You just need it in the first JS file.
answered Apr 3, 2011 by anonymous
0 votes
Ok i have given the code below: I don't know much about the javascript if you can help in the below coding how should i add the code. [color="#FF0000"]The error is line 88 char 1 Error 'Tiny.Scroller' is null or not an object[/color] [color="#0000FF"]One more thing what should i do about the packed, because i have change the script to scrollscript, style to scrollscript and packed to scrollpacked.[/color] ============================================================= TinyScroller - JavaScript Scrollable Div
  • About

    • Nested One

      Donec elementum lobortis lorem. Sed aliquet lacus vitae nibh. Sed ullamcorper pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Nested Two

      Vestibulum blandit mauris elementum mauris.
    • Nested Three

      Morbi felis libero, porta non, sagittis ac, consectetur in, sem.
    This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. For more information visit leigeber.com.
  • Instructions

    To initialize an accordion use the following code: var accordion=new TINY.accordion.slider("accordion"); accordion.init("accordion","h3",false,0,"selected"); You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 5 parameters: the id of the accordion “ul”, the header element tag, whether the panels should be expandable independently (optional), the index of the initially expanded section (optional) and the class for the active header (optional).
  • Licensing & Support

    This script is provided as-is with no warranty or guarantee. It is available at no cost for any project, non-commercial or commercial. Paid support is available by clicking here

TinyScroller

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet mauris at sapien iaculis pulvinar. Morbi ut mi in felis fringilla semper. Cras sapien lorem, sodales mattis, pellentesque eu, luctus ac, ante. Curabitur egestas aliquet erat. Nunc accumsan augue egestas dolor. Pellentesque vitae mi. Suspendisse tincidunt elit vel tortor. Sed eu ligula sit amet mi rhoncus ultricies. Curabitur ut risus at lectus semper eleifend. Pellentesque lectus eros, dapibus in, accumsan sit amet, imperdiet eget, dolor. Curabitur et purus sit amet felis mattis aliquam. Etiam feugiat elementum urna. Vivamus iaculis commodo turpis. Donec suscipit, quam eget mollis sagittis, eros nunc feugiat felis, ut sagittis mauris elit a libero. Etiam sed erat.

Nullam vestibulum, justo a gravida vulputate, orci dui cursus tellus, dapibus vulputate nibh sem consectetur libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam placerat, massa eget dignissim tempor, arcu ipsum condimentum elit, nec ullamcorper felis ante ut justo. Maecenas iaculis purus vel risus. Vestibulum convallis interdum elit. Aliquam sed diam. Sed leo. Etiam sed erat. Nullam vestibulum, justo a gravida vulputate, orci dui cursus tellus, dapibus vulputate nibh sem consectetur libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam placerat, massa eget dignissim tempor, arcu ipsum condimentum elit, nec ullamcorper felis ante ut justo. Maecenas iaculis purus vel risus. Vestibulum convallis interdum elit. Aliquam sed diam. Sed leo.

answered Apr 3, 2011 by anonymous
0 votes
Really need a link to help you out so I don't have to recreate the entire scenario. If its private just shoot me a PM.
answered Apr 3, 2011 by anonymous
0 votes
Hello,

i am waiting for the reply  :(

Hi

you were rite there were to var TINY={}, so i removed it and, it works now,actually i have not put the website online yet so, i can't show you live

now i was working with css

i want to do is hide my browser scroller bar and use only the tinyscroll

i was playing around with the css but sometimes the scroller does not move up or down,

i want to put the Tinyscroll as my default browser scrollbar,

That means i want to hide my default Browser scrollbar

how can i fix the css for the tinyscroll

here is the css

[color="#0000FF"]#wrapper {width:100%; height:100%; margin:40px auto; background:#fff; border-top:4px solid #eee; border-left:4px solid #eee; padding:20px}

#scroll {position:relative; width:100%; height:100%; overflow:auto}

#scrollcontent {position:absolute; width:375px; z-index:200}

#scrollbar {float:right; position:relative; display:none; width:15px; height:200px; z-index:100; background:url(images/scroll-bg.gif)}

.scroller {position:absolute; top:0; width:15px; cursor:pointer; background-color:#ccc; background-image:url(images/scroll-arrows.gif); background-position:50% 50%; background-repeat:no-repeat}

.buttonclick {background-color:#bbb}

[/color]

---------------------------------------------------
answered Apr 3, 2011 by anonymous
0 votes
Do you have var TINY={} at the top of both? If you do that may be the issue. You just need it in the first JS file.

---------------------------------------------------

Which JS file...

 

i have put the var in packed.js & script.js

i have attached some images to show you

packedJS and an errorfile which show that

my scroller and accordion not work

[color="#FF0000"]before the accordion was working but not knw

The error now i am getting is

('Tiny.accordion.slider'is null or not an object)[/color]

what should i do
answered Apr 3, 2011 by anonymous
0 votes
Yes, it looks like you have var TINY={} twice as well as the T$ function twice. If that doesn't work an actual link would really help me get you a better answer.
answered Apr 3, 2011 by anonymous
0 votes
Yes, it looks like you have var TINY={} twice as well as the T$ function twice. If that doesn't work an actual link would really help me get you a better answer.

---------------------------------------------------

Hi

you were rite there were to var TINY={}, so i removed it and, it works now,actually i have not put the website online yet so, i can't show you live

now i was working with css

i want to do is hide my browser scroller bar and use only the tinyscroll

i was playing around with the css but sometimes the scroller does not move up or down,

i want to put the Tinyscroll as my default browser scrollbar,

That means i want to hide my default Browser scrollbar

how can i fix the css for the tinyscroll

here is the css

[color="#0000FF"]#wrapper {width:100%; height:100%; margin:40px auto; background:#fff; border-top:4px solid #eee; border-left:4px solid #eee; padding:20px}

#scroll {position:relative; width:100%; height:100%; overflow:auto}

#scrollcontent {position:absolute; width:375px; z-index:200}

#scrollbar {float:right; position:relative; display:none; width:15px; height:200px; z-index:100; background:url(images/scroll-bg.gif)}

.scroller {position:absolute; top:0; width:15px; cursor:pointer; background-color:#ccc; background-image:url(images/scroll-arrows.gif); background-position:50% 50%; background-repeat:no-repeat}

.buttonclick {background-color:#bbb}

[/color]
answered Apr 3, 2011 by anonymous
Web Analytics