Greetings:

TMobile

Hover over any of the four quadrants (Discover, Shop, etc). Any ideas or prototypes for producing a similar effect using JQuery or other library?

Thanks for your feedback!

3 answers

o.k.w 2355
0
points
This was chosen as the best answer

I've coded a working barebone version, using only jQuery core. The animation and the exploded content can be customized further.

There you go...
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var cssBoxBig = 'boxB';
$(document).ready(function(){
    $('div.box').mouseover(function(){
        if($(this).hasClass(cssBoxBig))
            return;
        $(this).addClass(cssBoxBig);
        swapText($(this));
    });
    $('div.box').mouseout(function(){
        if(!$(this).hasClass(cssBoxBig))
            return;
        $(this).removeClass(cssBoxBig);
        swapText($(this));
    });
});
function swapText(obj){ //swapping the text to show more content
    var span = $('span', obj);
    var tmpText = span.attr('desc');
    span.attr('desc', $('span', obj).text());
    span.text(tmpText);
}
</script>
<style>
div#wrapper { /*Main Wrapping Container*/
  width: 660px;
  margin: 20px auto;
  background: #ffffff;
  display: table;
  position: relative;
}
div#bar { /*Boxes Container*/
  width: 100%;
  height: 120px;
  display: table-row;
  vertical-align: top;
  position: relative;
}
div.box { /*Normal Box*/
  position: relative;
  display: table-cell;
}
div.box div{ /*Normal Box content*/
  border: 1px dashed #aaaaaa;
  background: #cccccc;
  height: 120px;
  position: relative;
  display: inline-block;
  width: 100%;
}
div.boxB { /*Big Box*/
  width: 45%;
  display: table-cell;
  height: 200px;
  background: #ffffff;
}
div.boxB div{ /*Big Box content*/
  height: 200px;
  background: #ffffff;
}
img.icon { /*Corner Image*/
  width: 50%;
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: inline-block;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="bar">
    <div id="box1" class="box"><div>
      <span desc="Box 1 more content blah blah blah">Box 1 content</span>
      <img class="icon" src="http://doctype.com/images/logo-large.png" />
    </div></div>
    <div id="box2" class="box"><div>
      <span desc="Box 2 more content blah blah blah">Box 2 content</span>
      <img class="icon" src="http://sstatic.net/so/img/logo.png" />
    </div></div>
    <div id="box3" class="box"><div>
      <span desc="Box 3 more content blah blah blah">Box 3 content</span>
      <img class="icon" src="http://sstatic.net/sf/img/logo.png" />
    </div></div>
    <div id="box4" class="box"><div>
      <span desc="Box 4 more content blah blah blah">Box 4 content</span>
      <img class="icon" src="http://sstatic.net/su/img/logo.png" />
    </div></div>
  </div>
</div>
</body>
</html>

Screenshots here: Normal

Exploded

Answered about 7 years ago by o.k.w
  • Very cool - thanks okw Jason Sweet about 7 years ago
  • Welcome Jason, hope this helps. : ) o.k.w about 7 years ago
1
point

How familiar are you with jQuery? It should be fairly simple to implement a solution using it.

Say you have 4 divs.

I would create a 'focus' class and a 'unfocus' class with different widths - using jQuery you can add and remove classes as to emulate the mouseover behavior, then replace the content appropriately.

Answered about 7 years ago by Brian Y.
Jordan 469
0
points

Check out this example/tutorial. I believe that is what you are looking for.

http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

Be sure to click on the "examples" tab, then "nav-bar style."

Answered about 7 years ago by Jordan
  • Thanks but I think you were looking at the navigation area. I was concerned with four boxed areas near the bottom. Jason Sweet about 7 years ago