SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question changing text based on clicking multiple links

    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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Is it possible to post a link to the page so I can better see what you mean?

  3. #3
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    You can do it using jquery or other javascripting
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  4. #4
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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?

  6. #6
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have given it a unique id.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Cool, I've got to duck out for a bit now, but I'll have a look at it when I get back.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    So, back with you.
    My code assumes that each of the table cells holding the thumbs has the following format:

    HTML Code:
    <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:
    Code JavaScript:
    <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

  9. #9
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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"

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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?

  11. #11
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Try this:
    Code JavaScript:
    <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 />')

  14. #14
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I copied and pasted the code exactly and now its not working at all.

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Safe!
    Hang on, I'll have a look.

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Are you testing locally?
    It would help if you could put a link to a page I can have a look at.

  17. #17
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, im testing on the live page. The site is built with Wordpress if that helps anything.
    The Page

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.

  19. #19
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh. sorry. thats presently in a separate file. liveoutloudproductions.com/js/playback.js

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.

  21. #21
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Dude,
    you're cool

    First of all, change the code in line 146 from this:
    HTML Code:
    <table clss="demogrid" width="400" border="0" cellspacing="40">
    to this:
    HTML Code:
    <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).
    Code JavaScript:
    <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.

  23. #23
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    EGGSALAD!!!!
    thank you very much sir.

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    You're very welcome.
    The pleasure, Sir, was mine


Bookmarks

Posting Permissions

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