Home/ Questions/Q 4060706
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T15:22:20+00:00

I’m about to start working on building a website. The design is in the

  • 0

I’m about to start working on building a website. The design is in the format of content sitting behind and you click it brings it to the front. In a stack order. The design is Here

The basic concept is to follow the jQuery Roundabout idea. Buuuuuuuuut the problem I have is when HTML is added into each box, when it moves to the back it doesn’t scale correctly. It keeps the same size. Ideally I’d like it to scale to match, but not having much look.

Any ideas on how I can manage this? My example is Here

Code is also here : 

    <!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>jQuery Roundabout</title>

<script src="js/jquery-1.5.min.js" /></script>
<script src="js/jquery.roundabout.min.js" /></script>
<script src="js/jquery.roundabout-shapes.min.js" /></script>

<style>
    body { font-family: Verdana, Geneva, sans-serif; }
    p { font-size: 11px; }
   .roundabout-holder { padding: 0; height: 5em; }
   .roundabout-moveable-item {
      height: 4em;
      width: 4em;
      cursor: pointer;
   }
   .roundabout-moveable-item h1 {
       font-size: 11px;
   }
   .body { width: auto !important; }
   .roundabout-in-focus { cursor: auto; }
</style> 
</head>

<body>
<div id="container">
<div id="myRoundabout">
   <div class="box">
        <h1>Contact events4fun</h1>
        <p>HTML Element In Here</p>
        <p>email : test@test.com</p>
    </div>
   <div class="box">Box 2</div>
   <div class="box">Box 3</div>
   <div class="box">Box 4</div>
   <div class="box">Box 5</div>
</div>
<script>
   $(document).ready(function() {
      $('#myRoundabout').roundabout({
         shape: 'diagonalRingLeft',
         childSelector: 'div.box',
         minScale: 0.1,
         maxScale: 1.2
      });
   });
</script> 
</div>
</body>
</html>

Thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It appears that the font size is controlled from the wrapper. And in your example, the font size for the <p> and <h1> are set using px, so it doesn’t resize.

    Try just completely removing these two lines in your css, or switching them to em or %.

    p { font-size: 11px; }
.roundabout-moveable-item h1 { font-size: 11px; }
    • 0