jQuery Effects for Controlling Pages

In today’s starter code, we use several of jQuery’s effects to add features to our pages. The toggleClass lets us turn on and off styling. This can be used, for example, to hilight new words. .show() and .hide() can be used to affect the visibility of elements. In our example, we hide the English version of the div when the page is loaded so it can be latter toggled. The .load() effect lets us get pages from our server. This will be especially important when we want up-to-date information without having to change every page. Finally, the .fadeToggle() effect lets us add nice animation to elements on our page.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

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

        <style type="text/css">    
            .hilight{background-color:yellow;}
        </style>

    </head>
    <body>
        <button id="togglehilight">toggle hilight</button>
        <p><span title="Hello">Saluton</span> Mondo!</p>
        <button id="showenglish">Toggle English Version</button>
        <div id="englishversion"></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