58 users online (1 members and 57 guests)  


  Results 1 to 5 of 5

Related

  1. aligning page contents    Forum: CSS Forum
    Replies: 4
  2. Replies: 4
  3. Display database contents in TEXTAREA    Forum: ASP Forum
    Replies: 1
  4. Checking the contents of a folder for images    Forum: Javascript Forum
    Replies: 0
  5. Creating Table of contents for printing    Forum: HTML Forum
    Replies: 1
  1. #1
    tubotonia's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2008
    Posts
    7

    Rollover Contents Hanging Out in Firefox

    You can see this problem (or not) on my website at http://tubotonia.freehomepage.com/Commercial1.html. In IE and Safari, everything's cool. And in Firefox (on both PC & Mac), my page looks right _ initially_ when uploaded and read, but if you hit Reload, the nasty symptoms appear: pix that are supposed to show only on rollover are now displayed from the start, distorting the frame where only the thumbnails are supposed to be. What's strange is that reloading gives no problem when the table contains only two pix, or three. But with four, the problem starts. And the pic, the code and the cell are identical for all four! In case anyone's attracted to the mysterious, here's the source code (somewhat condensed.) Thanks for any hints! tub
    P.S. The javascript is not mine; I've lost track of who to credit for it.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Commercial WTB</title>
    <link rel="stylesheet" type="text/css" href="wtbstyles.css">
    <style type="text/css">
    a.roll{cursor: pointer;}
    a .rollContent{display: none;}
    </style>
    </head>
    <body background="Gallery/tintile2.gif" text="#000033" bgcolor="#0066ff" link="#330066" vlink="#660066" alink="#660066" >

    <div>
    <div id="rollPop" style="position:absolute; display:none;">x</div>

    <table border="2" align="center" cellpadding="6" cellspacing="2" width="600" bgcolor="#337599">
    <tr>
    <th colspan="4" align="center" valign="center"> <font class="first" >SOME COMMERCIAL MODELS</font><br><font class="third" >(Mouseover to enlarge thumbnail, click for link.)</font></th></tr>
    <tr bgcolor="#65929e">

    <td><font class="third">The Galvatone</td>
    <td align="center" valign="center">
    <a class="roll">
    <img src="Gallery/galt.jpg" width="51" height="86"
    onClick="MyWindow84=window.open('http://www.amediasys.com/galvatone.html','MyWindow84','toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=800,height=600,left=300,top=200'); return false;"/> <div class="rollContent">
    <img src="Gallery/galvatones.jpg"><br>
    <span style="font-weight: normal; color:#ffff00; font-family: Geneva,sans-serif; font-size: 12px; ">The GalvaTone</span>
    </div></a></td>
    <td align="center" valign="center"><font class="third">Havlena-Style Four-Stringer<br>by Bob Flesher</td>

    <!-- ABOVE CELL REPEATED -->

    <!-- ABOVE CELL REPEATED -->

    <!-- ABOVE CELL REPEATED -->

    </tr>
    </table>
    </div>

    <script type="text/javascript">
    (function() {
    var pop = document.getElementById("rollPop");
    var popStyle = pop.style;
    var anchors = document.getElementsByTagName("a");
    function showRoll(e) {
    if(!e) e = window.event;
    var o = e.target? e.target: e.srcElement;
    while(!o.className || o.className!="roll") o = o.parentNode;
    o = o.lastChild;
    while(o.className!="rollContent") o = o.previousSibling;
    pop.replaceChild(o.cloneNode(true), pop.firstChild);
    popStyle.display = "block";
    popStyle.top = (e.pageY? e.pageY: e.clientY)-115+ "29px";
    popStyle.left = (e.pageX? e.pageX: e.clientX)-115 + "29px";
    }
    function hideRoll(e) {
    popStyle.display = "none";
    }
    function moveRoll(e) {
    if(!e) e = window.event;
    popStyle.top = (e.pageY? e.pageY: e.clientY)+ 20 + "px";
    popStyle.left = (e.pageX? e.pageX: e.clientX)+ 20 + "px";
    }
    for(var i=0, n=anchors.length; i<n; ++i) if(anchors[i].className=="roll") {
    if(window.addEventListener) {
    anchors[i].addEventListener("mouseover", showRoll, false);
    anchors[i].addEventListener("mouseout", hideRoll, false);
    anchors[i].addEventListener("mousemove", moveRoll, false);
    }
    else {
    anchors[i].attachEvent("onmouseover", showRoll);
    anchors[i].attachEvent("onmouseout", hideRoll);
    anchors[i].attachEvent("onmousemove", moveRoll);
    }
    }
    })();

    </script>
    </body>
    </html>

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Rollover Contents Hanging Out in Firefox

    It appears the the script added by your host makes that odd behavior.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  3. #3
    tubotonia's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2008
    Posts
    7

    Re: Rollover Contents Hanging Out in Firefox

    Quote Originally Posted by rangana View Post
    It appears the the script added by your host makes that odd behavior.
    Thanks for fielding my question, but I'm a little puzzled by your response. I see from the Page Source view of my misbehaving site that the web host has added a script after my </html>, but I don't see what about it would cause my problem, or why it would cause a problem on Firefox and not on IE or Safari. I hope we can continue this discussion.

    Best regards,

    tubotonia

  4. #4
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Rollover Contents Hanging Out in Firefox

    I don't know the reason too. I tried to reproduce the problem at my end, but removing the script added by your host, and problem is not reproducible.

    You might want to ask Firefox about that.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  5. #5
    tubotonia's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2008
    Posts
    7

    Re: Rollover Contents Hanging Out in Firefox

    FTW I finally gave up trying to solve this problem, and switched to a rollover javascript called boxover (see demo at boxover.swazz.org/example.html). Although no longer supported by its creators, considerably longer than the above code, and apparently considered obsolete by some, it is nevertheless an _extremely_ versatile and adaptible script. In particular, it allows complex html constructions (e.g. tables) to function either as the "rolled-over" or the "popsup upon rollover". The uses I put it to will soon be on display at tubotonia.freehomepage.com/tublinks.html

    Thanks for the help.

    tubotonia



Tags for this Thread