PDA

View Full Version : adding slider to html



mr.xprt
25 Jul 2011, 11:11 AM
hi ,

am asking if i can add a slider to my slide down/up list built using html as shown in this example :

js file :


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
//launch :function(){
onReady :function(){
var html='<div id="panel" class="SectionsListSlider" >'+
'<ul>'+
'<li><p>text <divider></divider></li>'+
'<li><p>text <divider></divider></li>'+
'<li><p>text <divider></divider></li>'+
'<li><p>text <divider></divider></li>'+
'<li><p>text <divider></divider></li>'+
'<li><p>text <divider></divider></li>'+
'</ul></div>';

var slideStatus='up';

var top=new Ext.Toolbar({

docked:'top',
items:[ {
xtype:'panel',
items:[{
xtype:'button',
ui:'action',
text:'Slide Down',
handler:function(){

if(slideStatus=='up'){
$("div#panel").slideDown("fast");
this.setText('Slide Up');
slideStatus='down'
}else {
$("div#panel").slideUp("fast");
this.setText('Slide Down');
slideStatus='up'
}



}
}]
}]
})
myCarousel=Ext.extend(Ext.Carousel,{
id:'Carousel',
layout:'fit',
html:html,
fullscreen:true,
dockedItems:[top]
})

p=new myCarousel({
items:[{xtype:'button',
text:'test2'
},{
xtype:'button',
text:'test'
},
],
})
}

});

index.html file :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Css/sencha-touch.css">
<style>

.SectionsListSlider {
width: 100%;
/*color: #999999;*/
background: #000;
/*opacity:0.8;*/
background:url('../images/op.png');


position: relative;
z-index: 99993;
display: none;

border-bottom-left-radius: 15px 15px;
border-bottom-right-radius: 15px 15px;
}

.SectionsListSlider ul{

}

.SectionsListSlider divider{
background:#848484;
height:1px;
margin-left:10%;
margin-bottom:4px;
margin-top:4px;
width:80%;
display: block;
}

.SectionsListSlider li{
direction:rtl;

text-align:right;

padding:8px 0;

opacity:.91 !important;
}
.SectionsListSlider p {
margin-right:10%;
color:#000;
}

.SectionsListSlider p img{
width:30px;
height:30px;
margin-left:20px;
float:right;
}

.SectionsListSlider li:focus{
background:#5EBBE0;
}

.SectionsListSlider li:hover{
background:#5EBBE0;
}

.SectionsListSlider li:active{
background:#5EBBE0;
}
</style>
<script src="javascripts/sencha-touch.js"></script>
<script src="jq.js" type="text/javascript" charset="utf-8"></script>


<script src="javascripts/slideUpDown.js" type="text/javascript" charset="utf-8"></script>





<title>test</title>
</head>
<body >

</body>

</html>

live demo : http://mrxprt.com/JsDemo/

the problem is that the list will be very tall in mobile devices and i want to add a scrollbar to allow user to see the items down

thanks ,

jjerome
25 Jul 2011, 1:22 PM
If you add "layout: 'fit' " to your panel's config options it should automatically allow you to scroll the html's contents.

I want to ask though, why do you create a panel inside the toolbar?



var top=new Ext.Toolbar({
docked:'top',
items:[ {
xtype:'panel',
items:[{ ... }
}]
}]
})
Shouldn't it be the other way around? Maybe I'm looking at your code differently

mr.xprt
25 Jul 2011, 9:33 PM
thanks alot , but where i have to put the layout fit i tried alot but invain

about ur question , i was trying to get a toolbar like this :

https://lh4.googleusercontent.com/-piE9zKXqPg8/Ti5Q5ciQroI/AAAAAAAAE7Q/1-PmoilrEso/toolbar.png

and the code above is may way to do it

jjerome
26 Jul 2011, 4:46 AM
Ah that is very interesting. :)

And whenever I had html that took up more than the height of the content window, I added an overflow style.

did you try:
<div style="overflow:scroll" class="..."> ?

mr.xprt
26 Jul 2011, 8:49 AM
Yes it works for PC browsers , but not for mobile devices (android - iphoen)

jjerome
26 Jul 2011, 9:08 AM
This works for me:


new Ext.Panel({
layout: 'auto',
html: 'a bunch of html here',
scroll: 'both'
});