Web Analytics Made Easy -
StatCounter find a value inside of class and display a link - CodingForum

Announcement

Collapse
No announcement yet.

find a value inside of class and display a link

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • find a value inside of class and display a link

    Hi all we are in desperate need of a solution, we have tried and search different methods but none of us can figure it out.

    Basically we need to find a word which is inside a class and display a link.

    So something like this

    find a word equal to "1 line custom"

    then

    display this <a href="/1-line-custom.htm">click here</a>

    I'm not sure if this is really simple or not.

    Any help would be much appreciated.

    Thanks

    Will

  • #2
    What does "inside a class" mean? What kind of class? You mean a class name, as in
    Code:
    <span class="bananas">...</span>
    An example would help tremendously, you know.
    Be yourself. No one else is as qualified.

    Comment


    • #3
      Ok so we are getting close, basically what this is doing now is finding the words inside a class then showing us them in an alert.

      Code:
      <table>
        <tbody>
          <tr>
            <td><div class="productitemcell">Champagne Weadding</div></td>
            <td><div class="productitemcell">1 line custom</div></td>
          </tr>
        </tbody>
      </table>
      Code:
      function displaymessageNow()
      {
      var divArray = document.getElementsByClassName("productitemcell");
      
      for (var i = 0; i<divArray.length; i++)
      {
      if (divArray[i].class="productitemcell")
      alert(divArray[i].innerHTML);
      }
      }
      displaymessageNow();
      But this is obviously not the final result we are after.

      We need to be able to find the words "1 line custom" in the background (so the user dosnt see this happening) then once these words are found display a link.

      Let me know if this is making any sense to you.

      Thanks

      Comment


      • #4
        Okay, pretty trivial. There are better ways to do this, and it may not work for all kinds of content, but given the example you showed, just do:
        Code:
        function addLinks( )
        {
            var divArray = document.getElementsByClassName("productitemcell");
            for (var i = 0; i<divArray.length; i++)
            {
                var div = divArray[i[;
                div.innerHTML = '<a href="/' + escape(div.innerHTML) + '">' + div.innerHTML + '</a>';
            }
        }
        window.onload = addLinks;
        With the example you gave, that would alter it to
        Code:
        <table>
          <tbody>
            <tr>
              <td><div class="productitemcell"><a href="/Champagne%20Weadding">Champagne Weadding</a></div></td>
              <td><div class="productitemcell"><a href="/1%20line%20custom">1 line custom</a></div></td>
            </tr>
          </tbody>
        </table>
        The call to escape() is there because spaces in URLs can cause hiccups, so you encode the URL (and the browser will automatically decode it...converting %20 to space, etc.).

        Is that what you meant?
        Be yourself. No one else is as qualified.

        Comment


        • #5
          Ok ok, I'm liking this that is very very close to what we are after, however there is still a small issue.

          It would be preferable if the first two div classes "Champagne Weadding" and "Party Like 1999" didnt generate as links.

          Code:
          <table>
            <tbody>
              <tr>
                <td><div class="productitemcell">Champagne Weadding</div>
                  <div class="productitemcell">Party Like 1999</div></td>
                <td><div class="productitemcell">1 line custom</div>
                  <div class="productitemcell">2 line custom</div></td>
              </tr>
            </tbody>
          </table>

          Now keeping in mind that we have no control over removing the <div class="productitemcell"></div> wrapped around them as this is a function of the CMS we are using, However we could wrap it all in a div id or something if that would help like this:

          Code:
          <table>
            <tbody>
              <tr>
                <td><div id="removeLink">
                    <div class="productitemcell">Champagne Weadding</div>
                    <div class="productitemcell">Party Like 1999</div>
                  </div></td>
                <td><div class="productitemcell">1 line custom</div>
                  <div class="productitemcell">2 line custom</div></td>
              </tr>
            </tbody>
          </table>
          Thanks

          Comment


          • #6
            Would be better if you could wrap around the ones you *want*:
            Code:
            <table>
              <tbody>
                <tr>
                  <td>
                      <div class="productitemcell">Champagne Weadding</div>
                      <div class="productitemcell">Party Like 1999</div>
                  </td>
                  <td>
                    <div id="changeLinks">
                        <div class="productitemcell">1 line custom</div>
                        <div class="productitemcell">2 line custom</div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            Is that possible?

            If not, yes we can do it, just more work.
            Be yourself. No one else is as qualified.

            Comment


            • #7
              Yes we can do what you suggested above.

              Comment


              • #8
                Okay...
                Code:
                function addLinks( )
                {
                    var changeOnly = document.getElementsByClassName("changeLinks");
                    for ( var c = 0; c < changeOnly.length; ++i )
                    {
                        var divArray = changeOnly[c].getElementsByClassName("productitemcell");
                        for (var i = 0; i<divArray.length; i++)
                        {
                            var div = divArray[i[;
                            div.innerHTML = '<a href="/' + escape(div.innerHTML) + '">' + div.innerHTML + '</a>';
                        }
                    }
                }
                window.onload = addLinks;
                Be yourself. No one else is as qualified.

                Comment


                • #9
                  To do it the other way isn't *that* much harder, though, if it's significantly easier for you do drop in <div class=removeLink">
                  Be yourself. No one else is as qualified.

                  Comment


                  • #10
                    fantastic, we just had to change the following:
                    Code:
                    function addLinks()
                    {
                    var changeOnly = document.getElementsByClassName("changeLinks");
                    for ( var c = 0; c<changeOnly.length; ++c )
                    {
                    var divArray = changeOnly[c].getElementsByClassName("productitemcell");
                    for (var i = 0; i<divArray.length; i++)
                    {
                    var div = divArray[i];
                    div.innerHTML = '<a href="/' + escape(div.innerHTML) + '">' + div.innerHTML + '</a>';
                    }
                    }
                    }
                    window.onload = addLinks;

                    Comment


                    • #11
                      Oops...too much copy/paste, not enough edit. Sorry.
                      Be yourself. No one else is as qualified.

                      Comment


                      • #12
                        Hey Old Pedant

                        I have another problem with the same code as in previous posts if you wish to accept.

                        We are trying to add thick box to the links which are created. At first this seemed rather simple, however it dosnt want to work.

                        Here is the code which triggers thick box, now this works all fine.

                        Code:
                        <a href="/customise-forms/customisation-1?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="Form 1" class="thickbox">customisation-1</a>

                        Now here is the thick box code implemented into the JS you wrote for us previously (thick box stuff in red):

                        Code:
                        function addLinks()
                        {
                        	var changeOnly = document.getElementsByClassName("changeLinks");
                        	for ( var c = 0; c<changeOnly.length; ++c )
                        	{
                        		var divArray = changeOnly[c].getElementsByClassName("productitemcell");
                        		for (var i = 0; i<divArray.length; i++)
                        		{
                        			var div = divArray[i];
                        			div.innerHTML = '<a href="/customise-forms/' + escape(div.innerHTML) + '?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" class="thickbox" title="Form 1">' + div.innerHTML + '</a>';
                        		}
                        	}
                        }
                        window.onload = addLinks;
                        The URL it spits out seems to be fine and in theory it should work but as it is it just sends you to the actual page instead of opening up in thick box. Can you see anything in the code that would stop the thick box from working.

                        Thanks Mate

                        Comment

                        Working...
                        X