Textfield color on iPad

Tourvista

Hi there!

First of all, thanks for helping!

So this is the virtual tour
This is the iPad simulator
And this is the xml file

When an icon is clicked, a black panel comes from the right and a some text appears.
I load the text using textfield.swf, sourcing its content from this xml file

The first problem I found was that the iPhone and iPad didn't followed the style [1] given in [2]. It ignored colors and margins. Also the font size and the line brakes where very big in the iPhone. So what I did was:

- Create an specific data for the iphone (with no
and use and
to have smaller fonts).
- Because I couldn't change the text color from white, I made this black panel coming from the left, which after all looks actually quite cool.

So I didn't mind to have a duplicated text with different tags (neither the client), because I understand textfield.swf has its limitations in the HTML5 version.

The second issue arose when the client tested the virtual tour. She said that the Specifications text (the one on the right side), that in the simulator is in white, appears as black on her iPad2.
I can't really do much, as I can't really see the problem in the simulator. But if I want to solve the problem... What can I do?
Am I right thinking that it's not possible to change the textfield color using css? So far the only way I've found to change color in iPhones and iPad was using: font color="#01a0e7"

Thank you very much!

[1] main.xml lines 847 and 918
[2] text.xml at the top

Tourvista

Sorry for asking again, but has anyone has had the chance to take a look at this?

Maybe the post look long and intimidating but basically what I'm asking is:

Am I right thinking that it's not possible to change the textfield color using css?
So far the only way I've found to change color in iPhones and iPad was using <font color="#01a0e7">

Thank you very much again.

Zephyr

Did you try to include a reset.css? Since ipad using javascript and dom elements, the browser will apply default styles to it (different per browser). By resetting everything to a certain default you have a better base to start from.

alsoo you could try to wrap the text in a paragraph

<p> test </p> or [p] text [/p]

then in the css apply a color to the p.

p{
color: white;
}

This is the reset.css I usually use (from blueprint):

CSS

/* -----------------------------------------------------------------------




 Blueprint CSS Framework 1.0
 http://blueprintcss.org


   * Copyright (c) 2007-Present. See LICENSE for more info.
   * See README for instructions on how to use Blueprint.
   * For credits and origins, see AUTHORS.
   * This is a compressed file. See the sources in the 'src' directory.


----------------------------------------------------------------------- */


/* reset.css */
html {
    margin: 0;
    padding: 0;
    border: 0;
}


body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}


article, aside, dialog, figure, footer, header, hgroup, nav, section {
    display: block;
}


body {
    line-height: 1.5;
    background: white;
}


table {
    border-collapse: separate;
    border-spacing: 0;
}


caption, th, td {
    text-align: left;
    font-weight: normal;
    float: none !important;
}


table, th, td {
    vertical-align: middle;
}


blockquote:before, blockquote:after, q:before, q:after {
    content: '';
}


blockquote, q {
    quotes: "" "";
}


a img {
    border: none;
}


:focus {
    outline: 0;
}

Alles anzeigen

Tourvista

Hi Zephyr!

Bingo!

Now it's official, the iPhone and the iPad ignore any css in the xml file. That, or it's override by Safari. In any case, that's the solution to my problem.
I added some css to the index.html and now the text is white.

Thank you very much Zephyr!

Zephyr

Alsoo, what I usually do, is after setting the html, I set the CSS again.

Code

set(plugin[title].css,data:title_css);
set(plugin[title].html,);

would be:

Code

set(plugin[title].html,);
set(plugin[title].css,data:title_css);

not sure if it matters.

Alsoo there is the loadstyle() action, which works for dynamic styles, not sure if it works on textstyles.

Tourvista

Thank you for your reply Zaphyr,

Before your post I had an email from my client saying than the text still appeared black...
So I desperately have put all the possible solutions all together to solve this:

- Added css in to index.html
- Set the css as: set(plugin[infobox_text_%1].css,data:infobox_iphone_css);

- Put set(plugin[title].css after set(plugin[title].html
- Assigned the css attribute using an action: plugin[infobox_text_%1].loadstyle(infobox_iphone_css);

Not very scientific but I hope it works:

virtual tour
iPhone simulator
iPad simulator

On the iPad, is the text that appears on the right side white or black? Please someone say it's white

Note: When I was fixing this I noticed the mask and the text had the same zorder number, so there is the possibility that the 'bug' was caused because the text was actually BEHIND the black mask... hence it looks black. We'll never know now.

God I need an iPad...

Tourvista

Apparently, the text is still showing black in the iPad...

Zephyr

The text: show menu is white for me on iPad2. I dont see any black text at all...

Tourvista

Thanks for checking Zaphir!

I worked on the virtual tour last night and this morning, taking a different approach now that I know that iPhone and the iPad takes the style from the html instead of the xml file.
Everything works on the desktop and iPhone.
Your confirmation about the white text on the iPad made my day.
Hopefully it'll work as well in my clients iPad2.
Just sent an email to the her.
Fingers crossed!!!

Thanks!

sachagriffin

Looks like you may be running a very very old javascript krpano version. There are black lines where you cubefaces join. May wish to check that.

klaus.krpano

Hi,

please see this new version here:
krpano 1.0.8.14

it has a lot of improvements in the html5 textfield plugin,
assigning the css styles to the html elements should work with it,

best regards,
Klaus

Tourvista

Thank you very much Zaphyr and Klaus!

Updated to the new version!
It's funny. This new version now allows to use textfield as parents. I had problems with that just last week
It's shows that it's vital to keep an eye on the latest Krapno releases, which is not easy because Klaus is amazing and keeps on fixing, updating and upgrading things non stop

Off topic: I was wondering, is there a way, other than check the News section, to know when a new version is released? Like Twitter, Facebook or a Newsletter...
I'm not very much into social media but I wouldn't mind to make an extra effort to follow Krpano updates!

Cheers!

Zephyr

Zitat von Tourvista

Thank you very much Zaphyr and Klaus!
Off topic: I was wondering, is there a way, other than check the News section, to know when a new version is released? Like Twitter, Facebook or a Newsletter...
I'm not very much into social media but I wouldn't mind to make an extra effort to follow Krpano updates!
Cheers!

Curious about that too. I nice handy tweet would suffice, or someway to get an RSS feed (couldnt fnid any)

Textfield color on iPad

Jetzt mitmachen!

Benutzer online in diesem Thema