Re: Displaying a Fixed image in iUI
body *:not(.toolbar)
This CSS code targets all body childnodes (aka divs, forms, ul, …) without the
.toolbar class set.
Which means all screens.
They are all hidden by default, and the attribute selected=true tells iUI which
one should be displayed.
That's why if you add your #cornerImage div to the body, it will be hidden,
position absolute, top 0, left 0, width 100%, z-index 1.
The reason of my !important test… which seems to fail :)
You might give this a look :)
http://codepen.io/anon/pen/fIKpw
Remi
Le 23 janv. 2013 à 01:06, Jeff (iUI Noob) fjr...@gmail.com a écrit :
Sorry, let me clarify...
This code works fine on my sites such as FJRRally.com/CFR when displayed on
iOS 5 and 6 devices. Of course, the image is quite small as the site is not a
mobile site (I was thinking of making an iUI version of the site.) It does
exhibit some interesting behaviour when zooming though.
In my iUI code, the image is not displayed at all (that I can see.)
I've tried adding adding a display: block; !important to .cornerImage with no
effect. Changing this class selector to an id selector does show the image,
but in the 0%,0% position in the main div.
I have also been experimenting with a Border-Image in the body
*:not(.toolbar) CSS and, apparently, these 2 things do not work well together.
I'll play with it further, Thanks Remi!
On Tuesday, January 22, 2013 3:55:49 PM UTC-7, Remi Grumeau wrote:
Well … what do you mean by this code does not work ?
Image does not display or it does not show at the position you want?
Absolute position is always tricky on mobile screens, note that position:
fixed is supported in iOS since iOS5 only.
It also works pretty bad on Android until 2.3.
But if it does not show at all, then you might add a display: block!important
to #cornerImage.
Le 22 janv. 2013 à 22:48, Jeff (iUI Noob) fjr...@gmail.com a écrit :
Ok, I've been sucked in! I can't seem to stop playing with iUI. To date, I
have just built little personal webApps, but maybe one day I'll produce
something useful with it.
So... I like to put a little image in my websites that is fixed in the
bottom right corner of the screen. The code I use is:
[code]
!-- Include Corner Image --
style type=text/css #cornerImage {position:
fixed;_position:absolute;bottom:0px;right:0px;} /style
div id=cornerImage class=cornerImage img src=CornerImage.png alt=
border=0 /div
[/code]
This code does not work in iUI. I suspected that this would be the case due
to the way iUI handles DIVs, but I'm not sure where to start to work around
it.
Any thoughts?
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphone...@googlegroups.com.
To unsubscribe from this group, send email to
iphonewebdev...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphonewebdev@googlegroups.com.
To unsubscribe from this group, send email to
iphonewebdev+unsubscr...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphonewebdev@googlegroups.com.
To unsubscribe from this group, send email to
iphonewebdev+unsubscr...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
Re: Displaying a Fixed image in iUI
Awesome, thanks Remi!
I read body *:not(.toolbar) as anything in the body that is not of the
toolbar class and knew that that is what I had to overcome. I tried body
*:not(.toolbar,.cornerImage) to no avail (I didn't bother to check CSS3
docs, I just gave it a shot.) I hadn't thought to not put the image tag in
a div, I always have, and to apply the CSS directly to it.
I've contemplated if there are any drawbacks to not having it in a div and
I can't seem to come up with any. Looks like this is the trick that makes
it work! :-D
I should add that with position: absolute the image scrolls with the page.
I was trying to fix it to the screen and position: fixed does do the trick
(see FJRRally.com/iUI for demo.)
Thanks again Remi! You and all the iUI contributors rock!
On Wednesday, January 23, 2013 5:36:16 AM UTC-7, Remi Grumeau wrote:
body *:not(.toolbar)
This CSS code targets all body childnodes (aka divs, forms, ul, …) without
the .toolbar class set.
Which means all screens.
They are all hidden by default, and the attribute selected=true tells iUI
which one should be displayed.
That's why if you add your #cornerImage div to the body, it will be
hidden, position absolute, top 0, left 0, width 100%, z-index 1.
The reason of my !important test… which seems to fail :)
You might give this a look :)
http://codepen.io/anon/pen/fIKpw
Remi
Le 23 janv. 2013 à 01:06, Jeff (iUI Noob) fjr...@gmail.comjavascript:
a écrit :
Sorry, let me clarify...
This code works fine on my sites such as
FJRRally.com/CFRhttp://fjrrally.com/CFRwhen displayed on iOS 5 and 6
devices. Of course, the image is quite small
as the site is not a mobile site (I was thinking of making an iUI version
of the site.) It does exhibit some interesting behaviour when zooming
though.
In my iUI code, the image is not displayed at all (that I can see.)
I've tried adding adding a display: block; !important to .cornerImage
with no effect. Changing this class selector to an id selector does show
the image, but in the 0%,0% position in the main div.
I have also been experimenting with a Border-Image in the body
*:not(.toolbar) CSS and, apparently, these 2 things do not work well
together.
I'll play with it further, Thanks Remi!
On Tuesday, January 22, 2013 3:55:49 PM UTC-7, Remi Grumeau wrote:
Well … what do you mean by this code does not work ?
Image does not display or it does not show at the position you want?
Absolute position is always tricky on mobile screens, note that position:
fixed is supported in iOS since iOS5 only.
It also works pretty bad on Android until 2.3.
But if it does not show at all, then you might add a display:
block!important to #cornerImage.
Le 22 janv. 2013 à 22:48, Jeff (iUI Noob) fjr...@gmail.com a écrit :
Ok, I've been sucked in! I can't seem to stop playing with iUI. To date,
I have just built little personal webApps, but maybe one day I'll produce
something useful with it.
So... I like to put a little image in my websites that is fixed in the
bottom right corner of the screen. The code I use is:
[code]
!-- Include Corner Image --
style type=text/css #cornerImage {position:
fixed;_position:absolute;bottom:0px;right:0px;} /style
div id=cornerImage class=cornerImage img src=CornerImage.png
alt= border=0 /div
[/code]
This code does not work in iUI. I suspected that this would be the case
due to the way iUI handles DIVs, but I'm not sure where to start to work
around it.
Any thoughts?
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphone...@googlegroups.com.
To unsubscribe from this group, send email to
iphonewebdev...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphone...@googlegroups.comjavascript:
.
To unsubscribe from this group, send email to
iphonewebdev...@googlegroups.com javascript:.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphonewebdev@googlegroups.com.
To unsubscribe from this group, send email to
iphonewebdev+unsubscr...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
Re: Displaying a Fixed image in iUI
Working solution (big thanks to Remi!)
style
#cornerImage {
display: block;
position: fixed;
top: auto;
bottom: 0px;
left: auto;
right: 0px;
width: 100px;
min-height: 60px;
}
/style
img id=cornerImage src=cornerImage.png
In iUI, all of the CSS declarations shown are necessary,
On Tuesday, January 22, 2013 2:48:28 PM UTC-7, Jeff (iUI Noob) wrote:
Ok, I've been sucked in! I can't seem to stop playing with iUI. To date, I
have just built little personal webApps, but maybe one day I'll produce
something useful with it.
So... I like to put a little image in my websites that is fixed in the
bottom right corner of the screen. The code I use is:
[code]
!-- Include Corner Image --
style type=text/css #cornerImage {position:
fixed;_position:absolute;bottom:0px;right:0px;} /style
div id=cornerImage class=cornerImage img src=CornerImage.png
alt= border=0 /div
[/code]
This code does not work in iUI. I suspected that this would be the case
due to the way iUI handles DIVs, but I'm not sure where to start to work
around it.
Any thoughts?
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphonewebdev@googlegroups.com.
To unsubscribe from this group, send email to
iphonewebdev+unsubscr...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
Re: Displaying a Fixed image in iUI
Well … what do you mean by this code does not work ?
Image does not display or it does not show at the position you want?
Absolute position is always tricky on mobile screens, note that position: fixed
is supported in iOS since iOS5 only.
It also works pretty bad on Android until 2.3.
But if it does not show at all, then you might add a display: block!important
to #cornerImage.
Le 22 janv. 2013 à 22:48, Jeff (iUI Noob) fjr...@gmail.com a écrit :
Ok, I've been sucked in! I can't seem to stop playing with iUI. To date, I
have just built little personal webApps, but maybe one day I'll produce
something useful with it.
So... I like to put a little image in my websites that is fixed in the bottom
right corner of the screen. The code I use is:
[code]
!-- Include Corner Image --
style type=text/css #cornerImage {position:
fixed;_position:absolute;bottom:0px;right:0px;} /style
div id=cornerImage class=cornerImage img src=CornerImage.png alt=
border=0 /div
[/code]
This code does not work in iUI. I suspected that this would be the case due
to the way iUI handles DIVs, but I'm not sure where to start to work around
it.
Any thoughts?
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphonewebdev@googlegroups.com.
To unsubscribe from this group, send email to
iphonewebdev+unsubscr...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphonewebdev@googlegroups.com.
To unsubscribe from this group, send email to
iphonewebdev+unsubscr...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
Re: Displaying a Fixed image in iUI
Sorry, let me clarify...
This code works fine on my sites such as FJRRally.com/CFR when displayed on
iOS 5 and 6 devices. Of course, the image is quite small as the site is not
a mobile site (I was thinking of making an iUI version of the site.) It
does exhibit some interesting behaviour when zooming though.
In my iUI code, the image is not displayed at all (that I can see.)
I've tried adding adding a display: block; !important to .cornerImage with
no effect. Changing this class selector to an id selector does show the
image, but in the 0%,0% position in the main div.
I have also been experimenting with a Border-Image in the body
*:not(.toolbar) CSS and, apparently, these 2 things do not work well
together.
I'll play with it further, Thanks Remi!
On Tuesday, January 22, 2013 3:55:49 PM UTC-7, Remi Grumeau wrote:
Well … what do you mean by this code does not work ?
Image does not display or it does not show at the position you want?
Absolute position is always tricky on mobile screens, note that position:
fixed is supported in iOS since iOS5 only.
It also works pretty bad on Android until 2.3.
But if it does not show at all, then you might add a display:
block!important to #cornerImage.
Le 22 janv. 2013 à 22:48, Jeff (iUI Noob) fjr...@gmail.comjavascript:
a écrit :
Ok, I've been sucked in! I can't seem to stop playing with iUI. To date, I
have just built little personal webApps, but maybe one day I'll produce
something useful with it.
So... I like to put a little image in my websites that is fixed in the
bottom right corner of the screen. The code I use is:
[code]
!-- Include Corner Image --
style type=text/css #cornerImage {position:
fixed;_position:absolute;bottom:0px;right:0px;} /style
div id=cornerImage class=cornerImage img src=CornerImage.png
alt= border=0 /div
[/code]
This code does not work in iUI. I suspected that this would be the case
due to the way iUI handles DIVs, but I'm not sure where to start to work
around it.
Any thoughts?
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphone...@googlegroups.comjavascript:
.
To unsubscribe from this group, send email to
iphonewebdev...@googlegroups.com javascript:.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
--
You received this message because you are subscribed to the Google Groups
iPhoneWebDev group.
To post to this group, send email to iphonewebdev@googlegroups.com.
To unsubscribe from this group, send email to
iphonewebdev+unsubscr...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
