Creating page slider in same row with a text field?

[sblair]

I'm looking for a way to create a slider arrow to a sub-page from a
row in a field that is also a text field in a form.

From what I've seen I haven't found a way within a form to have a sub-
page slider.

Here's a pic of what I'm talking about: http://www.litespeeddesign.com/gallery/d/1847-2/IUI.PNG
Where you see the "nudge" link I want that to actually be the slider
arrow to take it to the sub-page form I have in IUI.

Below is a snippet of my current IUI code for that page if it helps.
As you can see that row also functions as a textfield in the form.



<!-- *** NEW SCREEN *********** -->
<!-- *** IMAGE PRO INPUT SETTINGS *** -->

<form id="inputs" name="inputs" method="post" title="Inputs"
class="panel" selected="false">
<fieldset>

<!-- Brightness -->
<div class="row">
<label>Brightness</label>
<input name="textImageProInputBrightness" type="number"
min="-100.0" max="1000.0" step="1" value="<!--FUNCTIONCALL
WebIProInputBrightness -->" size="6" maxlength="6" align="right" />
</div>

<!-- Contrast -->
<div class="row">
<label>Contrast</label>
<input name="textImageProInputContrast" type="number"
min="-100.0" max="1000.0" step="1" value="<!--FUNCTIONCALL
WebIProInputContrast -->" size="6" maxlength="6" align="right" />
</div>

<!-- Input Horizontal Active -->
<div class="row">
<label>Horiz Active</label>
<br>
<input name="textImageProInputHorizActive" type="number"
min="-100.0" max="1000.0" step="1" value="<!--FUNCTIONCALL
WebIProInputHorizActive -->" size="6" maxlength="6" align="right" />
<a href="#inputactive">Nudge</a>
</div>

<!-- Input Vertical Active -->
<div class="row">
<label>Vertical Active</label>
<br>
<input name="textImageProInputVerticalActive" type="number"
min="-100.0" max="1000.0" step="1" value="<!--FUNCTIONCALL
WebIProInputVerticalActive -->" size="6" maxlength="6" align="right" /
>
<a href="#inputactive">Nudge</a>
</div>

<!-- Input Horizontal Position -->
<div class="row">
<label>Horiz Position</label>
<br>
<input name="textImageProInputHorizPosition" type="number"
min="-100.0" max="1000.0" step="1" value="<!--FUNCTIONCALL
WebIProInputHorizPosition -->" size="6" maxlength="6" align="right" /
>
<a href="#inputposition">Nudge</a>
</div>
<!-- Input Vertical Position -->
<div class="row">
<label>Vertical Position</label>
<br>
<input name="textImageProInputVerticalPosition" type="number"
min="-100.0" max="1000.0" step="1" value="<!--FUNCTIONCALL
WebIProInputVerticalPosition -->" size="6" maxlength="6"
align="right" />
<a href="#inputposition">Nudge</a>
</div>

</fieldset>
<a class="whiteButton" type="submit" onclick="(function(event)
{return true;})()">Send</a>


<a class="whiteButton" href="javascript:reloadpage()">Refresh</a>

</form>

[Mogens Beltoft]

How about the normal arrow found here:
http://demo.iui-js.org/

/Mogens

[sblair]

Yes, that is exactly what I am looking for! I haven't been able to
get it to do that within a form though on the same row as an input
field.

I'll be the first to admit js and IUI are not my strong subject
areas. What am I missing?

Thanks.
Scott

> > </form>- Hide quoted text -
>
> - Show quoted text -

[Mogens Beltoft]

Looking at the example in FireBug reveals that the CSS for the arrow is:

.panel > ul > li a, .row > a

So the arrow is displayed when an <li> has a link in it, or when the row class is used and there is a link in the div.

I hope that helps.

/Mogens

[Remi Grumeau]

On Tue, Apr 24, 2012 at 9:34 AM, Mogens Beltoft <mog...@beltoft.dk> wrote:

Looking at the example in FireBug reveals that the CSS for the arrow is:

.panel > ul > li a, .row > a

So the arrow is displayed when an <li> has a link in it, or when the row class is used and there is a link in the div.

I hope that helps.

/Mogens

True.

 

On Apr 21, 1:58 pm, Mogens Beltoft <mog...@beltoft.dk> wrote:

How about the normal arrow found here:http://demo.iui-js.org/

/Mogens

On 21-04-2012 01:04, sblair wrote:

I'm looking for a way to create a slider arrow to a sub-page from a
row in a field that is also a text field in a form.

From what I've seen I haven't found a way within a form to have a sub-

page slider.

Here's a pic of what I'm talking about:  http://www.litespeeddesign.com/gallery/d/1847-2/IUI.PNG
Where you see the "nudge" link I want that to actually be the slider
arrow to take it to the sub-page form I have in IUI.

Below is a snippet of my current IUI code for that page if it helps.
As you can see that row also functions as a textfield in the form.

This is a very specific need you have, which can't be done without some CSS & JS code.

Main idea is to hide your input, put a link to another page where a JS code update the hidden input value when an item is selected, then slides back.

Can be done in 10 to 15 lines of JS code, but it can't be without a few knowledges in JS (not that much iUI, just javascript).

Remi

[sblair]

Meh... That's what I was afraid of. Would it instead be possible to
put a button on the same row there with the input field without much
trouble? Instead of generating the slider arrow control, just putting
a button there instead?

Thanks.
Scott

On Apr 24, 3:35 am, Remi Grumeau <remi.grum...@gmail.com> wrote:
> On Tue, Apr 24, 2012 at 9:34 AM, Mogens Beltoft <mog...@beltoft.dk> wrote:
> > Looking at the example in FireBug reveals that the CSS for the arrow is:
>
> > .panel > ul > li a, .row > a
>
> > So the arrow is displayed when an <li> has a link in it, or when the row
> > class is used and there is a link in the div.
>
> > I hope that helps.
>
> > /Mogens
>
> True.
>

> On Apr 21, 1:58 pm, Mogens Beltoft <mog...@beltoft.dk> <mog...@beltoft.dk>wrote:

>
>
>
>
>
> > How about the normal arrow found here:http://demo.iui-js.org/
>
> > /Mogens
>
> > On 21-04-2012 01:04, sblair wrote:
>
> > I'm looking for a way to create a slider arrow to a sub-page from a
> > row in a field that is also a text field in a form.
>
> > From what I've seen I haven't found a way within a form to have a sub-
>
> > page slider.
>
> > Here's a pic of what I'm talking about:
> >http://www.litespeeddesign.com/gallery/d/1847-2/IUI.PNG
> > Where you see the "nudge" link I want that to actually be the slider
> > arrow to take it to the sub-page form I have in IUI.
>
> > Below is a snippet of my current IUI code for that page if it helps.
> > As you can see that row also functions as a textfield in the form.
>
> This is a very specific need you have, which can't be done without some CSS
> & JS code.
> Main idea is to hide your input, put a link to another page where a JS code
> update the hidden input value when an item is selected, then slides back.
>
> Can be done in 10 to 15 lines of JS code, but it can't be without a few
> knowledges in JS (not that much iUI, just javascript).
>

> Remi- Hide quoted text -

[Remi Grumeau]

What about just an onclick event on the input?

That might be the only easy solution i would see...

<div class="row">

  <label>Horiz Position</label>

  <input name="textImageProInputHorizPosition" type="number" min="-100.0" max="1000.0" step="1" value="<!--FUNCTIONCALL WebIProInputHorizPosition -->"  size="6" maxlength="6" align="right" id="horiz_pos_val" onclick="iui.showPageById('horiz_change')">

</div>

with another screen being

<ul id="horiz_change" title="Horiz Position">

  <li><a href="javascript:document.getElementById('horiz_pos_val').value=0;iui.goBack()">0</a></li>

  <li><a href="javascript:document.getElementById('horiz_pos_val').value=1;iui.goBack()">1</a></li>

  <li><a href="javascript:document.getElementById('horiz_pos_val').value=2;iui.goBack()">2</a></li>

  <li><a href="javascript:document.getElementById('horiz_pos_val').value=3;iui.goBack()">3</a></li>

</ul>

Quick test results the following:

http://we-are-gurus.com/labs/iui/sandbox/select-menu.html

(even if i would use history.go(-1) instead of iui.goBack() but Sean would disapprove...)

Remi

[sblair]

Hey Remi,

I'm not sure if I'm totally following. On that row I already have an
Input field so I need to be able to click on the input field to enter
a number directly, so I can't really do any onclick events there.
That field is placed in the center of the row though. On the right
side of the same row I need to have a slider arrow or even a button
that takes me to a subpage when clicked there. If you look at the
image in my first post, you can see this where I have just a plain
link that says "Nudge".

Thanks.
Scott

> > Scott- Hide quoted text -

[Remi Grumeau ]

that was a quick solution, as i said earlier, you need some custom css to do what you are trying to archieve with this nudge button.

<a href=link_to_the_panel class="rightButton">nudge</a>

and on the css side

body > .panel > .row > .rightButton {
...
// custom css
...
}


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.
>

[sblair]

Ok, I've made some progress with this following what you said. I'm
still having a hard time trying to figure out how to get it to
actually use a button graphic though. Here's the CSS I have right now
that I mostly copied from the .button css and then made changes to
colors and sizes. I've tried various methods at referencing the
button.png files as you can see with the css below, but nothing seems
to work.

Suggestions?

.row > .rightButton {
-webkit-border-image: url(grayButton.png) 0 12 0 12;
position: absolute;
overflow: hidden;
top: 8px;
right: 6px;
margin: 0;
border-width: 0 5px;
padding: 0 3px;
width: auto;
height: 30px;
line-height: 30px;
font-family: inherit;
font-size: 18px;
font-weight: bold;
color: #0000FF;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;
background: #d6d4d5;

}

On Apr 27, 1:09 am, Remi Grumeau  <remi.grum...@gmail.com> wrote:
> that was a quick solution, as i said earlier, you need some custom css to do what you are trying to archieve with this nudge button.
>
> <a href=link_to_the_panel class="rightButton">nudge</a>
>
> and on the css side
>
> body > .panel > .row > .rightButton {
> ...
> // custom css
> ...
>
> }
>
> Remi
>

[Kerri]

Try adding

display: inline-block

And see if that helps? Otherwise the anchor is just an inline element, and certain styles won't apply the same way to it as it would to a block element (like a DIV).

> > To unsubscribe from this group, send email to iphonewebdev+unsubscribe@googlegroups.com.

[sblair]

I tried adding that, but it didn't seem to have any effect :(

> > iphonewebdev...@googlegroups.com.