SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Replacing Flash part 2

    I have made some progree to converting an old Flash movie into a JS page at www.get2thepoint.org/g2p/projects-new.php
    I've only checked it on Chrome so far but using the property inspector when I mouse over any of the project titles the JS seems to change the display and class properties of the appropriate div and it is displayed. However, although the div is given the class visible it doesn't fade in. I guess it's something pretty basic I'm missing...
    blessed are the cracked for they let in the light

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I should have said the CSS for the "effects" is the projects.css file.
    blessed are the cracked for they let in the light

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I would have thought you would have had to have used keyframes for this.
    Here's an example that will work in Chrome.

    Code:
    <!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">
      <base href="http://www.get2thepoint.org/g2p/" />
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>get2thepoint :: projects</title>
        <link href="resources/style.css" rel="stylesheet" type="text/css" />
        <link href="resources/style2.css" rel="stylesheet" type="text/css" />
        <link href="projects.css" rel="stylesheet" type="text/css" />
        <script>
          function showbox(boxId) {
            document.getElementById(boxId).style.display = 'block';
            document.getElementById(boxId).className = 'fade-in';
          }
          function hidebox(boxId) {
            document.getElementById(boxId).className = 'fade-out';
            setTimeout(function(){document.getElementById(boxId).style.display = 'none';}, 500);
          }
        </script>
        
        <style>
          @-webkit-keyframes FadeIn {
            0% {
                opacity:0;
            }
            100% {
                opacity:1;
            }
          }
          
          @-webkit-keyframes FadeOut {
            0% {
                opacity:1;
            }
            100% {
                opacity:0;
            }
          }
          
          .fade-in {
              -webkit-animation-name: FadeIn;
              -webkit-animation-timing-function: ease-in;
              -webkit-animation-duration: 0.5s;
          }
          
          .fade-out {
            -webkit-animation-name: FadeOut;
            -webkit-animation-timing-function: ease-in;
            -webkit-animation-duration: 0.5s;
          }
      
        </style>
      </head>
      <body>
        <div id="body"><!-- end menu -->
          <div id="contents">
            <div id="squiggle">
              <div id="pr01"><a href="#" onmouseover="showbox('de01')" onmouseout="hidebox('de01')">READ<br />International</a></div>
              <div id="pr02"><a href="#" onmouseover="showbox('de02')" onmouseout="hidebox('de02')">Projects in<br />development</a></div>
              <div id="pr03"><a href="#" onmouseover="showbox('de03')" onmouseout="hidebox('de03')"></a></div>
              <div id="pr04"><a href="#" onmouseover="showbox('de04')" onmouseout="hidebox('de04')">International Association of Facilitators</a></div>
              <div id="pr05"><a href="#" onmouseover="showbox('de05')" onmouseout="hidebox('de05')">PLB Consulting, Geneva World Economic Forum</a></div>
              <div id="pr06"><a href="#" onmouseover="showbox('de06')" onmouseout="hidebox('de06')">Senior Executives</a></div>
              <div id="pr07"><a href="#" onmouseover="showbox('de07')" onmouseout="hidebox('de07')">Phyllis Tuckwell<br />Hospice</a></div>
              <div id="pr08"><a href="#" onmouseover="showbox('de08')" onmouseout="hidebox('de08')"></a></div>
              <div id="pr09"><a href="#" onmouseover="showbox('de09')" onmouseout="hidebox('de09')">UN Convention<br />on Combatting<br />Diversification</a></div>
              <div id="pr10"><a href="#" onmouseover="showbox('de10')" onmouseout="hidebox('de10')">ACEVO</a></div>
              <div id="pr11"><a href="#" onmouseover="showbox('de11')" onmouseout="hidebox('de11')">Tropical Health<br />Education Trust</a></div>
              
              <div id="de01"><br />Chair<br /><br />Martin</div>
              <div id="de02">The Partnership Consultancy<br /><br />vMeetings</div>
              <div id="de03"></div>
              <div id="de04"><br />Europe Director<br /><br />Martin</div>
              <div id="de05">Facilitating team awaydays<br /><br />Martin</div>
              <div id="de06"><br />Coaching<br /><br />Martin</div>
              <div id="de07">Facilitation of board awayday<br /><br />Martin</div>
              <div id="de08"></div>
              <div id="de09">Facilitating<br />intersessional working groups<br /><br />Martin</div>
              <div id="de10">ACEVO CEO crisis coaching<br /><br />Martin, Lois</div>
              <div id="de11">Facilitating boad/staff awayday<br /><br />Martin</div>
            </div>
          </div>
        </div>
      </body>
    </html>
    Might I point out however, that my CSS animation skills are not excellent and there are plenty of people better qualified to help you with this than me.

    Another point worth noting:

    Code JavaScript:
    document.getElementById(boxId).className -= ' visible';

    won't work as you are expecting.

    JavaScript will try and coerce the string ' visible' into a number before subtracting it, resulting in your element receiving a class of "NaN" (Not a Number).

    Out of interest, would you be open to using jQuery to achieve this effect?

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Pullo, very many thanks for this. I've not come across keyframes before - something else for me to read up on.

    I have noticed that that subtracting the visible class left a class of NaN but it seemed to work even in later versions of IE.

    I guess I would be open to using jQuery. I've used it in the past but recently noticed that the base code seems rather large nowadays.
    blessed are the cracked for they let in the light

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Glad I could help so far

    Regarding jQuery, you can make a custom build nowadays, selecting just the parts that you need and to be honest, it is ideal for this kind of thing.

    I'm away from the PC right now, but leave it with me and I'll knock you up a demo later on, which, even if you don't use it, will hopefully be educational.

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would really appreciate that Pullo, thanks.
    blessed are the cracked for they let in the light

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Howdy,

    Using jquery, it is as easy as this:

    Code:
    <!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">
      <base href="http://www.get2thepoint.org/g2p/" />
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>get2thepoint :: projects</title>
        <link href="resources/style.css" rel="stylesheet" type="text/css" />
        <link href="resources/style2.css" rel="stylesheet" type="text/css" />
        <link href="projects.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <div id="body">
          <div id="contents">
            <div id="squiggle">
              <div id="pr01"><a href="#">READ<br />International</a></div>
              <div id="pr02"><a href="#">Projects in<br />development</a></div>
              <div id="pr03"><a href="#"></a></div>
              <div id="pr04"><a href="#">International Association of Facilitators</a></div>
              <div id="pr05"><a href="#">PLB Consulting, Geneva World Economic Forum</a></div>
              <div id="pr06"><a href="#">Senior Executives</a></div>
              <div id="pr07"><a href="#">Phyllis Tuckwell<br />Hospice</a></div>
              <div id="pr08"><a href="#"></a></div>
              <div id="pr09"><a href="#">UN Convention<br />on Combatting<br />Diversification</a></div>
              <div id="pr10"><a href="#">ACEVO</a></div>
              <div id="pr11"><a href="#">Tropical Health<br />Education Trust</a></div>
              
              <div id="de01"><br />Chair<br /><br />Martin</div>
              <div id="de02">The Partnership Consultancy<br /><br />vMeetings</div>
              <div id="de03"></div>
              <div id="de04"><br />Europe Director<br /><br />Martin</div>
              <div id="de05">Facilitating team awaydays<br /><br />Martin</div>
              <div id="de06"><br />Coaching<br /><br />Martin</div>
              <div id="de07">Facilitation of board awayday<br /><br />Martin</div>
              <div id="de08"></div>
              <div id="de09">Facilitating<br />intersessional working groups<br /><br />Martin</div>
              <div id="de10">ACEVO CEO crisis coaching<br /><br />Martin, Lois</div>
              <div id="de11">Facilitating boad/staff awayday<br /><br />Martin</div>
            </div>
          </div>
        </div>
        
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $("#squiggle > div > a").hover(
            function(e) {
              var tip = "#" + $(this).parent().attr("id").replace("pr", "de");
              if (e.type == "mouseenter"){
                $(tip).fadeIn(500);
              } else {
                $(tip).fadeOut(500);
              }
            }
          );
        </script>
      </body>
    </html>
    Minified jQuery currently weighs in at 90.8 KB
    If you want to build your own, you can do so here (just taking the parts you need) and reduce the size considerably.

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, squire! I'll try the build-my-own jQuery option with it... G
    blessed are the cracked for they let in the light

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi again,

    Just a thought, but you could also store the tips as a data attribute of the links they are assosciated with:

    Code:
    <!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">
      <base href="http://www.get2thepoint.org/g2p/" />
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>get2thepoint :: projects</title>
        <link href="resources/style.css" rel="stylesheet" type="text/css" />
        <link href="resources/style2.css" rel="stylesheet" type="text/css" />
        <link href="projects.css" rel="stylesheet" type="text/css" />
        <style>
          #target{
            display: none;
            position: absolute;
            top: 90px;
            left: 160px;
            width: 90px;
            height: 80px;
            border-radius: 50%;
            background: #fff;
            color: #000;
            padding: 25px;
          }
        </style>
      </head>
      <body>
        <div id="body">
          <div id="contents">
            <div id="squiggle">
              <div id="pr01"><a href="#" data-tip="<br />Chair<br /><br />Martin">READ<br />International</a></div>
              <div id="pr02"><a href="#" data-tip="The Partnership Consultancy<br /><br />vMeetings">Projects in<br />development</a></div>
              <div id="pr03"><a href="#" data-tip=""></a></div>
              <div id="pr04"><a href="#" data-tip="<br />Europe Director<br /><br />Martin">International Association of Facilitators</a></div>
              <div id="pr05"><a href="#" data-tip="Facilitating team awaydays<br /><br />Martin">PLB Consulting, Geneva World Economic Forum</a></div>
              <div id="pr06"><a href="#" data-tip="<br />Coaching<br /><br />Martin">Senior Executives</a></div>
              <div id="pr07"><a href="#" data-tip="Facilitation of board awayday<br /><br />Martin">Phyllis Tuckwell<br />Hospice</a></div>
              <div id="pr08"><a href="#" data-tip=""></a></div>
              <div id="pr09"><a href="#" data-tip="Facilitating<br />intersessional working groups<br /><br />Martin">UN Convention<br />on Combatting<br />Diversification</a></div>
              <div id="pr10"><a href="#" data-tip="ACEVO CEO crisis coaching<br /><br />Martin, Lois">ACEVO</a></div>
              <div id="pr11"><a href="#" data-tip="Facilitating boad/staff awayday<br /><br />Martin">Tropical Health<br />Education Trust</a></div>
              <div id="target"></div>
            </div>
          </div>
        </div>
        
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $("#squiggle > div > a").hover(
            function(e) {
              var tip = $(this).data("tip");
              if (e.type == "mouseenter"){
                $("#target").html(tip).fadeIn(500);
              } else {
                $("#target").html(tip).fadeOut(500);
              }
            }
          );
        </script>
      </body>
    </html>

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, many thanks Pullo. So many learnings. I am having a go with my other Flash movie now...
    blessed are the cracked for they let in the light


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
  •