iUI <li> not full width
lictor4
I having trouble getting my site to display in full width like the iUI
examples. The <li> don't display all the way to the left and
everything seems to be centered a bit to the right. I realize that the
problem is the extra DIV that I have surrounding my panels but I can't
figure out how to keep that div and have things displaying normally at
the same time. Have a look at my code below:
<code>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><title>Send Message</title><meta name="viewport"
content="width=320; initial-scale=1.0; maximum-scale=1.0; user-
scalable=0;"/>
<style type="text/css" media="screen">@import "/javascript/iui/
iui.css";</style>
<script type="application/x-javascript" src="/javascript/iui/iui.js"></
script>
<meta name="description" content="Tmoda helps you connect with the
businesses and products in your community."/>
</head><body> <div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a class="button" href="#searchForm">Search</a>
</div>
<div id="/167048/txtnow/" title="Send Message" class="page"
selected="true
<h2>Send Text Message</h2>
<form method="post" action="/mail/167048/txtnow_s/"><fieldset>
<div class="row"><label>Message:</label><input size="15"
maxlength="155" format="text" value="" name="d"/></div>
<div class="row"><label>Your 10 digit mobile number:</label> <input
size="15" maxlength="10" style="-wap-input-format: "10N" "
format="text" name="c_zip" value="1234564323"/></div>
</fieldset>
<input type="submit" accesskey="1" value="Send"/>
</form></div>
<form id="searchForm" class="dialog" action="/index/">
<fieldset>
<h1>New Search</h1>
<a class="button leftButton" type="cancel">Cancel</a>
<a class="button blueButton" type="submit">Search</a>
<label>City:</label>
<input id="artist" type="text" name="a"/>
<label>Keywords:</label>
<input type="text" name="b"/>
<input type="hidden" name="c" value="Businesses"/>
<input type="hidden" name="submit" value="s"/>
</fieldset>
</form> </body></html>
</code>
My css and js are pretty much stock 0.40 iUI.
Thanks for any suggestions
swj
Remi Grumeau
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a class="button" href="#searchForm">Search</a>
</div>
<form method="post" action="/mail/167048/txtnow_s/" id="/167048/txtnow/" title="Send Message" class="page" selected="true">
<h2>Send Text Message</h2>
<fieldset>
<div class="row">
<label>Message:</label>
<input size="15" maxlength="155" format="text" value="" name="d"/>
</div>
<div class="row">
<label>Your 10 digit mobile number:</label>
<input size="15" maxlength="10" style="-wap-input-format: "10N" " format="text" name="c_zip" value="1234564323"/>
</div>
</fieldset>
<input type="submit" accesskey="1" value="Send"/>
</form>
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
lictor4
My issue is that I need to keep that extra div surrounding the current
view. My site is php generated so there is a lot of different pages
and view so the extra div simplifies a lot of things but also this one
negative side affect.
I'm sure there is a way to have both, I'm just not very great at
javascript yet...
Thanks again for any help with this,
Swj
Remi Grumeau
body > .dialog or body > .panel you will see in iui.css means first child of <body>
After that, you'll find .panel > fieldset , fieldset > .row, .panel > h2, … which means first child also right after body
So, the structur supported by iUI could be reproduce like this
body
+ whatever you want (div, form, p, ul, …) .panel (or .dialog, .toolbar, …)
+ h2
+ fieldset
+ div.row
+ label
+ input
The structur you propose is the following
body
+ whatever you want (div, form, p, ul, …) .panel (or .dialog, .toolbar, …)
+ form
+ h2
+ fieldset
+ div.row
+ label
+ input
which can't work, at least if you don't change 80% of the CSS code or core iUI styles.
But yes, if you do this 80% of code modification, it should work :-)
Remi
lictor4
I've tried adding my div (.page) to the CSS as you've suggested but
I'm likely too retarded at CSS to have done it right.
The <li> seem to be indenting but I can't seem to find a way to
override that. Isn't the default behavior of a <li> to indent? How is
iUI preventing it?
I should also mention that its the same for all <li>, not just the
ones inside a fieldset.
Thanks again for your time,
Swj
Remi Grumeau
- Code your PHP website using classes / OOp
- Code your website on one side
- Code your mobile website on another side
- Detect the platform and redirect on the proper version
Benefits:
- Being present in both desktop and mobile search engines
- Using all built-in functionalities of your mobile frameworks out of the box
- Any HTML / CSS updates on your desktop website will not break a thing for the mobile one
- You will be able to use those classes to create a WAP site, a RSS Feed, create a dynamic sitemap xml/ror, …
- All desktop version is not always appropriate on a mobile one, same on the opposite (accesskey, geolocalisation, …)
And this <lI> or CSS problem is over :)
example:
http://www.beosfrance.com/
http://m.beosfrance.com/
http://www.beosfrance.com/iphone/
Remi
Bontas George
I'm using iUI for my web application. I am trying to get with the help of method $_POST[""] the values of toggle after being changed. This is because I need to update a database so I cannot put into a file all iui forms. Or any helping ideas??
Thank you!!
Best regards,
George
Mark Tomlin
toggle switch in a POST or GET variable. I love being wrong tho...
>
> 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.
>
Thank you for your time,
Mark 'Dygear' Tomlin;
Remi Grumeau
So you have to give a name (example : <form name"my_form">) and put a javascript call on the submit button.
Parsing the form object with your Javascript will then do the job (using an httprequest to your PHP file)
Remi
Bontas George
I have this PHP:
while ($i<=24)
{
echo '<div class="row">
<label>Well'.$i.'</label>';
if ($row1['well'.$i]=="0") echo '<div id="well'.$i.'" class="toggle" onClick="onChangeToggle(well'.$i.')">';
else echo '<div id="well'.$i.'" class="toggle" onClick="onChangeToggle(well'.$i.')" toggled="true">';
echo '<span class="thumb"></span>
<span class="toggleOn">ON</span>
<span class="toggleOff">OFF</span>
</div>
</div>';
$i++;
}
that is creating 24 rows with a toggle that have the id=well1, well2.... Than I created a javascript:
function onChangeToggle(well) {
var act = document.getElementById(well);
act.value = (act.value == "On") ? "Off" : "On";
alert(act.value);
}
And this javascript gives me the error in the console well1 not defined if well1 pressed?? why? any ideas?
From: Remi Grumeau <remi.g...@gmail.com>
To: iphone...@googlegroups.com
Sent: Tue, December 1, 2009 6:21:03 PM
Subject: Re: Getting toggle value true/false in php
As far as i remember dealing with a for using iUI, all is done with Javascript.
So you have to give a name (example : <form name"my_form">) and put a javascript call on the submit button.
Parsing the form object with your Javascript will then do the job (using an httprequest to your PHP file)
Remi
Le 1 déc. 2009 à 15:43, Mark Tomlin a écrit :
> From what I can tell the current state of things does not put the
> toggle switch in a POST or GET variable. I love being wrong tho...
>
> On Tue, Dec 1, 2009 at 8:18 AM, Bontas George
> <bontas_g...@yahoo.com> wrote:
>> Hello everybody!
>>
>> I'm using iUI for my web application. I am trying to get with the help of
>> method $_POST[""] the values of toggle after being changed. This is because
>> I need to update a database so I cannot put into a file all iui forms. Or
>> any helping ideas??
>>
>> Thank you!!
>>
>> Best regards,
>> George
>>
>>
>> --
>>
>> 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
>> For more options, visit this group at
>> http://groups.google.com/group/iphonewebdev?hl=en.
>>
>
>
>
> --
> Thank you for your time,
> Mark 'Dygear' Tomlin;
>
> --
>
> 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.
Niels Leenheer
var act = document.getElementById(well);
alert(act.toggled);
}
Creatype
To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.
Bontas George
Same error well1 for example is not defined. Don't know why.. maybe the same thing as with javascript issue. Don't realy know because definately the well has id="well1" and the function has the atribute well1... so I don't understand why document.getElementById(well); returns NULL...
Thanks everybody!!!
From: Niels Leenheer <niels.l...@gmail.com>
To: iphone...@googlegroups.com
Sent: Wed, December 2, 2009 4:45:02 PM
Remi Grumeau
Bontas George
Cheers!
Bontas George
So the problem is here: var act = document.getElementById(well);
why?? because the well = well1 for example is without quotes. Correct is to have 'well1' or "well1". I tried with String(well) also but nothing.... :(
any ideas??
Bontas George
if ($row1['well'.$i]=="0") {echo '<div id="well'.$i.'" class="toggle" onClick="onChangeToggle('; echo "'well".$i."')"; echo'">';}
else {echo '<div id="well'.$i.'" class="toggle" onClick="onChangeToggle('; echo "'well".$i."')"; echo'" toggled="true">';}
Remi Grumeau
lictor4
problem.
I thought I had one problem since lists and "panel" pages displayed
with the same type of error (unwanted padding on the left)
Remi was right (ofcourse, thank you!) The hierarchy must be structured
properly and adding an extra div around the list pages messed that up.
Just fix iui.css to reflect the change. Any where you see
body > ul
Change to: body > div > ul
I also had to add:
body > div > ul {
margin: 0;
padding: 0;
}
On my .panel pages I had added a <form> tag so anything that looked
like:
.panel > fieldset
Had to be changed to:
.panel > form > fieldset
All in all it was only about 1/2 dozen lines to change (in .3 anyway)
Remi Grumeau
Le 20 déc. 2009 à 17:40, lictor4 a écrit :
> Thought I'd follow up on this issue incase anyone else has this
> problem.
> I thought I had one problem since lists and "panel" pages displayed
> with the same type of error (unwanted padding on the left)
> Remi was right (ofcourse, thank you!)
:) thx a million !
> The hierarchy must be structured
> properly and adding an extra div around the list pages messed that up.
> Just fix iui.css to reflect the change. Any where you see
>
> body > ul
>
> Change to: body > div > ul
>
> I also had to add:
>
> body > div > ul {
> margin: 0;
> padding: 0;
> }
if you do this change in music sample, you'll see the mess this modification could make…
if i were you, i'd rather change
body > ul
{ … }
by
body > ul,
body > div > ul
{ … }
>
> On my .panel pages I had added a <form> tag so anything that looked
> like:
> .panel > fieldset
> Had to be changed to:
> .panel > form > fieldset
that why body > div > ul is a bad move, instead of body > *:not(.toolbar) cause you can add the class="panel" to <ul>, <div> or <form>
> All in all it was only about 1/2 dozen lines to change (in .3 anyway)
trust me: to avoid if possible...
lictor4
the .panel class...
Are you saying that I should have just added "class="panel"" to my
<form> tag in html?
Remi Grumeau
> Oh ya I totally agree, I am a lil confused by your comments on adding
> the .panel class...
> Are you saying that I should have just added "class="panel"" to my
> <form> tag in html?
>
i think so :)
Remi