You are not logged in.

scrollarea overflow detection and scroll to click

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Zephyr

Professional

  • "Zephyr" started this thread

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

1

Monday, August 13th 2012, 12:45am

scrollarea overflow detection and scroll to click

Hi,

given this:

Source code

 
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

Professional

Posts: 1,063

Location: Denmark

Occupation: Photographer

  • Send private message

2

Monday, August 13th 2012, 12:47pm

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

Trainee

Posts: 113

Location: Timisoara, Romania

  • Send private message

3

Monday, August 13th 2012, 1:11pm

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



cheers,

Dorin

Zephyr

Professional

  • "Zephyr" started this thread

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

4

Monday, August 13th 2012, 2:54pm

Quoted from "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

Posts: 13,479

  • Send private message

5

Monday, August 13th 2012, 6:48pm

Hi,

Quoted from "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.


Quoted from "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

Intermediate

Posts: 148

  • Send private message

6

Tuesday, September 25th 2012, 7:08pm

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

Source code

 
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 has attached the following file:
  • tour.xml (11.18 kB - 100 times downloaded - latest: Sep 9th 2023, 1:02am)

Similar threads