how can I create click-down triangles?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • luxor1275bc@gmail.com

    how can I create click-down triangles?

    I am trying to google for how to create click-down triangles with
    either CSS or some other method but not having much luck. It's
    probably because my choice of words to describe this is incorrect.
    Anyway, what I'm looking for is similar to the click-down triangles in
    an OSX Finder window in list mode. Thanks for any help or URL to what
    I'm searching for.
  • dorayme

    #2
    Re: how can I create click-down triangles?

    In article
    <d3ab8975-4c11-4e41-8c53-a841a0be1b2d@d1 0g2000pra.googl egroups.com>,
    luxor1275bc@gma il.com wrote:
    I am trying to google for how to create click-down triangles with
    either CSS or some other method but not having much luck. It's
    probably because my choice of words to describe this is incorrect.
    Anyway, what I'm looking for is similar to the click-down triangles in
    an OSX Finder window in list mode. Thanks for any help or URL to what
    I'm searching for.
    The very simplest thing you can do is make a triangle image in the
    closed position and have refer to it in your doc in the usual img
    construction way. Make it a link too. When the user clicks it, a new
    page with other information comes up but this time with the image of a
    down triangle in the same place.

    Do you need help in understanding or implementing this?

    --
    dorayme

    Comment

    • luxor1275bc@gmail.com

      #3
      Re: how can I create click-down triangles?

      On Oct 20, 2:36 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:
      In article
      <d3ab8975-4c11-4e41-8c53-a841a0be1...@d1 0g2000pra.googl egroups.com>,
      >
       luxor127...@gma il.com wrote:
      I am trying to google for how to create click-down triangles with
      either CSS or some other method but not having much luck.  It's
      probably because my choice of words to describe this is incorrect.
      Anyway, what I'm looking for is similar to the click-down triangles in
      an OSX Finder window in list mode.  Thanks for any help or URL to what
      I'm searching for.
      >
      The very simplest thing you can do is make a triangle image in the
      closed position and have refer to it in your doc in the usual img
      construction way. Make it a link too. When the user clicks it, a new
      page with other information comes up but this time with the image of a
      down triangle in the same place.
      >
      Do you need help in understanding or implementing this?
      >
      --
      dorayme
      Thanks for your reply. I know this can be done the way that I
      described it because I've used a Javascript to do it before but it was
      kind of crude and I'm looking for something that will do multiple
      triangles. This can be seen on e.g. the google gadget for CNN.com.
      However, their source code is impossible to read (and I really mean
      impossible). :)

      Comment

      • dorayme

        #4
        Re: how can I create click-down triangles?

        In article
        <be34055f-474e-4a29-ae53-19f6e249cc7f@k3 6g2000pri.googl egroups.com>,
        luxor1275bc@gma il.com wrote:
        On Oct 20, 2:36 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:
        In article
        <d3ab8975-4c11-4e41-8c53-a841a0be1...@d1 0g2000pra.googl egroups.com>,

         luxor127...@gma il.com wrote:
        I am trying to google for how to create click-down triangles with
        either CSS or some other method but not having much luck.  It's
        probably because my choice of words to describe this is incorrect.
        Anyway, what I'm looking for is similar to the click-down triangles in
        an OSX Finder window in list mode.  Thanks for any help or URL to what
        I'm searching for.
        The very simplest thing you can do is make a triangle image in the
        closed position and have refer to it in your doc in the usual img
        construction way. Make it a link too. When the user clicks it, a new
        page with other information comes up but this time with the image of a
        down triangle in the same place.

        Do you need help in understanding or implementing this?

        --
        dorayme
        >
        Thanks for your reply.

        Is it a reply you understand or not? You do not give any clue in your
        answer? Perhaps you are suggesting my proposal is a bit crude? That is
        certainly true!

        Actually, I mused further on this and you can get a more natural looking
        dropping down of the triangle on the second page (after clicking the
        first page's "closed" triangle) by having an animated gif on the second
        page of a triangle turning clockwise till it reaches a down position.

        You then make that animated triangle a link that goes to a third page on
        which there is a further animated triangle that turns anti-clockwise to
        the "closed" position.



        I know this can be done the way that I
        described it because I've used a Javascript to do it before but it was
        kind of crude and I'm looking for something that will do multiple
        triangles. This can be seen on e.g. the google gadget for CNN.com.
        However, their source code is impossible to read (and I really mean
        impossible). :)
        --
        dorayme

        Comment

        • S.T.

          #5
          Re: how can I create click-down triangles?

          Thanks for your reply. I know this can be done the way that I
          described it because I've used a Javascript to do it before but it was
          kind of crude and I'm looking for something that will do multiple
          triangles.
          It's something easy enough to do via JQuery, if you're not averse to JS.

          Sample code - untested, but should work fine.

          triangle1.gif = right-pointing triangle image
          triangle2.gif = down-pointing triangle image
          ---------
          <script src="...pathTo. ../jquery.js"></script>
          <script>
          $(document).rea dy(function(){
          $(".toClick").c lick(function () {
          var wasClicked = $(this);
          if($(wasClicked ).attr("src") == 'triangle1.gif' ) {
          $(wasClicked).a ttr("src","tria ngle2.gif");
          } else {
          $(wasClicked).a ttr("src","tria ngle1.gif");
          }
          $(this).sibling s(".revealMenu" ).toggle();
          });
          });
          </script>

          <div class="containe r">
          <img src="triangle1. gif" class="toClick" >
          <div class="revealMe nu" style="display: none;">
          Menu 1 to reveal...
          </div>
          </div>
          <div class="containe r">
          <img src="triangle1. gif" class="toClick" >
          <div class="revealMe nu" style="display: none;">
          Menu 2 to reveal...
          </div>
          </div>
          <div class="containe r">
          <img src="triangle1. gif" class="toClick" >
          <div class="revealMe nu" style="display: none;">
          Menu 3 to reveal...
          </div>
          </div>

          Comment

          • luxor1275bc@gmail.com

            #6
            Re: how can I create click-down triangles?

            On Oct 21, 6:26 pm, "S.T." <a...@anon.comw rote:
            Thanks for your reply.  I know this can be done the way that I
            described it because I've used a Javascript to do it before but it was
            kind of crude and I'm looking for something that will do multiple
            triangles.  
            >
            It's something easy enough to do via JQuery, if you're not averse to JS.
            >
            Sample code - untested, but should work fine.
            >
            triangle1.gif = right-pointing triangle image
            triangle2.gif = down-pointing triangle image
            ---------
            <script src="...pathTo. ../jquery.js"></script>
            <script>
            $(document).rea dy(function(){
                    $(".toClick").c lick(function () {
                        var wasClicked = $(this);
                     if($(wasClicked ).attr("src") == 'triangle1.gif' ) {
                         $(wasClicked).a ttr("src","tria ngle2.gif");
                     } else {
                         $(wasClicked).a ttr("src","tria ngle1.gif");
                     }
                     $(this).sibling s(".revealMenu" ).toggle();
                    });});
            >
            </script>
            >
            <div class="containe r">
                 <img src="triangle1. gif" class="toClick" >
                 <div class="revealMe nu" style="display: none;">
                     Menu 1 to reveal...
                 </div>
            </div>
            <div class="containe r">
                 <img src="triangle1. gif" class="toClick" >
                 <div class="revealMe nu" style="display: none;">
                     Menu 2 to reveal...
                 </div>
            </div>
            <div class="containe r">
                 <img src="triangle1. gif" class="toClick" >
                 <div class="revealMe nu" style="display: none;">
                     Menu 3 to reveal...
                 </div>
            </div>
            This is *exactly* what I needed. Many thanks!!!

            Comment

            Working...