Changing Data Values using CSS

Discussion in 'HTML' started by sgconger@gmail.com, Jul 18, 2007.

  1. Guest

    I have a list of data values that are in an html <span id=x>1. My List
    One</span>. I want to be able in CSS (not change the html) to remove
    the 1. so that when it is displayed all I get is My List One. It
    seems like there should be a way to do this using CSS. Any help would
    be greatly appreciated.

    Thanks,
    Susan Conger
     
    , Jul 18, 2007
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed writing in
    news::

    > I have a list of data values that are in an html <span id=x>1. My List
    > One</span>. I want to be able in CSS (not change the html) to remove
    > the 1. so that when it is displayed all I get is My List One. It
    > seems like there should be a way to do this using CSS. Any help would
    > be greatly appreciated.
    >
    > Thanks,
    > Susan Conger
    >
    >


    AFAIK, there is no way to do that. You can generate content, but not
    take it away. What you would want to do is
    <p>My <span class="hide">disappearing</span> text.</p> where .hide would
    be display:none (completely removes the content) or visibility:hidden (is
    still in the document flow). If this is coming from a server side db or
    something, you could do:
    <ol>
    <!-- start your loop -->
    <li><!-- item --></li>
    <!-- end loop -->
    </ol>

    Then you could appropriately style the ol element to show or not.


    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Jul 18, 2007
    #2
    1. Advertising

  3. sgconger wrote:

    > I have a list of data values that are in an html <span id=x>1. My List
    > One</span>. I want to be able in CSS (not change the html) to remove
    > the 1. so that when it is displayed all I get is My List One. It
    > seems like there should be a way to do this using CSS.


    You could remove the "1", but you can't easily remove the ". ". To remove
    the "1" you can use:

    #x:first-letter { display: none; }

    but this will only work when used on a block element (e.g. <div>, <p>,
    etc) -- not on an inline element (e.g. <span>).

    You'd be better off using client-side scripting. Something like:

    <script type="text/javascript">
    function addEvent(obj, evType, fn)
    {
    if (obj.addEventListener)
    {
    obj.addEventListener(evType, fn, false);
    return true;
    }
    else if (obj.attachEvent)
    return obj.attachEvent('on'+evType, fn);
    else
    return false;
    }

    function my_changer()
    {
    var span = document.getElementById('x');
    var x = span.innerHTML.replace(/^[0-9]+\.\s*/, '');
    span.innerHTML = x;
    }
    addEvent(window, 'load', my_changer);
    </script>

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.12-12mdksmp, up 27 days, 12:59.]

    PHP Linkifier
    http://tobyinkster.co.uk/blog/2007/07/18/linkify/
     
    Toby A Inkster, Jul 18, 2007
    #3
  4. Jim Moe Guest

    wrote:
    > I have a list of data values that are in an html <span id=x>1. My List
    > One</span>. I want to be able in CSS (not change the html) to remove
    > the 1. so that when it is displayed all I get is My List One. It
    > seems like there should be a way to do this using CSS. Any help would
    > be greatly appreciated.
    >

    An URL to a test case would be useful.
    Is the list in an actual list element like an <ol>? Or a pseudo-list of
    some sort?
    Given that you have the <span>, I'd guess a pseudo-list. In that case
    use another <span> to control the presence of the number:

    <span id=x><span class="or_or_off">1. </span>My List One</span>

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Jul 18, 2007
    #4
  5. Mark Barratt Guest

    wrote...
    > I have a list of data values that are in an html <span id=x>1. My List
    > One</span>. I want to be able in CSS (not change the html) to remove
    > the 1. so that when it is displayed all I get is My List One. It
    > seems like there should be a way to do this using CSS. Any help would
    > be greatly appreciated.


    You can't actually process the html content with CSS - that's not
    what CSS does.

    You should be able to hide the beginning of each item by
    positioning it negatively in a block, and setting the block's
    overflow property to hidden. This would take some fiddling around
    to work properly in all browsers, however.

    --
    Mark Barratt, angoltanár budapesten
    http://www.geocities.com/nyelvmark
     
    Mark Barratt, Jul 18, 2007
    #5
    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. Dave Smithz
    Replies:
    9
    Views:
    12,354
    dorayme
    Feb 25, 2006
  2. Anthony Liu
    Replies:
    0
    Views:
    287
    Anthony Liu
    Feb 21, 2006
  3. Aaron Beall
    Replies:
    2
    Views:
    1,822
    Aaron Beall
    Sep 14, 2007
  4. TGEAR
    Replies:
    1
    Views:
    114
  5. Replies:
    1
    Views:
    77
    Evertjan.
    Jul 18, 2007
Loading...

Share This Page