Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Change text and video in different divs in the same function

    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>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    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>

  • Users who have thanked sunfighter for this post:

    grfxdznr (10-30-2012)

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Excellent!

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

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question regarding the code.

    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

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    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.


  •  

    Posting Permissions

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