Support » Plugin: Collapse-O-Matic » link in swaptitle

  • Resolved biggestleaf

    (@biggestleaf)


    Hi there,

    I’d like to add a link in the swaptitle funtion but when I do the plugin doesn’t expand any longer. I’ve managed to make it work when the plugin expands below the initial value but not with the swaptitle feature (which is need in this case).

    This is the code I’d like to work:
    [expand title=”12345XXX (Click to show)” swaptitle=”123456789” trigclass=”noarrow” id=”button”][/expand]<script type=”text/javascript”>
    jQuery(“#button”).attr(“onClick”, “_gaq.push([‘_trackEvent’, ‘Button’, ‘Clicked’, ‘123456789’]);return true”);
    </script>

    This is the code that works but is not preferred:
    [expand title=”12345XXX (Click to show)” trigclass=”noarrow” id=”button1″ alt=”Click to show number”]123456789[/expand]<script type=”text/javascript”>
    jQuery(“#button”).attr(“onClick”, “_gaq.push([‘_trackEvent’, ‘Button’, ‘Clicked’, ‘123456789’]);return true”);
    </script>

    Has anyone managed this add a link to the swaptitle feature? If so, how did you do it or can you tell me how to do it?

    Thanks!

    http://wordpress.org/extend/plugins/jquery-collapse-o-matic/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Baden

    (@baden03)

    can you explain exactly what you are trying to accomplish? What, exactly is to happen when you click the link?
    The item is to expand/collapse AND jump to another page?
    Or do you just want to fire some javascript?

    Thread Starter biggestleaf

    (@biggestleaf)

    Hi Baden,

    I’d like to hide the full telephone number so desktop user have to click on the 12345xxx part to see the the full number which I’ll be able to track in Google Analytics. In addition, I’d like to give the full number a clicktocall function for mobile users (tel:) to improve user experience. So I don’t want it to jump to another page.

    I get both features to work when it expands below. However, I’d like to make use of the swaptitle feature instead so the full number shows where the 1234xxx part is. Any idea how I can accomplish this?

    Plugin Author Baden

    (@baden03)

    Couple of things:
    1. the basic swaptitle function with a link would look like:

    [expand title="click me" swaptitle="<a href='http://plugins.twinpictures.de'>go here</a>"]When you clicked, the title swaps out with a link[/expand]

    2. if you want to trigger a script to fire, then you really should not use a link. What you might try is the following:

    [expand title="click me" swaptitle="<span class='trackme' id='8675309'>8675309</span>"]When you clicked, the title swaps out with a number, when you click the number it jQuery takes care of the rest[/expand]

    and then you need to add some jQuery to your theme. If you are using version 1.5.1 or newer you can just add something like the following to your theme’s footer.

    <script type="text/javascript">
    jQuery(document).ready(function() {
    	jQuery('.trackme').livequery('click', function(event) {
    		track_id = jQuery(this).attr('id');
    		alert(".trackme Handler called for " + track_id);
    		//your tracking code goes here
                   _gaq.push(['_trackEvent', 'Button', 'Clicked', track_id]);
                   return true;
    	});
    });
    </script>

    Have fun storming the castle.

    Thread Starter biggestleaf

    (@biggestleaf)

    Hi Baden and other readers,

    I’ve conquered the castle 🙂

    For those also looking for a solution, the following code will do the following:
    -visitors will have to click to show the entire phone number
    -these clicks can be tracked in Google Analytics
    -on mobile devices the full phone number can be touched and it will call the number

    Here is the code:

    [expand title="+27 23 456 XXXX (click to show)" swaptitle="<a href='tel:+27 23 456 7890'>+27 23 456 7890</a>" trigclass="noarrow" id="button" alt="Click to show number"]On mobile: touch number to call[/expand]<script type="text/javascript">
    	jQuery("#button").attr("onClick", "_gaq.push(['_trackEvent', 'button', 'clicked', 'label']);return true");
    </script>

    Enjoy it!

    Plugin Author Baden

    (@baden03)

    Well done largest of the leafs! Thank you for sharing your solution.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘link in swaptitle’ is closed to new replies.