SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    x library question (mike fosters cross-browser.com): xslideto not working in ff2.0?

    Why can't i get this to work? See my demo code, works fine in IE6, xhtml transitional validator tested, but xSlideTo fails in FireFox??

    Copy code and view demopage in IE and FF. I tried everything... the bottom div just wont slide in Firefox!......

    Read comments on demo page. PLEASE HELP!!

    HTML Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Demotestpage</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://cross-browser.com/x/x_core.js"></script><!-- just for this demo only -->
    <script type="text/javascript" src="http://cross-browser.com/x/x_slide.js"></script><!-- just for this demo only-->
    
    <script type="text/javascript">
    window.onload = function() {
        var e = xGetElementById('t1');
        e.onmouseover = scrlOnMouseover;
        e.onmouseout = scrlOnMouseout;
    }
    function scrlOnMouseover() {
    		xMoveTo(t1, xPageX(tf), xPageY(tf));
        xSlideTo(t1, xPageX(tf), xPageY(tf)-xHeight(t1)+40, 200);
    }
    
    function scrlOnMouseout() {
        xSlideTo(t1, xPageX(tf), xPageY(tf), 200);
    }
    </script>
    
    
    
    <style type="text/css">
    <!--
    
    html, body {width:100%; height:100%;overflow:hidden;}
    
    body { 
    margin: 0px;
    adding: 0px;
    font: 9px Verdana;
    color:  #8599a5;
    background:#fff;
    }
    	
    #wrapper {
    position: absolute;
    bottom:0px;left:0px;
    width:100%;height:100%;
    margin:0px;
    padding:0px;
    background:#bddefd;
    color:#000;
    }
    
    #t1 {
    position: absolute;
    bottom:0px;
    left:0px;
    padding:0px;
    margin: 0px 0px -165px 0px;
     filter:alpha(Opacity:50);
     -moz-opacity: 0.5;
     opacity: 0.5;
    width:100%;
    height:200px;
    background:#000;
    color:#fff;
    border: 0px solid blue;
    overflow:visible;
    z-index:10;
    }
    
    #tf {
    position: absolute;
    bottom:0px;
    left:0px;
    padding:0px;
    margin: 0px 0px -165px 0px;
    width:100%;
    height:200px;
    background:transparent;
    color:#fff;
    border: 0px solid blue;
    overflow:visible;
    z-index:0;
    }
    -
    </style>
    
    
    </head>
    <body>
    <body>
    <div id="wrapper">
    <h2>xSlideTo not crossbrowser?</h2>
    (check bar at bottom) &nbsp;&nbsp;&nbsp;.....why won't this work????? 
    <div id="t1">
    Mike, this div slides up on mouseover, and back on mouseout. Works fine in IE6, but not in firefox (2.0)????<br>
    Exept when i delete the xhtml 1.0 transitional doctype (why is this?). BUT i need this 'XHTML 1.0 Transitional' doctype! HELP! 
    </div>
    
    <div id="tf">&nbsp;</div>
    
    </div>
    </body>
    </html>

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi kuif75,

    Welcome to SPF!

    Just wanted to let you know I'll look at your post asap.

    Thanks!

    P.S.:
    Please don't hot-link to js files on my site - please copy the files to your site. It uses much more of my available bandwidth when many people do this. Thanks in advance for your understanding.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code assumed the existence of global variables with the same names as the element IDs.

    My changes are commented with "// mf":
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Demotestpage</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="x_core.js"></script>
    <script type="text/javascript" src="x_slide.js"></script>
    
    <script type="text/javascript">
    
    var t1, tf; // mf
    
    window.onload = function() {
        // mf: use t1 instead of e:
        tf = xGetElementById('tf');
        t1 = xGetElementById('t1');
        t1.onmouseover = scrlOnMouseover;
        t1.onmouseout = scrlOnMouseout;
    }
    function scrlOnMouseover() {
    		xMoveTo(t1, xPageX(tf), xPageY(tf));
        xSlideTo(t1, xPageX(tf), xPageY(tf)-xHeight(t1)+40, 200);
    }
    
    function scrlOnMouseout() {
        xSlideTo(t1, xPageX(tf), xPageY(tf), 200);
    }
    </script>
    
    
    
    <style type="text/css">
    <!--
    
    html, body {width:100&#37;; height:100%;overflow:hidden;}
    
    body { 
    margin: 0px;
    adding: 0px;
    font: 9px Verdana;
    color:  #8599a5;
    background:#fff;
    }
    	
    #wrapper {
    position: absolute;
    bottom:0px;left:0px;
    width:100%;height:100%;
    margin:0px;
    padding:0px;
    background:#bddefd;
    color:#000;
    }
    
    #t1 {
    position: absolute;
    bottom:0px;
    left:0px;
    padding:0px;
    margin: 0px 0px -165px 0px;
     filter:alpha(Opacity:50);
     -moz-opacity: 0.5;
     opacity: 0.5;
    width:100%;
    height:200px;
    background:#000;
    color:#fff;
    border: 0px solid blue;
    overflow:visible;
    z-index:10;
    }
    
    #tf {
    position: absolute;
    bottom:0px;
    left:0px;
    padding:0px;
    margin: 0px 0px -165px 0px;
    width:100%;
    height:200px;
    background:transparent;
    color:#fff;
    border: 0px solid blue;
    overflow:visible;
    z-index:0;
    }
    -
    </style>
    
    
    </head>
    <body>
    <body>
    <div id="wrapper">
    <h2>xSlideTo not crossbrowser?</h2>
    (check bar at bottom) &nbsp;&nbsp;&nbsp;.....why won't this work????? 
    <div id="t1">
    Mike, this div slides up on mouseover, and back on mouseout. Works fine in IE6, but not in firefox (2.0)????<br>
    Exept when i delete the xhtml 1.0 transitional doctype (why is this?). BUT i need this 'XHTML 1.0 Transitional' doctype! HELP! 
    </div>
    
    <div id="tf">&nbsp;</div>
    
    </div>
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike! thank you very much!

    Works just fine now!

    and yes i know; the hotlinking i did solely for this demo (didnt get the chance to upload files to a server), i normaly don't do that!

    Thanx very much!


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
  •