Side-by-side divs

The code below can be a launching page for our chapters. It shows both the English and the Esperanto versions side by side which may help students better read the Esperanto version.

<!DOCTYPE html>
<html>
    <head>
        <title>Karlo 09</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://bazaesperanto.com/css/baza.css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://bazaesperanto.com/js/baza.js"></script>

        <script>
            $(document).ready(function() {
                $('[title]').addClass('hilight');
                $("#togglehilight").click(function(e){
                    $('[title]').toggleClass('hilight');
                });
                
                $('#esperantoversion').show()
                $('#esperantoversion').load('karlo09eo.html');
                ;
                
                $("#showesperanto").click(function(e){
                    $('#esperantoversion').fadeToggle("slow", "linear");
                });
            
                $('#englishversion').show();
                $('#englishversion').load('karlo09en.html');
            
                $("#showenglish").click(function(e){    
                    $('#englishversion').fadeToggle("slow", "linear");
                });
            });
        </script>

        <style type="text/css">    
            .hilight{border-bottom: thin solid}
            #esperantoversion { width: 390px; border: 1px solid red; float: left;}
            #englishversion { width: 390px; border: 1px solid red; float: right;}
        </style>

    </head>
    <body>
        <div id="container">     
            <button id="togglehilight">Toggle Hilight</button>
            <button id="showesperanto">Toggle Esperanto Version</button>
            <button id="showenglish">Toggle English Version</button>
            <div></div>
            <span data-sono="sonoj/karlo09.mp3">Legu Esperante</span>
            <span data-sono="sonoj/karlo09en.mp3"> English</span>
            <div></div>
            <div id="englishversion"></div>       
            <div id="esperantoversion"></div>
        </div>  
    </body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s