PDA

View Full Version : background image for kitchen sink overlay.js



drossmedia
13 Sep 2010, 3:20 PM
Hello Forum,
please, which is the place to have an image behind the button of overlay.js?

It's easy to have

.card .x-panel-body {
background-image: url(path/to/image.jpg);
}
for many other slides.

But how/where to do the same behind the overlay? Thank you in advance.

evant
13 Sep 2010, 5:36 PM
Ext.setup({
onReady: function(){
new Ext.Panel({
width: 200,
height: 200,
floating: true,
modal: true,
html: 'Fooooooooo',
centered: true
}).show();

Ext.select('.x-mask').setStyle('background-image', 'url(http://www.sencha.com/assets/images/logo-sencha-sm.png)');
}
});


Obviously you'll want to muck about with the styles a bit.

raven77m
13 Sep 2010, 6:09 PM
OK I just have to ask this cuz I can't figure it out...
what's with all the foo and bar stuff? lol
I see it a few other places too, I don't get it.
Is it sorta like FUBAR?

evant
13 Sep 2010, 6:33 PM
http://en.wikipedia.org/wiki/Foo

drossmedia
14 Sep 2010, 7:05 AM
Hello Evan, thank you!
Hello Forum,

with your line I managed to get an all over image On click:



demos.Overlay = new Ext.Panel({
layout: {
type: 'vbox',
pack: 'center'
},
items: [{
xtype: 'button',
text: 'Wo Hygiene Schule macht!',
handler: function() {
if (!this.popup) {
this.popup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 320,
height: 300,
styleHtmlContent: true,
html: '<p>Foooooooooooo</p>',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Wo Hygiene Schule macht!'
}],
scroll: 'vertical'
});
}
this.popup.show('pop');

/* background image on click */
Ext.select('.x-mask').setStyle('background-image', 'url(schule.jpg)');
}
}]
});

What I have in mind is a litte different. I choose overlay.js as a nice way to hide my lengthy intro texts (replaced by Foooo here) and activate the user. Now I'd like to have a monochrome permanent background image to set the mood (renovation of schools and public restrooms). The following five menu items are ready now. Carousel.js slide shows with evenly cropped and centred 288px wide full-colour images.

As you can see I'm a little faster in Photoshop than in Javascript:
http://www.drossmedia.com/y_stuff/sencha_bg_50vh.jpg

Your help on the underlying image for the intro is very much appreciated!

drossmedia
16 Sep 2010, 5:23 AM
See my little project in full: http://www.drossmedia.com/kunden/markus_kuhfuss/sencha_touch_fokus/examples/sencha_fokus/index.html

The underlying images would be the last thing to finish it. Thank you in advance.