Jump to content

Swapping Divs with Jquery

dmei4

By dmei4
in JavaScript

Recommended Posts

dmei4 Newbie

dmei4

Posted
Posted

I was wondering if there is a method to swap the contents of a div with jquery? The event is triggered when internal elements are clicked. Say and image and a link within the div, and also to be able to jump back to the same div with the same events.

Link to comment
Share on other sites
dmei4 Newbie

dmei4

Posted
  • Author
Posted

How would that be set up? The function I'm trying to make is an image acting as a link to load a slideshow. Once you click the link, the slideshow will show where the static image was occupying. I already have the framework for the slideshow completed and the static image. I'm just trying to figure out how to swap them.

Link to comment
Share on other sites
dmei4 Newbie

dmei4

Posted
  • Author
Posted

I'm planning on just toggling the divs between one with a slideshow and one with a static image.The Div I'm trying to show is outside of the current div. When you click the thumbnail or the hyperlink it'll show the div containing a slide show and expanded info. Also, a hyperlink in the new active div will toggle it's visibility making it go back to the non-interactive div. I've attached a document of what I have. Hopefully, you understand what I'm trying to do.I'm in the process of doing what you suggest, but I don't know how to close the current div because the image is not next to the hidden div or else I could have just used $(this).next(".blah")toggle();http://forum.jquery.com/viewFile.do?fileId...737000000003003

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

this might put you in the right direction

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function()	{	var storecurrent;		$(".third").toggle(function () {		storecurrent = $(this).html();$(this).html($('.first').html());$('.first').html(storecurrent); },function() {				storecurrent = $('.first').html();$('.first').html($(this).html());$(this).html(storecurrent); 		});		$(".first").toggle(function () {		storecurrent = $(this).html();$(this).html($('.third').html());$('.third').html(storecurrent); },function() {				storecurrent = $('.third').html();$('.third').html($(this).html());$(this).html(storecurrent); 		});});/*--*//*]]>*/</script><style type="text/css"></style></head><body><div class="container">  <div class="inner first">Hello</div>  <div class="inner second">And</div>  <div class="inner third">Goodbye</div></div></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

$(".third").toggle(function () { // when element with class 'third' is clicked toggle BETWEEN THISstorecurrent = $(this).html(); // store current contents of third class element('this' is the third also)$(this).html($('.first').html()); // overwrite third class element contents with first class element$('.first').html(storecurrent); // as third has the first class content Now! we use the storecurrent value instead, that is the thirds content before being overwritten to apply to first class element},function() { AND THIS storecurrent = $('.first').html(); // store current contents of first class element $('.first').html($(this).html()); // overwrite first class element contents with third class element(this)$(this).html(storecurrent); //as first has the third class content Now! we use the storecurrent value instead, that is the first content before being overwritten to apply to third(this) class element });

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

$(".third").toggle(function () only swaps when element with class .third is clicked, and at present only swaps with element with class .first$(".first").toggle(function () only swaps when element with class .first is clicked, and at present only swaps with element with class .third $(".third").toggle(function () { storecurrent = $(this).html();$(this).html($('.first').html());$('.first').html(storecurrent); },function() { storecurrent = $('.first').html();$('.first').html($(this).html());$(this).html(storecurrent); }); $(".first").toggle(function () { storecurrent = $(this).html();$(this).html($('.third').html());$('.third').html(storecurrent); },function() { storecurrent = $('.third').html();$('.third').html($(this).html());$(this).html(storecurrent); });<div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div></div>

Link to comment
Share on other sites
dmei4 Newbie

dmei4

Posted
  • Author
Posted

I tried this, but after multiple toggles it seems to break the code because all of it will get stuck on good bye. Also, I want a class call thumbnail and a link within the class text to trigger these swap. They're both within the container. So elements that are inside the div.

<div class="container">  <div class="inner first">  Hello  </div>  <div class="inner third">Goodbye</div></div><div class="container">  <div class="inner first">Hello</div>  <div class="inner third">Goodbye</div></div>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

are you trying to show and hide another div container or swap contents?to hide and show, you would have to use something similar to this

<!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">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Untitled Document</title>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>  <script type="text/javascript">  /*<![CDATA[*//*---->*/$(document).ready(function()	{	$(".show_hide_container").hide();		$("div.container .show_hide").click(function () {		$(this).parent().next("div.show_hide_container").css("display") == "none" ? $(this).parent().next("div.show_hide_container").show() : $(this).parent().next("div.show_hide_container").hide();		});		   $("div.show_hide_container .show_hide").click(function () {		 $(this).parent().hide();		 });		      });          /*--*//*]]>*/  </script>      <style type="text/css">    .container, .show_hide_container {width: 500px; height: 100px; background-color:#CCFFCC; margin-bottom:20px;}  .container a, .show_hide_container a { display: block;}  .show_hide_container {background-color:#FFCC66;}  </style>  </head>  <body>  <div class="container">  <img class="show_hide" src="myimage_thumb.gif" />  <a class="show_hide" href="java script:void(0)">show/hide slideshow container link</a>  </div>  <div class="show_hide_container">  <a class="show_hide" href="java script:void(0)">close/hide this div container</a>  </div>  <div class="container">  <img class="show_hide" src="myimage2_thumb.gif" />  <a class="show_hide" href="java script:void(0)">show/hide slideshow container link</a>  </div>  <div class="show_hide_container">  <a class="show_hide" href="java script:void(0)">close/hide this div container</a>  </div>  </body>  </html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

all you need then is below without toggle$(document).ready(function() { $(".show_hide_container").hide(); $("div.container .show_hide").click(function () {$(this).parent().next("div.show_hide_container").show();$(this).parent().hide(); }); $("div.show_hide_container .show_hide").click(function () { $(this).parent().prev("div.container").show(); $(this).parent().hide(); });});

Link to comment
Share on other sites
dmei4 Newbie

dmei4

Posted
  • Author
Posted

Thanks a bunch it works! Though I have one more small issue. I want the image and the hyperlink inside the hide_show to trigger the swap.I tried. a.hide_show but it just makes the body of text disappear.so this is what I the structure looks like for it.<div class="hide_show"><img></img></div><div></div><div><p><a></a></p></div>Thanks again so much for your help.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

OR, keep the class reference with link, and use parents() function instead, which look through parents of elements until it matches the specific parent you are looking for.$(document).ready(function() { $(".show_hide_container").hide(); $("div.container .show_hide").click(function () {$(this).parent().next("div.show_hide_container").show();$(this).parent().hide(); }); $("div.show_hide_container .show_hide").click(function () { $(this).parents("div.show_hide_container").prev("div.container").show(); $(this).parents("div.show_hide_container").hide(); });});

Link to comment
Share on other sites
dmei4 Newbie

dmei4

Posted
  • Author
Posted

It isn't working. This is how the layout looks like.

  <div class="container">      <div>      	<img class="show_hide" src="myimage_thumb.gif" />      </div>      <div>          <p>          	<a class="show_hide" href="#">show/hide slideshow container link</a>          </p>      </div>  </div>  <div class="show_hide_container">    <div>    </div>      <div>           <p>        	<a class="show_hide" href="#">close/hide this div container</a>        </p>    </div>  </div>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

try$(document).ready(function() { $(".show_hide_container").hide(); $("div.container .show_hide").click(function () {$(this).parents("div.container").next("div.show_hide_container").show();$(this).parents("div.container").hide(); }); $("div.show_hide_container .show_hide").click(function () { $(this).parents("div.show_hide_container").prev("div.container").show(); $(this).parents("div.show_hide_container").hide(); });});

Link to comment
Share on other sites
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...