Change text and video in different divs in the same function

grfxdznr · 10-29-2012, 11:47 PM

I have a page that has a button associated with each of the divs for the links to the items. I need to also place a link to a video in the page and need help making the function change the video image in the video div to correspond with the text in the text div at the same time. I have the text switching out just fine, but I could really use some help with getting both to change at the same time. BTW, this is not homework.

I would appreciate any help I can get with this!

Code:

$(document).ready(function(){
	$('a').click(function () {
		var divname= this.name;
		$("#"+divname).show("fast").siblings().hide("fast");
	});
});
 </script>

	<div id="content">
  <div id="video"><img src="images/video.png" alt="Video" /></div>
    <div id="buttons">
            <div class="button1">
            	<a href="#" name="div1">button1</a>
            <div class="button2">
                <a href="#" name="div2">button2</a>
            <div class="button3">
         		<a href="#" name="div3">button3</a>
          	<div class="button4">
         		<a href="#" name="div4">button4</a>
    </div></div></div></div></div>
  			<div id="text">
                <div id="div1" style="display:none">
                        <li>Item 1</li>    
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                </div>
                <div id="div2" style="display:none">
                       	<li>Item 1</li>    
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                </div>
            	<div id="div3" style="display:none">
                        <li>Item 1</li>    
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
				</div>
           		<div id="div4" style="display:none">
                        <li>Item 1</li>    
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
            	</div>
		</div>
	</div>
</body>
</html>

sunfighter · 10-30-2012, 01:01 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type='text/javascript' src='javascript/jquery.js'></script> <!-- CHANGE TO YOUR LOCATION-->
<script type="text/javascript">
$(document).ready(function(){
	$('a').click(function () {
		var divname= this.name;
		$("#"+divname).show("fast").siblings().hide("fast");
		var n = divname.replace("div","");
		$("img").attr("src", "images/video"+n+".png");
		$("img").attr("alt", "Video"+n);
	});
});
 </script>
</head>

<body>
<div id="content">
	<div id="video">
		<img src="images/video1.png" alt="Video1" />
	</div>
	<div id="buttons">
		<div class="button1">
			<a href="#" name="div1">button1</a>
			<div class="button2">
				<a href="#" name="div2">button2</a>
				<div class="button3">
					<a href="#" name="div3">button3</a>
					<div class="button4">
						<a href="#" name="div4">button4</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="text">
		<div id="div1" style="display:none">
			<ul>
				<li>Item 11</li>
				<li>Item 12</li>
				<li>Item 13</li>
			</ul>
		</div>
		<div id="div2" style="display:none">
			<ul>
				<li>Item 21</li>
				<li>Item 22</li>
				<li>Item 23</li>
			</ul>
		</div>
		<div id="div3" style="display:none">
			<ul>
				<li>Item 31</li>
				<li>Item 32</li>
				<li>Item 33</li>
			</ul>
		</div>
		<div id="div4" style="display:none">
			<ul>
				<li>Item 41</li>
				<li>Item 42</li>
				<li>Item 43</li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>
</body>
</html>

grfxdznr · 10-30-2012, 10:22 PM

Sunfighter, thank you so much! It works perfectly and I understand exactly what you did. I wish that had come as easily to me!

grfxdznr · 11-07-2012, 04:20 PM

Sunfighter,

This code was helpful, but now I am getting Video1 and Video2 alt text in place of the videos. This text is also showing on the page underneath this overlay window in each of the divs. Any idea on why this is happening?

Image here

sunfighter · 11-08-2012, 04:04 AM

Alternate text shows up when the program can't find the video. This happens if the path is wrong or if the name of the vid is wrong. Probable the latter, because I don't know the names of the vids and used images/video1.png or images/video2.png because that is the easiest way to generate the names. I would rename the vids in the images folder.

This text is also showing on the page underneath this overlay window
I have nothing to do with the overlay window. Your program is calling it. It looks like FLASH. I know nothing about flash. Your going to have to remove that.