Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to replicate a Flash swf by using javascript

    I'm not too familiar with javascript and usually do most of my animation/linking with flash. However my client does not want flash because it can't be displayed on the iPhone. If you go here:

    http://www.hosthabitat.com/think/bb2/index.html you will see a menu on the left that starts to scroll through the buttons while showing different images on the right. But if you hover over any button it stops on that image. The buttons are then linked to individual pages.

    I attempted to try and replicate this technique here:

    http://www.hosthabitat.com/think/bb2/index_test.html

    However I am not sure how to write or modify my script so that it scrolls through the photos like my flash version does. Any help!!! I'm stuck!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    Actually, your flash version is kind of broken.

    Most any JS version of this would *resume* the scrolling once the user had moved the mouse OUT of the button(s). I'd think that would be what any customer would want.

    This kind of thing is done all the time in JavaScript.

    Oh, ugh! I just looked at your code. You are using DreamWeaver, right? Better known as "NightmareMaker".

    Have you looked around for a good solution, something not using DW? Maybe a jQuery solution?

    But w.t.h., we could do this pretty simply, I would think.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    Here... You'll have to fix up the stuff I omitted. And I hope to [censored] you will dump that horrible DuckWalker menu code, too. But since it works I left it there for you to fix.

    Oh...and the code could be a lot simpler if you were *consistent* in your image file names!

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Butech Bliss - We Build Things. Better.</title>
    <style type="text/css" media="screen">
    	@import url("http://www.hosthabitat.com/think/bb2/menu_mainbb.css");
    </style>
    <style type="text/css" media="screen">
    	@import url("http://www.hosthabitat.com/think/bb2/menu_mainequip.css");
    </style>
    
    <style type="text/css">
    body {
    	background-image: url(http://www.hosthabitat.com/think/bb2/images/bg_index.jpg);
    	margin-top: 5px;
    }
    </style>
    <link href="http://www.hosthabitat.com/think/bb2/style_index.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #apDiv1 {
    	position:absolute;
    	width:624px;
    	height:29px;
    	z-index:100;
    	top: 136px;
    	left: 188px;
    }
    #apDiv2 {
    	position:absolute;
    	width:624px;
    	height:29px;
    	z-index:100;
    	top: 165px;
    	left: 188px;
    }
    #apDiv3 {
    	position:absolute;
    	width:624px;
    	height:29px;
    	z-index:100;
    	top: 194px;
    	left: 188px;
    }
    
    td#THEBUTTONS img {
        width: 158px;
        height: 31px;
        border: none; 
        padding-bottom: 2px;
    }
    
    </style>
    
    <script type="text/javascript">
    var allimages = ["coil.jpg","rolling.jpg","scrap.jpg","shears.jpg","levelers.jpg",
                     "ext_new.jpg", "copper_new.jpg","spares.jpg", "manufacturing.jpg"];
    var overs = [];
    
    var tick = null;
    var current = -1;
    
    function setup( )
    {
        for ( var a = 0; a < allimages.length; ++a )
        {
            var image = new Image();
            image.src = "http://www.hosthabitat.com/think/bb2/images/index/" + allimages[a];    
            allimages[a] = image;
        }
        var btns = document.getElementById("THEBUTTONS").getElementsByTagName("img");
        for ( var b = 0; b < btns.length; ++b )
        {
            var image = btns[b];
            overs[b] = new Image();
            overs[b].src = "http://www.hosthabitat.com/think/bb2/images/index/" + image.alt + ".jpg";
            image.onmouseover = function(){ show(this); };
            image.onmouseout  = function(){ hide(this); };
        }
        showNext();
    }
    
    function show(image)
    {
        // stop the show
        if ( tick != null ) 
        {
            clearTimeout(tick);
            var btns = document.getElementById("THEBUTTONS").getElementsByTagName("img");
            if ( current >= 0 ) btns[current].src = btns[current].alt;
        }
        tick = null;
    
        // go directly to chosen image
        var inum = Number(image.id.substring(1));
        var tsrc = allimages[inum].src;
        document.getElementById("targetimage").src = tsrc;
        image.alt = image.src;
        image.src = overs[inum].src;
    }
    function hide(image)
    {
        image.src = image.alt;
        // start the show again
        tick = setTimeout( showNext, 2000 );
    }
    
    function showNext( )
    {
        tick = null;
        var btns = document.getElementById("THEBUTTONS").getElementsByTagName("img");
        if ( current >= 0 ) btns[current].src = btns[current].alt;
        current = ( current + 1 ) % btns.length;
        show( btns[current] );
        tick = setTimeout( showNext, 2000 );
    }
    
    
    window.onload = setup;
    </script>
    
    </head>
    
    <body>
    <table width="950" border="0" align="center" cellpadding="0" 
           cellspacing="0" background="http://www.hosthabitat.com/think/bb2/images/bg_index_light.jpg">
    <tr>
        <td>
        <table width="950" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="37" valign="top">
                <div align="left">
    		<img src="http://www.hosthabitat.com/think/bb2/images/left_grey.jpg" width="30" height="302" />
    	    </div>
            </td>
            <td width="558" valign="top">
                <table width="100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td id="THEBUTTONS" width="27%" valign="top">
                        <a href="index_coil.html">    
                            <img src="http://www.hosthabitat.com/think/bb2/images/index/but_coil1.jpg" 
                                 id="P0" alt="but_coil2"/>
                        </a><br />
                        <a href="index_mills.html">
                            <img src="http://www.hosthabitat.com/think/bb2/images/index/but_rolling1.jpg" 
                                 id="P1" alt="but_rolling2"/>
                        </a><br />
                        <a href="index_scrap_choppers.html">
                            <img src="http://www.hosthabitat.com/think/bb2/images/index/but_scrap.jpg" 
                                 id="P2" alt="but_scrap2"/>
                        </a><br />
                        <a href="index_shears.html">
                            <img src="http://www.hosthabitat.com/think/bb2/images/index/but_shears.jpg" 
                                 id="P3" alt="but_shears2"/>
                        </a><br />
                        <a href="index_levelers.html">
                            <img src="http://www.hosthabitat.com/think/bb2/images/index/but_levelers.jpg" 
                                 id="P4" alt="but_levelers2"/>
                        </a><br />
                        <a href="index_efm.html">
                            <img src="http://www.hosthabitat.com/think/bb2/images/index/buttons_efm1.jpg" 
                                 id="P5" alt="buttons_efm1b"/>
                        </a><br />
                        <a href="index_copper.html">   
                            <img src="http://www.hosthabitat.com/think/bb2/images/index/but_copper1.jpg" 
                                 id="P6" alt="but_copper2"/>
                        </a><br />
                        <a href="index_spares.html">       
                            <img src="http://www.hosthabitat.com/think/bb2/images/index/but_spares.jpg" 
                                 id="P7" alt="but_spares2"/>
                        </a><br />
                        <a href="index_manufacturing.html">     
                            <img src="http://www.hosthabitat.com/think/bb2/images/index/but_manufacturing.jpg"
                                 id="P8"  alt="but_manufacturing2"/>
                        </a><br />
                    </td>
                    <td width="73%">
                        <img src="http://www.hosthabitat.com/think/bb2/images/index/coil.jpg" border="0" id="targetimage" />
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        </table>
        </td>
    </tr>
    </table>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    nathanslafka (09-20-2011)

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow. Thanks so much for your help. It was unnecessary to rip my code apart and fix it. You could have just showed me a working example that I could use. But this is even better and very appreciated. I realize I don't work with the best organization and yes I do work in Dreamweaver but a lot of my scripts I've used from getting web examples and demos. I will see if I can input this snipet to the page and keep it looking good.

    Again thanks for the help!

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I guess my next problem is replicating the bottom bar on this page, as I did this in flash and obviously I can't use it now as well. All it is is clicking the black buttons at the bottom and seeing a new photo/text to the right :

    http://www.hosthabitat.com/think/bb2/mills_cold.html

    The major problem though is that the client wants to be able to edit the text at the bottom in blue in Contribute. I don't know if this can even be made possible unfortunately.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    No idea what "Contribute" is.

    But the clicking on the buttons is simple.

    Code:
    <html>
    <head>
    <style type="text/css">
    td.BC {
        color: black;
        font-weight: normal;
    }
    td.BCRed {
        color: red;
        font-weight: bold;
    }
    
    td#BBA {
        vertical-align: top;
    }
    td#BBA div {
        display: none;
        position: relative;
        width: 300px;
        height: 150px;
        border: solid blue 1px;
        background-color: lightblue;
        margin-left: 20px;
        padding: 10px;
    }
    </style>
    <script type="text/javascript">
    function showBBA(td)
    {
        var bnum = Number(td.id.substring(2));
        for ( var b = 1; b <= 4; ++b )
        {
            document.getElementById("BC"+b).className =
                bnum == b ? "BCRed" : "BC";
            document.getElementById("BBA"+b).style.display = 
                bnum == b ? "block" : "none";
        }
    }    
    </script>
    </head>
    <body>
    <table id="BLISS">
    <tr>
       <td>The Butch Bliss Advantage</td>
       <td id="BBA" rowspan="5">
           <div id="BBA1" style="display: block;">
               Conversion<br/>
               You would put image and text here
           </div>
           <div id="BBA2">
               Bending<br/>
               You would put image and text here
           </div>
           <div id="BBA3">
               Roll Change<br/>
               You would put image and text here<br/>
               Format as you will of course
           </div>
           <div id="BBA4">
               Auxiliary<br/>
               You would put image and text here
           </div>
        </td>
    </tr>
    <tr>
        <td id="BC1" onclick="showBBA(this)" class="BCRed">Conversion to xyz</td>
    </tr><tr>
        <td id="BC2" onclick="showBBA(this)" class="BC">Work roll bending</td>
    </tr><tr>
        <td id="BC3" onclick="showBBA(this)" class="BC">Quick change</td>
    </tr><tr>
        <td id="BC4" onclick="showBBA(this)" class="BC">New Equipment</td>
    </td>
    </table>
    </body>
    </html>
    You can alter/refine the styles to match what you need, of course.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    nathanslafka (09-21-2011)

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This should work great.

    Contribute is another Adobe software that allows people to edit text and images of an HTML page.... very basic stuff but the client wants it.

    Anyways I have a workaround for that part. Thanks again I appreciate everything you've contributed!
    Last edited by nathanslafka; 09-21-2011 at 08:12 PM. Reason: fixed

  • #8
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The only issues i'm really having with your code is that there are gaps appearing between the rows in the table for the navigational buttons.. see this page as an example as I used your code (the style sheet is separate)

    http://butechbliss.com/scrap_choppers.html

    You'll notice that the gaps are not even the same amounts between each button, it varies. I think it has something to do with the div at the right being to much of a height but i still don't know why it stretches the TD's.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    That's all a matter of CSS.

    You'll just have to play with the styles until it looks right.

    Part of the problem is surely that you are using <table>s to control the layout (apparently originally created using DreamWeaver?), and they are simply less flexible than modern layout techniques. I used <table> as well, to fit in with what you had, but it probably wasn't the best choice.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •