redButton whiteButton Positioning

[Jeff H]

Hi,

I have two buttons on a form that I do not always have to appear.

<a id="answer_button"class="whiteButton" onclick="check_answer()"
target="play" type="button" ></a>
<a id="question_button"class="redButton" onclick="get_question()"
target="play" type="button"></a>

I can easily hide on elementbyid but if I hide the top one there
remains a space where it was. Any suggestions on how to move the
bottom button up into the top position?

Also if I decide to place these side by side - 50% of screen each -
what would be the easiest way?

Thank you.

You can see the problem here http://www.wikiklu.com/beta/#_home just
click play and after you answer the first question the Next Question
button pops up with a space.

[Remi Grumeau]

strange behavior you describe here cause a document.getElementById('answer_button).style.display='non' should make your second button take the place of the first, where a style.visibility='hidden' would have this behavior …

http://remi-grumeau.com/labs/iui/hide_show.html#_index

Example here with both links and buttons

Remi

> --
>
> 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.
> For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
>
>

Remi Grumeau
(+33) 663 687 206
http://www.remi-grumeau.com

[Jeff H]

Thank you Remi! I obviously was not holding my lips correctly on that
one as well.
Is there a way to put two buttons on one line without switching to the
blueButton?
Jeff

On Dec 11, 10:48 am, Remi Grumeau <remi.grum...@gmail.com> wrote:
> strange behavior you describe here cause a document.getElementById('answer_button).style.display='non' should make your second button take the place of the first, where a style.visibility='hidden' would have this behavior …
>
> http://remi-grumeau.com/labs/iui/hide_show.html#_index
>
> Example here with both links and buttons
>
> Remi
>
> Le 11 déc. 2009 à 17:44, Jeff H a écrit :
>
> > Hi,
>
> > I have two buttons on a form that I do not always have to appear.
>
> > <a id="answer_button"class="whiteButton" onclick="check_answer()"
> > target="play" type="button" ></a>
> > <a id="question_button"class="redButton" onclick="get_question()"
> > target="play" type="button"></a>
>
> > I can easily hide on elementbyid but if I hide the top one there
> > remains a space where it was. Any suggestions on how to move the
> > bottom button up into the top position?
>
> > Also if I decide to place these side by side - 50% of screen each -
> > what would be the easiest way?
>
> > Thank you.
>

> > You can see the problem herehttp://www.wikiklu.com/beta/#_home just

> > click play and after you answer the first question the Next Question
> > button pops up with a space.
>
> > --
>
> > 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.

> > For more options, visit this group athttp://groups.google.com/group/iphonewebdev?hl=en.

>
> Remi Grumeau
> (+33) 663 687 206http://www.remi-grumeau.com
>

>  smime.p7s
> 2KViewDownload

[Remi Grumeau]

Well, i think you can success this with some custom CSS classes, like a '.half-size' that you can add like this <a class="whiteButton half-size">white button</a> to change a default button width only (and so keep its style). Don't forget to put a width value by default and also [orient=landscape] if a percent value do not work properly.

Remi

> For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.

[Remi Grumeau]

Actually, this should help you :)

/*** half size button ***/
body > * > a.halfsize
{
float: left;
width: 105px;
}
body > * > a.halfsize[orient="landscape"],
body[orient="landscape"] > * > a.halfsize
{
width: 185px;
}

Example for one 100% button and two 50% buttons:

<ul id="buttons" title="Buttons" class="panel">
<a href="#_buttons" class="whiteButton">whiteButton</a>
<br />
<a href="#_buttons" class="whiteButton halfsize">Halfsize</a>
<a href="#_buttons" class="grayButton halfsize">Halfsize</a>
</ul>

You can use it with whiteButton, grayButton and redButton.
Sample here : http://www.remi-grumeau.com/labs/iui/ (button classes)

Remi

ps: actually can't tell why i have to state the orient=landscape twice but without it, it's just not working … : /

Le 12 déc. 2009 à 21:41, Jeff H a écrit :

> For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.

[Jeff H]

Thanks again Remi!
I cut and paste and it didn't work for me yet but now I know how.
Thanks Again.

Jeff

On Dec 13, 4:54 pm, Remi Grumeau <remi.grum...@gmail.com> wrote:
> Actually, this should help you :)
>
> /*** half size button ***/
> body > * > a.halfsize
> {
>         float:          left;
>         width:          105px;}
>
> body > * > a.halfsize[orient="landscape"],
> body[orient="landscape"] > * > a.halfsize
> {
>         width:          185px;
>
> }
>
> Example for one 100% button and two 50% buttons:
>
>     <ul id="buttons" title="Buttons" class="panel">
>         <a href="#_buttons" class="whiteButton">whiteButton</a>
>         <br />
>         <a href="#_buttons" class="whiteButton halfsize">Halfsize</a>
>         <a href="#_buttons" class="grayButton halfsize">Halfsize</a>
>     </ul>
>
> You can use it with whiteButton, grayButton and redButton.

> Sample here :http://www.remi-grumeau.com/labs/iui/(button classes)

[Remi Grumeau]

Perhaps you have a different tag architecture ?
it has to be <body>, <ul> or <div>, <a class="whiteButton">
if your button is on a list, or your <ul> in a <div>, it will not work.

Remi

> For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.