SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keeping an element stable within a moving element

    I've got a slideshow(show) that expands and moves to the left. I want the controlling buttons(item) to stay still. Why doesn't this work?
    Code:
    zoom: function () {
      var a = document.getElementById('show'); 
      var v = this.id == 'in' ? 1.1 : (1/1.1);
      a.style.width = (parseInt(a.style.width) * v) + 'px';
      a.style.height = (parseInt(a.style.height) * v) + 'px';
      var k = this.id == 'in' ? 20 : (-20);
      var al = a.style.left ? a.style.left : 240;
      a.style.left = (parseInt(al) - k) + 'px';
      var f = Core.getElementsByClass('item');
      var g = this.id == 'in' ? 20 : (-20);
      var fl = f.left ? f.left : 0;
      f.left = (parseInt(fl) + g) + 'px';
      alert(f.left);
    },

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This isn't very helpful for solving your problem, but fortunately I remember your other thread. On your website, the buttons are staying to the left without moving when I zoom in. But I'm assuming you haven't put it online yet. The likelihood is that they're not staying still because you're moving the left border of the container by -20px every time while increasing the width of the container by 110%. This means that the buttons, which are centred in the container, will still be centred each time but will move slightly because an increase in width of 10% does not necessarily equate to a shift of 20px in each direction (left and right).

    You shouldn't be moving the buttons with javascript. They should stay relative to the container in some way. You can do this by not centering them and positioning them, say, 50px from the left edge constantly.

    A much easier way is to stop increasing the width of the container by a proportion. Increase it by, say, 40px each time. Then you can keep the buttons centred and simply move the container 20px to the left as you are doing now. The buttons should then stay centred because the distance from them to the left and right edges should still be equal.

  3. #3
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it is for this http://climatecalm.org/hydro.htm
    table{text-align:center;}
    is enough

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I still maintain that you do not need tables. Paste the code below into notepad, save it as HTML and open it in a browser (even IE6). It has the container centred and the image expands left and right equally and the "buttons" stay where they are.
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <script>
    var initialWidth;
    function init(){
      var a = document.getElementById('a');
      var b = a.getElementsByTagName('img')[0];
      initialWidth = b.width;
      a.style.width = initialWidth + 'px';
      a.style.margin = '0 auto';
      b.style.width = '100&#37;';
      document.getElementById('in').onclick = zoom;
      document.getElementById('out').onclick = zoom;
      document.getElementById('norm').onclick = function() {
        a.style.width = initialWidth + 'px'
      };
      document.getElementById('d').onclick = function() {
        var d = document.createElement('a');
        d.href = 'http://www.google.com';
        this.parentNode.insertBefore(d, this.nextSibling);
        d.appendChild(this);
      }
    }
    function zoom() {
      var a = document.getElementById('a');
      var v = this.id === 'in' ? 1.1 : (1/1.1);
      v = parseInt(a.style.width) * v;
      if (this.id !== 'in' && v < initialWidth) v = initialWidth;
      a.style.width = v + 'px';
    }
    window.onload = init;
    </script>
    <style>
    #a {border:2px solid red}
    #a img {display:block}
    ul {
      padding:8px;
      background:blue;
      margin:0;
      text-align:center;
    }
    li {
      display:inline;
      margin:0;
      font-size:0.7em;
    }
    li.sep {margin-left:10px;}
    select {width:100%}
    </style>
    </head>
    <body>
    <div id="a">
    <ul>
    <li>play</li>
    <li>stop</li>
    <li class="sep">back</li>
    <li>forward</li>
    <li class="sep" id="in">zoom in</li>
    <li id="out">zoom out</li>
    <li class="sep" id="norm">normal size</li>
    </ul>
    <select>
    <option>Lots of options</li>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <img src="http://www1.istockphoto.com/file_thumbview_approve/1965043/2/istockphoto_1965043_rhinoceros_beetle.jpg" id="d">
    </div>
    </body>
    </html>

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not using tables anymore, see http://eskvalleyenergy.org/newpt.htm I'll have a go with your latest code.
    Last edited by gleb; Nov 21, 2007 at 05:32. Reason: spelling

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok I put your new code in like this
    Code:
    var Build={
    init:function(){
    oW=400;oH=400;zW=40;zH=40;
    slides=[];
    slides[0] = ["1.png", "Commondale"];
      slides[1] = ["2.png", "Commondale a"];
      slides[2] = ["3.png", "Commondale Village Hall and Toilets"];
      slides[3] = ["4.png", "Danby"];
      slides[4] = ["5.png", "Danby showing shade"];
      slides[5] = ["6.png", "Danby showing tree"];
      slides[6] = ["7.png", "Farndale"];
      slides[7] = ["Goathland 12.10.05 a.png", "Goathland"];
      slides[8] = ["8.png", "Goathland back"];
      slides[9] = ["9.png", "Goathland with recycling"];
      slides[10] = ["Hutton le Hole 12.10.05.png", "Hutton le Hole"];
      slides[11] = ["Kildale 12.10.05 a.png", "Kildale a"];
      slides[12] = ["Kildale 12.10.05.png", "Kildale"];
      slides[13] = ["Ravenscar 12.10.05.png", "Ravenscar"];
      slides[14] = ["Ravenscar ladies 12.10.05.png", "Ravenscar ladies"];
      slides[15] = ["Ravenscar rear view 12.10.05.png", "Ravenscar rear view"];
      slides[16] = ["Scaling Dam 12.10.05 a.png", "Scaling Dam a"];
      slides[17] = ["Scaling Dam 12.10.05.png", "Scaling Dam"];
      slides[18] = ["Westerdale 12.10.05 a.png", "Westerdale a"];
      slides[19] = ["Westerdale 12.10.05 Village Hall.png", "Westerdale Villae Hall"];
      slides[20] = ["Westerdale 12.10.05.png", "Westerdale"];
    n=0;
    var a = document.getElementById('show');
      var b = document.getElementById('pix');
      initialWidth = b.width;
      a.style.width = initialWidth + 'px';
      a.style.margin = '0 auto';
      b.style.width = '100%';
      document.getElementById('pix').onclick = function() {
        var d = document.createElement('a');
        d.href = 'http://www.google.com';
        this.parentNode.insertBefore(d, this.nextSibling);
        d.appendChild(this);
      }
    
      document.getElementById('play').onclick = Build.clickStart;
      document.getElementById('stop').onclick = Build.clickStop;
      document.getElementById('prev').onclick = Build.clickPrev;
      document.getElementById('next').onclick = Build.clickNext;
      document.getElementById('in').onclick = Build.zoom;
      document.getElementById('out').onclick = Build.zoom;
      document.getElementById('reset').onclick = function() {
        a.style.width = initialWidth + 'px'
      };
      document.getElementById('reset').onclick = Build.resetZoom;
    currSlide={};
    currSlide.value=0;
    var select=document.getElementById('select');
     select.onchange=function(){Build.selected(this.options[this.selectedIndex].value);};
    for(var i=0;i<slides.length;i++){select.options[i]=new Option(slides[i][1],i);}
    },
    clickStart:function(){Build.Timer=setInterval(Build.runSS,3000);},
    runSS:function(){
    n++;
    if(n>=slides.length){n=0;}
    document.getElementById('pix').src=slides[n][0];
    currSlide.value=n;
    document.getElementById('select').options[n].selected=true;},
    clickStop:function(){clearInterval(Build.Timer);},
    clickNext:function(){
    Build.clickStop();
    n=currSlide.value;
    n++;
    if(n>=slides.length){n=0;}
    if(n<0){n=slides.length-1;}
    document.getElementById('pix').src=slides[n][0];
    currSlide.value=n;
    document.getElementById('select').options[n].selected=true;},
    clickPrev:function(){
    Build.clickStop();
    n=currSlide.value;
    n--;
    if(n>=slides.length){n=0;}
    if(n<0){n=slides.length-1;}
    document.getElementById('pix').src=slides[n][0];
    currSlide.value=n;
    document.getElementById('select').options[n].selected=true;},
    selected:function(n){
    document.getElementById('pix').src=slides[n][0];
    currSlide.value=n;
    },
    zoom: function () {
      var a = document.getElementById('show');
      var v = this.id === 'in' ? 1.1 : (1/1.1);
      v = parseInt(a.style.width) * v;
      if (this.id !== 'in' && v < initialWidth) v = initialWidth;
      a.style.width = v + 'px';
    }
    /*zoom: function () {
      var a = document.getElementById('show'); 
      var v = this.id == 'in' ? 1.1 : (1/1.1);
      a.style.width = (parseInt(a.style.width) * v) + 'px';
      a.style.height = (parseInt(a.style.height) * v) + 'px';
      var k = this.id == 'in' ? 20 : (-20);
      var al = a.style.left ? a.style.left : 240;
      a.style.left = (parseInt(al) - k) + 'px';
      var f = Core.getElementsByClass('item');
      var g = this.id == 'in' ? 20 : (-20);
      var fl = f.left ? f.left : 0;
      f.left = (parseInt(fl) + g) + 'px';
      alert(f.left);
    },
    
    resetZoom: function(){
    currSlide.value=0;
    Build.clickStop();
    document.getElementById('pix').width=400;
    document.getElementById('pix').height=400;
    document.getElementById('pix').src=slides[0][0];
    
    }*/
    
    
    
    };
    Core.start(Build);
    The result is athttp://eskvalleyenergy.org/newerpt.htm
    What am I doing wrong?

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    #show shouldn't be absolutely positioned.
    Code:
    #show {
    border:2px outset white;
    left:240px;    /* get rid of this */
    
    position:absolute; /* get rid of this */
    top:60px; /* get rid of this */
    }
    Instead of top:60px use margin-top.


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
  •