Wink toolkit - Discussion

April 26, 2012 at 1:39 pm #link

cmichel

Using ascynpanels I can dynamically load pages (actually DOM elements, not full page, that I can manage in a separate .html file, which is fine) that will be agregated in the current DOM.
I need to have one of these “subpage” contain an accordion, so I can’t initialize it “onload” from the “root” page, as the div target does not exist until I access the “subpage”.
So question is, how can I proceed (i.e. execute the JS instructions to initalize my accordion contents in the “subpage”)?

April 26, 2012 at 2:02 pm #link

admin

Hi,

You can try to connect to the ‘_onSuccess’ method of your asyncpanel:

asyncPanels = new wink.plugins.AsyncPanels(properties);

wink.connect(asyncPanels, '_onSuccess', {context: myContext, method: 'doSomething'});

And then instantiate the accordion in the ‘doSomething’ method.

Jérôme

April 26, 2012 at 2:18 pm #link

keyclipse

Hi Jerome ,

Can you give me an example of combining scroller component with asyncpanel component. For instance in your tutorial airplane webapp. How would you make the presentation.html using scroller component for the content?

April 26, 2012 at 2:25 pm #link

cmichel

Thanks for this first answer, Jérôme.
So, then, how can have the “doSomething()” function only called when accessing a specific page URL (i.e. the one containing the accordion)?

April 26, 2012 at 2:35 pm #link

admin

@cmichel: Well, you can’t specify that but you can get the id of the page that you just loaded in the “doSomething” method:

try:

doSomething = function(result)
{
	console.log(result.params.id);
}

I agree, this is a rather dirty option, but if we wanted to make that better, we would have to add a functionnality to the AsyncPanels. If you’d like to do so, we could re-integrate it

@keyclipse: I don’t have time yet to build a full example, but i’ll try to take the time next week.

Jérôme

May 2, 2012 at 1:08 am #link

Laphroaig

Hi, mee too… i’m really interestend in the example please!

Thank you very much for this great tool!!

May 2, 2012 at 1:18 am #link

Laphroaig

WHat i’m trying to do is to mix test_scroller_6.html and test_scroller_2.html
i want to load an orizontal scroll page when the user click on the menu on the right… is it possible? Sorry but i’m new to wink (i always used jquery untill now) and i’m really impressed by your examples… can you help?

May 2, 2012 at 6:39 am #link

admin

@keyclipse: I put you an example right there: http://www.winktoolkit.org/download/asyncpanels_scroller.zip

@Laphroaig: Yes, this shouldn’t be a problem…

Jérôme

May 2, 2012 at 8:53 am #link

Laphroaig

Hi admin, i downloaded your example, but the scroller doesn’t seems to work for me in the browser (tryed firefox and chrome).

May 2, 2012 at 9:03 am #link

Laphroaig

sorry, i just refreshed the page and now is working, don’t know why

Is there an example to make what i said before, or a tutorial on how to mix components? Thank you again!

May 2, 2012 at 2:18 pm #link

admin

We don’t have this precise example… but maybe if you take a look at the “tweet and flick” webapp you’ll see how we mix components

May 2, 2012 at 2:41 pm #link

Laphroaig

Hi thank you for you reply
this is the result from my testing, only the right menu is scrolling, not the orizontal on the right: http://pastebin.com/sfYGK1wK

Can you help me please? maybe you can add this as test_scroller_7.html in your demo when working

Thank you again

May 2, 2012 at 4:02 pm #link

Laphroaig

If i remove the container -div class=”w_layout_box”- the two scrollers works… but are not positioned like they have to be… how i can solve this problem? sorry for my english!

This reply was modified 386 days ago by Laphroaig.

May 2, 2012 at 11:25 pm #link

Laphroaig

Update: after a lot of tests, it seems that if i just add this tag:

<div class="w_layout_box">

insite the test_scroller_2.html like this:

<div class="w_layout_box">
	<div id="wrapper">
		<div id="scrollContent"></div>
	</div>
</div>

the orizzontal scroller doesn’t work… what i’m missing?

This reply was modified 386 days ago by Laphroaig.
This reply was modified 386 days ago by Laphroaig.

May 3, 2012 at 6:26 am #link

admin

Hi,

The problem is that your content in the horizontal scroller is not large enough : it’s only the size of the wrapper , that’s why you don’t see anything. If you start from the “test_scroller_6.html” file, try adding this in the “init” method:

wink.byId('scrollContent23').style.width = '2800px';

And make sure you instantiate an horizontal scroller:

scroller2 = new wink.ui.layout.Scroller({
    target: "scrollContent23",
    direction: "x"
});

This should work.

Jérôme

discussion

Mixing asyncpanels and accordion (or any other ui widget)