Tribune

Home » Liferay Portal » English » 3. Development

Vista Combinata Vista Piatta Vista ad Albero
Discussioni [ Precedente | Successivo ]
toggle
Yan Naing Oo
Liferay Horizontal scroller
2 aprile 2012 21.58
Risposta

Yan Naing Oo

Punteggio: Regular Member

Messaggi: 180

Data di Iscrizione: 17 febbraio 2011

Messaggi recenti

Hi all,

can I have to know how to get the Horizontal scroller exactly the same as liferay website.
here attached as a liferay scroller. I would be apply into myself. could anybody know it ?
Allegato

Allegati: untitled-1.PNG (12,8k)
Pranay R Patadiya
RE: Liferay Horizontal scroller
3 aprile 2012 0.33
Risposta

Pranay R Patadiya

Punteggio: Regular Member

Messaggi: 181

Data di Iscrizione: 22 febbraio 2010

Messaggi recenti

Hi,

Please, look at this link : http://remysharp.com/demo/marquee.html

This may fulfill your req.

Thanks,
Pranay
Amit Doshi
RE: Liferay Horizontal scroller
3 aprile 2012 1.02
Risposta

Amit Doshi

Punteggio: Liferay Master

Messaggi: 549

Data di Iscrizione: 29 dicembre 2010

Messaggi recenti

Hi Yan Naing Oo,

The Horizontal Scroller you can do more than one way.

I think in liferay.com the current Horizontal Scroller is either Portlet or WebContent.

you can do it using jQuery , AUI or you can develop in flash and directly embed it.

Hope it helps.

Regards,
Amit Doshi
Yan Naing Oo
RE: Liferay Horizontal scroller
3 aprile 2012 2.02
Risposta

Yan Naing Oo

Punteggio: Regular Member

Messaggi: 180

Data di Iscrizione: 17 febbraio 2011

Messaggi recenti

HI Amit doshi,

I tested on plain html page it work perfectly. when i copy and paste the code into web contect. the code does not work.
the javascript error is throws "Object does not support property or method" .
let me know why is not working .




<html>
<head>
<script src="http://deploy.alloyui.com/build/aui/aui-min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://deploy.alloyui.com/build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />

<style type="text/css" media="screen">


body {
font-size: 12px;
}

#wrapper {
padding: 10px;
}

.demo {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
background-image: -moz-linear-gradient(#DDDDDD, #F0F0F0);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, #DDDDDD),
color-stop(0.5, #F0F0F0)
);
margin: 5px;
background: whitesilver;
}

.demo h1 {
color: #474A4B;
font-weight: bold;
font-size: 1em;
line-height: 45px;
margin: 0;
padding: 0 20px;
}

.demo h1 a:link {
color: #474A4B;
text-decoration: none;
}

#demo1 {
height: 45px;
width: 750px;
}

#demo1 h1 {
border-right: 1px solid #F0F0F0;
float: left;
}

#demo2 {
height: 200px;
width: 200px;
}

#demo2 h1 {
border-bottom: 1px solid #F0F0F0;
float: left;
padding: 0;
text-align: center;
width: 100%;
}

.advanced .aui-scroller-item {
background-position: center;
background-repeat: no-repeat;
}

.advanced .aui-scroller-item img {
opacity: 0;
filter: alpha(opacity = 0);
}

.advanced .aui-scroller-vertical {
border-top: 1px solid #CACACA;
clear: left;
}

.advanced .aui-scroller-vertical .aui-scroller-item {
width: 100%;
padding: 10px 0;
}

.advanced .aui-scroller-vertical .aui-scroller-item img {
width: 100%;
}

.advanced .aui-scroller-horizontal {
border-left: 1px solid #CACACA;
}

.advanced .aui-scroller-horizontal .aui-scroller-item {
height: 100%;
padding: 0 10px;
}

.advanced .aui-scroller-horizontal .aui-scroller-item img {
height: 100%;
}

.advanced .aui-scroller-content .cisco {
background-image: url('http://deploy.alloyui.com/demos/scroller/1.png');
}

.advanced .aui-scroller-content .sesame-street {
background-image: url('http://deploy.alloyui.com/demos/scroller/2.png');
}

.advanced .aui-scroller-content .t-mobile {
background-image: url('http://deploy.alloyui.com/demos/scroller/3.png');
}

.advanced .aui-scroller-content .societe-generale {
background-image: url('http://deploy.alloyui.com/demos/scroller/4.png');
}

.advanced .aui-scroller-content .barclays {
background-image: url('http://deploy.alloyui.com/demos/scroller/5.png');
}

.advanced .aui-scroller-content .autozone {
background-image: url('http://deploy.alloyui.com/demos/scroller/6.png');
}

.advanced .aui-scroller-content .china-mobile {
background-image: url('http://deploy.alloyui.com/demos/scroller/7.png');
}

.basic .aui-scroller {
border:1px solid #CCCCCC;
}

.basic .aui-scroller-item {
padding: 10px;
}
</style>

</head>

<body>


<div id="demo1" class="demo">
<h1>
<a href="#">Our Clients</a>
</h1>
<div class="advanced" style="backgroundemoticonF2F2F2">
<div id="scroller-content">
<div class="cisco">
<a href="#">
<img src="http://deploy.alloyui.com/demos/scroller/1.png" width="81" height="37" alt="Cisco"/>
</a>
</div>
<div class="sesame-street">
<a href="#">
<img src="http://deploy.alloyui.com/demos/scroller/2.png" width="81" height="37" alt="Sesame Street"/>
</a>
</div>
<div class="t-mobile">
<a href="#">
<img src="http://deploy.alloyui.com/demos/scroller/3.png" width="81" height="20" alt="T-Mobile"/>
</a>
</div>
<div class="societe-generale">
<a href="#">
<img src="http://deploy.alloyui.com/demos/scroller/4.png" width="81" height="35" alt="Societe Generale"/>
</a>
</div>
<div class="barclays">
<a href="#">
<img src="http://deploy.alloyui.com/demos/scroller/5.png" width="81" height="35" alt="Barclays"/>
</a>
</div>
<div class="autozone">
<a href="#">
<img src="http://deploy.alloyui.com/demos/scroller/6.png" width="191" height="35" alt="Autozone"/>
</a>
</div>
<div class="china-mobile">
<a href="#">
<img src="http://deploy.alloyui.com/demos/scroller/7.png" width="105" height="38" alt="China Mobile" />
</a>
</div>
</div>
</div>
</div>


<script type="text/javascript" charset="utf-8">
AUI().ready('aui-scroller', 'anim-node-plugin', function (S) {
var component = new S.Scroller({
contentBox: '#scroller-content',
height: 45,
orientation: 'horizontal'
}).render();


});
</script>

</body>
</html>
Amit Doshi
RE: Liferay Horizontal scroller
3 aprile 2012 3.37
Risposta

Amit Doshi

Punteggio: Liferay Master

Messaggi: 549

Data di Iscrizione: 29 dicembre 2010

Messaggi recenti

Hi Yan Naing Oo,

I tried using your code

I found that AUI().ready('aui-scroller', 'anim-node-plugin', function (S) which will load js files related to that particular plugins of AUI or YUI is not working.

So I debugged your code and the following code works well with the webcontent.

I don't know whether it is good solution or not because I don't have much knowledge of AUI.

Please check the below code for time being temporary solution in order to run your scroller in webcontent.

  1<script type="text/javascript" src="http://deploy.alloyui.com/build/aui/aui-min.js"></script>
  2<script id="aui_3_4_0_1_5" type="text/javascript" src="http://deploy.alloyui.com/build/oop/oop.js" charset="utf-8"></script>
  3<script id="aui_3_4_0_1_6" type="text/javascript" src="http://deploy.alloyui.com/build/event-custom-base/event-custom-base.js" charset="utf-8">
  4</script>
  5<script id="aui_3_4_0_1_7" type="text/javascript" src="http://deploy.alloyui.com/build/dom-core/dom-core.js" charset="utf-8">
  6</script>
  7<script id="aui_3_4_0_1_8" type="text/javascript" src="http://deploy.alloyui.com/build/dom-base/dom-base.js" charset="utf-8">
  8</script>
  9<script id="aui_3_4_0_1_9" type="text/javascript" src="http://deploy.alloyui.com/build/selector-native/selector-native.js" charset="utf-8">
 10</script>
 11<script id="aui_3_4_0_1_10" type="text/javascript" src="http://deploy.alloyui.com/build/selector/selector.js" charset="utf-8">
 12</script>
 13<script id="aui_3_4_0_1_11" type="text/javascript" src="http://deploy.alloyui.com/build/node-core/node-core.js" charset="utf-8">
 14</script>
 15<script id="aui_3_4_0_1_12" type="text/javascript" src="http://deploy.alloyui.com/build/node-base/node-base.js" charset="utf-8">
 16</script>
 17<script id="aui_3_4_0_1_13" type="text/javascript" src="http://deploy.alloyui.com/build/event-base/event-base.js" charset="utf-8">
 18</script>
 19<script id="aui_3_4_0_1_14" type="text/javascript" src="http://deploy.alloyui.com/build/event-delegate/event-delegate.js" charset="utf-8">
 20</script>
 21<script id="aui_3_4_0_1_15" type="text/javascript" src="http://deploy.alloyui.com/build/event-custom-complex/event-custom-complex.js" charset="utf-8">
 22</script>
 23<script id="aui_3_4_0_1_16" type="text/javascript" src="http://deploy.alloyui.com/build/event-synthetic/event-synthetic.js" charset="utf-8">
 24</script>
 25<script id="aui_3_4_0_1_17" type="text/javascript" src="http://deploy.alloyui.com/build/event-mousewheel/event-mousewheel.js" charset="utf-8">
 26</script>
 27<script id="aui_3_4_0_1_18" type="text/javascript" src="http://deploy.alloyui.com/build/event-mouseenter/event-mouseenter.js" charset="utf-8">
 28</script>
 29<script id="aui_3_4_0_1_19" type="text/javascript" src="http://deploy.alloyui.com/build/event-key/event-key.js" charset="utf-8">
 30</script>
 31<script id="aui_3_4_0_1_20" type="text/javascript" src="http://deploy.alloyui.com/build/event-focus/event-focus.js" charset="utf-8">
 32</script>
 33<script id="aui_3_4_0_1_21" type="text/javascript" src="http://deploy.alloyui.com/build/event-resize/event-resize.js" charset="utf-8">
 34</script>
 35<script id="aui_3_4_0_1_22" type="text/javascript" src="http://deploy.alloyui.com/build/event-hover/event-hover.js" charset="utf-8">
 36</script>
 37<script id="aui_3_4_0_1_23" type="text/javascript" src="http://deploy.alloyui.com/build/event-outside/event-outside.js" charset="utf-8">
 38</script>
 39<script id="aui_3_4_0_1_24" type="text/javascript" src="http://deploy.alloyui.com/build/classnamemanager/classnamemanager.js" charset="utf-8">
 40</script>
 41<script id="aui_3_4_0_1_25" type="text/javascript" src="http://deploy.alloyui.com/build/aui-classnamemanager/aui-classnamemanager.js" charset="utf-8">
 42</script>
 43<script id="aui_3_4_0_1_26" type="text/javascript" src="http://deploy.alloyui.com/build/array-extras/array-extras.js" charset="utf-8">
 44</script>
 45<script id="aui_3_4_0_1_27" type="text/javascript" src="http://deploy.alloyui.com/build/node-event-delegate/node-event-delegate.js" charset="utf-8">
 46</script>
 47<script id="aui_3_4_0_1_28" type="text/javascript" src="http://deploy.alloyui.com/build/pluginhost-base/pluginhost-base.js" charset="utf-8">
 48</script>
 49<script id="aui_3_4_0_1_29" type="text/javascript" src="http://deploy.alloyui.com/build/pluginhost-config/pluginhost-config.js" charset="utf-8">
 50</script>
 51<script id="aui_3_4_0_1_30" type="text/javascript" src="http://deploy.alloyui.com/build/node-pluginhost/node-pluginhost.js" charset="utf-8">
 52</script>
 53<script id="aui_3_4_0_1_31" type="text/javascript" src="http://deploy.alloyui.com/build/dom-style/dom-style.js" charset="utf-8">
 54</script>
 55<script id="aui_3_4_0_1_32" type="text/javascript" src="http://deploy.alloyui.com/build/dom-screen/dom-screen.js" charset="utf-8">
 56</script>
 57<script id="aui_3_4_0_1_33" type="text/javascript" src="http://deploy.alloyui.com/build/node-screen/node-screen.js" charset="utf-8">
 58</script>
 59<script id="aui_3_4_0_1_34" type="text/javascript" src="http://deploy.alloyui.com/build/node-style/node-style.js" charset="utf-8">
 60</script>
 61<script id="aui_3_4_0_1_35" type="text/javascript" src="http://deploy.alloyui.com/build/aui-node/aui-node-base.js" charset="utf-8">
 62</script>
 63<script id="aui_3_4_0_1_36" type="text/javascript" src="http://deploy.alloyui.com/build/arraylist/arraylist.js" charset="utf-8">
 64</script>
 65<script id="aui_3_4_0_1_37" type="text/javascript" src="http://deploy.alloyui.com/build/arraylist-add/arraylist-add.js" charset="utf-8">
 66</script>
 67<script id="aui_3_4_0_1_38" type="text/javascript" src="http://deploy.alloyui.com/build/arraylist-filter/arraylist-filter.js" charset="utf-8">
 68</script>
 69<script id="aui_3_4_0_1_39" type="text/javascript" src="http://deploy.alloyui.com/build/array-invoke/array-invoke.js" charset="utf-8">
 70</script>
 71<script id="aui_3_4_0_1_40" type="text/javascript" src="http://deploy.alloyui.com/build/attribute-base/attribute-base.js" charset="utf-8">
 72</script>
 73<script id="aui_3_4_0_1_41" type="text/javascript" src="http://deploy.alloyui.com/build/attribute-complex/attribute-complex.js" charset="utf-8">
 74</script>
 75<script id="aui_3_4_0_1_42" type="text/javascript" src="http://deploy.alloyui.com/build/base-base/base-base.js" charset="utf-8">
 76</script>
 77<script id="aui_3_4_0_1_43" type="text/javascript" src="http://deploy.alloyui.com/build/base-build/base-build.js" charset="utf-8">
 78</script>
 79<script id="aui_3_4_0_1_44" type="text/javascript" src="http://deploy.alloyui.com/build/base-pluginhost/base-pluginhost.js" charset="utf-8">
 80</script>
 81<script id="aui_3_4_0_1_45" type="text/javascript" src="http://deploy.alloyui.com/build/widget-base/widget-base.js" charset="utf-8">
 82</script>
 83<script id="aui_3_4_0_1_46" type="text/javascript" src="http://deploy.alloyui.com/build/widget-htmlparser/widget-htmlparser.js" charset="utf-8">
 84</script>
 85<script id="aui_3_4_0_1_47" type="text/javascript" src="http://deploy.alloyui.com/build/widget-uievents/widget-uievents.js" charset="utf-8">
 86</script>
 87<script id="aui_3_4_0_1_48" type="text/javascript" src="http://deploy.alloyui.com/build/widget-skin/widget-skin.js" charset="utf-8">
 88</script>
 89<script id="aui_3_4_0_1_49" type="text/javascript" src="http://deploy.alloyui.com/build/aui-component/aui-component.js" charset="utf-8">
 90</script>
 91<script id="aui_3_4_0_1_50" type="text/javascript" src="http://deploy.alloyui.com/build/aui-debounce/aui-debounce.js" charset="utf-8">
 92</script>
 93<script id="aui_3_4_0_1_51" type="text/javascript" src="http://deploy.alloyui.com/build/aui-delayed-task/aui-delayed-task.js" charset="utf-8">
 94</script>
 95<script id="aui_3_4_0_1_52" type="text/javascript" src="http://deploy.alloyui.com/build/selector-css2/selector-css2.js" charset="utf-8">
 96</script>
 97<script id="aui_3_4_0_1_53" type="text/javascript" src="http://deploy.alloyui.com/build/selector-css3/selector-css3.js" charset="utf-8">
 98</script>
 99<script id="aui_3_4_0_1_54" type="text/javascript" src="http://deploy.alloyui.com/build/aui-selector/aui-selector.js" charset="utf-8">
100</script>
101<script id="aui_3_4_0_1_55" type="text/javascript" src="http://deploy.alloyui.com/build/aui-event/aui-event-base.js" charset="utf-8">
102</script>
103<script id="aui_3_4_0_1_56" type="text/javascript" src="http://deploy.alloyui.com/build/yui-throttle/yui-throttle.js" charset="utf-8">
104</script>
105<script id="aui_3_4_0_1_57" type="text/javascript" src="http://deploy.alloyui.com/build/aui-node/aui-node-html5.js" charset="utf-8">
106</script>
107<script id="aui_3_4_0_1_58" type="text/javascript" src="http://deploy.alloyui.com/build/aui-node/aui-node-html5-print.js" charset="utf-8">
108</script>
109<script id="aui_3_4_0_1_59" type="text/javascript" src="http://deploy.alloyui.com/build/aui-simple-anim/aui-simple-anim.js" charset="utf-8">
110</script>
111<script id="aui_3_4_0_1_60" type="text/javascript" src="http://deploy.alloyui.com/build/aui-scroller/aui-scroller.js" charset="utf-8">
112</script>
113<script id="aui_3_4_0_1_61" type="text/javascript" src="http://deploy.alloyui.com/build/anim-base/anim-base.js" charset="utf-8">
114</script>
115<script id="aui_3_4_0_1_62" type="text/javascript" src="http://deploy.alloyui.com/build/anim-node-plugin/anim-node-plugin.js" charset="utf-8">
116</script>
117<script id="aui_3_4_0_1_63" type="text/javascript" src="http://deploy.alloyui.com/build/intl/intl.js" charset="utf-8">
118</script>
119<link rel="stylesheet" href="http://deploy.alloyui.com/build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
120<link rel="stylesheet" href="http://deploy.alloyui.com/build/aui-scroller/assets/skins/sam/aui-scroller.css" type="text/css" media="screen" />
121
122<style type="text/css" media="screen">
123
124
125body {
126font-size: 12px;
127}
128
129#wrapper {
130padding: 10px;
131}
132
133.demo {
134-moz-border-radius: 5px;
135-webkit-border-radius: 5px;
136-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
137-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
138background-image: -moz-linear-gradient(#DDDDDD, #F0F0F0);
139background-image: -webkit-gradient(
140linear,
141left bottom,
142left top,
143color-stop(1, #DDDDDD),
144color-stop(0.5, #F0F0F0)
145);
146margin: 5px;
147background: whitesilver;
148}
149
150.demo h1 {
151color: #474A4B;
152font-weight: bold;
153font-size: 1em;
154line-height: 45px;
155margin: 0;
156padding: 0 20px;
157}
158
159.demo h1 a:link {
160color: #474A4B;
161text-decoration: none;
162}
163
164#demo1 {
165height: 45px;
166width: 750px;
167}
168
169#demo1 h1 {
170border-right: 1px solid #F0F0F0;
171float: left;
172}
173
174#demo2 {
175height: 200px;
176width: 200px;
177}
178
179#demo2 h1 {
180border-bottom: 1px solid #F0F0F0;
181float: left;
182padding: 0;
183text-align: center;
184width: 100%;
185}
186
187.advanced .aui-scroller-item {
188background-position: center;
189background-repeat: no-repeat;
190}
191
192.advanced .aui-scroller-item img {
193opacity: 0;
194filter: alpha(opacity = 0);
195}
196
197.advanced .aui-scroller-vertical {
198border-top: 1px solid #CACACA;
199clear: left;
200}
201
202.advanced .aui-scroller-vertical .aui-scroller-item {
203width: 100%;
204padding: 10px 0;
205}
206
207.advanced .aui-scroller-vertical .aui-scroller-item img {
208width: 100%;
209}
210
211.advanced .aui-scroller-horizontal {
212border-left: 1px solid #CACACA;
213}
214
215.advanced .aui-scroller-horizontal .aui-scroller-item {
216height: 100%;
217padding: 0 10px;
218}
219
220.advanced .aui-scroller-horizontal .aui-scroller-item img {
221height: 100%;
222}
223
224.advanced .aui-scroller-content .cisco {
225background-image: url('http://deploy.alloyui.com/demos/scroller/1.png');
226}
227
228.advanced .aui-scroller-content .sesame-street {
229background-image: url('http://deploy.alloyui.com/demos/scroller/2.png');
230}
231
232.advanced .aui-scroller-content .t-mobile {
233background-image: url('http://deploy.alloyui.com/demos/scroller/3.png');
234}
235
236.advanced .aui-scroller-content .societe-generale {
237background-image: url('http://deploy.alloyui.com/demos/scroller/4.png');
238}
239
240.advanced .aui-scroller-content .barclays {
241background-image: url('http://deploy.alloyui.com/demos/scroller/5.png');
242}
243
244.advanced .aui-scroller-content .autozone {
245background-image: url('http://deploy.alloyui.com/demos/scroller/6.png');
246}
247
248.advanced .aui-scroller-content .china-mobile {
249background-image: url('http://deploy.alloyui.com/demos/scroller/7.png');
250}
251
252.basic .aui-scroller {
253border:1px solid #CCCCCC;
254}
255
256.basic .aui-scroller-item {
257padding: 10px;
258}
259</style>
260<div id="demo1" class="demo">
261<h1>
262<a href="#">Our Clients</a>
263</h1>
264<div class="advanced" style="backgroundemoticonF2F2F2">
265<div id="scroller-content">
266<div class="cisco">
267<a href="#">
268<img src="http://deploy.alloyui.com/demos/scroller/1.png" width="81" height="37" alt="Cisco"/>
269</a>
270</div>
271<div class="sesame-street">
272<a href="#">
273<img src="http://deploy.alloyui.com/demos/scroller/2.png" width="81" height="37" alt="Sesame Street"/>
274</a>
275</div>
276<div class="t-mobile">
277<a href="#">
278<img src="http://deploy.alloyui.com/demos/scroller/3.png" width="81" height="20" alt="T-Mobile"/>
279</a>
280</div>
281<div class="societe-generale">
282<a href="#">
283<img src="http://deploy.alloyui.com/demos/scroller/4.png" width="81" height="35" alt="Societe Generale"/>
284</a>
285</div>
286<div class="barclays">
287<a href="#">
288<img src="http://deploy.alloyui.com/demos/scroller/5.png" width="81" height="35" alt="Barclays"/>
289</a>
290</div>
291<div class="autozone">
292<a href="#">
293<img src="http://deploy.alloyui.com/demos/scroller/6.png" width="191" height="35" alt="Autozone"/>
294</a>
295</div>
296<div class="china-mobile">
297<a href="#">
298<img src="http://deploy.alloyui.com/demos/scroller/7.png" width="105" height="38" alt="China Mobile" />
299</a>
300</div>
301</div>
302</div>
303</div>
304<script charset="utf-8" type="text/javascript">
305AUI().ready('aui-scroller', 'anim-node-plugin', function (S) {
306var component = new S.Scroller({
307contentBox: '#scroller-content',
308height: 45,
309orientation: 'horizontal'
310}).render();
311});
312</script>



Let me know if you have any issue.

Thanks & Regards,
Amit Doshi