Sie sind nicht angemeldet.

scrollarea overflow detection and scroll to click

Zephyr

Profi

  • »Zephyr« ist der Autor dieses Themas

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

1

Montag, 13. August 2012, 00:45

scrollarea overflow detection and scroll to click

Hi,

given this:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13

<layer name="thumbs" keep="true" type="container" align="leftbottom" width="500" maskchildren="true" height="86" bgcolor="0x000000" bgalpha="0.3">
<layer name="scrollarea" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" align="center" width="1000" height="86" direction="h" onloaded="setcenter(0,0);">
<layer name="thumb1" url="thumb1.jpg" align="left" x="10" onclick="loadscene(pano1,null,MERGE,BLEND(0.5));"/>
<layer name="thumb2" url="thumb2.jpg" align="left" x="120" onclick="loadscene(pano2,null,MERGE,BLEND(0.5));"/>
<layer name="thumb3" url="thumb3.jpg" align="left" x="230" onclick="loadscene(pano3,null,MERGE,BLEND(0.5));"/>
<layer name="thumb4" url="thumb4.jpg" align="left" x="340" onclick="loadscene(pano4,null,MERGE,BLEND(0.5));"/>
<layer name="thumb5" url="thumb5.jpg" align="left" x="450" onclick="loadscene(pano5,null,MERGE,BLEND(0.5));"/>
<layer name="thumb6" url="thumb6.jpg" align="left" x="560" onclick="loadscene(pano6,null,MERGE,BLEND(0.5));"/>
<layer name="thumb7" url="thumb7.jpg" align="left" x="670" onclick="loadscene(pano7,null,MERGE,BLEND(0.5));"/>
<layer name="thumb8" url="thumb8.jpg" align="left" x="780" onclick="loadscene(pano8,null,MERGE,BLEND(0.5));"/>
<layer name="thumb9" url="thumb9.jpg" align="left" x="890" onclick="loadscene(pano9,null,MERGE,BLEND(0.5));"/>
</layer>
</layer>


1) A parent of 500px wide (or 100% but with a onresize event) and a scrollarea of a 1000px. How could you show left/right or top/down arrows to scroll the area with a mousedown.
2) How would you move the area, just alter the x? or apply every inc(1) to scrolltocenter

3rd question: How can you center on the thumbnail the user clicked. I tried onclick=" layer[scrollarea].scrolltocenter(x,0); " on the thumbnail, but it just scrolled back to the start Solved this, had to do get(x)

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

  • Nachricht senden

2

Montag, 13. August 2012, 12:47

I have not updated yet but this was the first thing that I asked myself after seeing some of the first Demos made with the new scroll thumbs.

Hans

DorinDXN

Schüler

Beiträge: 113

Wohnort: Timisoara, Romania

  • Nachricht senden

3

Montag, 13. August 2012, 13:11

At least, if there is thumb overflow left or right to have the selected/current thumb centered.



cheers,

Dorin

Zephyr

Profi

  • »Zephyr« ist der Autor dieses Themas

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

4

Montag, 13. August 2012, 14:54

Zitat von »DorinDXN«

At least, if there is thumb overflow left or right to have the selected/current thumb centered.



cheers,

Dorin


you can do this by setting the scrollarea align to center and then add a onclick="layer[scrollarea].scrolltocenter(get(x), get(y))" to the thumbnail. Clicking the thumbnail, will then scroll the area so the clicked thumbnail is centered.

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

5

Montag, 13. August 2012, 18:48

Hi,

Zitat von »Zephyr«

1) A parent of 500px wide (or 100% but with a onresize event) and a scrollarea of a 1000px. How could you show left/right or top/down arrows to scroll the area with a mousedown.
I will try to provide an example with buttons for scrolling in the next release.


Zitat von »Zephyr«

2) How would you move the area, just alter the x? or apply every inc(1) to scrolltocenter
Yes, the area can be moved by modifying the x, y settings (set or tween) or by using the 'setcenter' or 'scrolltocenter' actions.

Best regards,
Klaus

rbudnikas

Fortgeschrittener

Beiträge: 148

  • Nachricht senden

6

Dienstag, 25. September 2012, 19:08

ScrollArea confusion

Hello Everyone,

I've been building a content slider using the scrollarea plugin. Although I have come up with something which you can see here www.eyecandyvi.com/scroll/block.html I am experiencing one very strange issue and hopefully one solvable problem. aside from all the programming logic that could clean up the action I think I'm 90% there.

1.) I do my development on an iMac and when I test on a PC things don't work the same. For example if you click on the learn more button on a PC the close x and even the container holding the text content are not aligned. If I change it on the PC then it isn't aligned properly on the mac. Both using Firefox.

2.) more than two slides on the content slider creates an obvious problem. when you swipe on the image, it slides to the left and overshoots the center. I've been able to set it up with arrows but would like it to stop with the swipe action. I've tried to understand the examples presented in this thread but I may be missing something obvious. If this is not possible then is there a way to prevent the swipe action?

I've also reviewed the scrollbox example included in Klaus' package. I encounter the same problems I'm experiencing in number 1.

Hopefully someone can help.

Thanks,

Robert

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

<krpano version="1.0.8.15" title="" onstart="">

	<include url="skin/vtourskin.xml" />
	<include url="skin/default_black/core.xml" />

	<!-- use a grid preview pano as background -->
	<preview type="grid(cube,16,16,512,0xCCCCCC,0xF6F6F6,0x999999);" details="16" />
	
	<hotspot name="info_01"
		ath="0.0" atv="0.0"
		zorder="10000"
		scale=".75"
		style="_hotspot_ani"
		icon_type="info" 
		onclick="action(open_st);set(layer[frame].visible,true);tween(layer[frame].alpha,1,2);"
	/>	
				
		
		<!--********** Container Holding ScrollArea, Images and Buttons **********-->
		<layer name="frame" url="%CURRENTXML%/skin/win_bg.png" align="center" x="0" y="-15" width="699" height="370" zorder="10001" visible="false" alpha="0">
			<layer name="frame_close_01" url="%CURRENTXML%/skin/skin.png" align="righttop" x="-14" y="-13" zorder="10001" crop="466|0|34|30" onclick="tween(layer[frame].alpha,0,.3,default,wait);action(close_st);set(layer[frame].visible,false);" />
				<layer name="container" keep="true" type="container" align="center" y="0" width="675" height="346" zorder="10000" bgcolor="0xFFFFFF" bgalpha="0">
					<layer name="scrollarea" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" align="center" width="2065" height="359" direction="h" onloaded="setcenter(0,0);">
			
		<layer name="image_01" url="%CURRENTXML%/images/exterior1.png" align="left" x="0" zorder="10006" onclick=""/>
			<layer name="next_01" url="%CURRENTXML%/images/next.png" align="left" x="630" visible="true" alpha=".5" zorder="10007" scale=".75" onover="tween(layer[next_01].alpha,1)" onout="tween(layer[next_01].alpha,.5)" onclick="tween(layer[scrollarea].x, 0, distance(200,0.3));" />
				<layer name="text_01" url="%CURRENTXML%/images/learnmore.png" align="leftbottom" x="0" y="30" width="100" height="50" zorder="10007" alpha=".5" onover="tween(layer[text_01].alpha,1)" onout="tween(layer[text_01].alpha,.5)" onclick="tween(layer[text_01].alpha,0,.3);tween(layer[text_01].x,-200,.5); tween(layer[cc_01].y,-3)" />
						
														<!--********** Container Holding Content **********-->
					<layer name="cc_01" keep="true" type="container" align="leftbottom" x="0" y="-120" width="675" height="50" zorder="10007" bgcolor="0x000000" visible="true">
						<layer name="content_01" url="%CURRENTXML%/plugins/textfield.swf" align="leftbottom" x="0" y="10" width="675" height="50" backgroundcolor="0x000000" backgroundalpha=".5" html="data:test_text" css="data:test_css" selectable="true" background="true" enabled="true"
       handcursor="true" autosize="center" fixlimits="true" zorder="10007" onclick="" />
       						<layer name="close_01" url="%CURRENTXML%/skin/skin.png" align="righttop" x="0" y="-55" crop="466|0|34|30" visible="true" alpha=".8" zorder="10008" scale=".75"  onover="tween(layer[close_01].alpha,1)" onout="tween(layer[close_01].alpha,.5)" onclick="tween(layer[cc_01].y,-120,);tween(layer[text_01].x,0,1,default, wait);tween(layer[text_01].alpha,1,.5,default, wait);" />
					</layer>
				
		<layer name="image_02" url="%CURRENTXML%/images/exterior1.png" align="left" x="695" zorder="10003" onclick=""/>
			<layer name="previous_02" url="%CURRENTXML%/images/previous.png" align="center" x="-310" visible="true" alpha=".5" zorder="10004" scale=".75" onover="tween(layer[previous_02].alpha,1)" onout="tween(layer[previous_02].alpha,.5)" onclick="tween(layer[scrollarea].x, 695, distance(200,0.3));" />											<layer name="next_02" url="%CURRENTXML%/images/next.png" align="center" x="310" visible="true" alpha=".5" zorder="10004" scale=".75" onover="tween(layer[next_02].alpha,1)" onout="tween(layer[next_02].alpha,.5)" onclick="tween(layer[scrollarea].x, -695, distance(200,0.3));" />
					<layer name="text_02" url="%CURRENTXML%/images/learnmore.png" align="leftbottom" x="695" y="30" width="100" height="50" zorder="10004" alpha=".5" onover="tween(layer[text_02].alpha,1)" onout="tween(layer[text_02].alpha,.5)" onclick="tween(layer[text_02].alpha,0,.3);tween(layer[text_02].x,495,.5); tween(layer[cc_02].y,-3)"/>
       						
       						<!--********** Container Holding Content **********-->
							<layer name="cc_02" keep="true" type="container" align="leftbottom" x="695" y="-120" width="675" height="50" zorder="10004" bgcolor="0x000000" visible="true">
								<layer name="content_02" url="%CURRENTXML%/plugins/textfield.swf" align="leftbottom" x="0" y="10" width="675" height="50" backgroundcolor="0x000000" backgroundalpha=".5" html="data:test_text" css="data:test_css" selectable="true" background="true" enabled="true"
       handcursor="true" autosize="center" fixlimits="true" zorder="10004" onclick="" />
       								<layer name="close_02" url="%CURRENTXML%/skin/skin.png" align="righttop" x="0" y="-55" crop="466|0|34|30" visible="true" alpha=".8" zorder="10008" scale=".75"  onover="tween(layer[close_02].alpha,1)" onout="tween(layer[close_02].alpha,.5)" onclick="tween(layer[cc_02].y,-120);tween(layer[text_02].x,695,1,default,wait);tween(layer[text_02].alpha,1,.5,default, wait);" />
				</layer>
       
       			
       			<layer name="image_03" url="%CURRENTXML%/images/exterior1.png" align="left" x="1390" zorder="10001" onclick=""/>
       				<layer name="previous_03" url="%CURRENTXML%/images/previous.png" align="right" x="625" visible="true" alpha=".5" zorder="10004" scale=".75" onover="tween(layer[previous_03].alpha,1)" onout="tween(layer[previous_03].alpha,.5)" onclick="tween(layer[scrollarea].x, 0, distance(200,0.3));" />
						<layer name="text_03" url="%CURRENTXML%/images/learnmore.png" align="leftbottom" x="1390" y="30" width="100" height="50" zorder="10002" alpha=".5" onover="tween(layer[text_03].alpha,1)" onout="tween(layer[text_03].alpha,.5)" onclick="tween(layer[text_03].alpha,0,.3);tween(layer[text_03].x,1190,.5); tween(layer[cc_03].y,-3)"/>
       	   					
       	   					<!--********** Container Holding Content **********-->
							<layer name="cc_03" keep="true" type="container" align="leftbottom" x="1390" y="-120" width="675" height="50" zorder="10002" bgcolor="0x000000" visible="true">
								<layer name="content_03" url="%CURRENTXML%/plugins/textfield.swf" align="leftbottom" x="0" y="10" width="675" height="50" backgroundcolor="0x000000" backgroundalpha=".5" html="data:test_text" css="data:test_css" selectable="true" background="true" enabled="true"
       handcursor="true" autosize="center" fixlimits="true" zorder="10002" onclick="" />
       								<layer name="close_03" url="%CURRENTXML%/skin/skin.png" align="righttop" x="0" y="-55" crop="466|0|34|30" visible="true" alpha=".8" zorder="10008" scale=".75"  onover="tween(layer[close_03].alpha,1)" onout="tween(layer[close_03].alpha,.5)" onclick="tween(layer[cc_03].y,-120);tween(layer[text_03].x,1390,1,default,wait);tween(layer[text_03].alpha,1,.5,default,wait);" />
					</layer>						 
				</layer>
			</layer>
		</layer>
		
	
	<data name="test_text">
		<p style="color:#ffffff; font-family:Times; font-size:14px; line-height:16px; padding:0px; margin:0px; margin-bottom:10px; text-align:left; text-shadow: #000000 0px 1px 0px">
			<b>Image_Title</b>	
		</p>
		<p style="color:#ffffff; font-family:Times; font-size:12px; line-height:16px; padding:0px; margin:0px; margin-bottom:10px; text-align:left; text-shadow: #000000 0px 1px 0px">
			 
		</p>
		<p style="color:#ffffff; font-family:Times; font-size:12px; line-height:16px; padding:0px; margin:0px; margin-bottom:10px; text-align:left; text-shadow: #000000 0px 1px 0px">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at magna odio. Aenean euismod ipsum convallis libero posuere vel mattis nisi posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam adipiscing semper lobortis. Aliquam porttitor convallis posuere. Mauris pretium erat sem, non posuere urna. Fusce pretium, lorem eget sodales ullamcorper, mi ligula porttitor augue, vel suscipit mauris enim in urna. Nam quis neque justo. Vivamus sed nibh sem. Nunc in risus nec erat consequat aliquet. Sed sed quam enim, in sollicitudin leo. Aliquam vulputate iaculis neque sollicitudin aliquet. Nunc nibh odio, dapibus vitae suscipit sed, adipiscing iaculis mi. Aenean adipiscing mattis porttitor. Praesent ultricies mattis auctor. Maecenas non felis eu leo placerat dapibus id id libero. 
		</p>
	</data>

	<data name="test_css">
		p {color:#ffffff; font-family:Times;}
		a {color:#ffffff}
	</data>
	
	<!--<Screen Tint - Plugin>-->

	<plugin name="screen_tint"
			 url="images/screen_tint.png"
	         keep="false"
	         align="center"
	         width="100%"
	         height="100%"
	         visible="false" enabled="false"
 	         zorder="10000"
	         alpha="0" blendmode="multiply" smoothing="true"
 	         refreshrate="auto"
	         />

	<!--<Set Open/Close Hotspot Actions Here.>-->

	<action name="close_st">
		tween(plugin[screen_tint].alpha,0,0.5,default);
		set(plugin[screen_tint].visible, false);
	</action>

	<action name="open_st">
		set(plugin[screen_tint].visible, true);
		tween(plugin[screen_tint].alpha,.9,0.5,default);
	</action>
		
	<style name="_hotspot_ani"
    url="images/hotspot.png"
    crop=""
    crop_normal=""
    crop_hover=""
    crop_down=""
    timer="0"
    delay="0"
    toscene_action="        
        set(view.fovmin,30); tween(alpha,0,,easeOutQuad);
        stoptween(scale); tween(scale,0.1,,easeOutQuad,get(hlookat),get(vlookat),get(fov)););
        looktohotspot(get(name));
    "
    showimage_action="
        tween(alpha,0,0.2,easeOutQuad);
        stoptween(scale); tween(scale,0.1,0.2,easeOutQuad,
        _image_flyout(_image,show,get(image_url));
        tween(scale,1,1,easeOutQuad);animation(););
        tween(view.hlookat,get(ath)); tween(view.vlookat,get(atv));
    "
    onloaded="
        animation();
        if(icon_type == 'arrow', set(crop,0|0|54|54);set(crop_normal,0|0|54|54);set(crop_hover,0|54|54|54);set(crop_down,0|108|54|54);set(delay,1));
        if(icon_type == 'camera', set(crop,54|0|54|54);set(crop_normal,54|0|54|54);set(crop_hover,54|54|54|54);set(crop_down,54|108|54|54);set(delay,1.3));
        if(icon_type == 'info', set(crop,108|0|54|54);set(crop_normal,108|0|54|54);set(crop_hover,108|54|54|54);set(crop_down,108|108|54|54);set(delay,1.15));
        if(icon_type == 'video', set(crop,162|0|54|54);set(crop_normal,162|0|54|54);set(crop_hover,162|54|54|54);set(crop_down,162|108|54|54);set(delay,1.2));
        if(toscene !== null, if(toscene != '', txtadd(hotspot[get(name)].onclick,toscene_action(););););
        if(image_url !== null, if(image_url != '', txtadd(hotspot[get(name)].onclick,showimage_action(););););
        txtadd(hotspot[get(name)].onover,copy(crop,crop_hover););
        txtadd(hotspot[get(name)].onout,copy(crop,crop_normal););
        txtadd(hotspot[get(name)].ondown,copy(crop,crop_down););
        txtadd(hotspot[get(name)].onup,copy(crop,crop_normal););
        resetsize();
    "
    animation="tween(timer,1,get(delay),easeOutQuad,tween(alpha,0.6,0.4,easeOutQuad, set(timer,0);tween(alpha,1,0.3,easeOutQuad);animation();););"
/>

</krpano>
»rbudnikas« hat folgende Datei angehängt:
  • tour.xml (11,18 kB - 107 mal heruntergeladen - zuletzt: Heute, 13:50)

Ähnliche Themen