Login

Gaijin · 04-15-2011, 06:56 AM

jQuery is the answer.
http://jquery.com/

Now I have a script that I were using for a Slideshow, it counts divs within a parent div which has attribute class set to slide. It then bind keydown event to the main body and checks if left arrow (37) or right array (39) was pressed.
Finally it hides current div, updates page and shows the next or previous div.

Just check it ou yourself, ask if you don't understand something.

Code:
<!DOCTYPE html>

    <head>

        <title>{$TITLE}</title>

        <link rel="stylesheet" type="text/css" href="style/main.css" />

        <script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(document).ready(function()

            {

                var page = 1;

                var pages = 0;

                var title = null;

                $.each($(".slide div"), function()

                {

                    $(this).css({"width":"100%", "height":"100%", "position":"absolute", "display":"block", "font-size":28});

                    $(this).toggle();

                    pages++;

                });

                $(".slide div:nth-child("+page+")").css("font-size", 28);

                $(".slide div:nth-child("+page+")").toggle();

                $(this).bind("keydown", function(event)

                {

                    var key = event.keyCode;

                    if(key == 37)

                    {

                        $(".slide div:nth-child("+page+")").toggle();

                        page = (page > 1) ? (page - 1) : 1;

                        $(".slide div:nth-child("+page+")").toggle();

                    }

                    else if(key == 39)

                    {

                        $(".slide div:nth-child("+page+")").toggle();

                        page = (page < pages) ? (page + 1) : pages;

                        $(".slide div:nth-child("+page+")").toggle();

                    }

                });

            });

        </script>

        <!--[if IE 8]><link rel="stylesheet" href="style/ie.css" /><![endif]-->

        <!--[if IE 7]><link rel="stylesheet" href="style/ie.css" /><![endif]-->

        <!--[if IE 6]><link rel="stylesheet" href="style/ie.css" /><![endif]-->

    </head>

    <body>

        <div class="slide">

            <div title="Page 1">

                Sometext 1

            </div>

            <div title="Page 2">

                Sometext 2

            </div>

            <div title="Page 3">

                Sometext 3

            </div>

        </div>

    </body>

</html>

Login
Username:
Password:	Lost Password?
	Remember me

Possibly Related Threads…
Thread		Author	Replies	Views	Last Post
	Free Worker HTML, CSS, Javascript	ImFocuzz	2	1,281	04-05-2014, 10:01 PM Last Post: VHPanda
	[MyBBError Message] PLEASE HELP ME!! Enable Javascript Registration Error	iRun	4	1,921	01-26-2012, 03:13 PM Last Post: iRun
	Close Tab With Javascript.	Qua	3	1,410	07-02-2011, 07:25 AM Last Post: djakariuz
	Javascript Help. Form Submission.	JohnRonder	0	890	02-01-2011, 11:12 AM Last Post: JohnRonder
	[javascript] Link of Minute	zone	3	1,093	12-11-2009, 02:16 AM Last Post: Sagittarius