Safari display:none in a list

Discussion in 'HTML' started by khinester, Jun 9, 2007.

  1. khinester

    khinester Guest

    Hello,
    I have the following template that basically does the following:

    User select Country, then a sub-list is generated with Regions and
    then this returns the Counties

    ###############

    <tr>
    <td colspan="2">
    Region<br/>
    <select onchange="select_country(this.value)" style="width:
    80%">
    <option value="none"></option>
    <option stl:repeat="country countries" value="country_$
    {country/id}"
    selected="${country/is_selected}">${country/title}</
    option>
    </select>
    (Country)
    <br/>
    <select onchange="select_region(this.value)" style="width:
    80%">
    <option value="none"></option>
    <optgroup stl:repeat="country countries" id="country_$
    {country/id}"
    disabled="disabled" style="display: ${country/display}">
    <option stl:repeat="region country/regions"
    value="region_${region/id}"
    selected="${region/is_selected}">${region/title}</
    option>
    </optgroup>
    </select>
    (Region)
    <br/>
    <select name="abakuc:county" style="width: 80%">
    <option value=""></option>
    <optgroup stl:repeat="region regions" id="region_${region/
    id}"
    disabled="disabled" style="display: ${region/display}">
    <option stl:repeat="county region/counties" value="$
    {county/id}"
    selected="${county/is_selected}">${county/title}</
    option>
    </optgroup>
    </select>
    (County)
    </td>
    </tr>


    ###############

    I also have this simple javascript:

    ###############

    function select_country(value) {
    /* Hide */
    var groups = document.getElementsByTagName('optgroup');
    var group;
    for (var i=0; i<groups.length; i++) {
    group = groups;
    group.style.display = 'none';
    group.disabled = true;
    }

    /* Show */
    var element = document.getElementById(value);
    element.style.display = 'inherit';
    element.disabled = false;
    }

    function select_region(value) {
    /* Hide */
    var groups = document.getElementsByTagName('optgroup');
    var group;
    for (var i=0; i<groups.length; i++) {
    group = groups;
    if (group.id.substr(0, 7) == "region_") {
    group.style.display = 'none';
    group.disabled = true;
    }
    }

    /* Show */
    var element = document.getElementById(value);
    element.style.display = 'inherit';
    element.disabled = false;
    }

    ###############

    Now everything works great on Firefox, not yet tested on IE, but I am
    suppriesed that it does not work on Safari.

    Searching on Google does reviel that Safari has a BUG with the
    display:none

    Anyone with a solution on how to best fix this problem.

    Many thanks

    Norman
    khinester, Jun 9, 2007
    #1
    1. Advertising

  2. khinester

    dorayme Guest

    In article
    <>,
    khinester <> wrote:

    > Hello,
    > I have the following template that basically does the following:
    >
    > User select Country, then a sub-list is generated with Regions and
    > then this returns the Counties

    .....
    >
    > Now everything works great on Firefox, not yet tested on IE, but I am
    > suppriesed that it does not work on Safari.


    Supply a URL so we can see.

    --
    dorayme
    dorayme, Jun 9, 2007
    #2
    1. Advertising

  3. khinester

    Norman Guest

    dorayme wrote:
    > In article
    > <>,
    > khinester <> wrote:
    >
    > > Hello,
    > > I have the following template that basically does the following:
    > >
    > > User select Country, then a sub-list is generated with Regions and
    > > then this returns the Counties

    > ....
    > >
    > > Now everything works great on Firefox, not yet tested on IE, but I am
    > > suppriesed that it does not work on Safari.

    >
    > Supply a URL so we can see.
    >
    > --
    > dorayme


    Hi here is the form

    http://uktravellist.info/information/data/address.html

    If you select United Kingdom for example, on FF only lists the regions
    for the UK, but on Safari it lists all the regions for all the
    Countries that have regions. currently only France, UK and USA.

    Cheers

    Norman
    Norman, Jun 10, 2007
    #3
  4. khinester

    dorayme Guest

    In article
    <>,
    Norman <> wrote:

    > dorayme wrote:
    > > In article
    > > <>,
    > > khinester <> wrote:
    > >
    > > > Hello,
    > > > I have the following template that basically does the following:
    > > >
    > > > User select Country, then a sub-list is generated with Regions and
    > > > then this returns the Counties

    > > ....
    > > >
    > > > Now everything works great on Firefox, not yet tested on IE, but I am
    > > > suppriesed that it does not work on Safari.

    > >
    > > Supply a URL so we can see.
    > >
    > > --
    > > dorayme

    >
    > Hi here is the form
    >
    > http://uktravellist.info/information/data/address.html
    >
    > If you select United Kingdom for example, on FF only lists the regions
    > for the UK, but on Safari it lists all the regions for all the
    > Countries that have regions. currently only France, UK and USA.
    >


    Right. Well, the first thing to realise is that Safari has,
    usefully in a way, poor error correction. iCab is stupidly happy
    in its "face" (never mind this if you are not a Mac person) but
    equally not doing what you would want.

    And, looking closer at FF, it also plays up on repeated attempts.

    I suggest you fix up the 556 failed validation errors that are on
    that page. Fix up as many as you can and come back.

    The css sheet cannot be found and that is a bit of a puzzle in
    itself. You have a base url in your html, is it right?

    --
    dorayme
    dorayme, Jun 10, 2007
    #4
  5. khinester

    Norman Guest

    On 10 juin, 10:37, dorayme <> wrote:
    > In article
    > <>,
    >
    >
    >
    > Norman <> wrote:
    > > dorayme wrote:
    > > > In article
    > > > <>,
    > > > khinester <> wrote:

    >
    > > > > Hello,
    > > > > I have the following template that basically does the following:

    >
    > > > > User select Country, then a sub-list is generated with Regions and
    > > > > then this returns the Counties
    > > > ....

    >
    > > > > Now everything works great on Firefox, not yet tested on IE, but I am
    > > > > suppriesed that it does not work on Safari.

    >
    > > > Supply a URL so we can see.

    >
    > > > --
    > > > dorayme

    >
    > > Hi here is the form

    >
    > >http://uktravellist.info/information/data/address.html

    >
    > > If you select United Kingdom for example, on FF only lists the regions
    > > for the UK, but on Safari it lists all the regions for all the
    > > Countries that have regions. currently only France, UK and USA.

    >
    > Right. Well, the first thing to realise is that Safari has,
    > usefully in a way, poor error correction. iCab is stupidly happy
    > in its "face" (never mind this if you are not a Mac person) but
    > equally not doing what you would want.
    >
    > And, looking closer at FF, it also plays up on repeated attempts.
    >
    > I suggest you fix up the 556 failed validation errors that are on
    > that page. Fix up as many as you can and come back.
    >
    > The css sheet cannot be found and that is a bit of a puzzle in
    > itself. You have a base url in your html, is it right?
    >
    > --
    > dorayme


    Hi dorayme,
    The problem is that the actual code for this is on my local machine, I
    just am using this web space to show the form and how it handles with
    with different browsers.

    Anyhow, I have uploaded the css as well.

    Cheers
    Norman
    Norman, Jun 10, 2007
    #5
  6. khinester

    dorayme Guest

    In article
    <>,
    Norman <> wrote:

    > On 10 juin, 10:37, dorayme <> wrote:
    > > In article
    > > <>,
    > >
    > >
    > >
    > > Norman <> wrote:
    > > > dorayme wrote:
    > > >http://uktravellist.info/information/data/address.html

    > >
    > > > If you select United Kingdom for example, on FF only lists the regions
    > > > for the UK, but on Safari it lists all the regions for all the
    > > > Countries that have regions. currently only France, UK and USA.

    > >
    > > Right. Well, the first thing to realise is that Safari has,
    > > usefully in a way, poor error correction. iCab is stupidly happy
    > > in its "face" (never mind this if you are not a Mac person) but
    > > equally not doing what you would want.
    > >
    > > And, looking closer at FF, it also plays up on repeated attempts.
    > >
    > > I suggest you fix up the 556 failed validation errors that are on
    > > that page. Fix up as many as you can and come back.
    > >
    > > The css sheet cannot be found and that is a bit of a puzzle in
    > > itself. You have a base url in your html, is it right?
    > >
    > > --
    > > dorayme

    >
    > Hi dorayme,
    > The problem is that the actual code for this is on my local machine, I
    > just am using this web space to show the form and how it handles with
    > with different browsers.
    >
    > Anyhow, I have uploaded the css as well.
    >


    But the errors are still there, there are 553 today. Anyway, I
    will mention that in my FF (latest) when picking UK, it lists
    regions of France. But then so does Turkmenistan and others.
    Basically, it does not work, nothing particularly to do with
    Safari. Follow the suggestion to fix up all errors.

    Actually it is not clear what the whole context is? If it is
    going to give you a big headache maybe do it simpler. Have at
    least the regions and counties text boxes filled in by the user,
    and perhaps use more general names for the categories. We don't
    have counties here in Australia, there are states, cities, towns,
    suburbs. Why not leave all at one simple box, "Full postal
    address" and be done?

    --
    dorayme
    dorayme, Jun 11, 2007
    #6
  7. khinester

    Norman Guest

    On Jun 11, 1:12 am, dorayme <> wrote:
    > In article
    > <>,
    >
    >
    >
    > Norman <> wrote:
    > > On 10 juin, 10:37, dorayme <> wrote:
    > > > In article
    > > > <>,

    >
    > > > Norman <> wrote:
    > > > > dorayme wrote:
    > > > >http://uktravellist.info/information/data/address.html

    >
    > > > > If you select United Kingdom for example, on FF only lists the regions
    > > > > for the UK, but on Safari it lists all the regions for all the
    > > > > Countries that have regions. currently only France, UK and USA.

    >
    > > > Right. Well, the first thing to realise is that Safari has,
    > > > usefully in a way, poor error correction. iCab is stupidly happy
    > > > in its "face" (never mind this if you are not a Mac person) but
    > > > equally not doing what you would want.

    >
    > > > And, looking closer at FF, it also plays up on repeated attempts.

    >
    > > > I suggest you fix up the 556 failed validation errors that are on
    > > > that page. Fix up as many as you can and come back.

    >
    > > > The css sheet cannot be found and that is a bit of a puzzle in
    > > > itself. You have a base url in your html, is it right?

    >
    > > > --
    > > > dorayme

    >
    > > Hi dorayme,
    > > The problem is that the actual code for this is on my local machine, I
    > > just am using this web space to show the form and how it handles with
    > > with different browsers.

    >
    > > Anyhow, I have uploaded the css as well.

    >
    > But the errors are still there, there are 553 today. Anyway, I
    > will mention that in my FF (latest) when picking UK, it lists
    > regions of France. But then so does Turkmenistan and others.
    > Basically, it does not work, nothing particularly to do with
    > Safari. Follow the suggestion to fix up all errors.
    >
    > Actually it is not clear what the whole context is? If it is
    > going to give you a big headache maybe do it simpler. Have at
    > least the regions and counties text boxes filled in by the user,
    > and perhaps use more general names for the categories. We don't
    > have counties here in Australia, there are states, cities, towns,
    > suburbs. Why not leave all at one simple box, "Full postal
    > address" and be done?
    >
    > --
    > dorayme


    OK thanks for the suggestions, I will try to fix the errors.
    Cheers
    Norman
    Norman, Jun 11, 2007
    #7
  8. khinester

    RobG Guest

    On Jun 10, 4:40 am, khinester <> wrote:
    > Hello,
    > I have the following template that basically does the following:
    >
    > User select Country, then a sub-list is generated with Regions and
    > then this returns the Counties

    [...HTML with select and optgroup elements ...]
    >
    > Now everything works great on Firefox, not yet tested on IE, but I am
    > suppriesed that it does not work on Safari.


    Not for me. In Firefox, select an item in an optgroup, then hide the
    optgroup and the selected option is still selected and visible. I
    don't think you should try to limit the availability of options by
    using the stlye.display attribute.


    > Searching on Google does reviel that Safari has a BUG with the
    > display:none


    Testing shows that Safari doesn't hide optgroups using style.display.


    > Anyone with a solution on how to best fix this problem.


    Instead of hiding the elements, move them to a hidden option element
    or remove them from the DOM completely:

    <select id="sel0">
    <optgroup id="og0" label="set 0">
    <option>opt0-0
    <option>opt0-1
    <option>opt0-2
    </optgroup>
    <optgroup id="og1" label="set 1">
    <option>opt1-0
    <option>opt1-1
    <option>opt1-2
    </optgroup>
    </select>

    <select id="sel1" style="display:none;">
    </select>


    <input type="button" value="Show/hide group 0" onclick="
    toggleEl(document.getElementById('og0'));
    ">

    <script type="text/javascript">
    function toggleEl(el){
    var pID = el.parentNode.id;
    if (pID == 'sel0') {
    document.getElementById('sel1').appendChild(el);
    } else {
    document.getElementById('sel0').appendChild(el);
    }
    }
    </script>


    Note that an empty select element will cause an HTML validation error.


    --
    Rob
    RobG, Jun 12, 2007
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. khinester

    Safari display:none in a list

    khinester, Jun 9, 2007, in forum: Javascript
    Replies:
    7
    Views:
    163
  2. length power
    Replies:
    2
    Views:
    74
    Rustom Mody
    Apr 10, 2014
  3. Skip Montanaro
    Replies:
    0
    Views:
    59
    Skip Montanaro
    Apr 10, 2014
  4. Johannes Schneider

    Re: why i have the output of [None, None, None]

    Johannes Schneider, Apr 10, 2014, in forum: Python
    Replies:
    0
    Views:
    51
    Johannes Schneider
    Apr 10, 2014
  5. Terry Reedy
    Replies:
    0
    Views:
    61
    Terry Reedy
    Apr 10, 2014
Loading...

Share This Page