jQuery with PHP - Abu Ashraf Masnun

I am learning jQuery these days and here’s the source code of a php script that uses jQuery on the client side.

I have mainly demonstrated jQuery here. PHP has been used to manipulate desired number of paragraphs quickly 😀

You get a number of paragraphs. Hovering over them changes their style. Clicking the “Hide” link hides the paragraphs one by one. 🙂

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>jQuery with PHP</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/JavaScript"
        src="jquery-1.3.2.min.js"></script>
        <script type="text/JavaScript">
            $(document).ready(function() { masnun(); });

            function masnun() {

                i = 0;
                total = $("p").length - 1;
                $("a").click(function (e) {
                    if(i > total) {
                        alert("No more paragraphs to hide!");
                        e.preventDefault();
                    } else {
                        e.preventDefault();
                        $("p:eq("+i+")").hide("slow");
                        i = i + 1;
                    }
                });
                $("p").hover(function () {
                    $(this).addClass("hover");
                }, function () {
                    $(this).removeClass("hover");
                });


            }
        </script>
        <style>
            p { color:black; margin:5px; cursor:pointer; }
            p.hover { background:black; color: white; }
        </style>
    </head>
    <body>

        <a href="">Hide</a> <br/><br/>


        <?php
        for($i=0; $i < 7; $i++) {
            echo "<p> Paragraph number: {$i} </p>";
        }
        ?>




    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>jQuery with PHP</title>

src="jquery-1.3.2.min.js"></script>

$(document).ready(function() { masnun(); });

function masnun() {

i = 0;

total = $("p").length - 1;

$("a").click(function (e) {

if(i > total) {

alert("No more paragraphs to hide!");

e.preventDefault();

} else {

e.preventDefault();

$("p:eq("+i+")").hide("slow");

i = i + 1;

}

});

$("p").hover(function () {

$(this).addClass("hover");

}, function () {

$(this).removeClass("hover");

});

}

</script>

<style>

p { color:black; margin:5px; cursor:pointer; }

p.hover { background:black; color: white; }

</style>

</head>

<body>

<?php

for($i=0; $i < 7; $i++) {

echo "<p> Paragraph number: {$i} </p>";

}

</body>

</html>

4 replies on “jQuery with PHP”

Nice starting. Best of luck brother.

[…] This post was mentioned on Twitter by Abu Ashraf Masnun, Larry King. Larry King said: jQuery with PHP | maSnun.com http://bit.ly/8obHEl #jQuery #Web #Dev […]

[…] posted here: jQuery with PHP | maSnun.com AKPC_IDS += "4954,";Popularity: unranked [?] Tags: and-here, client, has-been, have-mainly, […]

[…] reading here: jQuery with PHP | maSnun.com […]

Comments are closed.

Recent Posts

Recent Comments

Archives

Categories