SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Location
    cincinnati
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to call flash video and text change when clicking on link

    I am trying to have a link call a video and text. When you click on the next link, it would swap out the video and the text. Right now the link does call the new video for each, but I have no idea how to get the appropriate text for the links to display too. Here's the site http://pfac.ella.net/home.html Text below the video is what needs to change with each video. What I'm trying to do is very similar to the swapping panels post, but with 2 things swapping. I tried to use the "swapping panels" idea in addition to the js I'm already using and that did not work.
    Here is my html:
    Code HTML4Strict:
        <div class="homepageRightContent">
            <div id="flashcontentHome" >
                <embed 
                src="PatWilson.swf" 
                width="320"  
                height="278"
                allowscriptaccess="always"
                allowfullscreen="true"
                />
            </div>
                <div class="squareImage"><a href="#" onclick="javascript:setFlash('http://www.kimmiecares.com/LoisColumbus.swf');"><img src="images/lois.jpg" /></a></div><br />
                <div class="squareImage"><a href="#" onclick="javascript:setFlash('http://www.kimmiecares.com/PatWilson.swf');"><img src="images/PatHome.jpg" /></a></div>
     
                <div class="squareImage" style="font-size:.65em">Click on an image to view testimonal video from recipients</div>
     
                  <p class="homepageblurbs"><b>Pat Wilson</b><br /> 
                  Cincinnati, OH.<br /><br />Pat Wilson was diagnosed with Stage 4 cancer in September of 2007. The Partners for a Cure helps her month to month by sending her to the Alliance Institute for Integrative Medicine where she receives acupuncture and warm water exercises and therapy.
                  </div>
    Here is the javascript
    Code JavaScript:
    <script type="text/javascript">
    function setFlash( loc )
    {
    var so = new SWFObject(loc, "pullContent", "320", "278", "8", "#ffffff");
    // wmode opaque needed to make youtube videos scroll correctly
    // see [url]http://blog.deconcept.com/swfobject/forum/discussion/327/[/url]
    so.addParam("wmode", "opaque");
    so.write("flashcontentHome");
    }
    </script>
    Any ideas would help. Thanks in advance!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Without making too many changes, here's how.

    Currently the onclick is as follows:

    Code html4strict:
    onclick="javascript:setVideo('http://www.kimmiecares.com/LoisColumbus.swf');"

    The javascript pseudo protocol is redundant because the onclick attribute can only be script, and we want to do more than jsut setFlash, so lets call a function that will then set it to want we need.

    Code html4strict:
    onclick="setVideo('LoisColumbus');"

    To set the blurb we need to be able to easily access it, so change it from class="homepageblurbs" to id="homepageblurbs" (it starts with a p and ends with a div, shouldn't those both be the same?)

    The function takes the name you want and sets the flash and blurb with the appropriate info.

    Code javascript:
    function setVideo(name) {
        var names = {
            'LoisColumbus' : {
                'swf' : 'http://www.kimmiecares.com/LoisColumbus.swf',
                'blurb' : "<b>Pat Wilson</b><br />Cincinnati, OH.<br /><br />Pat Wilson was diagnosed with Stage 4 cancer in September of 2007. The Partners for a Cure helps her month to month by sending her to the Alliance Institute for Integrative Medicine where she receives acupuncture and warm water exercises and therapy."
            },
            'PatWilson' : {
                'swf' : 'http://www.kimmiecares.com/PatWilson.swf',
                'blurb' : "..."
            }
        };
        setFlash(names[name].swf);
        document.getElementById('homepageblurbs').innerHTML = names[name].blurb;
    }

    There are better more unobtrusive ways to do this, but the above will quickly get you going with a working solution.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Location
    cincinnati
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help! We got the text to swap using this method, but now the video will not show. Does the setFlash need a div id to send the flash movie to? Like the line below it
    Code JavaScript:
     document.getElementById('homepageblurbs').innerHTML = names[name].blurb;
    }
    tells it to put that copy in the 'homepageblurbs' div?
    Well, on second thought, I suppose the setFlash function actually is telling it to write to the "flashcontentHome" div....so nevermind.
    Any ideas why it isn't working?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I could tell why it's not working when I can look at a demo page with the updated code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •