changing text based on clicking multiple links

[tim@getdim]

Ok i have a page with multiple videos on it.
each of these videos load in a single large player near the top. Thumbnail images below this large player window are links which activate each individual video.

There is text below the large player window and above the thumbnail images. I want this text to change for each video. How can i accomplish this?

this screenshot shows what im talking about:

demoreelscreenshot.png

[Pullo]

Is it possible to post a link to the page so I can better see what you mean?

[Shyflower]

You can do it using jquery or other javascripting

[tim@getdim]

Is it possible to post a link to the page so I can better see what you mean?

Here is the page

One of the videos auto plays so i suggest not having your volume up very high.

[Pullo]

Hi there,

Shouldn't be too difficult.
It would help if you could give the <p> tag which contains the title you want to swap out a unique ID.
Is that possible?

[tim@getdim]

i have given it a unique id.

[Pullo]

Cool, I've got to duck out for a bit now, but I'll have a look at it when I get back.

[Pullo]

So, back with you.
My code assumes that each of the table cells holding the thumbs has the following format:

<table class="demogrid"
  <td>
    <a>
      <img>
    </a>
    <br>
    <span class="demosmall">
      name 1
      <br>
      name 2
    </span>
  </td>
</table>

When a thumbnail is clicked, the code grabs name 1 and displays it as the main caption for the player.

Insert this at the end of your page before the closing </body> tag:

<script>
  jQuery(document).ready(function() {
    jQuery(".demogrid td a").click(function(){
      var caption = (jQuery(this).nextAll('.demosmall').html().split('<br>')[0]);
      jQuery("#playertitle .font2").text(caption);
    });
  });
</script>

HTH

[tim@getdim]

Thank you for your help. I am terrible with javascript and jquery.
Its working great, except its showing the line break tag (<br>) between name 1 and name 2.
so its displaying as

Callbox LLC<br>"BURN"

[Pullo]

Hi,
Glad it's kinda working.
For each video you have two lines (for example line 1: Callbox LLC and line 2: “BURN”).
What would you like to display as a caption for the player - line 1, line 2 or both?

[tim@getdim]

I would like to display both. Preferably like the original caption was: Callbox LLC in the font2 style, and on the line below that "BURN" in a different style (smaller font, not bolded)

if this is possible without too much difficulty

[tim@getdim]

I have set up a separate style for the second line. so line 1 (Callbox LLC) 's style would be font2 and line 2 ("BURN") 's style is playersubtitle

[Pullo]

Hi there,

Try this:

<script>
  jQuery(document).ready(function() {
    jQuery(".demogrid td a").click(function(){
      var caption = (jQuery(this).nextAll('.demosmall').html().split('<br>'));
      var part1 = caption[0];
      var part2 = caption[1];
      jQuery("#playertitle").html('<span class="font2">' + part1 + '</span><br /><br /><span class="playersubtitle">' + part2);
    });
  });
</script>

Also, make sure that it's .split('<br>') not .split('<br />')

[tim@getdim]

I copied and pasted the code exactly and now its not working at all.

[Pullo]

Safe!
Hang on, I'll have a look.

[Pullo]

Are you testing locally?
It would help if you could put a link to a page I can have a look at.

[tim@getdim]

No, im testing on the live page. The site is built with Wordpress if that helps anything.
The Page

[Pullo]

But where be the code?
I just looked at the source of the page you provided and couldn't see it.
An in-page search for "jQuery("#playertitle")" yielded no results.

[tim@getdim]

oh. sorry. thats presently in a separate file. liveoutloudproductions.com/js/playback.js

[Pullo]

No probs, but could you put it back at the end of the file, please and see if it works then.
The reason for this is I have no idea when your script switches to noConflict mode (probably the reason it's not working now) and having the at the end of the file will make debugging easier.
Also, if it doesn't work when it's placed at the end of the file, please leave it there so I can have a look.

[tim@getdim]

understood. script is back in its original place. apologies for the confusion/making things more difficult

also,

i have tested it in the page content, at the end of the page template file (page.php) and in the external js file all with the same results. it worked before but not now.

just fyi.

Having re-read your instructions (and viewed the source code myself) and realizing how wordpress works, i have now put the script in footer.php so it is right before the closing body tag as was instructed, and same result as placing it everywhere else.

[Pullo]

Dude,
you're cool

First of all, change the code in line 146 from this:

<table clss="demogrid" width="400" border="0" cellspacing="40">

to this:

<table class="demogrid" width="400" border="0" cellspacing="40">

Notice the missing "a" in the word class?
How did that suddenly happen??

Then, copy and paste this script directly before the closing body tag of your page (not half way up).

<script>
  jQuery(document).ready(function() {
    jQuery(".demogrid td a").click(function(){
      var caption = (jQuery(this).nextAll('.demosmall').html().split('<br>'));
      var part1 = caption[0];
      var part2 = caption[1];
      jQuery("#playertitle").html('<span class="font2">' + part1 + '</span><br /><br /><span class="playersubtitle">' + part2);
    });
  });
</script>

Then it should work as expected.

[tim@getdim]

EGGSALAD!!!!
thank you very much sir.

[Pullo]

You're very welcome.
The pleasure, Sir, was mine