Condtional for Join or form a team Title

Sheetal Persaud

Wanted to throw this out to the Community in case anyone has already created a hack for this!

 

As default the Join a Team and Start a Team page in TeamRaiser share the same title (default Join or form a team). These are actually the same page anyway, just with differnt views, so I understand why they share the same page.

 

Has anyone figured out a way to force the title to show "Join a team" when you are on the join view and "Start a team"  when you are on that view. It would be a much better user experience...

 

Thanks,

 

Sheetal

Chris Backus

You could check to see whether or not the URL contains fr_tm_opt=new, then update the title accordingly.  Unfortunately, template tags won't work inside the Team Options Title field, but you can still achieve this with some jquery tomfoolery in the HTML area of the Team Selection page:

 

<script>
jQuery(document).ready(function ($) {
  if ( document.location.href.indexOf('fr_tm_opt=new') > -1 ) {
    $('#title_container').html('Create a New Team');
  }
});
</script> 

Sheetal Persaud

Chris Backus:

You could check to see whether or not the URL contains fr_tm_opt=new, then update the title accordingly.  Unfortunately, template tags won't work inside the Team Options Title field, but you can still achieve this with some jquery tomfoolery in the HTML area of the Team Selection page:

 

<script>
jQuery(document).ready(function ($) {
  if ( document.location.href.indexOf('fr_tm_opt=new') > -1 ) {
    $('#title_container').html('Create a New Team');
  }
});
</script> 

Thank Chris. I tested that out with no luck. My page does have the fr_tm_opt=new strong, but i'm not sure this code did anything...You can see what I am working on here. 

 

http://www2.michaeljfox.org/site/TR?pg=entry&fr_id=1461

Sheetal Persaud

Sheetal Persaud:

Thank Chris. I tested that out with no luck. My page does have the fr_tm_opt=new strong, but i'm not sure this code did anything...You can see what I am working on here. 

 

http://www2.michaeljfox.org/site/TR?pg=entry&fr_id=1461

We got this working Chris. Here is the code if anyone would like to use it.

 

<script type="text/javascript">

//Customize the "Join or form a team" title according to sign up option 

Y.use('jquery-noconflict', function() {

  jQuery(function($) {

    if (document.location.href.indexOf('fr_tm_opt=new') > -1) {

      $('#title_container').html('Create a New Team');

    } else {

      $('#title_container').html('Join a Team');

    }

  });

});

</script>

Brian Mucha

Sheetal Persaud:

Thank Chris. I tested that out with no luck. My page does have the fr_tm_opt=new strong, but i'm not sure this code did anything...You can see what I am working on here. 

 

http://www2.michaeljfox.org/site/TR?pg=entry&fr_id=1461

Works for me on your site.

 

It does take a second and then changes. I think this is due to you waiting for document.ready, which I don't think you t really have to do as long as your script appears after the targeted block.

 

Edit for better link:

See "1. Stop Using Document Ready"

http://flippinawesome.org/2013/05/06/5-things-you-should-stop-doing-with-jquery/

 

Brian Mucha

Brian Mucha:

Works for me on your site.

 

It does take a second and then changes. I think this is due to you waiting for document.ready, which I don't think you t really have to do as long as your script appears after the targeted block.

 

Edit for better link:

See "1. Stop Using Document Ready"

http://flippinawesome.org/2013/05/06/5-things-you-should-stop-doing-with-jquery/

 

You could easily not use jquery at all.

 

<script type="text/javascript">

    //Customize the "Join or form a team" title according to sign up option 

    var title = document.getElementById('title_container');

    if (document.location.href.indexOf('fr_tm_opt=new') > -1)

    {

      title.innerHTML='Create a New Team';

    } else {

      title.innerHTML='Join a Team';

    }

</script>

Francis Lim

Brian Mucha:

You could easily not use jquery at all.

 

<script type="text/javascript">

    //Customize the "Join or form a team" title according to sign up option 

    var title = document.getElementById('title_container');

    if (document.location.href.indexOf('fr_tm_opt=new') > -1)

    {

      title.innerHTML='Create a New Team';

    } else {

      title.innerHTML='Join a Team';

    }

</script>

Greate suggestion, Brian.



The JavaScript version would be a preferred option. However, it would post a problem if the script is postioned before the "title_container" element is created in the DOM, and if placing the JavaScript in the end of the page or after the title is not an option.



I'd wrapped script in an onload function and hidden the title with CSS before the script is executed:

<style>
#title_container {display:none;} /*Hi title before change*/
</style>

<script type="text/javascript">
//Customize the "Join or form a team" title according to sign up option 

window.onload = function() {

  var title = document.getElementById('title_container');

  if (document.location.href.indexOf('fr_tm_opt=new') > -1) {
    title.innerHTML='Create a New Team';
  } else {
    title.innerHTML='Join a Team';
  }

  title.style.display="block";

}
</script>

Thanks,

Francis