Can anybody tell how to add image in text field in sencha touch
I want to show image and textfield
image User id
Thanks
Use css to do this.
.imagefield .x-form-field {
background: url(../icons/icon.png) no-repeat; /*your file path*/
background-size: contain;
}
add property cls: 'imagefield' in your component.
Related
My logo slider shows every slide vertically when loading and it looks terrible when loading and then when loaded it forms correctly.
Can someone please let me know how to get rid of this problem please? Here's where the slider is located http://www.customlogoshop.com/logo-design
Thanks!
You could try to hide the images like this:
.logo-slider img {
display: none;
}
and make them visible again as soon as slickjs initialized the slider:
.logo-slider.slick-initialized img {
display: block;
}
I am trying to develop dojo tree with style shown in image in below link. I am using dojo-release-1.10.2. I am using theme as 'claro'. I am not getting the connection lines which provide parent-child relation as shown in image in below link. Can anyone advice me , to the same style as shown in below link.
http://cdn.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/dojo/tree.jpg
The tundra theme shows the grid lines by default, with the exception of the root node, if you want the grid lines for the root node with tndra you should override the tree.css changing the background-image to this.
.tundra .dijitTreeIsRoot {
margin-left: 0;
background-image: url('images/i.gif');
}
If you want to override the claro theme, you can try this, , but you want to copy the gif files to your app and load them from there instead of loading them from tundra.
.claro .dijitTreeNode {
background-image : url('../tundra/images/i.gif');
background-repeat : repeat-y;
}
/* left vertical line (grid) for all nodes */
.claro .dijitTreeIsLast {
background: url('../tundra/images/i_half.gif') no-repeat;
}
.claro .dijitTreeExpandoLeaf, .dj_ie6 .claro .dijitTreeExpandoLeaf {
background-image: url('../tundra/images/treeExpand_leaf.gif');
}
.claro .dijitTreeIsRoot {
background-image : url('../tundra/images/i.gif');
}
Working URL:
http://webstage.co/scroll/stack.html
What I am trying to accomplish is to hide the content when it is outside of the background area (1280x800). I like the way the backgrounds are coming in when you scroll to a new section, but I want to hide the content until it gets into that 1280x800 viewport? Any suggestions on how I can accomplish this?
Bonus...It would be great if I could also hide the content under the top navigation once it scrolled up under it as well. A guy can dream. :)
Thanks!
For the first part you can add another div and target with css something like this:
.viewport {
width: 1280px;
height: 100%;
position: fixed;
top: 0;
left: 50%;
margin-left: -640px;
background: black;
clip: rect(800px, 1280px, auto, auto);
}
Basically, set the background to the same color as the page background and use clip to only display the portion of the div that sits below your desired viewport area hiding the content outside the viewport area.
If you add content to the footer later you may need to tweak some z-index settings to make sure it sits on top of the viewport div.
I have come to see that Sencha Touch framework is improving noticeably. Since I couldn't see something like what I want, I wanted to ask here and see if it's possible. I would like to hear your opinion on how to do some image change animation when the image is touched. When you touch the image, another image will animate growing from the middle.
Actually I also want to detect (if possible) the location of the touch on the image (Things I could do on iOS).
Is this possible? If so, any advice is appreciated.
Thanks
Panel has some properties to find out location of the touch:
var Xscroll = somePanel.scroller.offset.x;
var Yscroll = somePanel.scroller.offset.y;
Also, for your animation, you can do something like this:
Have 1 image on your 1st panel (make that image fit to the panel and keep it to background) like this:
JS:
App.somePanel= new Ext.Panel({
cls: 'somePanel',
html: '<h1>Welcome to my app!</h1>',
//some other properties
});
CSS:
.somePanel {
background-image: url(http://somesite.com/someimage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Have second panel like that.
On some event on the first panel do:
Hide that panel with animation
Show the second panel with animation
The list of animations is given in Sencha Touch API
I have a simple question. I want to style the header bar in jQuery mobile. Specifically I want to set the height of the bar and add a background image to it. How can I do that?
Thank you in advance
This is how I handled it. Instead of actually putting an H1 inside the data-role="header", just directly insert a
<div class="ui-title"></div>
and then add something like this to your custom CSS.
.ui-header .ui-title{
margin: 0.3em 70px 0.7em 10px;
background-image:url(../images/logo-page.png);
background-repeat:no-repeat;
background-position:0 0px;
width:178px;
height:40px;
}