SitePoint Sponsor

User Tag List

Results 1 to 22 of 22

Hybrid View

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

    zoomout leaves border behind

    I've got an image that zooms in nicely and zooms out. When it zooms in it takes an encasing frame with it but when it zooms out again it leaves the frame behind. Why? The code is here.
    Code:
    clickZoom:function(){
    document.getElementById('pix').width+=zW;
    document.getElementById('pix').height+=zH;
    },
    resetZoom:function(){
    Build.clickStop();
    currSlide.value=0;
    document.getElementById('pix').width=oW;
    document.getElementById('pix').height=oH;
    document.getElementById('pix').src=slides[0][0];
    },
    outZoom:function(){
    if(document.getElementById('pix').width>oW){
    document.getElementById('pix').width-=zW;
    document.getElementById('pix').height-=zH;
    You can see it happening at http://climatecalm.org/hydro.htm

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works fine in Safari for me?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK works in IE but what about FF and Opera?
    Last edited by gleb; Nov 11, 2007 at 06:35. Reason: checked IE

  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)
    In FF I don't see a border left behind but the image starts going behind the right sidebar as you zoom in. You should consider changing the left position of the image as you zoom in as well as the width of the image, so it is always centered relative to the viewport.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Strange, your firefox must differ from mine. I'm using 2.0.0.9 running on Vista. I,ll have a go at the centering.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look again I've altered it for a narrower screen

  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)
    OK, I see now. It might have something to do with the errors that Firebug reports whenever I click the + zoom button:
    Quote Originally Posted by Firebug
    Zh is not defined
    http://climatecalm.org/build4.js
    Line 84
    show.style.left-=Zh;

  8. #8
    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)
    The border issue seems to be a bug in FF. When I hover over it with the Web Developer Extension's "Outline current element" function, it snaps back to the correct width. You might just have to set the width of div#show explicitly.

    I don't see why you are doing this though. The images are already full-size and zooming in makes them more pixelated, so there's not much point.

    Also, I'd recommend giving the toolbar buttons title attributes. Hovering over them it would be useful to get a tooltip explaining what the button does. The far right one, for instance, is not very clear in what it does. You also should not be using images for the separator. Instead, just give #stop, #next and #out some margin-right.

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your comments. I've got it working in FF and it works but still doesn't look right in IE . Everythings held in place by a table. http://climatecalm.org/hydro.htm

  10. #10
    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)
    Why are you using a table? All you needed to do was explicitly set the width of the div containing the toolbar and image as well as setting the width of the image. A table is a step backwards.

    Also still no title attributes. They'll increase usability a lot.

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried zooming other elements but can only get it to work for for images.(Can't be right but seems so.) I've taken your other ideas onboard and will apply them before I unleash the page on the public.

  12. #12
    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)
    What I mean is, I think you need to do it for both the image AND the containing DIV. So, say you're increasing the image by 200px wide, then simply add that to the width of the DIV as well.

    Alternatively, just increase the width and height of the DIV and give the image a width and height of 100% and it should follow suit.

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I mean is the containing div won't zoom. I can't get anything to zoom except an image.
    clickZoom:function(){
    document.getElementById('one').width+=zW;
    document.getElementById('one').height+=zH;
    document.getElementById('test').width+=zW;
    document.getElementById('test').height+=zH;
    document.getElementById('frame').width+=zW;
    document.getElementById('frame').height+=zH;
    },
    'one' and 'test' are images, they zoom. 'frame' is simply a div with a border. It won't zoom.
    Last edited by gleb; Nov 12, 2007 at 14:51. Reason: spelling

  14. #14
    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)
    Code:
     document.getElementById('one').style.width
    not
    Code:
     document.getElementById('one').width

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know but
    Code:
    document.getElementById('one').width+=zW;
    works, and even if I put
    Code:
    document.getElementById('frame').style.width+=zH;
    it doesn't work.
    Last edited by gleb; Nov 12, 2007 at 16:15. Reason: added ,

  16. #16
    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)
    Ah, you need the units. SHould have mentioned that:
    Code:
    document.getElementById('frame').style.width+=zH + 'px';
    The thing is I am unfamiliar with the Core.js library and I prefer writing things myself. I just wrote this quickly, perhaps it will help you. It zooms the image in and out and as you will see, the border sticks to it properly.
    HTML Code:
    <<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <script>
    function init(){
      var a = document.getElementById('a');
      var b = a.getElementsByTagName('img')[0];
      var w = b.width, h = b.height;
      a.style.width = w + 'px';
      a.style.height = h + 'px';
      b.style.height = '100&#37;';
      b.style.width = '100%';
      document.getElementById('x').onclick = zoom;
      document.getElementById('y').onclick = zoom;
    }
    function zoom() {
      var a = document.getElementById('a');
      var v = this.id === 'x' ? 1.1 : (1/1.1);
      a.style.height = (parseInt(a.style.height) * v) + 'px';
      a.style.width = (parseInt(a.style.width) * v) + 'px';
    }
    window.onload = init;
    </script>
    <style>#a {border:2px solid red}</style>
    </head>
    <body>
    <p><a href="#" id="x">Zoom in</a></p>
    <p><a href="#" id="y">Zoom out</a></p>
    <p id="a">
    <img src="http://www1.istockphoto.com/file_thumbview_approve/1965043/2/istockphoto_1965043_rhinoceros_beetle.jpg">
    </p>
    </body>
    </html>

  17. #17
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoa, technical overkill. I can do the same with
    Code:
    document.getElementById('one').width+=zW;
    . You are still missing the point, probably my fault for using the word 'borders' when I mean a div used as a frame. See http://climatecalm.org/oldhydro.htm
    I can't find any way to make this hang together except by using a table. I know its retrogressive but when needs must.

  18. #18
    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)
    "Technical overkill"? Copy and paste the following into notepad, save it, and open it.
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <script>
    function init(){
      var a = document.getElementById('a');
      var b = a.getElementsByTagName('img')[0];
      var w = b.width;
      a.style.width = w + 'px';
      b.style.width = '100&#37;';
      document.getElementById('in').onclick = zoom;
      document.getElementById('out').onclick = zoom;
      document.getElementById('norm').onclick = function() {
        a.style.width = w + 'px'
      };
    }
    function zoom() {
      var a = document.getElementById('a');
      var v = this.id === 'in' ? 1.1 : (1/1.1);
      a.style.width = (parseInt(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;
    }
    li {
      display:inline;
      margin:0;
      text-align:center;
      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">
    </div>
    </body>
    </html>
    You will see that it makes three of your same buttons work (using text instead), using 17 lines of javascript, whereas you are using several hundred (including core.js). Please tell me how I'm missing the point. By "frame", I assume you mean a box bounding the image, <select> and list of buttons. A frame is a box with a border. What I did was make the box have a red border. Hence it is a "frame" with a red border.

  19. #19
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By 'missing the point' I meant the code you sent at #16 didn't have a frame in the sense of a surrounding div. I'm very impressed with your solution and have adapted it for my use OK. Can you explain what you are doing here
    Code:
    var v = this.id === 'in' ? 1.1 : (1/1.1);

  20. #20
    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)
    Well, no. It had a surrounding <p>. Not too different from a <div>.

    In that line, I am checking if the id of the link that was clicked is "in" (zoom in link). If so, set v to 1.1 (increase size of image by 110&#37. Otherwise, to 1/1.1 (decrease image size by 110%). I suspect you are unfamiliar with the ternary operator:
    Code:
    condition ? value1 : value2
    "condition" must evaluate to true or false. In this case it's "is this.id equal to 'in'?". Then whatever comes before it is assigned value1 if true, value2 is false. You can also use it with things like return:
    Code:
    return a > b ? a : b;
    If a is greater than b, a is returned by the function. Otherwise b is returned.

    The ternary operator is often used as a shortcut for if/else statements.

  21. #21
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to see if I understood and because it needs doing I modified your code
    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';
      var k = this.id == 'in' ? 20 : (-20);
      a.style.left = (parseInt(a.style.left) - k) + 'px';
    },
    The zoom works but the left shift doesn't ???????????

  22. #22
    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)
    Probably because a.style.left doesn't exist yet. Try this:
    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';
      var k = this.id == 'in' ? 20 : (-20);
      var al = a.style.left ? a.style.left : 0;
      a.style.left = (parseInt(al) - k) + 'px';
    }


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
  •