Simple Animated Content Replacement?

JavaScript
1

Hello,

I need some advice on the best way to move forward or recommendations on stable plugins/solutions.

Basically:

  1. I have 2 rows with 3 images each for a total of 6 images.
  2. Each pic is a product.
  3. Clicking on the Link will change the content to show you more information on the product.

The image below shows the before and after I am attempting to accomplish:

  1. When clicking one of the 6 images, the content area should change so the layout is different.
  2. The New layout is:
    A. An enlarged content area on the top.
    B. 5 thumbnails on the bottom.

Now I don’t need anything fancy and what I would like to ultimately do is:

  1. Show the “Before” state on page load. Once one of the images is clicked on, we never need to go back to this state.

  2. Some how transition from the “before” state to the “after” state. I was thinking it could be as simple as having both states in a div with one being hidden and just have the “after” state either scroll up or bounce up so it either covers the “before” state or pushes it out the content area so it is now hidden.

  1. Once in the “after” state, clicking on the product images could just fade in/out the content area on top of it.

  2. Although the product being shown should not appear on the bottom, hence why it is only showing 5 images instead of 6… I can definitely work with all 6 being on the bottom to make things easier.

Notes:
A. I was looking at these two tutorials, but they actually change all of the page content. This won’t work for me because I have content to the left of what is shown in the example image and I don’t want this to have to fade/load in and out:

B. Thinking about it, maybe to keep things consistent, maybe it would be best to:

  • slide in the “After” state from the bottom UP, pushing the “before” state out the way.
  • Once in the “after” state, just sliding in the product information from left to right once a product image is clicked on.
  • So the bottom only shows 5 product images, hide the div of the currently viewable product. However, I am thinking it might be easier to just always show all 6.

I am not sure how implementing the above would affect SEO, but I know no other way I can accomplish what I am doing aside from hiding a bunch of divs and utilizing jquery somehow.

2

You could always make the After content a new page—which could still pull in the other content of the page that stays the same. This would make everything more accessible, too. The danger of using too much JS trickery is that the content is not accessible at all if JS is off—something you really should avoid. So whatever route you take, make sure to test it with JS off.

3

Hello Ralph,

Thanks for the input :). This is one of the reasons that I only enjoy doing websites for myself lol. I think after this project I am no longer going to accept 3rd party work and just work on my network of sites. The person I am doing the website for is adamant about transitioning between the “before” and “after” state by having the “after” state slide up.

note: I have no idea how you are always able to respond so quick lol. But thanks again!

4

Someone gave me an example of something they would do, which is something I never thought about before. After work, going to see how it pans against certain browser but I have no access to IE lol.

The concept seems cool, but does anyone have any reasons why they might not use it?

5

Because this is what a user with JS off would see, and also what Google would presumably see:


<div id="tile-box">


</div>&#8203;

That is, nothing. :slight_smile:

So it’s not a good use of JavaScript—which is nice for enhancing content, but content should not be dependent on it. It’s best to start with HTML that works on its own, and perhaps enhance it with JS.

6 
<!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>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#slider {
  position:relative;width:480px;height:280px;border:solid black 1px;
}

.start {
  position:relative;width:480px;height:280px;border:solid red 1px;
}

.start IMG {
  width:100px;margin-Left:40px;margin-Top:40px;
}

.product {
  position:relative;width:480px;height:370px;border:solid red 1px;
}

.pimg {
  width:150px;margin-Left:40px;margin-Top:40px;
}

.text {
  position:absolute;left:220px;top:20px;width:180px;height:250px;border:solid red 1px;
}

.thumbs {
  position:absolute;left:0px;top:280px;width:100%;height:90px;border:solid red 1px;
}

.thumbs IMG {
  width:80px;margin-Left:10px;margin-Top:10px;
}

/*]]>*/
</style></head>

<body>
<div id="slider" >
 <div class="start" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="image" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="image" />
 </div>

 <div class="product" >
  <div class="thumbs" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="image" />
  </div>
  <img class="pimg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
  <div class="text" >Text</div>
 </div>

 <div class="product" >
  <div class="thumbs" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="image" />
  </div>
  <img class="pimg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
  <div class="text" >Text</div>
 </div>

 <div class="product" >
  <div class="thumbs" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="image" />
  </div>
  <img class="pimg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
  <div class="text" >Text</div>
 </div>

 <div class="product" >
  <div class="thumbs" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="image" />
  </div>
  <img class="pimg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
  <div class="text" >Text</div>
 </div>

 <div class="product" >
  <div class="thumbs" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="image" />
  </div>
  <img class="pimg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="image" />
  <div class="text" >Text</div>
 </div>

 <div class="product" >
  <div class="thumbs" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="image" />
  </div>
  <img class="pimg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="image" />
  <div class="text" >Text</div>
 </div>
</div>


<script type="text/javascript">
/*<![CDATA[*/


var zxcProductSlider={

 init:function(o){
  var id=o.ParentID,goto=o.GoToArray,ms=o.SlideDuration,p=document.getElementById(id),h=p.offsetHeight,clds=p.childNodes,ary=[],imgs,cnt=0,z0=0,z0a;
  p.style.overflow='hidden';
  for (;z0<clds.length;z0++){
   if (clds[z0].nodeType==1){
    ary[cnt]=clds[z0];
    clds[z0].style.position='absolute';
    clds[z0].style.left='0px';
    clds[z0].style.top=(cnt>0?h*2:0)+'px';
    imgs=clds[z0].getElementsByTagName('IMG');
    for (z0a=0;z0a<imgs.length;z0a++){
     this.addevt(imgs[z0a],'mouseup','goto',id,goto[cnt][z0a]);
    }
    cnt++;
   }
  }
  this['zxc'+id]={
   p:p,
   ary:ary,
   ms:typeof(ms)=='number'?ms:1000,
   lst:0
  }
 },

 goto:function(id,nu){
  var o=this['zxc'+id];
  if (o&&o.ary[nu]){
   this.animate(o,o.ary[o.lst],'top',o.ary[o.lst].offsetTop,-o.ary[o.lst].offsetHeight,new Date(),o.ms,'dly'+o.lst);
   this.animate(o,o.ary[nu],'top',o.p.offsetHeight,0,new Date(),o.ms,'dly'+nu);
   this.animate(o,o.p,'height',o.p.offsetHeight,o.ary[nu].offsetHeight,new Date(),o.ms,'dly');
   o.lst=nu;
  }
 },

 animate:function(o,obj,mde,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style[mde]=Math.max(now,f<0||t<0?now:0)+'px';
  }
  if (ms<mS){
   o[to]=setTimeout(function(){ oop.animate(o,obj,mde,f,t,srt,mS,to); },10);
  }
  else {
   obj.style[mde]=t+'px';
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
 }

}

zxcProductSlider.init({
 ParentID:'slider',
 GoToArray:[
  [1,2,3,4,5,6],//    0
  [2,3,4,5,6],  //    1
  [1,3,4,5,6],  //    2
  [1,2,4,5,6],  //    3
  [1,2,3,5,6],  //    4
  [1,2,3,4,6],  //    5
  [1,2,3,4,5]   //    6
 ],
 SlideDuration:1000
});


/*]]>*/
</script>

</body>

</html>
7

@Vic — O, that’s nice! And no jQuery in sight. :slight_smile: The only thing I woud change (if I had the skill!) would be to remove the thumbnails if JS is off, as they aren’t needed then.

8

Do you have something that runs classic asp 4seen? I used your project to demonstrate the way I would go about doing something like this, although no animation. Does work with or without javascript though.

I wrote it in the classic ASP forum here : http://www.sitepoint.com/forums/showthread.php?871345-Live-Server-Side-HTML-JavaScript-Method

9

Here the same in PHP http://www.sitepoint.com/forums/showthread.php?871350-Live-Server-Side-HTML-JavaScript-Method&p=5163078#post5163078