SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    rollover is too "quick" can it be made to fade

    Ok this I am not sure if we can answer, but I have a page of css and javascript that displays and section of text when the mouserolls over the image BUT it does happen very quick and I wasn't sure if because we are using Javascript if there was a way we could add in a "fade" or really just SLOW it down a bit?

    so the code:

    in header

    Code:
    <script type="text/javascript" language="JavaScript"><!--
    function HideContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "block";
    }
    function ReverseContentDisplay(d) {
    if(d.length < 1) { return; }
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script>
    Image rollover action:

    Code:
    <a href="test1.html" title="test1" onmouseover="javascript:ShowContent('01box');HideContent('mainbox');HideContent('02box');HideContent('03box');HideContent('04box')" onmouseout="javascript:ShowContent('mainbox');HideContent('01box');HideContent('02box');HideContent('03box');HideContent('04box')"><img src="test1.jpg" width="176" height="225" border="0" /></a>
    mainbox div

    Code:
    <!-- Main Box start -->
    <div id="mainbox">
    <p>some text in here</p>
    </div>
    <!-- Main Box end -->
    box01 div

    Code:
    <!--  Box01 start -->
    <div id="01box" style="display:none;position:static;border-style: none;background-color: white;padding: 0px;">
    <p>some text in here that says something else</p>
    </div>
    <!--  Box01 end -->
    css is only this
    Code:
    #mainbox, #01box, #02box, #03box, #04box {
    display:none;
    position:static;
    border-style: none;
    background-color: white;
    padding: 0px;
    }
    This might NOT be possible - so say so if you don't think it is - just ideas on how it could be done !! would be great

    Thank you
    Sarah
    Regular user

  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 Sarah

    Please load the following into a browser and give it a try. See my 'tips and suggestions' in box0. I'll continue in my next post.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Sarah</title>
    <style type='text/css'>
    body {
      margin: 0;
      padding: 20px 40px;
      color: #000;
      background: #FFF;
      font-family: verdana,arial,helvetica,sans-serif;
    }
    img {
      /* only for testing because I'm not using image files */
      border:1px dotted blue;
      display:block;
      float:left;
      width:176px;
      height:225px;
    }
    li {
      margin:.5em 0;
    }
    #mainbox, #box1, #box2, #box3, #box4 {
      border-style: none;
      background-color: white;
      padding: 0px;
    }
    #box1, #box2, #box3, #box4 {
      display:none;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      var i = 1, a;
      while (null != (a = document.getElementById('lnk' + (i++)))) {
        a.onmouseover = lnkOver;
        a.onmouseout = lnkOut;
      }
    }
    function lnkOver()
    {
      hideAllBut('box' + this.id.substr(3));
    }
    function lnkOut()
    {
      hideAllBut('box0'); // mainbox
    }
    function hideAllBut(id)
    {
      var i = 0, b;
      while (null != (b = document.getElementById('box' + (i++)))) {
        b.style.display = 'none';
      }
      b = document.getElementById(id);
      if (b) b.style.display = 'block';
    }
    </script>
    </head>
    <body>
    
    <div>
    <a id='lnk1' href="test1.html" title="test1"><img src="test1.jpg" width="176" height="225" border="0"></a>
    <a id='lnk2' href="test2.html" title="test2"><img src="test2.jpg" width="176" height="225" border="0"></a>
    <a id='lnk3' href="test3.html" title="test3"><img src="test3.jpg" width="176" height="225" border="0"></a>
    <a id='lnk4' href="test4.html" title="test4"><img src="test4.jpg" width="176" height="225" border="0"></a>
    <p style='clear:both'></p>
    </div>
    
    <div id="box0"> <!-- was 'mainbox' -->
    <h3>box0 (was mainbox)</h3>
    Some tips and suggestions...
    <ol>
    <li>This: "javascript:" is not used in event handler attributes. It can be used in HREF attributes.</li>
    <li>You have the same styles 'inline' as in css?</li>
    <li>I've taken some liberties with your code. Take a look and see what you think.</li>
    <li>I do realize it seems that I haven't begun to answer your actual question. However, I am getting there :). Now that the Js is generic (it will work with any number of lnk and box elements) and out of the html - we have many more possibilities.</li>
    <li>Toggling the display of an element is an easy way to get an "effect". Adding a delay to the hiding of the element (a "fade out" or "slide out" effect) is going to be a little more involved - but it is certainly possible.</li>
    <li>I'm going to go ahead and post this and I'll continue in my next post...</li>
    </ol>
    </div>
    
    <div id="box1">
    <h3>box1</h3>
    <p>some text in here that says something else</p>
    </div>
    
    <div id="box2">
    <h3>box2</h3>
    <p>some text in here that says something else</p>
    </div>
    
    <div id="box3">
    <h3>box3</h3>
    <p>some text in here that says something else</p>
    </div>
    
    <div id="box4">
    <h3>box4</h3>
    <p>some text in here that says something else</p>
    </div>
    
    </body>
    </html>

  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)
    Ok, I've played around with it enough

    Here is the online demo, and here's the source:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Sarah</title>
    <style type='text/css'>
    body {
      margin: 0;
      padding: 20px 40px;
      color: #000;
      background: #FFF;
      font-family: verdana,arial,helvetica,sans-serif;
    }
    img {
      border:1px dotted blue;
      display:block;
      float:left;
      width:176px;
      height:225px;
      margin:4px;
    }
    li {
      margin:.5em 0;
    }
    #boxContainer {
      position:relative;
      width:50&#37;;
    }
    #box0, #box1, #box2, #box3, #box4 {
      position:absolute;
      left:0;
      top:0;
      border-style: none;
      color: black;
      background-color: white;
      padding: 0px;
    }
    #box1, #box2, #box3, #box4 {
      display:none;
    }
    </style>
    <script type='text/javascript' src='../x/x_core.js'></script>
    <script type='text/javascript' src='../x/lib/xopacity.js'></script>
    <script type='text/javascript'>
    
    var gBox = null; // the box currently visible
    
    window.onload = function()
    {
      var i = 1, a;
      while (null != (a = xGetElementById('lnk' + (i++)))) {
        a.onmouseover = lnkOver;
        a.onmouseout = lnkOut;
      }
      gBox = xGetElementById('box0'); 
    }
    
    function lnkOver()
    {
      chkTmr();
      fadeOut(gBox.id);
      gBox = xGetElementById('box' + this.id.substr(3));
      chkTmr();
      xOpacity(gBox, 0);
      gBox.style.display = 'block';
      fadeIn(gBox.id);
    }
    function lnkOut()
    {
      chkTmr();
      fadeOut(gBox.id);
      gBox = xGetElementById('box0');
      chkTmr();
      xOpacity(gBox, 0);
      gBox.style.display = 'block';
      fadeIn(gBox.id);
    }
    function chkTmr()
    {
      if (gBox.fadeTmr) {
        clearTimeout(gBox.fadeTmr);
        gBox.fadeTmr = null;
      }
    }
    function fadeOut(id)
    {
      var d = .1, o = xOpacity(id); // adjust rate of fade with 'd'
      var e = xGetElementById(id);
      if (o - d > 0) {
        e.fadeTmr = setTimeout("fadeOut('" + id + "')", 50);
        xOpacity(id, o - d);
      }
      else {
        xOpacity(id, 0);
        e.style.display = 'none';
        e.fadeTmr = null;
      }
    }
    function fadeIn(id)
    {
      var d = .1, o = xOpacity(id); // adjust rate of fade with 'd'
      var e = xGetElementById(id);
      if (o + d < 1) {
        e.fadeTmr = setTimeout("fadeIn('" + id + "')", 50);
        xOpacity(id, o + d);
      }
      else {
        xOpacity(id, 1);
        e.fadeTmr = null;
      }
    }
    </script>
    </head>
    <body>
    
    <div>
    <a id='lnk1' href="test1.html" title="test1"><img src="test1.jpg" width="176" height="225" border="0"></a>
    <a id='lnk2' href="test2.html" title="test2"><img src="test2.jpg" width="176" height="225" border="0"></a>
    <a id='lnk3' href="test3.html" title="test3"><img src="test3.jpg" width="176" height="225" border="0"></a>
    <a id='lnk4' href="test4.html" title="test4"><img src="test4.jpg" width="176" height="225" border="0"></a>
    <p style='clear:both'></p>
    </div>
    
    <div id='boxContainer'>
    
    <div id="box0">
    <h3>box0</h3>
    <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor</p>
    <p>This was 'mainbox'.</p>
    </div>
    
    <div id="box1">
    <h3>box1</h3>
    <p>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
    <p>Sarah, we really appreciate everything you do (and have done) for the forums!</p>
    </div>
    
    <div id="box2">
    <h3>box2</h3>
    <p>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
    <p>The animation of opacity in this demo is quite simple compared to <a href='http://cross-browser.com/x/examples/xaniopacity.html'>xAniOpacity</a>.</p>
    </div>
    
    <div id="box3">
    <h3>box3</h3>
    <p>dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>This demo uses 4 functions from the X Library: <a href='http://cross-browser.com/x/lib/view.php?sym=xOpacity'>xOpacity</a>, <a href='http://cross-browser.com/x/lib/view.php?sym=xGetElementById'>xGetElementById</a>, <a href='http://cross-browser.com/x/lib/view.php?sym=xDef'>xDef</a> and <a href='http://cross-browser.com/x/lib/view.php?sym=xStr'>xStr</a>. It doesn't <i>require</i> functions from X, you can use your own equivalents.</p>
    
    </div>
    
    <div id="box4">
    <h3>box4</h3>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>The dang tooltip causes mouseout/mouseover events!</p>
    </div>
    
    </div> <!-- end boxContainer -->
    
    </body>
    </html>
    Last edited by MikeFoster; Mar 1, 2007 at 08:36. Reason: minor optimizations

  4. #4
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    wow wow wow that online demo is fab!!!

    ok will start reading through and learn what you have done

    THANK YOU and thank you for your kind message in box01

    You really are a star!
    Regular user

  5. #5
    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)
    You are very welcome

    Please let me know if you have any questions whatsoever.

  6. #6
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Mike - that really is perfect - thank you so much!! its amazing how bad my JS is!!! so thank you very much didn't take long to work it all out!
    Regular user

  7. #7
    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)
    That's great, Sarah!

    If you have any problems just let us know.

    All the Best!


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
  •