SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Raffles help please: rollover image position problems

    Ok I thought I had this working but it turns out it doesnt.

    I have 2 bizarre problems.
    Basically I have built a PHP blog that lets me post an image with a text entry. The image is entered into the blog db table and it creates two different sizes of the image. One _small and one _big image. The _small image can be seen at the end of the text entry and when you rollover the small image the _big image then pops up
    Unfortunitly this effect seems to have gone wrong somewhere and I am not sure what I have done to make it stop working..

    Problem #1:
    Here is a screenshot of how this effect looks like when it was working:
    http://img207.imageshack.us/img207/4163/01ku7.gif
    Here is a screenshot of how this looks like now it is not working:
    http://img412.imageshack.us/img412/2962/02md6.gif
    As you can see the big image is way of position and it doesnt even follow the mouse or adjust to the correct browser position like it does in my working example.

    Here is a link to my site:
    http://www.newmedia.lincoln.ac.uk/jecgardner/
    http://www.newmedia.lincoln.ac.uk/jecgardner/tooltip.js
    http://www.newmedia.lincoln.ac.uk/je...r/css/main.css
    The working example is still active and when I post a test entry the old entry rollover effect still works but the new entry has a totally diffent effect which is off screen.. WHY??????

    I have installed a program where I can compare code and see changes I have made to the JavaScript but I cant see what has changed to make this effect from stop working

    Problem #2:
    The second problem applies to IE7 where the _big image doesnt fully load? Here is a screenshot:
    http://img441.imageshack.us/img441/9566/03st2.gif
    As you can see the image is stuck and doesnt load when you rollover the small image entry.

    The _big image loads in this div on my index page:
    Code:
    <div style="display: none; left: 437px; top: 32px;" id="capt"></div>
    This css for div id capt:
    Code:
    #capt {
    width:118px;
    height:58px;
    position:absolute;
    padding-top:10px;
    padding-right:50px;
    font:11pt verdana ref;
    font-weight:bold;
    display:none;
    filter:alpha(Opacity=80);
    opacity:0.8;
    -moz-opacity:0.8;
    -khtml-opacity:0.8;
    }
    This is the relevant JS inside tooltip.js:
    Code JavaScript:
    function rolloverInit() {
      var thumbs = getElementsByClassName('thumb'), preloadedimages = {}, capt = document.getElementById('capt');
      for (var i = 0; i < thumbs.length; i++) {
        var b = thumbs[i].src.replace('small', 'big');
        preloadedimages[b] = new Image();
        preloadedimages[b].src = b;
        thumbs[i].onmouseover = function() {
          var bigsrc = this.src.replace('small', 'big');
          var captimg = capt.getElementsByTagName('img')[0];
          if (captimg && captimg.src == bigsrc) {
            capt.style.display = 'block';
            return;
          }
          var myImage = document.createElement('img');
          myImage.setAttribute('src', bigsrc);
          myImage.setAttribute('alt', this.alt);
          capt.innerHTML = '';
          capt.appendChild(myImage);
          capt.appendChild(document.createTextNode(this.alt));
          capt.style.display = 'block';
        }
        thumbs[i].onmousemove = function(e) {
          if (!e) var e = window.event;
          display(this, capt, e, preloadedimages[this.src.replace('small', 'big')]);
        }
        thumbs[i].onmouseout = function () {
          capt.style.display = 'none';
        }
      }
    }
     
    function display(from, where, e, im) {
      var w = self.innerWidth || document.documentElement.clientWidth;
      var h = self.innerHeight || document.documentElement.clientHeight;
      var scrolled = self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var top, left;
     
      if (im && im.height) {
        var prelh = im.height, prelw = im.width, posx = e.clientX, posy = e.clientY;
        if (posy > prelh + 50) {
          // there is enough space above mouse cursor
          top = posy - 50 - prelh;
        }
        else if (h - posy > prelh + 50) {
          // there is enough space under mouse cursor
          top = posy + 50;
        }
        else if (parseInt(where.style.top.length)) {
          // there was enough space before, but not any more in either direction (up or down). So just leave it where it is
          return;
        }
        else {
          // the image is shorter than the viewport, but doesn't fit above or below mouse cursor
          // so put it in the middle of the viewport
          top = (h - prelh) / 2;
        }
     
        // logic for horizontal positioning needed here.
      if (im && im.width) {
        var prelw = im.width, prelh = im.height, posy = e.clientY, posx = e.clientX;
        if (posx > prelw + 50) {
          // there is enough space above mouse cursor
          left = posx - 50 - prelw;
        }
        else if (w - posx > prelw + 50) {
          // there is enough space under mouse cursor
          left = posx + 50;
        }
        else if (parseInt(where.style.left.length)) {
          // there was enough space before, but not any more in either direction (up or down). So just leave it where it is
          return;
        }
        else {
          // the image is shorter than the viewport, but doesn't fit above or below mouse cursor
          // so put it in the middle of the viewport
          left = (w - prelw) / 2;
        }	
        top += scrolled;
      }
      }
      else {
        //alert('too big or preloaded image not finished preloading, or preloaded image src not valid');
        top = 0;
        left = 0;
      }
     
      where.style.top = top + 'px';
      where.style.left = left + 'px';
    }
     
    function getElementsByClassName(c) {
        var children = document.getElementsByTagName('*');
        var els = [];
        for (var i = 0; i < children.length; i++) if (hasClass(children[i], c)) els.push(children[i]);
        return els;
    }
    function hasClass(el, c) {
      var has = false;
      if (!el || !el.className.length) return;
      var bits = el.className.split(' ');
      for (var j = 0; j < bits.length; j++) if (bits[j] === c) has = true;
      return has;
    }
     
    window.onload = function() {
      makeNiceTitles();
      startList();
      rolloverInit();
    }

    This line of PHP gets the image out of the database and shows the image at the end of the text entry:
    PHP Code:
    echo "<img src=\"entry/blog_images/".showinweb($row['image'])."\" alt=\"\" class=\"thumb\"/>"
    Please can someone help me fix this!?
    Last edited by shtoom; Oct 13, 2007 at 12:49.

  2. #2
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need your help Raffles

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for the IE7 Problem, its cause the div#capt doesn't resize with the image

    in the CSS for #capt change width and height to "auto" or just remove them

    so,
    Code:
    #capt {
    width:auto;
    height:auto;
    position:absolute;
    padding-top:10px;
    padding-right:50px;
    font:11pt verdana ref;
    font-weight:bold;
    display:none;
    filter:alpha(Opacity=80);
    opacity:0.8;
    -moz-opacity:0.8;
    -khtml-opacity:0.8;
    }

  4. #4
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thanks for that gimbles!

    One problem down.. One more to go!

  5. #5
    SitePoint Member Mupo's Avatar
    Join Date
    Oct 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    :+)

  6. #6
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    problem #1 unsolved

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the tooltip.js the new one you want to use? or the old one that still works?

  8. #8
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tooltip.js has all the JS my site uses inside it. I had the effect working and I haven't modified the code since it worked and I dont know why it doesnt work now.. Raffles helped me with it from this old thread:
    http://www.sitepoint.com/forums/showthread.php?t=490947

  9. #9
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all problems solved
    k i just tested it since removing the width and height of the css and i think its back to normal again


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
  •