Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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.

  • Users who have thanked Old Pedant for this post:

    broadbeach (08-19-2011)

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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?

  • Users who have thanked Old Pedant for this post:

    broadbeach (08-19-2011)

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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.

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Yes we can do what you suggested above.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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;

  • Users who have thanked Old Pedant for this post:

    broadbeach (08-19-2011)

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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">

  • #10
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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;

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Oops...too much copy/paste, not enough edit. Sorry.

  • #12
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •