SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning of HTML elements using Javascript

    Hi there,

    I have taken a script from Scriptaculous and modified it a bit to fit into my site.

    My site has a liquid layout, and the Javascript that positions the three div elements uses fixed width in pixels. My question is, how do I change the values to represent percentages instead of pixels?

    Code:
    // <![CDATA[
          var Engine = {
            detect: function() {
              var UA = navigator.userAgent;
              this.isKHTML = /Konqueror|Safari|KHTML/.test(UA);
              this.isGecko = (/Gecko/.test(UA) && !this.isKHTML);
              this.isOpera = /Opera/.test(UA);
              this.isMSIE  = (/MSIE/.test(UA) && !this.isOpera);
              this.isMSIE7 = this.isMSIE && !(/MSIE 6\./.test(UA) && !this.isOpera);
            }
          }
          Engine.detect();
          
          // poor IE6 gets no shadows, ha!
          if(Engine.isMSIE && !Engine.isMSIE7) {
            
            $$('.shot').each(function(s){
              s.src = 'shot.gif';
            });
          } 
          
          
        
          function bubble(id,x,y){
            $(id+'-bubble').setStyle({left:x+'px',top:y+'px'});
            new Effect.Scale(id+'-bubble',100, Object.extend({
              beforeStart:function(effect){
                $(effect.element).style.display = 'block';
                $(effect.element).setOpacity(0);
                $$('#'+id+'-bubble p').each(function(p){p.hide()});
              },
              afterUpdate:function(effect){
                $(effect.element).setOpacity(effect.position);
              },
              scaleFrom:0,
              scaleFromCenter:true,
              afterFinish:function(effect){
                $$('#'+id+'-bubble p').each(function(p){
                  new Effect.Appear(p,{duration:0.8});
                });
              }
            }, arguments[3] || {}));        
          }
          
          bubble('about',    20, 200, { delay:0.6, duration:2.0 });
          bubble('downloads', 280,200,  { delay:1.8, duration:1.1 });
          bubble('docs',      550,200, { delay:2.4, duration:1.1 });
          
          /*new Effect.Pulsate('beta',{delay:3,afterUpdate:function(){$('beta').show()}});*/
          
          ['about-bubble','downloads-bubble','docs-bubble'].each(function(b){
            new Draggable(b,{revert:true,handle:b+'-handle'});
          });
        // ]]>
    Thanks very much,

    James

  2. #2
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried changing 'px' to '&#37;' and changing the following x and y values?
    Change:
    Code:
    bubble('about',    20, 200, { delay:0.6, duration:2.0 });
          bubble('downloads', 280, 200,  { delay:1.8, duration:1.1 });
          bubble('docs',      550, 200, { delay:2.4, duration:1.1 });
    To:
    Code:
    bubble('about',    10, 50, { delay:0.6, duration:2.0 });
          bubble('downloads', 50, 50,  { delay:1.8, duration:1.1 });
          bubble('docs',      80, 50, { delay:2.4, duration:1.1 });
    for example.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke


Bookmarks

Posting Permissions

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