Sie sind nicht angemeldet.

Scrollarea vs Scrollbox - mac and pc users please test

rbudnikas

Fortgeschrittener

  • »rbudnikas« ist der Autor dieses Themas

Beiträge: 148

  • Nachricht senden

1

Mittwoch, 26. September 2012, 19:07

Scrollarea vs Scrollbox - mac and pc users please test

Hi Everyone,

I saw the thread regarding the scrollarea overflow and could get the solution to work that was proposed. I've set up both a scrollarea example and a scrollbox example. Below are the xml files.
You can see the working examples - scrollarea and scrollbox

The obvious issue with scrollarea is the overflow and would like to figure out if there is a simple way to stop it when scrolling to the second slide. The other issue I am having is the text boxes on both scrollarea and scrollbox. If you click on learn more on a PC/laptop the text looks like it should and the container holding the text is sized at height="95px" which brings it close to the bottom edge of the container. Now if you open either on a mac, the text actually looks smaller and is up away from the bottom of the container.

Hopefully someone has an idea

Thanks in advance,

Robert

Scrollarea XML

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

<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="346" 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,0)" />
						
						<!--********** Container Holding Content **********-->
					<layer name="cc_01" keep="true" type="container" align="leftbottom" x="0" y="-95" width="675" height="95" zorder="10007" bgcolor="0x000000" bgalpha=".5" visible="true">
						<layer name="content_01" url="%CURRENTXML%/plugins/textfield.swf" align="leftbottom" x="0" y="0" width="675" height="95" zorder="10007" html="data:test_text" css="data:test_css" background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0"  />
       						<layer name="close_01" url="%CURRENTXML%/skin/skin.png" align="righttop" x="0" y="0" 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,-95,);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,0)"/>
       						
       						<!--********** Container Holding Content **********-->
							<layer name="cc_02" keep="true" type="container" align="leftbottom" x="695" y="-95" width="675" height="95" zorder="10004" bgcolor="0x000000" bgalpha=".5" visible="true">
								<layer name="content_02" url="%CURRENTXML%/plugins/textfield.swf" align="leftbottom" x="0" y="0" width="675" height="95" zorder="10004" children="false" html="data:test_text" css="data:test_css" autoheight="false" vcenter="false" background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0" border="false" bordercolor="0x000000" borderalpha="1.0" borderwidth="1.0" roundedge="0" shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0" textshadow="0.0" textshadowrange="4.0" textshadowangle="45" textshadowcolor="0x000000" textshadowalpha="1.0" />
       								<layer name="close_02" url="%CURRENTXML%/skin/skin.png" align="righttop" x="0" y="0" 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,-95);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,0)"/>
       	   					
       	   					<!--********** Container Holding Content **********-->
							<layer name="cc_03" keep="true" type="container" align="leftbottom" x="1390" y="-95" width="675" height="95" zorder="10002" bgcolor="0x000000" bgalpha=".5" visible="true">
								<layer name="content_03" url="%CURRENTXML%/plugins/textfield.swf" align="leftbottom" x="0" y="0" width="675" height="95" zorder="10002" children="false" html="data:test_text" css="data:test_css" autoheight="false" vcenter="false" background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0" border="false" bordercolor="0x000000" borderalpha="1.0" borderwidth="1.0" roundedge="0" shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0" textshadow="0.0" textshadowrange="4.0" textshadowangle="45" textshadowcolor="0x000000" textshadowalpha="1.0" />
       								<layer name="close_03" url="%CURRENTXML%/skin/skin.png" align="righttop" x="0" y="0" 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,-95);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; padding:0px; margin:0px; margin-bottom:10px; text-align:left; text-shadow: #000000 0px 1px 0px">
			<b>Image_Title</b>	
		</p>
		<br/>
		<p style="color:#ffffff; font-family:Times; font-size:12px; 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. </p>
	</data>

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


Scrollbox XML

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

<!--********** Container Holding ScrollArea, Images and Buttons **********-->
		<layer name="frame" url="%CURRENTXML%/skin/default_black/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/default_black/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="scrollbox" type="container" align="center" width="675" height="346" zorder="10002" bgcolor="0x000000" bgalpha="0" maskchildren="true">
		
		<layer name="img_layer_01" keep="true" type="container" align="center" x="0" y="0" width="675" height="346" zorder="10000" bgcolor="0xFFFFFF" bgalpha="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" parent="image_01" align="left" x="625" 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[img_layer_01].x, -695);tween(layer[img_layer_02].x, 0)" />
					<layer name="text_01" url="%CURRENTXML%/images/learnmore.png" parent="image_01" 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[content_layer_01].y,0)" />
						
							<!--********** Container Holding Content **********-->
						<layer name="content_layer_01" type="container" parent="image_01" align="leftbottom" x="0" y="-95" width="675" height="95" zorder="10007" bgcolor="0x000000" bgalpha="0" visible="true">
							<layer name="content_01" url="%CURRENTXML%/plugins/textfield.swf" align="leftbottom" x="0" y="0" width="675" height="95" zorder="10007" children="false" html="data:test_text" css="data:test_css" autoheight="false" vcenter="false" background="true" backgroundcolor="0x000000" backgroundalpha=".5" border="false" bordercolor="0x000000" borderalpha="1.0" borderwidth="1.0" roundedge="0" shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0" textshadow="0.0" textshadowrange="4.0" textshadowangle="45" textshadowcolor="0x000000" textshadowalpha="1.0" />
       							<layer name="close_01" url="%CURRENTXML%/skin/default_black/skin.png" align="righttop" x="0" y="0" 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[content_layer_01].y,-95,);tween(layer[text_01].x,0,1,default, wait);tween(layer[text_01].alpha,1,.5,default, wait);" />
						</layer>
		</layer>
					
		<layer name="img_layer_02" keep="true" type="container" align="center" x="695" y="0" width="675" height="346" zorder="10000" bgcolor="0xFFFFFF" bgalpha="0">		
			<layer name="image_02" url="%CURRENTXML%/images/exterior1.png" align="left" x="0" 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[img_layer_01].x, 0);tween(layer[img_layer_02].x, 695);" />							<layer name="next_02" url="%CURRENTXML%/images/next.png" parent="image_02" 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[img_layer_02].x, -675);tween(layer[img_layer_03].x, 0)" />
						<layer name="text_02" url="%CURRENTXML%/images/learnmore.png" align="leftbottom" x="0" 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,-200,.5); tween(layer[content_layer_02].y,0)"/>
       						
       						<!--********** Container Holding Content **********-->
						<layer name="content_layer_02" keep="true" type="container" parent="image_02" align="leftbottom" x="0" y="-95" width="675" height="95" zorder="10004" bgcolor="0x000000" bgalpha=".5" visible="true">
							<layer name="content_02" url="%CURRENTXML%/plugins/textfield.swf" align="leftbottom" x="0" y="0" width="675" height="95" zorder="10004" children="false" html="data:test_text" css="data:test_css" autoheight="false" vcenter="false" background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0" border="false" bordercolor="0x000000" borderalpha="1.0" borderwidth="1.0" roundedge="0" shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0" textshadow="0.0" textshadowrange="4.0" textshadowangle="45" textshadowcolor="0x000000" textshadowalpha="1.0" />
       							<layer name="close_02" url="%CURRENTXML%/skin/default_black/skin.png" align="righttop" x="0" y="0" 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[content_layer_02].y,-95);tween(layer[text_02].x,0,1,default,wait);tween(layer[text_02].alpha,1,.5,default, wait);" />
						</layer>
		</layer>
       
       	<layer name="img_layer_03" keep="true" type="container" align="center" x="695" y="0" width="675" height="346" zorder="10000" bgcolor="0xFFFFFF" bgalpha="0">
       		<layer name="image_03" url="%CURRENTXML%/images/exterior1.png" align="left" x="0" 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[img_layer_02].x, 0);tween(layer[img_layer_03].x, 695)" />
					<layer name="text_03" url="%CURRENTXML%/images/learnmore.png" align="leftbottom" x="0" 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,-200,.5); tween(layer[content_layer_03].y,0)"/>
       	   					
       	   					<!--********** Container Holding Content **********-->
						<layer name="content_layer_03" keep="true" type="container" parent="image_03" align="leftbottom" x="0" y="-95" width="675" height="95" zorder="10002" bgcolor="0x000000" bgalpha=".5" visible="true">
							<layer name="content_03" url="%CURRENTXML%/plugins/textfield.swf" align="leftbottom" x="0" y="0" width="675" height="95" zorder="10002" children="false" html="data:test_text" css="data:test_css" autoheight="false" vcenter="false" background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0" border="false" bordercolor="0x000000" borderalpha="1.0" borderwidth="1.0" roundedge="0" shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0" textshadow="0.0" textshadowrange="4.0" textshadowangle="45" textshadowcolor="0x000000" textshadowalpha="1.0" />
       							<layer name="close_03" url="%CURRENTXML%/skin/default_black/skin.png" align="righttop" x="0" y="0" 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[content_layer_03].y,-95);tween(layer[text_03].x,0,1,default,wait);tween(layer[text_03].alpha,1,.5,default,wait);" />
						</layer>						 
		</layer>
		</layer>
		</layer>
		</layer>
		
	
	<data name="test_text">
		<p style="color:#ffffff; font-family:Times; font-size:14px;  padding:0px; margin:0px; margin-bottom:10px; text-align:left; text-shadow: #000000 0px 1px 0px">
			<b>Image_Title</b>	
		</p>
		<br/>
		<p style="color:#ffffff; font-family:Times; font-size:12px;  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. </p>
	</data>

	<data name="test_css">
		p {color:#ffffff; font-family:Times;}
		a {color:#ffffff}
	</data>
»rbudnikas« hat folgende Dateien angehängt:
  • scrollbox.xml (12,2 kB - 76 mal heruntergeladen - zuletzt: 16. Oktober 2023, 18:01)
  • scrollarea.xml (11,09 kB - 78 mal heruntergeladen - zuletzt: Heute, 01:37)

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

2

Mittwoch, 26. September 2012, 19:41

Great!

Works nice on ipad!

I'll have a study on it.

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Sudarchikov Andrey

Profi

Beiträge: 1 082

Wohnort: Russia, Kaliningrad

  • Nachricht senden

3

Freitag, 28. September 2012, 16:33

Hi!
One more example of slider with drag feature (gestures drag to left and drag to right used)
Try it
http://sudarchikov.com/shared/scrollimages/tour.html


and package
http://sudarchikov.com/shared/scrollimages/scrollimages.zip


Hope you love it ;-)

Regards
Andrey *thumbup*

PS - without any plugins just xml, enjoy
edited:
Almost forgot, code created in KPGui
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

Ähnliche Themen